/* ==========================================================================
   BrainTrain — styles.css
   Tokens & components implemented verbatim from DESIGN.md.
   Colours + fonts = BrainTrain's own brand. Layout + feel = inherited
   (Headspace / Paste / Apple). Self-hosted font, no third-party embeds.
   ========================================================================== */

/* ----------------------------------------------------------------------- */
/* Font (self-hosted variable font — no external requests)                 */
/* ----------------------------------------------------------------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-variable.woff2') format('woff2');
}

/* ----------------------------------------------------------------------- */
/* Tokens (DESIGN.md §8)                                                    */
/* ----------------------------------------------------------------------- */
:root {
  /* Brand — Teal "Mind" */
  --color-teal-50:#F0FDFA; --color-teal-100:#CCFBF1; --color-teal-200:#99F6E4;
  --color-teal-300:#5EEAD4; --color-teal-400:#2DD4BF; --color-teal-500:#14B8A6;
  --color-teal-600:#0D9488; --color-teal-700:#0F766E; --color-teal-800:#115E59;
  --color-teal-900:#134E4A;

  /* Action — Coral "Move" */
  --color-coral-50:#FFF2EE; --color-coral-100:#FFE2D8; --color-coral-200:#FFC4B0;
  --color-coral-300:#FF9F80; --color-coral-400:#FF7F57; --color-coral-500:#FB6A3C;
  --color-coral-600:#EC5A2E; --color-coral-700:#CE4620; --color-coral-800:#A6371A;

  /* Neutrals */
  --color-ink:#14201E; --color-graphite:#4B5A57; --color-slate:#6E7C79;
  --color-stone:#9AA6A3; --color-hairline:#DCE5E3; --color-border:#E2EAE8;
  --color-canvas:#F6F9F8; --color-surface:#FFFFFF; --color-true-black:#000000;

  /* Semantic */
  --color-success:#0D9488; --color-error:#CE4620; --color-focus:#14B8A6;

  /* Type */
  --font-brand:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-caption:13px; --text-body-sm:15px; --text-body:17px; --text-lead:20px;
  --text-subheading:22px; --text-heading-sm:28px; --text-heading:36px;
  --text-heading-lg:52px; --text-display:72px; --text-display-lg:96px;

  /* Spacing */
  --spacing-4:4px; --spacing-8:8px; --spacing-12:12px; --spacing-16:16px;
  --spacing-20:20px; --spacing-24:24px; --spacing-32:32px; --spacing-40:40px;
  --spacing-48:48px; --spacing-56:56px; --spacing-64:64px; --spacing-80:80px;
  --spacing-96:96px; --spacing-120:120px; --spacing-144:144px;

  /* Radius */
  --radius-sm:10px; --radius-input:12px; --radius-card:20px;
  --radius-featured:28px; --radius-pill:999px;

  /* Layout */
  --page-max-width:1200px; --content-max-width:720px;
  --section-gap:96px; --card-padding:32px; --grid-gutter:24px;

  /* Elevation */
  --shadow-ambient:0 2px 24px rgba(20,32,30,0.06);
  --shadow-ambient-lg:0 18px 48px rgba(20,32,30,0.10);
  --shadow-cta:0 4px 14px rgba(236,90,46,0.28);
}

/* ----------------------------------------------------------------------- */
/* Reset & base                                                            */
/* ----------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  font-family:var(--font-brand);
  font-size:var(--text-body);
  line-height:1.6;
  letter-spacing:-0.1px;
  color:var(--color-ink);
  background:var(--color-canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }

:focus-visible {
  outline:2px solid var(--color-focus);
  outline-offset:2px;
  border-radius:4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ----------------------------------------------------------------------- */
/* Layout primitives                                                       */
/* ----------------------------------------------------------------------- */
.container {
  width:100%;
  max-width:var(--page-max-width);
  margin-inline:auto;
  padding-inline:24px;
}

.section { padding-block:var(--section-gap); }
.section--tight { padding-block:var(--spacing-64); }

/* Alternating bands (Apple/Paste) — no hard dividers, value shift only */
.band-canvas { background:var(--color-canvas); }
.band-surface { background:var(--color-surface); }
.band-teal {
  background:
    radial-gradient(120% 140% at 85% -10%, rgba(45,212,191,0.16), transparent 55%),
    radial-gradient(120% 140% at 0% 110%, rgba(20,184,166,0.10), transparent 55%),
    var(--color-teal-900);
  color:#EAFBF7;
}

