/* WINNR landing v2 — design system from landingv2/stitch_export/DESIGN.md
   Light is primary. Dark follows the team dark palette and switches on
   system preference (prefers-color-scheme). Sharp 0px corners, flat tonal
   layers, hairline dividers, no shadows. */

/* ---------- tokens ---------- */
:root {
  /* light (primary) — GREIGE canvas (team-agreed). A warm-neutral paper, low
     enough in chroma that it never casts green/pink on any monitor. */
  --bg:           #E9E8E6;   /* greige paper */
  --panel:        #DEDDDA;   /* level 1: panels */
  --card:         #F4F3F1;   /* level 2: cards / brightest */
  --ink:          #0B0B0D;   /* primary text */
  --muted:        #45403A;   /* secondary text — darkened for contrast (over aurora) */
  --muted-2:      #615A50;   /* tertiary / captions — darkened for legibility */
  --hairline:     #D2D1CE;   /* 1px dividers */
  --band-amt:     9%;        /* section-band lift strength (light) */
  --radius:       12px;      /* rounded corners (team-agreed) — buttons, cards, fields */
  --accent:       #1D4ED8;   /* calm blue (light theme) — team chose blue for light */
  --accent-bright:#2563EB;   /* hover */
  --accent-deep:  #1E3A8A;
  --on-accent:    #F7F3E8;   /* text on accent */
  --chip-bg:      #E0DBCB;
  --chip-ink:     #5A554D;
  --field-focus:  #0B0B0D;

  /* pricing pie slices — light theme is BLUE-anchored (the light brand accent
     is blue, not red), so the pie follows it: a blue → navy ramp + warm neutrals.
     A red ramp here read as "dark-theme colors" dropped onto the blue light theme.
     VAT stays a muted warm grey (it's tax, not spend); donation keeps a small
     gold accent so the 2.5% sliver is still legible. */
  --pie-marketing:#2563EB; --pie-team:#1E3A8A; --pie-vat:#A8A39A;
  --pie-psych:#5E9BD1;     --pie-tech:#B7C9E8; --pie-donation:#C9A86A;

  /* effects — light primary: RED-ANCHORED, mirroring the dark theme.
     Same blood-red glow as dark (just the bg/text inverted to light), so it can
     NEVER go khaki/green (that came from the amber hue) and stays controlled on
     any monitor's gamut. Kept low-opacity & deep so the haze reads as red heat,
     not pink. The only chroma on the page is the one brand red. */
  --aurora-opacity: 0.24;             /* strong glow (team-agreed) */
  --aurora-1: var(--accent);          /* blood red */
  --aurora-2: var(--accent-bright);   /* slightly brighter red */
  --aurora-3: var(--accent-deep);     /* deep red core */
  --glass:   91%;   /* panels / price card surface opacity */
  --glass-2: 87%;   /* gut-check items */

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-serif:   "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1200px;
  --gutter: 24px;
  --margin: 64px;

  --s-xs: 4px;  --s-sm: 12px; --s-md: 24px;
  --s-lg: 48px; --s-xl: 80px;
}

