PageSourceSearch

https://psyke.co/pricing

html psyke.co collected 2026-10-09 17:34:04 UTC 63,682 bytes, 2,030 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8" />
6  
6<script type="text/javascript" src="https://cdn.us.heap-api.com/v5/heapjs-static/5.3.12/core/heap.js"
7    async="true"></script>
7
8  
8<script
9    src="https://connect.facebook.net/signals/config/788390470626882?v=2.9.319&r=stable&domain=psyke.co&hme=7441a59ee5070e08bd0157a62d39bd95bf3afdcc83dafbad800e78b5416300a9&amp;ex_m=104%2C207%2C155%2C22%2C72%2C73%2C146%2C68%2C67%2C11%2C164%2C90%2C16%2C138%2C48%2C147%2C77%2C112%2C47%2C127%2C39%2C75%2C78%2C134%2C160%2C166%2C8%2C4%2C5%2C7%2C6%2C3%2C91%2C101%2C167%2C172%2C221%2C62%2C188%2C189%2C55%2C278%2C30%2C74%2C233%2C232%2C231%2C23%2C33%2C103%2C61%2C10%2C63%2C97%2C98%2C99%2C105%2C130%2C31%2C29%2C132%2C133%2C129%2C128%2C156%2C76%2C159%2C157%2C158%2C50%2C60%2C123%2C15%2C163%2C45%2C265%2C266%2C264%2C26%2C27%2C28%2C18%2C20%2C44%2C40%2C42%2C41%2C83%2C92%2C96%2C110%2C145%2C148%2C46%2C111%2C24%2C21%2C119%2C69%2C36%2C150%2C149%2C151%2C142%2C140%2C25%2C35%2C59%2C109%2C162%2C70%2C17%2C153%2C114%2C81%2C66%2C19%2C85%2C86%2C116%2C84%2C136%2C135%2C139%2C161%2C34%2C280%2C296%2C214%2C203%2C204%2C202%2C299%2C290%2C52%2C215%2C107%2C131%2C80%2C121%2C54%2C49%2C113%2C120%2C126%2C58%2C64%2C152%2C115%2C37%2C32%2C53%2C56%2C100%2C165%2C1%2C124%2C14%2C122%2C12%2C2%2C57%2C93%2C65%2C118%2C89%2C88%2C168%2C169%2C94%2C95%2C9%2C125%2C102%2C51%2C143%2C87%2C79%2C71%2C117%2C106%2C43%2C144%2C0%2C82%2C137%2C141%2C154%2C38%2C108%2C13%2C170"
10    async=""></script>
10
11  
11<script async="" src="https://connect.facebook.net/en_US/fbevents.js"></script>
11
12  
12<script type="text/javascript" async="" src="https://cdn.us.heap-api.com/config/3637266428/heap_config.js"></script>
12
13  
13<script type="text/javascript" async="" src="https://snap.licdn.com/li.lms-analytics/insight.min.js"></script>
13
14  
14<script type="text/javascript" async=""
15    src="https://www.googletagmanager.com/gtag/js?id=G-YZYLTTB523&cx=c&gtm=4e6581"></script>
15
16
17  <link rel="icon" href="https://psyke.co/favicon.png">
18  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19  <title>Psyke Pricing — Plans for every team</title>
20  <meta name="description"
21    content="Compare Psyke plans for Starter, Standard, Pro, and Psyke For You. Contact sales for pricing tailored to your goals." />
22  <meta name="theme-color" content="#130608" />
23  <link rel="preconnect" href="https://fonts.googleapis.com" />
24  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
25  <link
26    href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap"
27    rel="stylesheet" />
28  <style>
29    :root {
30      --violet: #7B3EFF;
31      --purple: #9500FF;
32      --magenta: #DF00FF;
33      --pink: #FF0065;
34      --orange: #FF6400;
35      --yellow: #FFD000;
36      --ink: #1A1A1A;
37      --lavender: #B8A0FF;
38      --lilac: #CA80FF;
39      --rose: #F281FF;
40      --pink-soft: #FF94CA;
41      --peach: #FFB779;
42      --butter: #FFE78A;
43      --white: #FFFFFF;
44      --bg: #130608;
45      --bg-elev: #1F0E15;
46      --bg-subtle: #2A1320;
47      --bg-card: #25101A;
48      --bg-tint: rgba(255, 100, 0, 0.08);
49      --bg-tint-strong: rgba(255, 100, 0, 0.18);
50      --border: rgba(255, 200, 180, 0.08);
51      --border-mid: rgba(255, 200, 180, 0.14);
52      --border-strong: rgba(255, 200, 180, 0.22);
53      --border-glow: rgba(255, 100, 0, 0.30);
54      --text: #FFF4EE;
55      --text-mid: #DEC0BC;
56      --text-dim: #A88E8A;
57      --text-soft: #DEC0BC;
58      --link: #FFB779;
59      --link-2: #FFCB9C;
60      --gradient-brand: linear-gradient(135deg, #FFD000 0%, #FF6400 35%, #FF0065 70%, #DF00FF 100%);
61      --gradient-warm: linear-gradient(135deg, #FFD000 0%, #FF6400 50%, #FF0065 100%);
62      --gradient-spectrum: linear-gradient(135deg, #FFD000 0%, #FF6400 28%, #FF0065 58%, #DF00FF 88%, #9500FF 100%);
63      --gradient-twilight: linear-gradient(160deg, #1A0A05 0%, #7A2200 50%, #FF6400 100%);
64      --gradient-aurora: linear-gradient(135deg, #FFE78A 0%, #FFB779 35%, #FF94CA 70%, #F281FF 100%);
65      --gradient-cosmic: linear-gradient(135deg, #2A1005 0%, #5A2400 35%, #B83A00 70%, #FF6400 100%);
66      --gradient-nebula: linear-gradient(135deg, #130608 0%, #1F0E15 40%, #4A1A0A 70%, #B83A00 100%);
67      --gradient-soft: linear-gradient(135deg, rgba(255, 208, 0, 0.10) 0%, rgba(255, 100, 0, 0.10) 50%, rgba(255, 0, 101, 0.10) 100%);
68      --gradient-darken: linear-gradient(180deg, rgba(19, 6, 8, 0) 0%, rgba(19, 6, 8, 0.40) 100%);
69      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
70      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
71      --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 200, 180, 0.04);
72      --shadow-xl: 0 40px 100px -24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 200, 180, 0.04);
73      --shadow-glow: 0 12px 40px -8px rgba(255, 100, 0, 0.55), 0 0 30px -8px rgba(255, 0, 101, 0.4);
74      --shadow-glow-pink: 0 12px 40px -8px rgba(255, 0, 101, 0.55);
75      --ease: cubic-bezier(0.22, 1, 0.36, 1);
76      --r-pill: 999px;
77      --r-card: 20px;
78      --r-card-lg: 24px;
79    }
80
81    *,
82    *::before,
83    *::after {
84      box-sizing: border-box;
85      margin: 0;
86      padding: 0;
87    }
88
89    html {
90      scroll-behavior: smooth;
91    }
92
93    html,
94    body {
95      background: var(--bg);
96      color: var(--text);
97      font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
98      font-size: 16px;
99      line-height: 1.55;
100      -webkit-font-smoothing: antialiased;
101      color-scheme: dark;
102    }
103
104    body::before {
105      content: '';
106      position: fixed;
107      inset: 0;
108      background:
109        radial-gradient(ellipse 50% 40% at 12% 10%, rgba(255, 100, 0, 0.18), transparent 65%),
110        radial-gradient(ellipse 45% 35% at 88% 90%, rgba(255, 0, 101, 0.16), transparent 65%),
111        radial-gradient(ellipse 60% 35% at 50% 50%, rgba(255, 208, 0, 0.05), transparent 70%);
112      pointer-events: none;
113      z-index: 0;
114    }
115
116    body>* {
117      position: relative;
118      z-index: 1;
119    }
120
121    a {
122      color: var(--link);
123      text-decoration: none;
124    }
125
126    a:hover {
127      text-decoration: underline;
128      text-underline-offset: 3px;
129    }
130
131    button {
132      font-family: inherit;
133      cursor: pointer;
134      border: none;
135      background: none;
136    }
137
138    img {
139      display: block;
140      max-width: 100%;
141    }
142
143    svg {
144      display: block;
145      flex-shrink: 0;
146    }
147
148    :focus-visible {
149      outline: 3px solid var(--purple);
150      outline-offset: 3px;
151      border-radius: 6px;
152    }
153
154    .skip-link {
155      position: absolute;
156      top: 8px;
157      left: 8px;
158      padding: 12px 20px;
159      background: var(--ink);
160      color: #fff;
161      border-radius: var(--r-pill);
162      font-weight: 600;
163      z-index: 200;
164      transform: translateY(-200%);
165      transition: transform 0.2s var(--ease);
166    }
167
168    .skip-link:focus {
169      transform: translateY(0);
170      text-decoration: none;
171    }
172
173    .sr-only {
174      position: absolute;
175      width: 1px;
176      height: 1px;
177      padding: 0;
178      margin: -1px;
179      overflow: hidden;
180      clip: rect(0, 0, 0, 0);
181      white-space: nowrap;
182      border: 0;
183    }
184
185    .container {
186      max-width: 1320px;
187      margin: 0 auto;
188      padding: 0 32px;
189      position: relative;
190    }
191
192    h1,
193    h2,
194    h3,
195    h4 {
196      font-family: 'Outfit', 'DM Sans', sans-serif;
197      font-weight: 600;
198      letter-spacing: -0.025em;
199      line-height: 1.05;
200      color: var(--text);
201    }
202
203    h1 {
204      letter-spacing: -0.035em;
205      line-height: 1;
206    }
207
208    .accent {
209      background: var(--gradient-brand);
210      -webkit-background-clip: text;
211      background-clip: text;
212      color: transparent;
213      font-style: normal;
214      filter: drop-shadow(0 0 24px rgba(255, 0, 101, 0.35));
215    }
216
217    .eyebrow {
218      display: inline-flex;
219      align-items: center;
220      gap: 10px;
221      font-family: 'DM Sans', sans-serif;
222      font-size: 11px;
223      font-weight: 600;
224      letter-spacing: 0.2em;
225      text-transform: uppercase;
226      padding: 6px 14px;
227      border-radius: var(--r-pill);
228      background: var(--bg-tint);
229      border: 1px solid var(--bg-tint-strong);
230      color: var(--link);
231      backdrop-filter: blur(10px);
232    }
233
234    .eyebrow .dot {
235      width: 6px;
236      height: 6px;
237      background: var(--gradient-brand);
238      border-radius: 50%;
239      flex-shrink: 0;
240      box-shadow: 0 0 10px rgba(255, 0, 101, 0.6);
241    }
242
243    .eyebrow.on-dark {
244      background: rgba(255, 255, 255, 0.10);
245      border-color: rgba(255, 255, 255, 0.20);
246      color: #fff;
247    }
248
249    .eyebrow.on-dark .dot {
250      background: #fff;
251      animation: pulse 2.4s ease-in-out infinite;
252      box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
253    }
254
255    @keyframes pulse {
256
257      0%,
258      100% {
259        opacity: 1;
260        transform: scale(1);
261      }
262
263      50% {
264        opacity: 0.5;
265        transform: scale(0.8);
266      }
267    }
268
269    /* ─── Nav ─── */
270    .nav-wrap {
271      position: relative;
272      padding: 14px 0;
273      pointer-events: none;
274    }
275
276    .nav-wrap>* {
277      pointer-events: auto;
278    }
279
280    .nav {
281      max-width: 1320px;
282      margin: 0 auto;
283      padding: 0 32px;
284      display: flex;
285      align-items: center;
286      justify-content: space-between;
287      gap: 24px;
288    }
289
290    .nav-pill {
291      background: rgba(40, 28, 60, 0.85);
292      backdrop-filter: saturate(160%) blur(20px);
293      border: 1px solid var(--border);
294      border-radius: var(--r-pill);
295      padding: 6px 8px;
296      box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 100, 0, 0.08);
297      display: flex;
298      align-items: center;
299      gap: 2px;
300      overflow: visible;
301    }
302
303    .logo {
304      display: flex;
305      align-items: center;
306      gap: 12px;
307      font-family: 'Outfit', sans-serif;
308      font-weight: 700;
309      font-size: 22px;
310      letter-spacing: -0.02em;
311      color: var(--text);
312      padding: 8px 14px;
313    }
314
315    .logo:hover {
316      text-decoration: none;
317    }
318
319    .logo-mark {
320      width: 30px;
321      height: 30px;
322      background: var(--gradient-brand);
323      border-radius: 8px;
324      position: relative;
325      flex-shrink: 0;
326      box-shadow: 0 0 16px rgba(255, 0, 101, 0.4);
327    }
328
329    .logo-mark::after {
330      content: '';
331      position: absolute;
332      inset: 6px;
333      background: var(--bg-elev);
334      border-radius: 3px;
335    }
336
337    .nav-links {
338      display: flex;
339      align-items: center;
340      gap: 2px;
341    }
342
343    .nav-link {
344      padding: 8px 14px;
345      font-family: 'DM Sans', sans-serif;
346      font-size: 13.5px;
347      font-weight: 500;
348      color: var(--text-mid);
349      border-radius: var(--r-pill);
350      transition: all 0.2s var(--ease);
351      min-height: 36px;
352      display: inline-flex;
353      align-items: center;
354    }
355
356    
357        /* ===== Resources dropdown ===== */
358        .nav-has-dropdown { position: relative; }
359        .nav-has-dropdown .nav-link { cursor: pointer; user-select: none; }
360        .nav-has-dropdown .nav-link::after { content: ' ▾'; font-size: 10px; opacity: 0.6; margin-left: 2px; }
361        .nav-dropdown {
362          display: none;
363          position: absolute;
364          top: calc(100% + 10px);
365          left: 50%;
366          transform: translateX(-50%);
367          min-width: 210px;
368          background: rgba(25,8,15,0.97);
369          border: 1px solid var(--border-mid);
370          border-radius: 16px;
371          padding: 8px;
372          box-shadow: 0 20px 50px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,200,180,0.04);
373          backdrop-filter: blur(20px);
374          z-index: 100;
375        }
376                /* invisible bridge fills the gap so cursor doesn't leave the hover zone */
377        .nav-has-dropdown::after {
378          content: '';
379          position: absolute;
380          top: 100%;
381          left: 0;
382          right: 0;
383          height: 12px;
384          display: none;
385        }
386        .nav-has-dropdown.open::after { display: block; }
387        .nav-has-dropdown.open .nav-dropdown { display: block; }
388        .nav-dropdown a {
389          display: block;
390          padding: 9px 14px;
391          font-family: 'DM Sans', sans-serif;
392          font-size: 13.5px;
393          font-weight: 500;
394          color: var(--text-mid);
395          border-radius: 10px;
396          text-decoration: none;
397          transition: all 0.15s var(--ease);
398          white-space: nowrap;
399        }
400        .nav-dropdown a:hover { background: rgba(255,255,255,0.06); color: var(--text); }
401        .nav-dropdown .dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
402
403        .nav-link:hover {
404      color: var(--text);
405      background: rgba(255, 255, 255, 0.06);
406      text-decoration: none;
407    }
408
409    .nav-link.active {
410      color: var(--link);
411      background: var(--bg-tint);
412    }
413
414    .nav-right {
415      display: flex;
416      align-items: center;
417      gap: 8px;
418    }
419
420    .btn {
421      display: inline-flex;
422      align-items: center;
423      gap: 8px;
424      padding: 14px 24px;
425      border-radius: var(--r-pill);
426      font-family: 'DM Sans', sans-serif;
427      font-weight: 600;
428      font-size: 14px;
429      transition: all 0.25s var(--ease);
430      white-space: nowrap;
431      cursor: pointer;
432      min-height: 44px;
433      line-height: 1.2;
434      border: none;
435    }
436
437    .btn:hover {
438      text-decoration: none;
439    }
440
441    .btn-arrow {
442      display: inline-block;
443      transition: transform 0.25s var(--ease);
444    }
445
446    .btn:hover .btn-arrow {
447      transform: translateX(3px);
448    }
449
450    .btn-primary {
451      background: var(--gradient-brand);
452      color: #fff;
453      box-shadow: 0 8px 24px rgba(255, 0, 101, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
454    }
455
456    .btn-primary:hover {
457      transform: translateY(-2px);
458      box-shadow: 0 14px 36px rgba(255, 0, 101, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
459    }
460
461    .btn-ink {
462      background: var(--bg-subtle);
463      color: var(--text);
464      border: 1px solid var(--border-mid);
465    }
466
467    .btn-ink:hover {
468      transform: translateY(-2px);
469      border-color: var(--link);
470      box-shadow: var(--shadow-md);
471    }
472
473    .btn-outline {
474      background: transparent;
475      color: var(--text);
476      border: 1px solid var(--border-mid);
477    }
478
479    .btn-outline:hover {
480      border-color: var(--link);
481      color: var(--link);
482      background: var(--bg-tint);
483    }
484
485    .btn-ghost {
486      color: var(--text);
487      padding: 10px 18px;
488    }
489
490    .btn-ghost:hover {
491      background: rgba(255, 255, 255, 0.06);
492    }
493
494    .btn-on-dark {
495      background: #fff;
496      color: var(--ink);
497      box-shadow: 0 8px 28px rgba(255, 255, 255, 0.18);
498    }
499
500    .btn-on-dark:hover {
501      transform: translateY(-2px);
502      box-shadow: 0 14px 40px rgba(255, 255, 255, 0.30);
503    }
504
505    .btn-ghost-dark {
506      color: #fff;
507      border: 1px solid rgba(255, 255, 255, 0.4);
508      background: transparent;
509    }
510
511    .btn-ghost-dark:hover {
512      background: rgba(255, 255, 255, 0.1);
513      border-color: rgba(255, 255, 255, 0.7);
514    }
515
516    .btn-sm {
517      padding: 10px 18px;
518      font-size: 13px;
519      min-height: 40px;
520    }
521
522    .btn-lg {
523      padding: 16px 28px;
524      font-size: 15px;
525    }
526
527    .btn-block {
528      width: 100%;
529      justify-content: center;
530    }
531
532    /* ─── Hero ─── */
533    .hero {
534      position: relative;
535      margin-top: 0;
536      padding: 160px 0 120px;
537      background: var(--gradient-spectrum);
538      color: #fff;
539      overflow: hidden;
540      isolation: isolate;
541    }
542
543    .hero::before {
544      content: '';
545      position: absolute;
546      inset: -10%;
547      background: radial-gradient(ellipse 50% 40% at 15% 70%, rgba(255, 0, 101, 0.55), transparent 60%), radial-gradient(ellipse 40% 35% at 85% 25%, rgba(255, 208, 0, 0.45), transparent 60%), radial-gradient(ellipse 35% 30% at 50% 50%, rgba(255, 100, 0, 0.30), transparent 70%);
548      pointer-events: none;
549      animation: nebula 18s ease-in-out infinite alternate;
550    }
551
552    @keyframes nebula {
553      from {
554        transform: translate(0, 0) scale(1);
555      }
556
557      to {
558        transform: translate(2%, -1%) scale(1.05);
559      }
560    }
561
562    .hero::after {
563      content: '';
564      position: absolute;
565      inset: 0;
566      background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4) 1px, transparent 1.5px), radial-gradient(circle at 65% 60%, rgba(255, 255, 255, 0.3) 1px, transparent 1.5px), radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.5) 1px, transparent 1.5px), radial-gradient(circle at 35% 80%, rgba(255, 255, 255, 0.3) 1px, transparent 1.5px), linear-gradient(180deg, rgba(19, 6, 8, 0) 0%, rgba(19, 6, 8, 0.45) 100%);
567      background-size: 280px 280px, 320px 320px, 360px 360px, 240px 240px, 100% 100%;
568      pointer-events: none;
569      opacity: 0.7;
570    }
571
572    .hero-inner {
573      position: relative;
574      z-index: 1;
575      text-align: center;
576      max-width: 1000px;
577      margin: 0 auto;
578      padding: 0 32px;
579    }
580
581    .hero-eyebrow {
582      margin-bottom: 32px;
583      animation: fadeUp 0.8s var(--ease) both;
584    }
585
586    .hero h1 {
587      font-family: 'Outfit', sans-serif;
588      font-weight: 700;
589      font-size: clamp(48px, 7vw, 96px);
590      line-height: 0.96;
591      letter-spacing: -0.035em;
592      margin-bottom: 28px;
593      text-shadow: 0 2px 24px rgba(26, 26, 26, 0.18);
594      animation: fadeUp 0.8s var(--ease) 0.1s both;
595    }
596
597    .hero-sub {
598      font-family: 'DM Sans', sans-serif;
599      font-size: clamp(18px, 1.5vw, 22px);
600      line-height: 1.5;
601      max-width: 600px;
602      margin: 0 auto 40px;
603      color: rgba(255, 255, 255, 0.96);
604      text-shadow: 0 1px 10px rgba(26, 26, 26, 0.15);
605      font-weight: 400;
606      animation: fadeUp 0.8s var(--ease) 0.2s both;
607    }
608
609    @keyframes fadeUp {
610      from {
611        opacity: 0;
612        transform: translateY(20px);
613      }
614
615      to {
616        opacity: 1;
617        transform: translateY(0);
618      }
619    }
620
621    /* ─── Stats strip ─── */
622    .stats-strip {
623      padding: 56px 0;
624      border-bottom: 1px solid var(--border);
625    }
626
627    .stats-inner {
628      display: flex;
629      justify-content: center;
630      align-items: center;
631      gap: 0;
632      flex-wrap: wrap;
633    }
634
635    .stat-item {
636      display: flex;
637      flex-direction: column;
638      align-items: center;
639      gap: 6px;
640      padding: 0 56px;
641      border-right: 1px solid var(--border);
642    }
643
644    .stat-item:last-child {
645      border-right: none;
646    }
647
648    .stat-value {
649      font-family: 'Outfit', sans-serif;
650      font-size: clamp(22px, 3vw, 32px);
651      font-weight: 700;
652      letter-spacing: -0.03em;
653      background: var(--gradient-brand);
654      -webkit-background-clip: text;
655      background-clip: text;
656      color: transparent;
657      filter: drop-shadow(0 0 16px rgba(255, 100, 0, 0.35));
658    }
659
660    .stat-label {
661      font-family: 'DM Sans', sans-serif;
662      font-size: 13px;
663      color: var(--text-mid);
664      font-weight: 500;
665      text-align: center;
666    }
667
668    .plan-price-contact {
669      font-size: clamp(28px, 3.5vw, 40px);
670      line-height: 1.1;
671      padding-top: 4px;
672    }
673
674    .billing-toggle {
675      display: none;
676    }
677
678    /* ─── Toggle ─── */
679    .billing-toggle-inner {
680      padding: 40px 0 0;
681      display: flex;
682      justify-content: center;
683    }
684
685    .toggle-wrap {
686      display: inline-flex;
687      align-items: center;
688      gap: 14px;
689      background: var(--bg-elev);
690      border: 1px solid var(--border);
691      border-radius: var(--r-pill);
692      padding: 6px 20px;
693      font-family: 'DM Sans', sans-serif;
694      font-size: 14px;
695      font-weight: 500;
696      color: var(--text-mid);
697    }
698
699    .toggle-label.active {
700      color: var(--text);
701      font-weight: 600;
702    }
703
704    .toggle-switch {
705      position: relative;
706      width: 48px;
707      height: 26px;
708    }
709
710    .toggle-switch input {
711      opacity: 0;
712      width: 0;
713      height: 0;
714    }
715
716    .toggle-slider {
717      position: absolute;
718      cursor: pointer;
719      inset: 0;
720      background: var(--bg-subtle);
721      border: 1px solid var(--border-mid);
722      border-radius: var(--r-pill);
723      transition: 0.25s var(--ease);
724    }
725
726    .toggle-slider::before {
727      content: '';
728      position: absolute;
729      height: 18px;
730      width: 18px;
731      left: 3px;
732      bottom: 3px;
733      background: var(--text-dim);
734      border-radius: 50%;
735      transition: 0.25s var(--ease);
736    }
737
738    input:checked+.toggle-slider {
739      background: var(--gradient-brand);
740      border-color: transparent;
741    }
742
743    input:checked+.toggle-slider::before {
744      transform: translateX(22px);
745      background: #fff;
746    }
747
748    .save-badge {
749      padding: 3px 10px;
750      font-size: 11px;
751      font-weight: 700;
752      letter-spacing: 0.08em;
753      text-transform: uppercase;
754      background: var(--gradient-warm);
755      color: #fff;
756      border-radius: var(--r-pill);
757    }
758
759    .plans {
760      padding: 24px 0 100px;
761    }
762
763    .sales-panel {
764      text-align: center;
765      max-width: 640px;
766      margin: 0 auto 56px;
767      padding: 48px 40px;
768      background: var(--bg-elev);
769      border: 1px solid var(--border-mid);
770      border-radius: var(--r-card-lg);
771      box-shadow: var(--shadow-lg), 0 0 80px -24px rgba(255, 100, 0, 0.35);
772      position: relative;
773      overflow: hidden;
774    }
775
776    .sales-panel::before {
777      content: '';
778      position: absolute;
779      top: 0;
780      left: 0;
781      right: 0;
782      height: 3px;
783      background: var(--gradient-brand);
784    }
785
786    .sales-panel .eyebrow {
787      margin-bottom: 20px;
788    }
789
790    .sales-panel h2 {
791      font-family: 'Outfit', sans-serif;
792      font-size: clamp(40px, 6vw, 56px);
793      font-weight: 700;
794      letter-spacing: -0.04em;
795      line-height: 1.02;
796      margin-bottom: 16px;
797    }
798
799    .sales-panel-lead {
800      font-family: 'DM Sans', sans-serif;
801      font-size: 18px;
802      color: var(--text-mid);
803      line-height: 1.55;
804      margin-bottom: 28px;
805    }
806
807    .plan-tier-pills {
808      display: flex;
809      flex-wrap: wrap;
810      justify-content: center;
811      gap: 8px;
812      margin-top: 28px;
813    }
814
815    .plan-tier-pill {
816      padding: 6px 14px;
817      font-family: 'DM Sans', sans-serif;
818      font-size: 13px;
819      font-weight: 600;
820      color: var(--text-mid);
821      background: var(--bg-subtle);
822      border: 1px solid var(--border);
823      border-radius: var(--r-pill);
824    }
825
826    .compare-wrap {
827      overflow-x: auto;
828      -webkit-overflow-scrolling: touch;
829      border: 1px solid var(--border);
830      border-radius: var(--r-card-lg);
831      background: var(--bg-elev);
832    }
833
834    .compare-table {
835      width: 100%;
836      min-width: 720px;
837      border-collapse: collapse;
838      font-family: 'DM Sans', sans-serif;
839    }
840
841    .compare-table th,
842    .compare-table td {
843      padding: 16px 20px;
844      text-align: center;
845      border-bottom: 1px solid var(--border);
846      vertical-align: middle;
847    }
848
849    .compare-table th {
850      background: var(--bg-subtle);
851      font-weight: 600;
852    }
853
854    .compare-table tbody tr:last-child td {
855      border-bottom: none;
856    }
857
858    .compare-feature-col,
859    .compare-table td:first-child,
860    .compare-table th:first-child {
861      text-align: left;
862      font-weight: 500;
863      color: var(--text-mid);
864      min-width: 180px;
865      position: sticky;
866      left: 0;
867      z-index: 1;
868      background: var(--bg-elev);
869    }
870
871    .compare-table th:first-child {
872      background: var(--bg-subtle);
873    }
874
875    .compare-table tbody tr:hover td {
876      background: rgba(255, 100, 0, 0.04);
877    }
878
879    .compare-table tbody tr:hover td:first-child {
880      background: var(--bg-card);
881    }
882
883    .compare-plan-name {
884      display: block;
885      font-family: 'Outfit', sans-serif;
886      font-size: 18px;
887      font-weight: 700;
888      color: var(--text);
889      letter-spacing: -0.02em;
890    }
891
892    .compare-plan-tag {
893      display: block;
894      margin-top: 4px;
895      font-size: 12px;
896      font-weight: 500;
897      color: var(--text-dim);
898    }
899
900    .compare-plan-cta {
901      display: inline-flex;
902      margin-top: 14px;
903      justify-content: center;
904      width: 100%;
905      max-width: 168px;
906      text-decoration: none;
907    }
908
909    .compare-table th.col-starter {
910      background: rgba(255, 208, 0, 0.06);
911      vertical-align: top;
912    }
913
914    .sales-panel-ctas {
915      display: flex;
916      flex-wrap: wrap;
917      gap: 12px;
918      justify-content: center;
919    }
920
921    .compare-table th.col-enterprise {
922      background: linear-gradient(180deg, rgba(149, 0, 255, 0.12) 0%, var(--bg-subtle) 100%);
923    }
924
925    .compare-val {
926      font-size: 14.5px;
927      font-weight: 600;
928      color: var(--text);
929    }
930
931    .compare-val.dim {
932      color: var(--text-dim);
933      font-weight: 500;
934    }
935
936    .compare-check {
937      display: inline-grid;
938      place-items: center;
939      width: 22px;
940      height: 22px;
941      border-radius: 50%;
942      background: var(--gradient-brand);
943      color: #fff;
944      margin: 0 auto;
945      font-size: 12px;
946      font-weight: 700;
947      line-height: 1;
948    }
949
950    .compare-section td {
951      padding: 12px 20px;
952      font-size: 11px;
953      font-weight: 700;
954      letter-spacing: 0.1em;
955      text-transform: uppercase;
956      color: var(--text-dim);
957      background: var(--bg-subtle);
958      text-align: left;
959    }
960
961    /* ─── FAQ ─── */
962    .faq {
963      padding: 100px 0 80px;
964    }
965
966    .section-head {
967      text-align: center;
968      max-width: 820px;
969      margin: 0 auto 64px;
970    }
971
972    .section-head .eyebrow {
973      margin-bottom: 24px;
974    }
975
976    .section-head h2 {
977      font-family: 'Outfit', sans-serif;
978      font-size: clamp(36px, 5.5vw, 64px);
979      font-weight: 600;
980      line-height: 1.02;
981      letter-spacing: -0.03em;
982      margin-bottom: 20px;
983    }
984
985    .section-head p {
986      font-family: 'DM Sans', sans-serif;
987      font-size: 18px;
988      color: var(--text-mid);
989      line-height: 1.55;
990    }
991
992    .faq-list {
993      max-width: 820px;
994      margin: 48px auto 0;
995    }
996
997    .faq-item {
998      border-bottom: 1px solid var(--border);
999    }
1000
1001    .faq-q {
1002      width: 100%;
1003      padding: 28px 0;
1004      display: flex;
1005      align-items: center;
1006      justify-content: space-between;
1007      gap: 24px;
1008      text-align: left;
1009      font-family: 'Outfit', sans-serif;
1010      font-size: 19px;
1011      font-weight: 500;
1012      color: var(--text);
1013      letter-spacing: -0.015em;
1014      transition: color 0.2s var(--ease);
1015      min-height: 44px;
1016    }
1017
1018    .faq-q:hover {
1019      color: var(--link);
1020    }
1021
1022    .faq-icon {
1023      flex-shrink: 0;
1024      width: 36px;
1025      height: 36px;
1026      border-radius: 50%;
1027      border: 1px solid var(--border);
1028      display: grid;
1029      place-items: center;
1030      transition: all 0.3s var(--ease);
1031      color: var(--text);
1032    }
1033
1034    .faq-q[aria-expanded="true"] .faq-icon {
1035      background: var(--gradient-brand);
1036      border-color: transparent;
1037      color: #fff;
1038      transform: rotate(180deg);
1039    }
1040
1041    .faq-icon svg {
1042      width: 14px;
1043      height: 14px;
1044    }
1045
1046    .faq-a {
1047      max-height: 0;
1048      overflow: hidden;
1049      transition: max-height 0.4s var(--ease);
1050    }
1051
1052    .faq-q[aria-expanded="true"]+.faq-a {
1053      max-height: 500px;
1054    }
1055
1056    .faq-a-inner {
1057      padding: 0 0 28px;
1058      font-family: 'DM Sans', sans-serif;
1059      font-size: 16px;
1060      color: var(--text-mid);
1061      line-height: 1.65;
1062      max-width: 700px;
1063    }
1064
1065    /* ─── Final CTA ─── */
1066    .final {
1067      padding: 80px 0 140px;
1068    }
1069
1070    .final-card {
1071      position: relative;
1072      background: var(--gradient-spectrum);
1073      border-radius: 32px;
1074      padding: 100px 56px;
1075      text-align: center;
1076      overflow: hidden;
1077      box-shadow: var(--shadow-xl), 0 0 100px -20px rgba(255, 100, 0, 0.55);
1078      isolation: isolate;
1079    }
1080
1081    .final-card::before {
1082      content: '';
1083      position: absolute;
1084      inset: -10%;
1085      background: radial-gradient(ellipse 50% 40% at 15% 75%, rgba(255, 0, 101, 0.55), transparent 60%), radial-gradient(ellipse 40% 35% at 85% 25%, rgba(255, 208, 0, 0.45), transparent 60%);
1086      animation: nebula 18s ease-in-out infinite alternate;
1087    }
1088
1089    .final-card>* {
1090      position: relative;
1091      z-index: 1;
1092    }
1093
1094    .final-card h2 {
1095      font-family: 'Outfit', sans-serif;
1096      font-size: clamp(42px, 6.5vw, 84px);
1097      font-weight: 600;
1098      color: #fff;
1099      margin-bottom: 24px;
1100      max-width: 920px;
1101      margin-left: auto;
1102      margin-right: auto;
1103      line-height: 0.98;
1104      letter-spacing: -0.035em;
1105    }
1106
1107    .final-card p {
1108      font-family: 'DM Sans', sans-serif;
1109      color: rgba(255, 255, 255, 0.95);
1110      font-size: 18px;
1111      line-height: 1.55;
1112      max-width: 600px;
1113      margin: 0 auto 40px;
1114    }
1115
1116    .final-ctas {
1117      display: flex;
1118      gap: 14px;
1119      justify-content: center;
1120      flex-wrap: wrap;
1121    }
1122
1123    /* ─── Footer ─── */
1124    footer {
1125      padding: 80px 0 48px;
1126      border-top: 1px solid var(--border);
1127      background: var(--bg-subtle);
1128    }
1129
1130    .footer-grid {
1131      display: grid;
1132      grid-template-columns: 1.2fr 0.8fr 0.8fr 0.9fr 0.8fr 0.8fr;
1133      gap: 24px;
1134      padding-bottom: 56px;
1135      border-bottom: 1px solid var(--border);
1136      margin-bottom: 32px;
1137    }
1138
1139    .footer-brand p {
1140      font-family: 'DM Sans', sans-serif;
1141      font-size: 14.5px;
1142      color: var(--text-mid);
1143      line-height: 1.6;
1144      margin-top: 20px;
1145      max-width: 320px;
1146    }
1147
1148    .footer-col h4 {
1149      font-family: 'DM Sans', sans-serif;
1150      font-size: 11px;
1151      font-weight: 700;
1152      letter-spacing: 0.18em;
1153      text-transform: uppercase;
1154      color: var(--text-dim);
1155      margin-bottom: 20px;
1156    }
1157
1158    .footer-col ul {
1159      list-style: none;
1160    }
1161
1162    .footer-col li {
1163      margin-bottom: 12px;
1164      font-family: 'DM Sans', sans-serif;
1165      font-size: 14.5px;
1166    }
1167
1168    .footer-col a {
1169      color: var(--text-mid);
1170      transition: color 0.2s var(--ease);
1171      font-weight: 500;
1172    }
1173
1174    .footer-col a:hover {
1175      color: var(--link);
1176    }
1177
1178    .footer-bottom {
1179      display: flex;
1180      justify-content: space-between;
1181      align-items: center;
1182      font-family: 'DM Sans', sans-serif;
1183      font-size: 13.5px;
1184      color: var(--text-dim);
1185      flex-wrap: wrap;
1186      gap: 16px;
1187    }
1188
1189    .footer-socials {
1190      display: flex;
1191      gap: 8px;
1192    }
1193
1194    .footer-socials a {
1195      width: 40px;
1196      height: 40px;
1197      border-radius: 50%;
1198      border: 1px solid var(--border);
1199      display: grid;
1200      place-items: center;
1201      color: var(--text-mid);
1202      transition: all 0.2s var(--ease);
1203      background: var(--bg-elev);
1204    }
1205
1206    .footer-socials a:hover {
1207      border-color: rgba(255, 100, 0, 0.4);
1208      color: var(--link);
1209      text-decoration: none;
1210    }
1211
1212    .footer-socials svg {
1213      width: 15px;
1214      height: 15px;
1215    }
1216
1217    /* ─── Responsive ─── */
1218    @media (max-width: 1100px) {
1219      .stat-item {
1220        padding: 0 32px;
1221      }
1222    }
1223
1224    @media (max-width: 1024px) {
1225      .nav-links {
1226        display: none;
1227      }
1228
1229      .footer-grid {
1230        grid-template-columns: 1fr 1fr;
1231        gap: 32px;
1232      }
1233    }
1234
1235    @media (max-width: 720px) {
1236      .container {
1237        padding: 0 22px;
1238      }
1239
1240      .hero {
1241        padding: 100px 0 80px;
1242      }
1243
1244      .sales-panel {
1245        padding: 36px 24px;
1246      }
1247
1248      .stats-inner {
1249        flex-direction: column;
1250        gap: 28px;
1251      }
1252
1253      .stat-item {
1254        border-right: none;
1255        padding: 0;
1256      }
1257
1258      .final-card {
1259        padding: 64px 24px;
1260        border-radius: 24px;
1261      }
1262
1263      .footer-grid {
1264        grid-template-columns: 1fr;
1265      }
1266    }
1267
1268    header {
1269      position: sticky !important;
1270      top: 0 !important;
1271      z-index: 999 !important;
1272      background: rgba(25, 8, 15, 0.82) !important;
1273      border-bottom: 1px solid rgba(255, 200, 180, 0.12);
1274      backdrop-filter: blur(16px) !important;
1275      -webkit-backdrop-filter: blur(16px) !important;
1276    }
1277
1278    /* ===== Mobile responsive layer (added) ===== */
1279    .nav-toggle {
1280      display: none;
1281      width: 44px;
1282      height: 44px;
1283      border-radius: var(--r-pill);
1284      background: rgba(40, 28, 60, 0.85);
1285      backdrop-filter: saturate(160%) blur(20px);
1286      -webkit-backdrop-filter: saturate(160%) blur(20px);
1287      border: 1px solid var(--border);
1288      box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 100, 0, 0.08);
1289      flex-direction: column;
1290      align-items: center;
1291      justify-content: center;
1292      gap: 5px;
1293      cursor: pointer;
1294      padding: 0;
1295      transition: all 0.2s var(--ease);
1296    }
1297
1298    .nav-toggle:hover {
1299      border-color: var(--border-strong);
1300    }
1301
1302    .nav-toggle-bar {
1303      display: block;
1304      width: 20px;
1305      height: 2px;
1306      background: var(--text);
1307      border-radius: 2px;
1308      transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
1309    }
1310
1311    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
1312      transform: translateY(7px) rotate(45deg);
1313    }
1314
1315    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
1316      opacity: 0;
1317    }
1318
1319    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
1320      transform: translateY(-7px) rotate(-45deg);
1321    }
1322
1323    .mobile-menu {
1324      display: none;
1325      margin: 12px 16px 0;
1326      padding: 16px;
1327      background: rgba(25, 8, 15, 0.96);
1328      border: 1px solid var(--border);
1329      border-radius: 24px;
1330      backdrop-filter: blur(16px);
1331      -webkit-backdrop-filter: blur(16px);
1332      box-shadow: var(--shadow-lg);
1333    }
1334
1335    .mobile-menu:not([hidden]) {
1336      display: block;
1337    }
1338
1339    .mobile-menu-inner {
1340      display: flex;
1341      flex-direction: column;
1342      gap: 4px;
1343    }
1344
1345    .mobile-link {
1346      display: block;
1347      padding: 14px 16px;
1348      font-family: 'DM Sans', sans-serif;
1349      font-size: 16px;
1350      font-weight: 500;
1351      color: var(--text);
1352      border-radius: 12px;
1353      text-decoration: none;
1354      transition: background 0.2s var(--ease);
1355    }
1356
1357    .mobile-link:hover,
1358    .mobile-link:focus-visible {
1359      background: rgba(255, 255, 255, 0.06);
1360      text-decoration: none;
1361    }
1362
1363    .mobile-menu-actions {
1364      display: flex;
1365      flex-direction: column;
1366      gap: 10px;
1367      margin-top: 12px;
1368      padding-top: 16px;
1369      border-top: 1px solid var(--border);
1370    }
1371
1372    .mobile-menu-actions .btn {
1373      justify-content: center;
1374      width: 100%;
1375    }
1376
1377    body.menu-open {
1378      overflow: hidden;
1379    }
1380
1381    @media (max-width: 1024px) {
1382
1383      .nav-pill-links,
1384      .nav-pill-right {
1385        display: none;
1386      }
1387
1388      .nav-toggle {
1389        display: inline-flex;
1390      }
1391
1392      .feature-block,
1393      .contact-grid,
1394      .cs-inner {
1395        grid-template-columns: 1fr;
1396        gap: 40px;
1397      }
1398
1399      .feature-block.reverse>.feature-text {
1400        order: 1;
1401      }
1402
1403      .feature-block.reverse>.feature-visual {
1404        order: 2;
1405      }
1406
1407      .stats-grid,
1408      .values-grid,
1409      .wwd-grid,
1410      .value-grid,
1411      .process-steps,
1412      .results-grid {
1413        grid-template-columns: repeat(2, 1fr);
1414      }
1415
1416      .loop-grid,
1417      .bp-grid,
1418      .articles-grid {
1419        grid-template-columns: repeat(2, 1fr);
1420      }
1421
1422      .footer-grid {
1423        grid-template-columns: 1fr 1fr;
1424        gap: 32px;
1425      }
1426
1427    }
1428
1429    @media (max-width: 720px) {
1430      .container {
1431        padding: 0 20px;
1432      }
1433
1434      .nav {
1435        padding: 0 16px;
1436        gap: 12px;
1437      }
1438
1439      .logo {
1440        font-size: 18px;
1441        padding: 6px 10px;
1442      }
1443
1444      .hero {
1445        padding: 90px 0 64px;
1446      }
1447
1448      .hero-ctas {
1449        flex-direction: column;
1450        align-items: stretch;
1451        gap: 10px;
1452      }
1453
1454      .hero-ctas .btn {
1455        width: 100%;
1456        justify-content: center;
1457      }
1458
1459      .hero-meta {
1460        gap: 24px;
1461        margin-top: 40px;
1462      }
1463
1464      .final-card {
1465        padding: 56px 22px;
1466        border-radius: 22px;
1467      }
1468
1469      .footer-grid,
1470      .feature-block,
1471      .contact-grid,
1472      .cs-inner,
1473      .stats-grid,
1474      .values-grid,
1475      .wwd-grid,
1476      .value-grid,
1477      .process-steps,
1478      .results-grid,
1479      .loop-grid,
1480      .bp-grid,
1481      .articles-grid {
1482        grid-template-columns: 1fr;
1483      }
1484
1485      .page-thumbs {
1486        grid-template-columns: repeat(2, 1fr);
1487      }
1488
1489      .footer-grid {
1490        gap: 28px;
1491      }
1492
1493      .results-grid {
1494        gap: 16px;
1495      }
1496    }
1497
1498    @media (max-width: 420px) {
1499      .container {
1500        padding: 0 16px;
1501      }
1502
1503      .nav {
1504        padding: 0 12px;
1505      }
1506
1507      .hero-meta {
1508        flex-direction: column;
1509        gap: 18px;
1510      }
1511
1512      .final-card {
1513        padding: 44px 18px;
1514      }
1515    }
1516  </style>
1517</head>
1518
1519<body>
1520  <a href="#main" class="skip-link">Skip to main content</a>
1521  <header>
1522    <div class='nav-wrap'>
1523      <nav class='nav' aria-label='Primary'>
1524        <div class='nav-pill'>
1525          <a href="https://psyke.co" class="logo" aria-label="Psyke home"
1526            style="background:#fff;border-radius:999px;padding:6px 14px;"><img
1527              src="https://8b6p8gjb.upflowyexperience.com/8b6p8gjb/assets/Psyke_Footer_Logo.webp" alt="Psyke"
1528              style="height:28px;width:auto;display:block;" /></a>
1529        </div>
1530        <div class='nav-pill nav-pill-links'>
1531          <div class='nav-links'>
1532            <a href='/agencies' class='nav-link'>
1532Agencies</a>
1533            <a href='/brands' class='nav-link'>Brands</a>
1534            <div class='nav-has-dropdown'>
1535                        <span class='nav-link' tabindex='0'>Resources</span>
1536                        <div class='nav-dropdown'>
1537                          <a href='https://psyke.co/articles'>Articles</a>
1538                          <div class='dropdown-divider'></div>
1539                          <a href='https://psyke.co/events'>Events &amp; Webinars</a>
1540                        </div>
1541                      </div>
1542            <div class='nav-has-dropdown'>
1543<span class='nav-link' tabindex='0'>Free Tools</span>
1544<div class='nav-dropdown'>
1545  <a href='https://psyke.co/llm-search-prompt-finder'>&#128269; LLM Prompt Finder</a>
1546</div>
1547</div>
1548            <a href='/psyke-case-studies' class='nav-link'>Case Studies</a>
1549            <a href='/pricing' class='nav-link'>Pricing</a>
1550          </div>
1551        </div>
1552        <div class='nav-pill nav-pill-right'>
1553          <div class='nav-right'>
1554            <a href='https://ai.psyke.co/login' class='btn btn-ghost btn-sm'>Log in</a>
1555            <a href='/contact-us' class='btn btn-primary btn-sm'>Contact Sales <span class='btn-arrow'
1556                aria-hidden='true'>→</span></a>
1557          </div>
1558        </div>
1559        <button class="nav-toggle" type="button" aria-label="Open menu" aria-expanded="false"
1560          aria-controls="mobile-menu">
1561          <span class="nav-toggle-bar" aria-hidden="true"></span>
1562          <span class="nav-toggle-bar" aria-hidden="true"></span>
1563          <span class="nav-toggle-bar" aria-hidden="true"></span>
1564        </button>
1565      </nav>
1566      <div id="mobile-menu" class="mobile-menu" hidden>
1567        <div class="mobile-menu-inner">
1568          <a href='/agencies' class='mobile-link'>Agencies</a>
1569          <a href='/brands' class='mobile-link'>Brands</a>
1570          <a href='/articles' class='mobile-link'>Articles</a>
1571                    <a href='https://psyke.co/events' class='mobile-link'>Events &amp; Webinars</a>
1572          <a href='https://psyke.co/llm-search-prompt-finder' class='mobile-link'>&#128269; LLM Prompt Finder</a>
1573          <a href='/psyke-case-studies' class='mobile-link'>Case Studies</a>
1574          <a href='/pricing' class='mobile-link'>Pricing</a>
1575          <div class="mobile-menu-actions">
1576            <a href='https://ai.psyke.co/login' class='btn btn-ghost'>Log in</a>
1577            <a href='/contact-us' class='btn btn-primary'>Contact Sales <span class='btn-arrow'
1578                aria-hidden='true'>&rarr;</span></a>
1579          </div>
1580        </div>
1581      </div>
1582    </div>
1583  </header>
1584  <div style="overflow-x:clip">
1585    <main id="main">
1586
1587      <!-- ─── Hero ─── -->
1588      <section class="hero" aria-labelledby="hero-h">
1589        <div class="hero-inner">
1590          <div class="eyebrow on-dark hero-eyebrow">
1591            <span class="dot" aria-hidden="true"></span>
1592            <span>Pricing</span>
1593          </div>
1594          <h1 id="hero-h">Plans for every team.<br>Talk to sales.</h1>
1595          <p class="hero-sub">See what's included in each tier below. Pricing is tailored to your goals — our team will
1596            recommend the right fit.</p>
1597        </div>
1598      </section>
1599
1600      <!-- ─── Stats strip ─── -->
1601      <section class="stats-strip" aria-label="Key facts">
1602        <div class="container">
1603          <div class="stats-inner">
1604            <div class="stat-item">
1605              <span class="stat-value">10x</span>
1606              <span class="stat-label">cheaper than agencies</span>
1607            </div>
1608            <div class="stat-item">
1609              <span class="stat-value">30 min</span>
1610              <span class="stat-label">setup time</span>
1611            </div>
1612            <div class="stat-item">
1613              <span class="stat-value">60-day</span>
1614              <span class="stat-label">money back guarantee</span>
1615            </div>
1616          </div>
1617        </div>
1618      </section>
1619
1620      <!-- ─── Plans ─── -->
1621      <section class="plans" aria-labelledby="plans-h">
1622        <div class="container">
1623          <div class="sales-panel">
1624            <p class="eyebrow"><span class="dot" aria-hidden="true"></span><span>Pricing</span></p>
1625            <h2 id="plans-h">Let's talk</h2>
1626            <p class="sales-panel-lead">We'll match you to Starter, Standard, Pro, or Psyke For You and put together
1627              custom pricing for your goals.</p>
1628            <div class="sales-panel-ctas">
1629              <a href="https://ai.psyke.co/" class="btn btn-outline btn-lg">Sign Up Free</a>
1630              <a href="/contact-us" class="btn btn-primary btn-lg">Contact Sales <span class="btn-arrow"
1631                  aria-hidden="true">→</span></a>
1632            </div>
1633            <div class="plan-tier-pills" aria-hidden="true">
1634              <span class="plan-tier-pill">Starter</span>
1635              <span class="plan-tier-pill">Standard</span>
1636              <span class="plan-tier-pill">Pro</span>
1637              <span class="plan-tier-pill">Psyke For You</span>
1638            </div>
1639          </div>
1640
1641          <div class="compare-wrap" role="region" aria-label="Plan feature comparison">
1642            <table class="compare-table">
1643              <thead>
1644                <tr>
1645                  <th scope="col" class="compare-feature-col">What's included</th>
1646                  <th scope="col" class="col-starter">
1647                    <span class="compare-plan-name">Starter</span>
1648                    <span class="compare-plan-tag">Try Psyke for free</span>
1649                    <a href="https://ai.psyke.co/" class="btn btn-outline btn-sm compare-plan-cta">Sign Up Free</a>
1650                  </th>
1651                  <th scope="col">
1652                    <span class="compare-plan-name">Standard</span>
1653                    <span class="compare-plan-tag">For growing teams</span>
1654                  </th>
1655                  <th scope="col">
1656                    <span class="compare-plan-name">Pro</span>
1657                    <span class="compare-plan-tag">For serious scale</span>
1658                  </th>
1659                  <th scope="col" class="col-enterprise">
1660                    <span class="compare-plan-name">Psyke For You</span>
1661                    <span class="compare-plan-tag">Done-for-you</span>
1662                  </th>
1663                </tr>
1664              </thead>
1665              <tbody>
1666                <tr>
1667                  <th scope="row">Pages per campaign</th>
1668                  <td><span class="compare-val">25</span></td>
1669                  <td><span class="compare-val">100</span></td>
1670                  <td><span class="compare-val">200</span></td>
1671                  <td><span class="compare-val">1,000s+</span></td>
1672                </tr>
1673                <tr>
1674                  <th scope="row">Live campaigns</th>
1675                  <td><span class="compare-val">1</span></td>
1676                  <td><span class="compare-val">1 / month</span></td>
1677                  <td><span class="compare-val">Unlimited</span></td>
1678                  <td><span class="compare-val">Managed</span></td>
1679                </tr>
1680                <tr>
1681                  <th scope="row">Drafts</th>
1682                  <td><span class="compare-val">Unlimited</span></td>
1683                  <td><span class="compare-val">Unlimited</span></td>
1684                  <td><span class="compare-val">Unlimited</span></td>
1685                  <td><span class="compare-val dim">&mdash;</span></td>
1686                </tr>
1687                <tr>
1688                  <th scope="row">Workspaces</th>
1689                  <td><span class="compare-val">1</span></td>
1690                  <td><span class="compare-val">1</span></td>
1691                  <td><span class="compare-val">Unlimited</span></td>
1692                  <td><span class="compare-val dim">&mdash;</span></td>
1693                </tr>
1694                <tr>
1695                  <th scope="row">Accounts</th>
1696                  <td><span class="compare-val">1</span></td>
1697                  <td><span class="compare-val">3</span></td>
1698                  <td><span class="compare-val">Unlimited</span></td>
1699                  <td><span class="compare-val dim">&mdash;</span></td>
1700                </tr>
1701                <tr>
1702                  <th scope="row">Psyke watermark</th>
1703                  <td><span class="compare-val dim">On pages</span></td>
1704                  <td><span class="compare-val dim">None</span></td>
1705                  <td><span class="compare-val dim">None</span></td>
1706                  <td><span class="compare-val dim">None</span></td>
1707                </tr>
1708                <tr class="compare-section">
1709                  <td colspan="5">Psyke For You also includes</td>
1710                </tr>
1711                <tr>
1712                  <th scope="row">Done-for-you execution</th>
1713                  <td><span class="compare-val dim">&mdash;</span></td>
1714                  <td><span class="compare-val dim">&mdash;</span></td>
1715                  <td><span class="compare-val dim">&mdash;</span></td>
1716                  <td><span class="compare-check" aria-label="Included">&#10003;</span></td>
1717                </tr>
1718                <tr>
1719                  <th scope="row">Hand-crafted AI &amp; SEO plan</th>
1720                  <td><span class="compare-val dim">&mdash;</span></td>
1721                  <td><span class="compare-val dim">&mdash;</span></td>
1722                  <td><span class="compare-val dim">&mdash;</span></td>
1723                  <td><span class="compare-check" aria-label="Included">&#10003;</span></td>
1724                </tr>
1725                <tr>
1726                  <th scope="row">Highly targeted keywords</th>
1727                  <td><span class="compare-val dim">&mdash;</span></td>
1728                  <td><span class="compare-val dim">&mdash;</span></td>
1729                  <td><span class="compare-val dim">&mdash;</span></td>
1730                  <td><span class="compare-check" aria-label="Included">&#10003;</span></td>
1731                </tr>
1732                <tr>
1733                  <th scope="row">100% on-brand output</th>
1734                  <td><span class="compare-val dim">&mdash;</span></td>
1735                  <td><span class="compare-val dim">&mdash;</span></td>
1736                  <td><span class="compare-val dim">&mdash;</span></td>
1737                  <td><span class="compare-check" aria-label="Included">&#10003;</span></td>
1738                </tr>
1739                <tr>
1740                  <th scope="row">Expert strategy calls</th>
1741                  <td><span class="compare-val dim">&mdash;</span></td>
1742                  <td><span class="compare-val dim">&mdash;</span></td>
1743                  <td><span class="compare-val dim">&mdash;</span></td>
1744                  <td><span class="compare-check" aria-label="Included">&#10003;</span></td>
1745                </tr>
1746              </tbody>
1747            </table>
1748          </div>
1749        </div>
1750      </section>
1751
1752      <!-- ─── FAQ ─── -->
1753      <section class="faq" id="faq" aria-labelledby="faq-h">
1754        <div class="container">
1755          <div class="section-head">
1756            <p class="eyebrow"><span class="dot" aria-hidden="true"></span><span>FAQ</span></p>
1757            <h2 id="faq-h">Questions, <span class="accent">answered.</span></h2>
1758          </div>
1759          <div class="faq-list">
1760            <div class="faq-item">
1761              <button type="button" class="faq-q" aria-expanded="true" aria-controls="faq-1">
1762                <span>Can I change plans at any time?</span>
1763                <span class="faq-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"
1764                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
1765                    <polyline points="6 9 12 15 18 9"></polyline>
1766                  </svg></span>
1767              </button>
1768              <div class="faq-a" id="faq-1" role="region">
1769                <div class="faq-a-inner">Yes. Contact sales and we can help you move between plans as your needs change.
1770                </div>
1771              </div>
1772            </div>
1773            <div class="faq-item">
1774              <button type="button" class="faq-q" aria-expanded="false" aria-controls="faq-2">
1775                <span>Is there a free trial?</span>
1776                <span class="faq-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"
1777                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
1778                    <polyline points="6 9 12 15 18 9"></polyline>
1779                  </svg></span>
1780              </button>
1781              <div class="faq-a" id="faq-2" role="region">
1782                <div class="faq-a-inner">Trial options depend on your plan and use case. Contact sales and we'll walk
1783                  you through what's available.</div>
1784              </div>
1785            </div>
1786            <div class="faq-item">
1787              <button type="button" class="faq-q" aria-expanded="false" aria-controls="faq-3">
1788                <span>What counts as a page?</span>
1789                <span class="faq-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"
1790                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
1791                    <polyline points="6 9 12 15 18 9"></polyline>
1792                  </svg></span>
1793              </button>
1794              <div class="faq-a" id="faq-3" role="region">
1795                <div class="faq-a-inner">Each unique URL published to your domain counts as one page. Draft pages —
1796                  those not yet published — do not count toward your plan limit, and you can keep as many drafts as you
1797                  like regardless of plan.</div>
1798              </div>
1799            </div>
1800            <div class="faq-item">
1801              <button type="button" class="faq-q" aria-expanded="false" aria-controls="faq-4">
1802                <span>Do you offer refunds?</span>
1803                <span class="faq-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"
1804                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
1805                    <polyline points="6 9 12 15 18 9"></polyline>
1806                  </svg></span>
1807              </button>
1808              <div class="faq-a" id="faq-4" role="region">
1809                <div class="faq-a-inner">Yes. Every paid plan comes with a 60-day money back guarantee — no questions
1810                  asked. If you're not happy with the results in the first two months, contact our support team and
1811                  we'll issue a full refund.</div>
1812              </div>
1813            </div>
1814            <div class="faq-item">
1815              <button type="button" class="faq-q" aria-expanded="false" aria-controls="faq-5">
1816                <span>Can I use Psyke on multiple sites?</span>
1817                <span class="faq-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"
1818                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
1819                    <polyline points="6 9 12 15 18 9"></polyline>
1820                  </svg></span>
1821              </button>
1822              <div class="faq-a" id="faq-5" role="region">
1823                <div class="faq-a-inner">The Pro plan supports unlimited workspaces, so you can manage multiple websites
1824                  or clients from a single account. Starter and Standard each include one workspace. For agency or
1825                  enterprise use, the Psyke For You plan is custom-scoped to your needs.</div>
1826              </div>
1827            </div>
1828          </div>
1829        </div>
1830      </section>
1831
1832      <!-- ─── Final CTA ─── -->
1833      <section class="final" aria-labelledby="final-h">
1834        <div class="container">
1835          <div class="final-card">
1836            <p class="eyebrow on-dark" style="justify-content:center;margin-bottom:32px;"><span class="dot"
1837                aria-hidden="true"></span><span>Get Started</span></p>
1838            <h2 id="final-h">Find the right plan<br>for <span
1839                style="color:#fff;text-shadow:0 4px 32px rgba(255,255,255,0.35)">your team.</span></h2>
1840            <p>Contact sales for pricing and a walkthrough of Psyke.</p>
1841            <div class="final-ctas">
1842              <a href="/contact-us" class="btn btn-on-dark btn-lg">Contact Sales <span class="btn-arrow"
1843                  aria-hidden="true">→</span></a>
1844            </div>
1845          </div>
1846        </div>
1847      </section>
1848    </main>
1849  </div>
1850
1851  <footer aria-label="Site footer">
1852    <div class="container">
1853      <div class="footer-grid">
1854        <div class="footer-brand">
1855          <a href="https://psyke.co" class="logo" aria-label="Psyke home" style="padding:0;"><img
1856              src="https://8b6p8gjb.upflowyexperience.com/8b6p8gjb/assets/Psyke_Footer_Logo.webp" alt="Psyke"
1857              style="height:28px;width:auto;display:block;filter:brightness(0) invert(1);" /></a>
1858          <p>The operating system for agentic organic marketing. Own how AI understands your business.</p>
1859        </div>
1860        <nav class="footer-col" aria-label="Solution">
1861          <h4>Solution</h4>
1862          <ul>
1863            <li><a href="/agencies">
1863Agencies</a></li>
1864            <li><a href="/brands">Brands</a></li>
1865          </ul>
1866        </nav>
1867        <nav class="footer-col" aria-label="Resources">
1868          <h4>Resources</h4>
1869          <ul>
1870            <li><a href="/articles">Articles</a></li>
1871            <li><a href="/faqs">FAQs</a></li>
1872          </ul>
1873        </nav>
1874        <nav class="footer-col" aria-label="Products">
1875          <h4>Products</h4>
1876          <ul>
1877            <li><a href="https://ai.psyke.co/login">Psyke AI SEO Tool</a></li>
1878          </ul>
1879        </nav>
1880        <nav class="footer-col" aria-label="Legal">
1881          <h4>Legal</h4>
1882          <ul>
1883            <li><a href="https://psyke.co/privacy-policy">Privacy Policy</a></li>
1884            <li><a href="https://psyke.co/terms-of-use">Terms of Service</a></li>
1885            <li><a href="https://psyke.co/data-processing">Data Processing</a></li>
1886          </ul>
1887        </nav>
1888        <nav class="footer-col" aria-label="Company">
1889          <h4>Company</h4>
1890          <ul>
1891            <li><a href="/about">About us</a></li>
1892            <li><a href="/contact-us">Contact us</a></li>
1893          </ul>
1894        </nav>
1895      </div>
1896      <div class="footer-bottom">
1897        <span>© 2026 Psyke. All rights reserved.</span>
1898        <div class="footer-socials" aria-label="Social media">
1899          <a href="https://www.facebook.com/psykeapp/" aria-label="Facebook" target="_blank" rel="noopener"><svg
1900              width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
1901              <path
1902                d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
1903            </svg></a>
1904          <a href="https://www.instagram.com/psyke_ai/" aria-label="Instagram" target="_blank" rel="noopener"><svg
1905              width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
1906              <path
1907                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
1908            </svg></a>
1909          <a href="https://www.linkedin.com/company/psyke-upflowy" aria-label="LinkedIn" target="_blank"
1910            rel="noopener"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
1911              <path
1912                d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z" />
1913            </svg></a>
1914          <a href="https://www.youtube.com/@PsykeAI" aria-label="YouTube" target="_blank" rel="noopener"><svg width="15"
1915              height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
1916              <path
1917                d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
1918            </svg></a>
1919        </div>
1920      </div>
1921    </div>
1922  </footer>
1923
1924  
1924<script>
1925    // FAQ accordion
1926    document.querySelectorAll('.faq-q').forEach(btn => {
1927      btn.addEventListener('click', () => {
1928        const isOpen = btn.getAttribute('aria-expanded') === 'true';
1929        document.querySelectorAll('.faq-q').forEach(b => b.setAttribute('aria-expanded', 'false'));
1930        if (!isOpen) btn.setAttribute('aria-expanded', 'true');
1931      });
1932    });
1933
1934    // Scroll-reveal for plan cards
1935    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
1936    if (!prefersReducedMotion && 'IntersectionObserver' in window) {
1937      const observer = new IntersectionObserver((entries) => {
1938        entries.forEach(entry => {
1939          if (entry.isIntersecting) {
1940            entry.target.style.opacity = '1';
1941            entry.target.style.transform = 'translateY(0)';
1942          }
1943        });
1944      }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
1945      document.querySelectorAll('.sales-panel, .compare-wrap, .stat-item').forEach((el, i) => {
1946        el.style.opacity = '0';
1947        el.style.transform = 'translateY(24px)';
1948        const delay = Math.min(i, 6) * 0.08;
1949        el.style.transition = `opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) ${delay}s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) ${delay}s`;
1950        observer.observe(el);
1951      });
1952    }
1953  </script>
1953
1954  
1954<script defer="" src="https://js.sentry-cdn.com/4b8560c52994a52ee7a272d8e984e458.min.js" crossorigin="anonymous">
1955  </script>
1955
1956  
1956<script type="text/javascript" id=""
1957    charset="">!function (b, e, f, g, a, c, d) { b.fbq || (a = b.fbq = function () { a.callMethod ? a.callMethod.apply(a, arguments) : a.queue.push(arguments) }, b._fbq || (b._fbq = a), a.push = a, a.loaded = !0, a.version = "2.0", a.queue = [], c = e.createElement(f), c.async = !0, c.src = g, d = e.getElementsByTagName(f)[0], d.parentNode.insertBefore(c, d)) }(window, document, "script", "https://connect.facebook.net/en_US/fbevents.js"); fbq("init", "788390470626882"); fbq("set", "agent", "tmgoogletagmanager", "788390470626882"); fbq("track", "PageView");</script>
1957
1958  <noscript><img height="1" width="1" style="display:none"
1959      src="https://www.facebook.com/tr?id=788390470626882&ev=PageView&noscript=1"></noscript>
1960  
1960<script>
1961    (function () {
1962      var toggle = document.querySelector('.nav-toggle');
1963      var menu = document.getElementById('mobile-menu');
1964      if (!toggle || !menu) return;
1965      var setOpen = function (open) {
1966        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
1967        toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
1968        if (open) {
1969          menu.removeAttribute('hidden');
1970          document.body.classList.add('menu-open');
1971        } else {
1972          menu.setAttribute('hidden', '');
1973          document.body.classList.remove('menu-open');
1974        }
1975      };
1976      toggle.addEventListener('click', function () {
1977        var open = toggle.getAttribute('aria-expanded') === 'true';
1978        setOpen(!open);
1979      });
1980      menu.addEventListener('click', function (e) {
1981        if (e.target && e.target.tagName === 'A') setOpen(false);
1982      });
1983      document.addEventListener('keydown', function (e) {
1984        if (e.key === 'Escape') setOpen(false);
1985      });
1986      window.addEventListener('resize', function () {
1987        if (window.innerWidth > 1024) setOpen(false);
1988      });
1989    })();
1990  </script>
1990
1991    
1991<script>
1992    /* ===== Dropdown hover-intent (prevents flicker + gap close) ===== */
1993    (function () {
1994      var closeTimers = new WeakMap();
1995      function openMenu(el) {
1996        var t = closeTimers.get(el);
1997        if (t) { clearTimeout(t); closeTimers.delete(el); }
1998        el.classList.add('open');
1999      }
2000      function scheduleClose(el) {
2001        var t = setTimeout(function () {
2002          el.classList.remove('open');
2003          closeTimers.delete(el);
2004        }, 120);
2005        closeTimers.set(el, t);
2006      }
2007      document.querySelectorAll('.nav-has-dropdown').forEach(function (el) {
2008        el.addEventListener('mouseenter', function () { openMenu(el); });
2009        el.addEventListener('mouseleave', function () { scheduleClose(el); });
2010        var panel = el.querySelector('.nav-dropdown');
2011        if (panel) {
2012          panel.addEventListener('mouseenter', function () { openMenu(el); });
2013          panel.addEventListener('mouseleave', function () { scheduleClose(el); });
2014        }
2015        document.addEventListener('click', function (e) {
2016          if (!el.contains(e.target)) el.classList.remove('open');
2017        });
2018        var trigger = el.querySelector('.nav-link');
2019        if (trigger) {
2020          trigger.addEventListener('keydown', function (e) {
2021            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); el.classList.toggle('open'); }
2022            else if (e.key === 'Escape') { el.classList.remove('open'); }
2023          });
2024        }
2025      });
2026    })();
2027    </script>
2027
2028</body>
2029
2030</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.