/* Eyebrow / kicker */
.eyebrow {
  display:inline-block;
  font-size:var(--text-caption);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-teal-700);
}
.band-teal .eyebrow { color:var(--color-teal-300); }

/* ----------------------------------------------------------------------- */
/* Typography helpers                                                       */
/* ----------------------------------------------------------------------- */
.display {
  font-weight:800;
  font-size:clamp(40px, 8.5vw, var(--text-display));
  line-height:1.04;
  letter-spacing:-2px;
}
.display-lg {
  font-weight:800;
  font-size:clamp(44px, 10vw, var(--text-display-lg));
  line-height:1.02;
  letter-spacing:-2.6px;
}
h1,.h-hero { letter-spacing:-2px; }
.heading-lg {
  font-weight:700;
  font-size:clamp(32px, 5.2vw, var(--text-heading-lg));
  line-height:1.1;
  letter-spacing:-1.4px;
}
.heading {
  font-weight:700;
  font-size:clamp(28px, 4vw, var(--text-heading));
  line-height:1.2;
  letter-spacing:-0.8px;
}
.heading-sm {
  font-weight:700;
  font-size:var(--text-heading-sm);
  line-height:1.25;
  letter-spacing:-0.5px;
}
.subheading {
  font-weight:600;
  font-size:var(--text-subheading);
  line-height:1.4;
  letter-spacing:-0.3px;
}
.lead {
  font-size:var(--text-lead);
  line-height:1.5;
  letter-spacing:-0.2px;
  color:var(--color-graphite);
}
.band-teal .lead { color:#BFEFE6; }
.prose p { font-size:var(--text-body); color:var(--color-graphite); max-width:var(--content-max-width); }
.prose p + p { margin-top:var(--spacing-20); }
.prose em { font-style:italic; color:var(--color-ink); }
.measure { max-width:var(--content-max-width); }
.center { text-align:center; }
.center .lead, .center p { margin-inline:auto; }

/* Gradient ink accent for a single emphasised word (teal→coral = mind→move) */
.duo-text {
  background:linear-gradient(92deg, var(--color-teal-600) 0%, var(--color-teal-500) 40%, var(--color-coral-600) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ----------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ----------------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:var(--text-body); font-weight:600; letter-spacing:-0.1px;
  border-radius:var(--radius-pill); border:1.5px solid transparent;
  padding:14px 28px; transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn--primary {
  background:var(--color-coral-600); color:#fff; box-shadow:var(--shadow-cta);
}
.btn--primary:hover { background:var(--color-coral-700); transform:translateY(-1px); }
.btn--primary:active { transform:translateY(0); }
.btn--ghost {
  background:transparent; color:var(--color-ink); border-color:var(--color-border);
}
.btn--ghost:hover { border-color:var(--color-teal-400); background:var(--color-teal-50); }
.band-teal .btn--ghost { color:#EAFBF7; border-color:rgba(255,255,255,0.28); }
.band-teal .btn--ghost:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5); }
.btn--lg { padding:16px 34px; font-size:var(--text-lead); }

/* Text link with arrow */
.tlink {
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; color:var(--color-teal-700);
  border-bottom:0; transition:gap .15s ease, color .15s ease;
}
.tlink:hover { color:var(--color-teal-800); gap:10px; }
.tlink .arrow { transition:transform .15s ease; }
.tlink:hover .arrow { transform:translateX(2px); }

/* ----------------------------------------------------------------------- */
/* Badges / pills                                                           */
/* ----------------------------------------------------------------------- */
.badge {
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; letter-spacing:-0.1px;
  padding:6px 14px; border-radius:var(--radius-pill);
  background:var(--color-teal-50); color:var(--color-teal-700);
}
.badge .dot { width:8px; height:8px; border-radius:999px; background:var(--color-teal-500); }
.band-teal .badge { background:rgba(255,255,255,0.10); color:#CFF6EF; }
.band-teal .badge .dot { background:var(--color-teal-300); }

/* ----------------------------------------------------------------------- */
/* Navigation                                                               */
/* ----------------------------------------------------------------------- */
.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(246,249,248,0.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--color-hairline);
}
.nav__inner {
  display:flex; align-items:center; gap:24px;
  height:68px;
}
.nav__brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:-0.6px; color:var(--color-ink); }
.nav__brand img { width:34px; height:34px; }
.nav__links { display:flex; align-items:center; gap:28px; margin-left:auto; }
.nav__links a { font-size:var(--text-body); font-weight:500; color:var(--color-graphite); transition:color .15s ease; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color:var(--color-ink); }
.nav__cta { margin-left:8px; }

@media (max-width:860px){
  .nav__inner { flex-wrap:wrap; height:auto; padding-block:12px; gap:10px 18px; }
  .nav__brand { margin-right:auto; }
  .nav__links { order:3; width:100%; margin-left:0; justify-content:center; gap:22px; }
  .nav__cta { margin-left:0; }
}

/* ----------------------------------------------------------------------- */
/* Hero                                                                     */
/* ----------------------------------------------------------------------- */
.hero { padding-top:var(--spacing-80); padding-bottom:var(--spacing-96); position:relative; overflow:hidden; }
.hero__inner { text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--spacing-24); }
.hero__title { max-width:14ch; }
.hero--text .hero__title { max-width:18ch; }
.hero__lead { max-width:62ch; }
.hero__cta-row { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:var(--spacing-8); }
.hero__cta-note { font-size:var(--text-body-sm); color:var(--color-slate); }