/* dark tokens, shared by the system default and the manual override */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:           #0B0B0D;   /* warm dark, not black */
    --panel:        #15161A;   /* surface */
    --card:         #15161A;
    --ink:          #F1ECE4;   /* warm off-white */
    --muted:        #A5A095;
    --muted-2:      #8C857A;
    --hairline:     #1F1E1B;
    --accent:       #8B1A1A;
    --accent-bright:#A52121;
    --accent-deep:  #5C0F0F;
    --on-accent:    #F1ECE4;
    --chip-bg:      #1F1E1B;
    --chip-ink:     #A5A095;
    --field-focus:  #F1ECE4;
    --band-amt:     4%;          /* dark: keep the section band near-black, not grey */
    --pie-marketing:#8B1A1A; --pie-team:#C0463A; --pie-vat:#8C857A;
    --pie-psych:#D98A5A;     --pie-tech:#5C0F0F; --pie-donation:#D9C2A8;
    /* dark: richer RED glow, more translucent glass */
    --aurora-opacity: 0.62;
    --aurora-1: var(--accent);
    --aurora-2: var(--accent-bright);
    --aurora-3: var(--accent-deep);
    --glass:   70%;
    --glass-2: 60%;
  }
}
:root[data-theme="dark"] {
  --bg:           #0B0B0D;
  --panel:        #15161A;
  --card:         #15161A;
  --ink:          #F1ECE4;
  --muted:        #A5A095;
  --muted-2:      #8C857A;
  --hairline:     #1F1E1B;
  --accent:       #8B1A1A;
  --accent-bright:#A52121;
  --accent-deep:  #5C0F0F;
  --on-accent:    #F1ECE4;
  --chip-bg:      #1F1E1B;
  --chip-ink:     #A5A095;
  --field-focus:  #F1ECE4;
  --band-amt:     4%;          /* dark: keep the section band near-black, not grey */
  --pie-marketing:#8B1A1A; --pie-team:#C0463A; --pie-vat:#8C857A;
  --pie-psych:#D98A5A;     --pie-tech:#5C0F0F; --pie-donation:#D9C2A8;
  --aurora-opacity: 0.62;
  --aurora-1: var(--accent);
  --aurora-2: var(--accent-bright);
  --aurora-3: var(--accent-deep);
  --glass:   70%;
  --glass-2: 60%;
}
/* :root[data-theme="light"] falls through to the light defaults above */

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
body {
  position: relative;            /* anchors the full-height .aurora flow layer */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--margin); }
.section { padding: var(--s-xl) 0; }
/* panel tint is painted by a feathered ::before (see EFFECTS) so sections melt
   into one another — no hard color seam, no divider line. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-serif); letter-spacing: -0.02em; line-height: 1.15; }
.display { font-size: clamp(40px, 7vw, 76px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; }
.headline { font-size: clamp(28px, 4.4vw, 46px); font-weight: 600; letter-spacing: -0.02em; }
.subhead  { font-size: clamp(20px, 2.6vw, 30px); font-weight: 500; letter-spacing: -0.01em; }
.lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--muted); max-width: 60ch; font-weight: 300; }
.body { font-size: 17px; line-height: 1.65; color: var(--muted); }
.cap  { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted-2); }
/* Fraunces carries all display-scale headings; body/lead/labels stay sans/mono */
.display, .headline, .subhead, .team .big, .waitlist-title,
.result .band-name, .screen .qtext { font-family: var(--font-serif); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 500; font-size: 16px;
  letter-spacing: -0.01em; padding: 15px 28px; border-radius: var(--radius, 12px);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-bright); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.btn--lg { padding: 18px 34px; font-size: 17px; }
.btn--block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
/* base row for button groups — without this, .cta-rows outside .hero/.result
   (e.g. the intake age gate) lost their flex layout, so the buttons collapsed
   against each other with no gap. .hero/.result keep their own overrides. */
.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.micro { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.02em; color: var(--muted-2); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--margin);
  /* TRANSPARENT over the hero (no bar at the top), then fades to a near-solid
     frosted bar once scrolled (.is-solid, toggled by JS). Near-solid so text
     scrolling underneath can't ghost through it. No hard divider line — a soft
     shadow does the separation. */
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.topbar.is-solid {
  /* fully opaque once scrolled — nothing ghosts through it */
  background: var(--bg);
  box-shadow: 0 6px 24px -18px color-mix(in srgb, var(--ink) 60%, transparent);
}
.wordmark { font-family: var(--font-serif); font-weight: 600; font-size: 32px; letter-spacing: 0.02em; text-decoration: none; }
.wordmark .nr { color: inherit; }
.topbar nav { display: flex; align-items: center; gap: 28px; }
.topbar nav a { font-size: 15px; color: var(--muted); text-decoration: none; transition: color .15s; }
.topbar nav a:hover { color: var(--ink); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--hairline); color: var(--ink); background: transparent; transition: background .15s, border-color .15s; }
.theme-toggle:hover { border-color: var(--ink); background: var(--card); }
.theme-toggle svg { display: block; }

/* ---------- hero ---------- */
.hero { padding: clamp(64px, 12vw, 140px) 0 clamp(56px, 10vw, 120px); }
.hero .display { max-width: 16ch; }
.hero .lead { margin-top: var(--s-md); }
.hero .cta-row { margin-top: var(--s-lg); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ---------- two-column ("you already know") ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xl); align-items: start; }
.split .headline { max-width: 14ch; }

/* ---------- features ---------- */
.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); margin-top: var(--s-lg);
}
.feature {
  position: relative; overflow: hidden; background: var(--bg);
  padding: var(--s-lg) var(--s-md) calc(var(--s-md) + 4px);
  transition: background .2s ease;
}
.feature:hover { background: var(--card); }
.feature-idx {
  display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; color: var(--muted-2); margin-bottom: var(--s-md);
  transition: color .2s ease;
}
.feature:hover .feature-idx { color: var(--accent); }
.feature h3 { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.feature p { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.feature::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--accent); transition: width .28s ease;
}
.feature:hover::after { width: 100%; }
/* Fade the whole grid container too — its background is the hairline gridline
   colour, which would otherwise show as a gray rectangle while the cells are
   still at opacity:0 (before the reveal fires). */
.features-grid.will-animate { opacity: 0; }
.features-grid.in { opacity: 1; transition: opacity .45s ease; }
.features-grid.will-animate .feature { opacity: 0; transform: translateY(14px); }
.features-grid.in .feature {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i) * 60ms);
}

/* ---------- how it starts (timeline) ---------- */
.startflow {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg);
  margin-top: var(--s-xl); border-top: 2px solid var(--accent);
}
.startstep { position: relative; padding-top: var(--s-md); }
.startstep .bignum {
  display: block; font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(56px, 7vw, 92px); line-height: 0.8; letter-spacing: -0.03em;
  color: var(--ink);
}
.startstep h3 { margin-top: var(--s-md); font-size: 22px; font-weight: 600; }
.startstep p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.startflow.will-animate .startstep { opacity: 0; transform: translateY(14px); }
.startflow.in .startstep {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i) * 90ms);
}
.science { margin-top: var(--s-xl); text-align: center; }
.science p { font-size: 17px; color: var(--muted); max-width: 56ch; margin: 0 auto; }
.science .cap { display: block; margin-top: 12px; }

/* ---------- pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-xl); align-items: start; margin-top: var(--s-lg); }
.commitments { list-style: none; margin-top: var(--s-md); }
.commitments li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 17px; color: var(--ink); }
.commitments li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 6px; border: 1.5px solid var(--accent); position: relative; }
.commitments li .tick { position: absolute; }
.price-card { position: relative; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius, 12px); padding: 40px 36px; transition: border-color .2s ease, opacity .5s ease, transform .5s ease; }
.price-card:hover { border-color: var(--accent); }
.price-card.reveal-init { opacity: 0; transform: translateY(16px); }
.price-card.in { opacity: 1; transform: none; }
.price-card .eyebrow { display: block; margin-bottom: 18px; }
.price-display { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.price-old { position: relative; font-family: var(--font-serif); font-size: 30px; font-weight: 600; color: var(--muted-2); }
.price-old::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; width: 0; background: var(--accent); transition: width .45s ease .35s; }
.price-card.in .price-old::after { width: calc(100% + 4px); }
.price-now { font-family: var(--font-serif); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.price-per { font-size: 20px; font-weight: 600; color: var(--muted-2); margin-left: 1px; }
.price-badge { align-self: center; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: 6px 10px; }
.price-amount { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; }
.price-amount span { font-size: 18px; font-weight: 400; color: var(--muted-2); letter-spacing: 0; }
.waitlist-title { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.price-card .desc { color: var(--muted); margin: 10px 0 28px; }
.where { margin-top: var(--s-lg); }
.where h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; }
.where p { color: var(--muted); font-size: 16px; max-width: 60ch; }

/* where-your-money pie */
.where .pie-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.where .pie {
  flex: none; width: 184px; height: 184px; border-radius: 50%;
  background: conic-gradient(
    var(--pie-marketing) 0      108deg,   /* Marketing 30% */
    var(--pie-team)      108deg 198deg,   /* Team 25% */
    var(--pie-vat)       198deg 261deg,   /* VAT 17.5% */
    var(--pie-psych)     261deg 315deg,   /* Psychologists 15% */
    var(--pie-tech)      315deg 351deg,   /* Tech 10% */
    var(--pie-donation)  351deg 360deg    /* Donation 2.5% */
  );
}
.where .legend { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 190px; }
.where .legend-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 11px; }
.where .legend-sw { width: 12px; height: 12px; }
.where .legend-name { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.where .legend-pct { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.where .legend-row.is-tax .legend-name, .where .legend-row.is-tax .legend-pct { color: var(--muted-2); }
.where .where-foot { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--muted-2); margin-top: 20px; }

/* ---------- team ---------- */
.team .big { font-size: clamp(28px, 4.6vw, 48px); font-weight: 600; letter-spacing: -0.02em; max-width: 18ch; line-height: 1.12; }
.team .body { margin-top: var(--s-md); max-width: 62ch; }
.team a.link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); font-weight: 500; }
.team a.link:hover { color: var(--accent-bright); }
.team-roster { margin-top: var(--s-lg); }
.member {
  display: grid; grid-template-columns: 48px 1fr auto; gap: var(--s-md);
  align-items: start; padding: var(--s-md); border-bottom: 1px solid var(--hairline);
  border-left: 3px solid transparent;
  transition: background .2s ease, border-left-color .2s ease;
}
.member:hover { background: var(--card); border-left-color: var(--accent); }
.member .mono-tile {
  width: 48px; height: 48px; background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0;
  transition: background .2s ease;
}
.member:hover .mono-tile { background: var(--accent-bright); }
.member .m-name { font-size: 19px; font-weight: 600; }
.member .m-bio { color: var(--muted); font-size: 15px; line-height: 1.55; margin-top: 4px; max-width: 54ch; }
.member .m-role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2); white-space: nowrap; padding-top: 4px;
  transition: color .2s ease;
}
.member:hover .m-role { color: var(--accent); }
.team-roster.will-animate .member { opacity: 0; transform: translateY(12px); }
.team-roster.in .member {
  opacity: 1; transform: none;
  transition: background .2s ease, border-left-color .2s ease,
              opacity .5s ease calc(var(--i) * 70ms), transform .5s ease calc(var(--i) * 70ms);
}
@media (max-width: 860px) {
  .member { grid-template-columns: 48px 1fr; }
  .member .m-role { grid-column: 2; padding-top: 0; margin-top: 6px; }
}