/* soft ambient brand wash behind hero */
.hero__glow {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 50% at 50% 0%, rgba(20,184,166,0.12), transparent 70%),
    radial-gradient(34% 40% at 82% 18%, rgba(236,90,46,0.08), transparent 70%),
    radial-gradient(34% 40% at 16% 24%, rgba(45,212,191,0.10), transparent 70%);
}

/* ----------------------------------------------------------------------- */
/* Device mockup (App Screenshot placeholder, DESIGN.md §6)                 */
/* ----------------------------------------------------------------------- */
.device-stage {
  margin-top:var(--spacing-40);
  display:flex; justify-content:center; width:100%;
}
.device {
  position:relative;
  width:300px; aspect-ratio:300/610;
  background:linear-gradient(180deg, #F4FBF9, #FFFFFF);
  border:1px solid var(--color-border);
  border-radius:46px;
  padding:14px;
  box-shadow:var(--shadow-ambient-lg);
}
.device__notch {
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:120px; height:26px; background:var(--color-ink); border-radius:999px; opacity:0.9;
}
.device__screen {
  height:100%; border-radius:34px;
  background:
    radial-gradient(90% 60% at 50% 0%, var(--color-teal-50), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F4FBF9 100%);
  border:1px solid var(--color-hairline);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  text-align:center; padding:28px;
}
.device__screen img { width:120px; height:120px; }
.device__screen .device__name { font-weight:800; font-size:24px; letter-spacing:-0.8px; color:var(--color-ink); }
.device__screen .device__sub { font-size:14px; color:var(--color-slate); }
.device__placeholder-tag {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--color-stone); background:var(--color-canvas);
  padding:4px 10px; border-radius:999px; border:1px solid var(--color-hairline);
  white-space:nowrap;
}

/* ----------------------------------------------------------------------- */
/* Cards                                                                    */
/* ----------------------------------------------------------------------- */
.grid { display:grid; gap:var(--grid-gutter); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:860px){ .grid-3 { grid-template-columns:1fr; } .grid-2 { grid-template-columns:1fr; } }

.card {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  padding:var(--card-padding);
}
/* On white bands, reverse the relationship (fog card on white) — Apple style */
.band-surface .card { background:var(--color-canvas); }

.benefit-card { display:flex; flex-direction:column; gap:16px; }
.benefit-card h3 { font-weight:700; font-size:var(--text-subheading); letter-spacing:-0.3px; }
.benefit-card p { color:var(--color-graphite); font-size:var(--text-body); }

/* two-tone icon badge */
.icon-badge {
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
}
.icon-badge svg { width:28px; height:28px; }
.icon-badge--mind { background:var(--color-teal-50); color:var(--color-teal-700); }
.icon-badge--move { background:var(--color-coral-50); color:var(--color-coral-700); }