/* ---------- faq ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-xl); margin-top: 0; }
.faq-list { }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 0; font-size: 19px; font-weight: 500; cursor: pointer; list-style: none; transition: color .2s ease; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--accent); }
.faq-item[open] .faq-q { color: var(--accent); }
.faq-q .plus { font-family: var(--font-mono); color: var(--accent); flex: none; transition: transform .2s; }
.faq-item[open] .plus { transform: rotate(45deg); }
.faq-a { padding: 0 0 24px; color: var(--muted); font-size: 16px; max-width: 64ch; }
.faq-list.will-animate .faq-item { opacity: 0; transform: translateY(10px); }
.faq-list.in .faq-item {
  opacity: 1; transform: none;
  transition: opacity .5s ease calc(var(--i) * 60ms), transform .5s ease calc(var(--i) * 60ms);
}

/* ---------- footer ---------- */
.footer { padding: var(--s-lg) 0; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-md); flex-wrap: wrap; }
.footer .meta { color: var(--muted-2); font-size: 14px; margin-top: 6px; }

/* ====================================================================
   INTAKE OVERLAY
   ==================================================================== */
.intake {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: none; flex-direction: column;
  opacity: 0; transition: opacity .25s ease;
}
.intake.open { display: flex; opacity: 1; }
.intake-head { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--margin); border-bottom: 1px solid var(--hairline); }
.intake-close { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted-2); text-transform: uppercase; background: transparent; border: 0; cursor: pointer; }
.intake-close:hover { color: var(--ink); }
/* clickable wordmark — doubles as a close/return-home control */
.intake-brand { background: transparent; border: 0; cursor: pointer; color: var(--ink); padding: 0; transition: opacity .15s ease; }
.intake-brand:hover { opacity: .65; }
.intake-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---- glowing progress line: spans the whole top edge, fills as you advance ---- */
.intake-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: color-mix(in srgb, var(--hairline) 70%, transparent);
  z-index: 2; overflow: visible;
}
.intake-progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 55%, transparent),
    var(--accent) 70%, var(--accent-bright));
  box-shadow: 0 0 8px 0 color-mix(in srgb, var(--accent) 70%, transparent),
              0 0 16px 0 color-mix(in srgb, var(--accent) 38%, transparent);
  transition: width .5s cubic-bezier(.4,.8,.3,1);
}
@media (prefers-reduced-motion: reduce) { .intake-progress i { transition: none; box-shadow: none; } }

/* ---- dopamine FX: spark burst on a pressed answer, button pop, progress flare ----
   Particle layer is fixed & non-interactive; particles are spawned/cleaned up by JS.
   Colours follow the theme accent (blue in light, red in dark) so it stays on-brand. */
#spark-layer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.spark {
  position: fixed; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--accent) 65%, transparent);
  animation: sparkFly 640ms cubic-bezier(.15,.85,.4,1) forwards;
  will-change: transform, opacity;
}
.spark--bright { background: var(--accent-bright); box-shadow: 0 0 9px 1px color-mix(in srgb, var(--accent-bright) 70%, transparent); }
.spark--gold   { width: 6px; height: 6px; background: #E0B860; box-shadow: 0 0 8px 1px rgba(224,184,96,.6); }
@keyframes sparkFly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  65%  { opacity: 1; }
  100% { transform: translate(var(--dx,0), var(--dy,0)) scale(.15); opacity: 0; }
}

/* answer button "pop" when pressed — square likert pops a touch harder than the
   full-width choice rows (which stay subtle so they never overflow on mobile). */
@keyframes btnPop     { 0% { transform: scale(1); } 38% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes btnPopSoft { 0% { transform: scale(1); } 38% { transform: scale(1.02); } 100% { transform: scale(1); } }
.likert-btn.is-pop { animation: btnPop 280ms ease; }
.choice.is-pop     { animation: btnPopSoft 280ms ease; transform-origin: center; }

/* progress bar: a touch taller for presence, and a glow flare on each completed step */
.intake-progress { height: 3px; }
.intake-progress i.is-pulse { animation: progPulse 600ms ease; }
@keyframes progPulse {
  0%   { box-shadow: 0 0 8px 0  color-mix(in srgb, var(--accent) 70%, transparent), 0 0 16px 0 color-mix(in srgb, var(--accent) 38%, transparent); }
  35%  { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--accent) 95%, transparent), 0 0 36px 7px color-mix(in srgb, var(--accent) 60%, transparent); }
  100% { box-shadow: 0 0 8px 0  color-mix(in srgb, var(--accent) 70%, transparent), 0 0 16px 0 color-mix(in srgb, var(--accent) 38%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  #spark-layer { display: none; }
  .spark, .likert-btn.is-pop, .choice.is-pop, .intake-progress i.is-pulse { animation: none; }
}

.intake-body { flex: 1; overflow-y: auto; display: flex; align-items: safe center; justify-content: center; padding: var(--s-lg) var(--margin); }
.screen { width: 100%; max-width: 680px; margin: 0 auto; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.screen .qnum { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; }
.screen .qtext { font-size: clamp(24px, 3.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-top: 14px; }
.screen .qsub { color: var(--muted); margin-top: 14px; font-size: 17px; max-width: 56ch; }

/* likert */
.likert { margin-top: var(--s-lg); }
.likert-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.likert-btn {
  aspect-ratio: 1 / 1; border: 1px solid var(--hairline); background: var(--card);
  border-radius: var(--radius, 12px);
  font-family: var(--font-mono); font-size: 15px; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.likert-btn:hover { border-color: var(--ink); color: var(--ink); }
.likert-btn.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.likert-labels { display: flex; justify-content: space-between; margin-top: 12px; }
.likert-labels span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted-2); text-transform: uppercase; }
.likert-labels span:nth-child(2) { color: var(--muted); }

/* choice (multi / single) */
.choices { margin-top: var(--s-lg); display: flex; flex-direction: column; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 18px 20px; border: 1px solid var(--hairline); background: var(--card);
  border-radius: var(--radius, 12px);
  font-size: 17px; transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--ink); }
.choice .box { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--muted-2); display: grid; place-items: center; }
.choice.sel { border-color: var(--accent); }
.choice.sel .box { border-color: var(--accent); background: var(--accent); }
.choice.sel .box::after { content: ""; width: 9px; height: 5px; border-left: 1.5px solid var(--on-accent); border-bottom: 1.5px solid var(--on-accent); transform: rotate(-45deg) translateY(-1px); }
.choice.single .box { border-radius: 0; }