/* ----------------------------------------------------------------------- */
/* Two-tone concept visual (DESIGN.md §6) — DECORATIVE ONLY (no body copy)  */
/* Labels are the section's own subject words ("Brain"/"Body").             */
/* ----------------------------------------------------------------------- */
.concept-card {
  position:relative; min-height:340px; height:100%;
  border-radius:var(--radius-featured);
  border:1px solid var(--color-border); overflow:hidden;
  background:
    radial-gradient(80% 70% at 18% 16%, rgba(45,212,191,0.28), transparent 60%),
    radial-gradient(80% 70% at 86% 88%, rgba(255,127,87,0.22), transparent 60%),
    linear-gradient(135deg, var(--color-teal-50) 0%, #EAF8F4 48%, var(--color-coral-50) 100%);
  display:flex; align-items:center; justify-content:center; padding:32px;
}
.concept-card .duo-chip {
  position:absolute; display:inline-flex; align-items:center; gap:9px;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:999px; padding:10px 18px; font-weight:700; font-size:16px;
  letter-spacing:-0.2px; box-shadow:var(--shadow-ambient);
}
.concept-card .duo-chip .dot { width:10px; height:10px; border-radius:999px; }
.concept-card .chip-mind { top:46px; left:38px; color:var(--color-teal-800); }
.concept-card .chip-mind .dot { background:var(--color-teal-500); }
.concept-card .chip-move { bottom:50px; right:38px; color:var(--color-coral-800); }
.concept-card .chip-move .dot { background:var(--color-coral-500); }
.concept-card .plus {
  width:84px; height:84px; border-radius:999px; background:var(--color-surface);
  border:1px solid var(--color-border); box-shadow:var(--shadow-ambient-lg);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:38px; color:var(--color-ink);
}

/* ----------------------------------------------------------------------- */
/* "This is for you if" list                                               */
/* ----------------------------------------------------------------------- */
.checklist { list-style:none; padding:0; display:flex; flex-direction:column; gap:18px; max-width:760px; }
.checklist li {
  display:flex; gap:16px; align-items:flex-start;
  font-size:var(--text-lead); line-height:1.5; color:var(--color-graphite); letter-spacing:-0.2px;
}
.checklist li strong { color:var(--color-ink); font-weight:700; }
.checklist .tick {
  flex:0 0 auto; width:30px; height:30px; border-radius:999px;
  background:var(--color-teal-50); color:var(--color-teal-700);
  display:flex; align-items:center; justify-content:center; margin-top:3px;
}
.checklist .tick svg { width:16px; height:16px; }

/* outcome list (Who page / science bullets) */
.outcomes { list-style:none; padding:0; display:flex; flex-direction:column; gap:14px; max-width:760px; }
.outcomes li { position:relative; padding-left:30px; font-size:var(--text-body); color:var(--color-graphite); }
.outcomes li strong { color:var(--color-ink); }
.outcomes li::before {
  content:""; position:absolute; left:6px; top:11px;
  width:9px; height:9px; border-radius:999px;
  background:linear-gradient(135deg, var(--color-teal-500), var(--color-coral-500));
}

/* ----------------------------------------------------------------------- */
/* Honesty note (DESIGN.md §6)                                             */
/* ----------------------------------------------------------------------- */
.honesty {
  background:var(--color-teal-50);
  border-radius:var(--radius-card);
  border-left:3px solid var(--color-teal-300);
  padding:24px 28px;
  max-width:820px;
}
.honesty p { font-size:var(--text-body-sm); font-style:italic; color:var(--color-slate); margin:0; }

/* ----------------------------------------------------------------------- */
/* Waitlist section (on every page)                                         */
/* ----------------------------------------------------------------------- */
.waitlist__card {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-featured);
  padding:clamp(28px,4vw,56px);
  box-shadow:var(--shadow-ambient-lg);
  text-align:center;
  color:var(--color-ink); /* override teal band's light inherited text */
  display:flex; flex-direction:column; align-items:center; gap:18px;
  max-width:760px; margin-inline:auto;
}
.waitlist__card h2 { color:var(--color-ink); }
.waitlist__what { color:var(--color-graphite); max-width:54ch; }
.waitlist__form {
  display:flex; gap:12px; width:100%; max-width:520px; margin-top:8px;
}
.waitlist__form input[type="email"] {
  flex:1; min-width:0;
  font:inherit; font-size:var(--text-body);
  padding:14px 18px;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-input);
  background:var(--color-surface); color:var(--color-ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.waitlist__form input::placeholder { color:var(--color-stone); }
.waitlist__form input:focus { outline:none; border-color:var(--color-teal-400); box-shadow:0 0 0 3px rgba(20,184,166,0.18); }
.waitlist__form .btn { flex:0 0 auto; }
@media (max-width:560px){ .waitlist__form { flex-direction:column; } .waitlist__form .btn { width:100%; } }

.waitlist__momentum { font-size:var(--text-body-sm); color:var(--color-slate); }
.waitlist__momentum .counter {
  font-weight:700; color:var(--color-teal-700);
  background:var(--color-teal-50); border:1px dashed var(--color-teal-300);
  border-radius:999px; padding:1px 9px; font-variant-numeric:tabular-nums;
}
.waitlist__reassure { font-size:var(--text-caption); color:var(--color-stone); }
.waitlist__status { font-size:var(--text-body-sm); font-weight:600; margin-top:4px; }
.waitlist__status.is-success { color:var(--color-teal-700); }
.waitlist__status.is-error { color:var(--color-coral-700); }

/* ----------------------------------------------------------------------- */
/* Footer                                                                   */
/* ----------------------------------------------------------------------- */
.footer { background:var(--color-canvas); border-top:1px solid var(--color-hairline); padding-block:var(--spacing-64) var(--spacing-40); }
.footer__top { display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
.footer__brand { display:flex; flex-direction:column; gap:12px; max-width:300px; }
.footer__brand .nav__brand { font-size:20px; }
.footer__brand p { font-size:var(--text-body-sm); color:var(--color-slate); }
.footer__links { display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; }
.footer__links a { font-size:var(--text-body); font-weight:500; color:var(--color-graphite); }
.footer__links a:hover { color:var(--color-ink); }

.footer__legal {
  margin-top:var(--spacing-40); padding-top:var(--spacing-24);
  border-top:1px solid var(--color-hairline);
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  font-size:var(--text-caption); color:var(--color-slate);
}
.footer__legal nav { display:flex; flex-wrap:wrap; gap:8px 18px; }
.footer__disclaimer { width:100%; font-size:var(--text-caption); font-style:italic; color:var(--color-stone); margin-top:6px; }

/* ----------------------------------------------------------------------- */
/* Spacing utilities                                                        */
/* ----------------------------------------------------------------------- */
.stack-12 > * + * { margin-top:12px; }
.stack-16 > * + * { margin-top:16px; }
.stack-20 > * + * { margin-top:20px; }
.stack-24 > * + * { margin-top:24px; }
.stack-32 > * + * { margin-top:32px; }
.mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-40{margin-top:40px;}
.section-head { max-width:760px; margin-bottom:var(--spacing-48); }
.section-head.center { margin-inline:auto; }
.section-head .eyebrow { margin-bottom:16px; }
.section-head .lead { margin-top:18px; }

/* Legal pages — the base .prose only styles p/em, and privacy/terms need
   headings, lists and links to read cleanly at the larger type this audience
   uses. Scoped so the marketing pages are untouched. */
.prose--legal h2 { margin-top:var(--spacing-48); }
.prose--legal h3 { margin-top:var(--spacing-32); margin-bottom:var(--spacing-12); }
.prose--legal h2 + p,
.prose--legal h3 + p,
.prose--legal h2 + ul { margin-top:var(--spacing-16); }
.prose--legal ul {
  margin-top:var(--spacing-16);
  padding-left:1.25em;
  max-width:var(--content-max-width);
  list-style:disc;
}
.prose--legal li {
  font-size:var(--text-body);
  color:var(--color-graphite);
  margin-top:var(--spacing-12);
}
.prose--legal strong { color:var(--color-ink); font-weight:600; }
.prose--legal a { color:var(--color-teal-700); text-decoration:underline; }
.legal-meta { margin-top:var(--spacing-20); color:var(--color-graphite); font-size:var(--text-body-sm); }
.legal-note {
  margin-top:var(--spacing-48);
  padding:var(--spacing-20);
  border-left:3px solid var(--color-teal-300);
  background:var(--color-canvas);
  font-size:var(--text-body-sm);
  color:var(--color-graphite);
  max-width:var(--content-max-width);
}