/* email / field */
.field { margin-top: var(--s-lg); }
.field label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.field input {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display); font-size: 22px; color: var(--ink); padding: 10px 2px; border-radius: 0;
}
.field input:focus { outline: none; border-bottom-color: var(--field-focus); }
.field input::placeholder { color: var(--muted-2); }
.field .note { font-size: 13px; color: var(--muted-2); margin-top: 12px; }
.consent { margin-top: var(--s-md); display: flex; flex-direction: column; gap: 12px; }
.consent-row { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.consent-row input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--accent); }
.inline-link { color: var(--accent); text-decoration: underline; }

.intake-foot { padding: 20px var(--margin); border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.back-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.back-link:hover { color: var(--ink); }
.back-link[hidden] { visibility: hidden; }

/* result */
.result .band { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.result .band-name { font-size: clamp(32px, 5vw, 52px); font-weight: 700; letter-spacing: -0.03em; margin-top: 10px; }
.result .lead-driver { margin-top: var(--s-md); font-size: 18px; color: var(--muted); max-width: 58ch; }
.result .driver-tag { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--chip-bg); color: var(--chip-ink); padding: 6px 12px; margin-top: var(--s-md); }
.result .what-next { margin-top: var(--s-lg); border-top: 1px solid var(--hairline); padding-top: var(--s-md); }
.result .what-next p { color: var(--muted); max-width: 58ch; }
.result .cta-row { margin-top: var(--s-lg); }
.result .screen-disclaimer { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: var(--s-sm); }

/* ---- result v2: severity ring + elaborated condition ---- */
.result.sev-low  { --sev: #8C857A; }   /* low concern — neutral grey */
.result.sev-mod  { --sev: #C0463A; }   /* moderate — brick */
.result.sev-high { --sev: #A52121; }   /* high — alarm red */
.result .res-head { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 4px; }
.result .ring { position: relative; flex: none; width: 150px; height: 150px; }
.result .ring svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.result .ring .track { fill: none; stroke: var(--hairline); stroke-width: 9; }
.result .ring .prog { fill: none; stroke: var(--sev); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 408; stroke-dashoffset: 408; transition: stroke-dashoffset 1s ease; }
.result .ring .ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.result .ring .ring-num b { font-family: var(--font-serif); font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.result .ring .ring-num span { font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); margin-top: 4px; }
.result .res-band .band-name { color: var(--sev); font-family: var(--font-serif); font-size: clamp(30px, 5vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-top: 6px; }
.result .res-interp { margin-top: 26px; font-size: 18px; line-height: 1.6; color: var(--ink); max-width: 60ch; }
.result .res-aside { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 58ch; }
.result .res-pattern { margin-top: 28px; border-top: 1px solid var(--hairline); padding-top: 22px; }
.result .res-pattern h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 16px; }
.result .res-pattern ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.result .res-pattern li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; }
.result .res-pattern .pc { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sev); white-space: nowrap; }
.result .res-pattern .pd { color: var(--muted); font-size: 16px; line-height: 1.5; }
.result .res-why { margin-top: 26px; border-left: 2px solid var(--sev); padding: 4px 0 4px 18px; }
.result .res-why p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 58ch; margin: 0; }
.result .res-why strong { color: var(--ink); }
.result .res-next { margin-top: 26px; }
.result .res-next p { color: var(--muted); font-size: 17px; max-width: 58ch; }
@media (prefers-reduced-motion: reduce) { .result .ring .prog { transition: none; } }

/* ---------- gut-check (interactive self-diagnosis) ---------- */
.gutcheck { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s-xl); align-items: start; }
.gutcheck-intro .eyebrow { display: block; margin-bottom: var(--s-md); }
.gutcheck-intro .headline { margin-bottom: var(--s-md); }
.gutcheck-intro .body { max-width: 40ch; }

.gutcheck-tally { margin-top: var(--s-lg); display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; }
.tally-num { font-family: var(--font-serif); font-size: 60px; font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.tally-of { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.04em; color: var(--muted-2); }
.tally-msg { flex-basis: 100%; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); transition: color .2s ease; }
.gutcheck-tally[data-on] .tally-msg { color: var(--accent); }

.checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.check-item {
  width: 100%; display: flex; align-items: center; gap: 18px; text-align: left;
  background: var(--card); border: 1px solid var(--hairline); border-left: 3px solid var(--hairline);
  padding: 20px 22px; border-radius: var(--radius, 12px); color: var(--muted);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.check-item:hover { border-color: var(--ink); transform: translateX(3px); }
.check-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check-box {
  flex: none; width: 22px; height: 22px; border: 1.5px solid var(--muted-2);
  position: relative; transition: background .18s ease, border-color .18s ease;
}
.check-item:hover .check-box { border-color: var(--ink); }
.check-box::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid var(--on-accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform .15s ease;
}
.check-text { flex: 1; font-family: var(--font-display); font-size: 18px; line-height: 1.3; }
.check-num { flex: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted-2); transition: color .18s ease; }

.check-item[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  border-left-color: var(--accent); color: var(--ink);
}
.check-item[aria-pressed="true"] .check-box { background: var(--accent); border-color: var(--accent); }
.check-item[aria-pressed="true"] .check-box::after { transform: rotate(45deg) scale(1); }
.check-item[aria-pressed="true"] .check-num { color: var(--accent); }

.checklist.will-animate li { opacity: 0; transform: translateY(12px); }
.checklist.in li { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * 70ms); }

/* ====================================================================
   EFFECTS & MOTION — animated aurora atmosphere, frosted glass, blur-in
   reveals, hero load-in, hover micro-interactions. Theme-aware throughout.
   ==================================================================== */

/* ---- aurora: slow drifting glow blobs behind everything ----
   NOTE: deliberately NO `filter: blur()` — large blur on a fixed/composited
   layer renders as a flat GRAY BOX on iOS Safari. The radial gradients are
   soft on their own (multi-stop, fading within-hue to avoid a gray midtone),
   so we get the same look without the bug. Intensity via --aurora-opacity. */
/* VERTICAL FLOW glow. One document-tall layer (absolute → anchored to the page,
   so it scrolls WITH the content and never smears across seams like the old
   `fixed` version did). A column of overlapping soft glows runs top→bottom and
   meanders only gently left↔right (≈42–58%), so it reads as one continuous
   vertical flow with very subtle horizontal change — not chopped per-section.
   Brightest at the hero (top) and the CTA/footer (bottom). Colour = --accent. */
.aurora {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: hidden;
  opacity: var(--aurora-opacity, 0.5);
  background:
    radial-gradient(46vmax 34vmax at 43% 5%,   color-mix(in srgb, var(--accent) 72%, transparent), transparent 62%),
    radial-gradient(40vmax 30vmax at 57% 19%,  color-mix(in srgb, var(--accent) 36%, transparent), transparent 64%),
    radial-gradient(44vmax 32vmax at 44% 34%,  color-mix(in srgb, var(--accent) 32%, transparent), transparent 64%),
    radial-gradient(40vmax 30vmax at 56% 50%,  color-mix(in srgb, var(--accent) 30%, transparent), transparent 64%),
    radial-gradient(44vmax 32vmax at 45% 66%,  color-mix(in srgb, var(--accent) 32%, transparent), transparent 64%),
    radial-gradient(40vmax 30vmax at 57% 82%,  color-mix(in srgb, var(--accent) 38%, transparent), transparent 64%),
    radial-gradient(50vmax 38vmax at 50% 99%,  color-mix(in srgb, var(--accent) 58%, transparent), transparent 62%);
  background-repeat: no-repeat;
}
.aurora span { display: none; }  /* flow now lives on the .aurora background itself */
@keyframes drift-a { to { transform: translate(20vw, 12vh) scale(1.2); } }
@keyframes drift-b { to { transform: translate(-16vw, -10vh) scale(1.12); } }
@keyframes drift-c { to { transform: translate(-12vw, 16vh) scale(1.28); } }

/* lift all real content above the aurora. NOTE: topbar is intentionally NOT
   listed here — it keeps its own `position: sticky` (z-index:40) so it stays
   pinned to the top of every section. Forcing it relative here would let it
   scroll away. */
main, .footer { position: relative; z-index: 1; }
.hero { position: relative; }


/* ---- frosted glass: panels + key cards refract the aurora behind them ----
   Panel tint lives on a ::before layer whose top & bottom edges are FEATHERED
   to transparent, so the tinted band fades into the surrounding canvas instead
   of butting against it with a hard line. Content stays fully crisp (it's not
   in the ::before). The feather sits in the section's padding zone, well clear
   of the text. */
/* Sectional gray bands REMOVED — they chopped the page into chunks and blocked
   the vertical glow flow. Sections now flow on the clean canvas with the glow
   running through them; local containment comes from the inner cards (checklist
   items, pricing card), not a full-section band. */
.section--panel { position: relative; }
.section--panel > * { position: relative; z-index: 1; }
.price-card {
  background: color-mix(in srgb, var(--card) var(--glass), transparent);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}
.check-item {
  background: color-mix(in srgb, var(--card) var(--glass-2), transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---- hero copy uses the same scroll-reveal as everything else, so it
   replays whenever the hero (re)enters view — not just on first load ---- */
.hero .lead.r-in    { transition-delay: .10s; }
.hero .cta-row.r-in { transition-delay: .20s; }

/* ---- generic blur-in reveal (JS adds .r-pre then .r-in on scroll) ---- */
/* NOTE: no `filter: blur()` here — it gray-boxes on iOS Safari. Fade + rise only. */
.r-pre { opacity: 0; transform: translateY(24px); }
.r-in  {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}

/* ---- richer hover micro-interactions ---- */
.btn--primary {
  transition: background .18s ease, transform .2s cubic-bezier(.2,.7,.2,1),
              box-shadow .25s ease;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 42%, transparent);
}
.price-card { transition: border-color .2s ease, transform .35s cubic-bezier(.2,.7,.2,1),
              opacity .5s ease, box-shadow .35s ease; }
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ---- accessibility: no motion, no blur-in, quiet aurora ---- */
@media (prefers-reduced-motion: reduce) {
  .aurora span { animation: none !important; }
  .r-pre { opacity: 1; transform: none; filter: none; }
}

/* ---- side scroll-spy: calm section ticks on the right edge ---- */
.spynav {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 16px; align-items: flex-end;
}
.spynav__dot { position: relative; display: block; padding: 5px 0; cursor: pointer; }
.spynav__line {
  display: block; width: 16px; height: 2px; margin-left: auto;
  background: var(--muted-2); opacity: .45;
  transition: width .32s cubic-bezier(.2,.7,.2,1), background .25s ease, opacity .25s ease;
}
.spynav__dot:hover .spynav__line { width: 30px; opacity: 1; }
.spynav__dot.is-active .spynav__line { width: 34px; opacity: 1; background: var(--accent); }
.spynav__label {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%) translateX(6px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .25s ease, transform .25s ease, color .25s ease;
}
.spynav__dot:hover .spynav__label { opacity: 1; transform: translateY(-50%); color: var(--ink); }
.spynav__dot.is-active .spynav__label { color: var(--accent); }
@media (max-width: 980px) { .spynav { display: none; } }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  :root { --margin: 24px; }
  .topbar nav a { display: none; }
  .gutcheck { grid-template-columns: 1fr; gap: var(--s-lg); }
  .gutcheck-intro .body { max-width: none; }
  .check-text { font-size: 16px; }
  .split, .pricing-grid, .faq-grid { grid-template-columns: 1fr; gap: var(--s-lg); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feature { padding: var(--s-md); }
  .startflow { grid-template-columns: 1fr; gap: var(--s-md); border-top: none; }
  .startstep { border-top: 2px solid var(--accent); padding-top: var(--s-md); }
  .likert-row { gap: 6px; }
  .likert-btn { font-size: 13px; }
}
@media (max-width: 560px) {
  .features-grid { grid-template-columns: 1fr; }
}

/* ====================================================================
   CONTINUOUS FLOW — no scroll-snap, no forced full-screen panels. Sections
   flow into one another with generous breathing room and reveal (fade/slide)
   as they enter view, so the page reads as one smooth scroll instead of
   discrete screens. Buttery native scrolling on phone; topbar always visible.
   The hero alone keeps full-viewport presence as the opening statement. */
html {
  scroll-padding-top: 76px;            /* in-page anchor jumps clear the sticky topbar */
}
.hero {
  min-height: 100vh;
  min-height: 100dvh;                  /* mobile: track the dynamic viewport (URL bar) */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* sections keep their existing .section vertical rhythm (var(--s-xl) padding) */