/* ─── Tokens (from DESIGN.md) ───────────────────────────────────────────── */

:root {
  --cream: #FAF8F5;
  --surface: #FFFFFF;
  --surface-tint: #F1ECE3;
  --border: #E6E2DC;
  --border-light: #EFEBE4;

  --ink: #1E2229;
  --ink-secondary: #57534E;
  --ink-muted: #8A8478;

  --teal: #0F766E;
  --teal-light: #14B8A6;
  --teal-dark: #0B5A54;
  --teal-glow: rgba(15, 118, 110, .12);

  --persimmon: #FF6B00;
  --persimmon-light: #FF8C42;
  --persimmon-dark: #BC4F00;
  --persimmon-glow: rgba(255, 107, 0, .12);

  --harbor: #0C5A7A;
  --harbor-glow: rgba(12, 90, 122, .12);
  --emerald: #0D9467;
  --emerald-glow: rgba(13, 148, 103, .12);
  --rose: #DC2626;
  --rose-glow: rgba(220, 38, 38, .12);
  --violet: #6D28D9;
  --violet-glow: rgba(109, 40, 217, .12);
  --ochre: #92400E;
  --ochre-glow: rgba(146, 64, 14, .12);

  --persimmon-a30: rgba(255, 107, 0, .3);
  --persimmon-a40: rgba(255, 107, 0, .4);
  --persimmon-a50: rgba(255, 107, 0, .5);

  /* Text color for filled buttons whose background IS persimmon/teal/ochre.
     Light theme's persimmon/teal are dark enough that white text is fine
     (see below); dark theme's brighter "electric" versions are not — see
     the dark override. */
  --btn-fill-text: #fff;

  /* MVA card gradient end-stops (accent -> near-black), pre-computed per
     theme with the same 40%-toward-#1E2229 lerp the app itself runs at
     paint time — see the dark overrides below for the dark-theme values. */
  --mva-teal-deep: #123b39;
  --mva-harbor-deep: #0b2b3a;
  --mva-violet-deep: #2c1259;

  --header-bg: rgba(250,248,245,.85);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1160px;
  --r-control: 10px;
  --r-card: 14px;
  --r-large: 18px;
  --r-pill: 999px;

  --sp-tight: 72px;
  --sp-base: 88px;
  --sp-major: 104px;

  --shadow-card: 0 1px 2px rgba(30,34,41,.04), 0 10px 24px -12px rgba(30,34,41,.12);
  --shadow-lift: 0 4px 10px rgba(30,34,41,.06), 0 20px 40px -16px rgba(30,34,41,.18);

  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Flutter's dark theme ("Deep obsidian" / High Contrast) from theme.dart's
   AppColors.dark palette. Interactive accent is cyan (not teal), the pop
   accent is electric orange rather than persimmon, and "teal" (the field
   name) is actually a light blue in this theme. */
:root[data-theme="dark"] {
  --cream: #0B0F19;
  /* Dark theme's persimmon/teal/ochre are bright "electric" fills (per
     DESIGN.md) — white text on them measured as low as 1.8:1 / 2.3:1
     contrast (WCAG AA needs 4.5:1). Near-black text on these same bright
     fills reads correctly in both directions instead. */
  --btn-fill-text: #0B0F19;
  --surface: #111622;
  --surface-tint: #171E2B;
  --border: #1E2636;
  --border-light: #283245;

  --ink: #E2E8F0;
  --ink-secondary: #94A3B8;
  --ink-muted: #76869D;

  --teal: #00D2FF;
  --teal-light: #66E5FF;
  --teal-dark: #66E5FF;
  --teal-glow: rgba(0, 210, 255, .2);

  --persimmon: #FF9100;
  --persimmon-light: #FFB157;
  --persimmon-dark: #FFB157;
  --persimmon-glow: rgba(255, 145, 0, .2);
  --persimmon-a30: rgba(255, 145, 0, .3);
  --persimmon-a40: rgba(255, 145, 0, .4);
  --persimmon-a50: rgba(255, 145, 0, .5);

  --harbor: #60A5FA;
  --harbor-glow: rgba(96, 165, 250, .2);
  --emerald: #4ADE80;
  --emerald-glow: rgba(74, 222, 128, .2);
  --rose: #FB7185;
  --rose-glow: rgba(251, 113, 133, .2);
  --violet: #C4B5FD;
  --violet-glow: rgba(196, 181, 253, .2);
  --ochre: #FBBF24;
  --ochre-glow: rgba(251, 191, 36, .2);

  --mva-teal-deep: #0c8ca9;
  --mva-harbor-deep: #4671a6;
  --mva-violet-deep: #827aa8;

  --header-bg: rgba(11,15,25,.85);

  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 24px -12px rgba(0,0,0,.4);
  --shadow-lift: 0 4px 10px rgba(0,0,0,.35), 0 20px 40px -16px rgba(0,0,0,.5);
}


/* ─── Reset & base ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--teal); color: var(--btn-fill-text); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; color: var(--ink-secondary); max-width: 68ch; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--teal); color: var(--btn-fill-text); padding: 12px 20px; z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ─── Scroll reveal (vanilla, IntersectionObserver-driven) ─────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-reveal), transform .7s var(--ease-reveal);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Blur-focus entrance — intentionally different from [data-reveal]'s plain
   fade-up. Scoped to Personas' heading/lede only, as the landing spot for
   the hero's scroll-exit moment (see gsap-peak.js's heroScrollExit); do not
   apply this elsewhere without deliberately deciding to, since every other
   section on the page uses the fade-up above on purpose. */
[data-reveal-blur] {
  opacity: 0;
  filter: blur(8px);
  transition: opacity .6s var(--ease-reveal), filter .6s var(--ease-reveal);
}
[data-reveal-blur].is-visible { opacity: 1; filter: blur(0); }

/* ─── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--r-control);
  font-family: var(--font-body); font-weight: 600; font-size: 15px; white-space: nowrap;
  border: none; cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
/* Flutter's shared _primaryBtn helper defaults to AppColors.gold (persimmon)
   for every top-level conversion CTA (hero, quiz start, nav "Get Started
   Free", pricing "Get Started Free") — it's the deliberate ~10% "addictive
   pop" accent, not the interactive teal accent. */
.btn-primary { background: var(--persimmon); color: var(--btn-fill-text); box-shadow: var(--shadow-card); }
.btn-primary:hover { background: var(--persimmon-dark); transform: translateY(-1px); box-shadow: var(--shadow-lift); }

/* A handful of dialog/sheet submit buttons explicitly opt OUT of that
   default and use a plain FilledButton with AppColors.primary (teal)
   instead: Register Interest submit + its "Done", the Contact form submit,
   and Cookie Preferences' "Save Preferences". */
.btn-teal { background: var(--teal); color: var(--btn-fill-text); box-shadow: var(--shadow-card); }
.btn-teal:hover { background: var(--teal-dark); transform: translateY(-1px); box-shadow: var(--shadow-lift); }

.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal-dark); }
/* For Schools' outline button carries its own accent (AppColors.teal, the
   harbor blue field) rather than the shared neutral outline style. */
.btn-ghost--harbor { color: var(--harbor); border-color: rgba(12,90,122,.4); }
.btn-ghost--harbor:hover { border-color: var(--harbor); color: var(--harbor); }

/* The pricing page's own "Join Priority Waitlist" CTA is just _primaryBtn
   with an explicit gold accent — flat fill, same as .btn-primary, not a
   gradient. Only the pop-up waitlist DIALOG's button (a separate, bespoke
   widget) actually uses a gold->amber gradient — see .btn-waitlist-cta. */
.btn-gold { background: var(--persimmon); color: var(--btn-fill-text); box-shadow: var(--shadow-card); }
.btn-gold:hover { background: var(--persimmon-dark); transform: translateY(-1px); box-shadow: var(--shadow-lift); }

.btn-waitlist-cta { background: linear-gradient(135deg, var(--persimmon), var(--ochre)); color: var(--btn-fill-text); box-shadow: var(--shadow-card); }
.btn-waitlist-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }

.btn-lg { padding: 15px 28px; font-size: 16px; }

.link-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--ink-muted); font-size: 12.5px; font-weight: 600; font-family: var(--font-body);
}
.link-btn:hover { color: var(--ink); }

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--btn-fill-text) 40%, transparent); border-top-color: var(--btn-fill-text);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Header ────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 3px; z-index: 200;
  background: var(--header-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
/* Flutter's nav bar has no max-width cap at all — it's a Container padded
   24px against the full Scaffold width, unlike the content sections below
   it which sit inside the narrower 1160px .wrap. Capping it to the same
   1160px here left too little room for brand + all 7 links + the theme
   toggle + Sign In + Get Started Free, so "How It Works" (the widest link)
   got flex-shrunk narrower than its own text and wrapped onto two lines
   directly against the logo. */
.site-header .wrap { max-width: none; }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand { flex-shrink: 0; }
.primary-nav a:not(.btn) { white-space: nowrap; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink); }
.brand img { border-radius: 8px; }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; padding: 0; }
.nav-toggle span { display: block; height: 2px; width: 22px; background: var(--ink); margin: 0 auto; transition: transform .2s var(--ease), opacity .2s var(--ease); }

.primary-nav { display: flex; align-items: center; gap: 26px; }
.primary-nav a:not(.btn) { font-size: 14px; font-weight: 500; color: var(--ink-secondary); transition: color .15s var(--ease); }
.primary-nav a:not(.btn):hover { color: var(--teal-dark); }
.nav-cta-btn { padding: 9px 20px; font-size: 14.5px; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin: 0 -4px;
  background: none; border: none; border-radius: 50%; color: var(--ink-secondary); cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.theme-toggle:hover { background: var(--surface-tint); color: var(--ink); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Thin persimmon fill across the very top, tracking scroll 0%-100%. */
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--border); z-index: 1000; }
.scroll-progress-fill { height: 100%; width: 0%; background: var(--persimmon); }

/* ─── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  padding: 64px 0 0;
  background: radial-gradient(120% 100% at 15% 0%, var(--teal-glow), transparent 55%);
}
/* Flutter splits the hero Row 7:13 (headline:screenshot) via Expanded flex
   factors, not an even 50/50 — the screenshot gets ~65% of the row, not
   half, which is why it read as too small relative to the text column. */
.hero-grid { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,13fr); gap: 48px; align-items: center; }

.eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 16px; }
.eyebrow.center { text-align: center; }

/* Flutter sizes this in three explicit tiers (32/38/46px), not a fluid
   clamp — mine topped out at 54.4px, ~18% larger than Flutter's 46px, which
   pushed "Your university profile is being" (the segment before the hard
   line break) to wrap across three lines instead of the intended two.
   Tracking also tightens per tier (-0.6/-1.0/-1.4px, absolute not em-based)
   matching _Type.displayTracking exactly. */
.hero-headline {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.6px;
  margin-bottom: 18px;
}
@media (min-width: 640px) {
  .hero-headline { font-size: 2.375rem; letter-spacing: -1px; }
}
@media (min-width: 900px) {
  .hero-headline { font-size: 2.875rem; letter-spacing: -1.4px; }
}
/* Progressive-assembly words: hidden until data-assemble's JS reveals them,
   with letter-spacing easing loose -> tight as each settles (typography
   floor rule: tracking tightens as size increases, applied as the entrance
   itself rather than just a static value). */
.hero-headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  letter-spacing: 0.04em;
  filter: blur(2px);
  transition: opacity .6s var(--ease-reveal), transform .6s var(--ease-reveal), letter-spacing .6s var(--ease-reveal), filter .5s var(--ease-reveal);
}
.hero-headline .word.is-in { opacity: 1; transform: translateY(0); letter-spacing: -0.01em; filter: blur(0); }

.hero-italic {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--ink-secondary);
  margin-bottom: 18px;
}
.hero-sub { font-size: 17px; line-height: 1.7; max-width: 46ch; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }

.trust-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 500; color: var(--ink-secondary); max-width: 100%;
}
.trust-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); flex-shrink: 0; }

/* ─── Signature move: the "VERIFIED" ink-stamp motif ───────────────────────
   A small decorative accent, not a layout element — absolutely positioned
   so it never affects the size/flow of the badge or line it's attached to.
   Lands once on scroll-into-view via gsap-peak.js (scale-overshoot-then-
   settle + a slight rotation + a fading radial ink-bleed), reusing the
   persimmon accent as the "ink". */
.mini-stamp {
  position: absolute; top: -13px; right: -32px; width: 32px; height: 32px;
  opacity: 0; transform: scale(.4) rotate(-14deg); color: var(--persimmon);
  pointer-events: none;
}
.mini-stamp::before {
  content: ''; position: absolute; inset: -45%;
  background: radial-gradient(circle, var(--persimmon-glow), transparent 65%);
  opacity: 0; border-radius: 50%;
}
.mini-stamp.is-stamped::before { animation: mini-ink-bleed .4s var(--ease-reveal) forwards; }
@keyframes mini-ink-bleed { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }
.mini-stamp svg { position: absolute; inset: 0; }
.mini-stamp svg circle { fill: none; stroke: currentColor; }
.mini-stamp svg circle:first-child { stroke-width: 2.5; }
.mini-stamp svg circle:last-child { stroke-width: 1.4; opacity: .7; }
.mini-stamp-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; }

@media (max-width: 480px) {
  .mini-stamp { top: -10px; right: -12px; width: 26px; height: 26px; }
  .mini-stamp-check { font-size: 11px; }
}

.browser-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lift); background: var(--surface); }
.browser-chrome { height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.chrome-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.chrome-dot--rose { background: var(--rose); }
.chrome-dot--ochre { background: var(--ochre); }
.chrome-dot--emerald { background: var(--emerald); }
/* Flutter frames the screenshot in a fixed 16:10 window (AspectRatio +
   BoxFit.contain) regardless of the source image's own proportions, rather
   than letting the raw asset dictate the frame's shape. */
.browser-screenshot { aspect-ratio: 16 / 10; background: var(--surface); }
.browser-screenshot img { width: 100%; height: 100%; object-fit: contain; }

/* ─── Hero stats row (real counts from the data files, counted up once on
   scroll into view — matches _HeroStatsRow/_CountUpStat exactly: no "+"
   rounding, no pinning, no stamps) ────────────────────────────────────── */
.hero-stats { display: flex; align-items: stretch; gap: 28px; margin-top: 28px; }
.hero-stat-block { display: flex; flex-direction: column; }
.hero-stat-divider { width: 1px; background: var(--border); flex-shrink: 0; }
.hero-stat-num {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: 38px; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-stat-label { margin-top: 6px; font-size: 13px; color: var(--ink-muted); }

@media (max-width: 640px) {
  .hero-stats { flex-direction: column; gap: 18px; }
  .hero-stat-divider { display: none; }
}

/* ═══ Hero quiz ═══════════════════════════════════════════════════════════ */

.quiz-section { padding: 56px 0 var(--sp-tight); }
.quiz-wrap { display: flex; justify-content: center; }
.quiz-card {
  width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-large); box-shadow: var(--shadow-lift); padding: 36px 32px;
}
.quiz-stage { text-align: center; }
.quiz-icon {
  width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 14px;
  background: var(--teal-glow); color: var(--teal); display: flex; align-items: center; justify-content: center;
}
.quiz-stage h3 { font-size: 22px; margin-bottom: 8px; }
.quiz-stage > p { font-size: 14px; line-height: 1.55; max-width: 42ch; margin: 0 auto 22px; }

.quiz-progress-label { font-size: 11.5px; font-weight: 600; color: var(--ink-muted); letter-spacing: .05em; text-align: left; margin-bottom: 8px; }
.quiz-progress-track { height: 4px; border-radius: 3px; background: var(--border); overflow: hidden; margin-bottom: 22px; }
.quiz-progress-fill { height: 100%; background: var(--teal); border-radius: 3px; transition: width .3s var(--ease); width: 0; }
.quiz-question { font-size: 19px; text-align: left; margin-bottom: 18px; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; }

.quiz-option {
  text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control);
  padding: 14px 16px; font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--ink);
  cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.quiz-option:hover, .quiz-option:focus-visible { border-color: var(--persimmon); transform: scale(1.015); }
.quiz-option svg { flex-shrink: 0; color: var(--ink-muted); transition: color .18s var(--ease); }
.quiz-option:hover svg { color: var(--persimmon); }

.quiz-result-kicker { font-size: 10.5px; font-weight: 700; color: var(--ink-muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.quiz-result-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.quiz-result-name { font-size: 26px; margin-bottom: 10px; }
.quiz-result-desc { font-size: 14px; line-height: 1.7; max-width: 42ch; margin: 0 auto 26px; }
.quiz-retake {
  display: block; margin: 14px auto 0; background: none; border: none; cursor: pointer;
  color: var(--ink-muted); font-size: 12.5px; font-weight: 600; font-family: var(--font-body);
}
.quiz-retake:hover { color: var(--ink); }

/* ─── Sections ──────────────────────────────────────────────────────────── */

.section { padding: var(--sp-base) 0; }
.section-tint { background: var(--surface-tint); }
.section-title { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 16px; }
.section-title.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-lede { font-size: 16px; max-width: 58ch; margin: 0 auto 52px; }
.section-lede.center { text-align: center; }

/* ─── Personas ──────────────────────────────────────────────────────────── */

.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.persona-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 26px; box-shadow: var(--shadow-card); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  position: relative;
}
.persona-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.persona-card[data-accent="teal"]:hover { border-color: rgba(15,118,110,.4); }
.persona-card[data-accent="harbor"]:hover { border-color: rgba(12,90,122,.4); }
.persona-card[data-accent="violet"]:hover { border-color: rgba(109,40,217,.4); }

.persona-icon {
  width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; position: relative;
}
.persona-card[data-accent="teal"] .persona-icon { background: var(--teal-glow); color: var(--teal); }
.persona-card[data-accent="harbor"] .persona-icon { background: var(--harbor-glow); color: var(--harbor); }
.persona-card[data-accent="violet"] .persona-icon { background: var(--violet-glow); color: var(--violet); }

.persona-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.persona-card[data-accent="teal"] .persona-label { color: var(--teal); }
.persona-card[data-accent="harbor"] .persona-label { color: var(--harbor); }
.persona-card[data-accent="violet"] .persona-label { color: var(--violet); }
.persona-card h3 { font-size: 18px; margin-bottom: 10px; }
.persona-card p { font-size: 13.5px; line-height: 1.65; margin-bottom: 18px; }
.persona-card > a { font-size: 13px; font-weight: 600; }
.persona-card[data-accent="teal"] > a { color: var(--teal); }
.persona-card[data-accent="harbor"] > a { color: var(--harbor); }
.persona-card[data-accent="violet"] > a { color: var(--violet); }

/* Rocket launch flourish — plays once on card hover */
.persona-icon--rocket svg { transition: transform .55s var(--ease-reveal); }
.persona-card:hover .persona-icon--rocket svg { transform: translateY(-3px) rotate(-10deg); }
.persona-icon-stars { position: absolute; inset: 0; pointer-events: none; }
.persona-icon-stars i {
  position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 50%;
  background: var(--persimmon); opacity: 0;
}
.persona-card:hover .persona-icon-stars i { animation: star-drift 0.7s var(--ease-reveal) forwards; }
.persona-icon-stars i:nth-child(1) { animation-delay: .02s; --dx: -18px; --dy: -6px; }
.persona-icon-stars i:nth-child(2) { animation-delay: .08s; --dx: 16px; --dy: -14px; }
.persona-icon-stars i:nth-child(3) { animation-delay: .14s; --dx: 20px; --dy: 8px; }
.persona-icon-stars i:nth-child(4) { animation-delay: .05s; --dx: -14px; --dy: 14px; }
.persona-icon-stars i:nth-child(5) { animation-delay: .18s; --dx: 4px; --dy: -20px; }
@keyframes star-drift {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); }
}

/* ─── Founder ───────────────────────────────────────────────────────────── */

/* Flutter seats this in a fixed 200x200 circle (ClipOval), not a portrait
   rectangle scaled from the source photo's own aspect ratio. */
.founder-grid { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 48px; align-items: center; }
.founder-photo { border-radius: 50%; border: 3px solid var(--border-light); box-shadow: var(--shadow-card); object-fit: cover; width: 200px; height: 200px; }
.founder-copy p { font-size: 15px; line-height: 1.75; }

/* ─── Problem ───────────────────────────────────────────────────────────── */

.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; }
/* Flutter differentiates these three cards by a plain "01/02/03" number, not
   by color — every card uses the same single accent (AppColors.primary). */
.problem-card { position: relative; }
.problem-number {
  display: block; font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: .15em; color: var(--teal); margin-bottom: 12px;
}
.problem-mark { width: 28px; height: 2px; background: var(--teal); margin-bottom: 14px; }
.problem-card h3 { font-size: 18px; margin-bottom: 12px; }
.problem-card p { font-size: 14px; line-height: 1.7; }

/* ─── Feature grid (Solution) ───────────────────────────────────────────── */

/* Flutter lays these out as two rows of two EQUAL-width cards each
   (IntrinsicHeight + Expanded), not a 3-column grid with one card spanning
   two columns — that spanning "wide" card was a creative addition that made
   one card visibly rectangular next to three square-ish ones. */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.feature-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 26px; box-shadow: var(--shadow-card); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.feature-icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.feature-icon[data-accent="violet"] { background: var(--violet-glow); color: var(--violet); }
.feature-icon[data-accent="ochre"] { background: var(--ochre-glow); color: var(--ochre); }
.feature-icon[data-accent="harbor"] { background: var(--harbor-glow); color: var(--harbor); }
.feature-icon[data-accent="emerald"] { background: var(--emerald-glow); color: var(--emerald); }
.feature-card h3 { font-size: 16px; margin-bottom: 8px; }
.feature-card p { font-size: 13px; line-height: 1.65; }

/* Globe spin — one smooth continuous rotation on hover */
.feature-icon--globe svg { transition: transform .65s cubic-bezier(0.65,0,0.35,1); }
.feature-card:hover .feature-icon--globe svg { transform: rotate(360deg); }

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ─── Social proof ──────────────────────────────────────────────────────── */

.social-proof-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* This section's only content is the real, verified count — it no longer
   borrows testimonial-card chrome (quote mark, avatar, name/title footer)
   around a quote with no relationship to the product, per the critique:
   a section titled "social proof" should lead with the one thing here
   that actually is proof. Sized up from its old 13px/inline-accent role
   now that it's the section's sole content, not a footnote under a quote. */
.social-proof-line {
  position: relative; display: inline-block; max-width: 52ch; margin-top: 20px;
  font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.5;
}

/* ─── For Schools ───────────────────────────────────────────────────────── */

/* Flutter seats this in a fixed 200x200 square (ClipRRect, radius 14,
   alignment: topCenter), not a tall portrait rectangle. */
.for-schools-grid { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 40px; align-items: start; }
.for-schools-photo { border-radius: var(--r-card); border: 1px solid var(--border); box-shadow: var(--shadow-card); width: 200px; height: 200px; object-fit: cover; object-position: top center; }
.for-schools-copy p { font-size: 15px; line-height: 1.75; margin-bottom: 24px; }

/* ─── Mission / Vision / Approach ───────────────────────────────────────── */

.mission-band { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); margin-bottom: 44px; }
/* Flutter frames this with alignment: Alignment(0, -0.6), not centered —
   biased toward the top so the subject's face/hair stay in frame instead
   of being cropped evenly with the empty desk space below. Alignment's
   -1..1 range maps to object-position's 0%..100% via (v+1)/2, so -0.6 -> 20%. */
.mission-band img { width: 100%; height: 320px; object-fit: cover; object-position: center 20%; }

.mva-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mva-card { border-radius: var(--r-large); padding: 28px; color: #fff; position: relative; overflow: hidden; }
.mva-card[data-accent="teal"] { background: linear-gradient(135deg, var(--teal), var(--mva-teal-deep)); }
.mva-card[data-accent="harbor"] { background: linear-gradient(135deg, var(--harbor), var(--mva-harbor-deep)); }
.mva-card[data-accent="violet"] { background: linear-gradient(135deg, var(--violet), var(--mva-violet-deep)); }

.mva-icon {
  width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.15); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; margin-bottom: 22px;
}
.mva-card h3 { font-size: 18px; margin-bottom: 10px; }
.mva-rule { width: 28px; height: 2px; background: rgba(255,255,255,.9); margin-bottom: 14px; }
.mva-card p { color: rgba(255,255,255,.85); font-size: 13px; line-height: 1.7; }

/* Flag wave (Mission): gentle rotation oscillation, 2-3 cycles, decays to rest */
.mva-card[data-accent="teal"]:hover .mva-icon svg { animation: flag-wave .6s var(--ease); }
@keyframes flag-wave {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(8deg); }
  40% { transform: rotate(-6deg); }
  60% { transform: rotate(4deg); }
  80% { transform: rotate(-2deg); }
}

/* Compass spin (Vision): one fast decisive rotation, decelerate-and-stop */
.mva-card[data-accent="harbor"]:hover .mva-icon svg { animation: compass-spin .5s cubic-bezier(0.215,0.61,0.355,1); }
@keyframes compass-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Fingerprint reveal (Approach): stepped top-to-bottom wipe via clip-path */
.mva-icon--reveal-wrap { position: relative; }
.mva-card[data-accent="violet"]:hover .mva-icon svg { animation: fingerprint-reveal .55s steps(5, end); }
@keyframes fingerprint-reveal {
  0% { clip-path: inset(100% 0 0 0); opacity: .3; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@media (max-width: 760px) {
  .persona-grid, .problem-grid, .mva-grid { grid-template-columns: 1fr; }
  .founder-grid, .for-schools-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .founder-photo, .for-schools-photo { margin: 0 auto; }
}

/* ─── Pricing ───────────────────────────────────────────────────────────── */

.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 760px; margin: 0 auto; }
.pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 28px; box-shadow: var(--shadow-card); }
.pricing-card--pro { border: 1.5px solid var(--persimmon-a50); box-shadow: var(--shadow-lift); }
.pricing-card h3 { font-size: 19px; }
.pricing-heading-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pricing-badge {
  font-size: 8px; font-weight: 700; letter-spacing: .05em; color: var(--persimmon-dark);
  background: var(--persimmon-glow); border: 1px solid var(--persimmon-a30); border-radius: 4px; padding: 3px 8px;
}
.price { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 6px; font-size: 13px; color: var(--ink-muted); }
.price span { font-family: var(--font-display); font-size: 38px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.price-sub { font-size: 12px; color: var(--ink-muted); margin-bottom: 20px; }
.pricing-card hr { border: none; border-top: 1px solid var(--border); margin-bottom: 18px; }
.pricing-list { list-style: none; margin: 0 0 24px; padding: 0; }
.pricing-list li {
  position: relative; padding-left: 24px; margin-bottom: 11px; font-size: 13px; color: var(--ink-muted);
}
.pricing-list li::before { content: '\2013'; position: absolute; left: 0; color: var(--ink-muted); }
.pricing-list li.included { color: var(--ink-secondary); }
.pricing-list li.included::before { content: '\2713'; color: var(--emerald); font-weight: 700; }

@media (max-width: 620px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ─── Contact form ──────────────────────────────────────────────────────── */

/* Flutter's Contact section is a single centered Column (heading, subhead,
   then the form) — not a two-up row. Missing flex-direction here defaulted
   to row, which put the heading and the form side by side. */
.contact-wrap { display: flex; flex-direction: column; align-items: center; }
.contact-wrap .section-title, .contact-wrap .section-lede { margin-bottom: 0; }
.contact-wrap .section-lede { margin-top: 10px; margin-bottom: 32px; }
.form-card, .quiz-card { position: relative; }
.form-card {
  width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-large); box-shadow: var(--shadow-card); padding: 30px;
}
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-secondary); letter-spacing: .02em; margin-bottom: 6px; }
.field-input {
  width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--ink);
  background: var(--surface-tint); border: 1px solid var(--border); border-radius: var(--r-control);
  padding: 12px 14px; margin-bottom: 16px; transition: border-color .15s var(--ease);
}
.field-input:focus { outline: none; border-color: var(--teal); }
textarea.field-input { resize: vertical; min-height: 90px; }

.form-error {
  background: var(--rose-glow); border: 1px solid rgba(220,38,38,.3); color: var(--rose);
  font-size: 12px; padding: 8px 12px; border-radius: 8px; margin-bottom: 14px;
}
.form-footnote { text-align: center; font-size: 12px; color: var(--ink-muted); margin-top: 12px; }

.form-success { text-align: center; }
.success-check {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 20px;
  background: var(--emerald-glow); border: 1px solid rgba(13,148,103,.4); color: var(--emerald);
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
}
.success-check--gold { background: var(--persimmon-glow); border-color: var(--persimmon-a40); color: var(--persimmon); }
.form-success h3 { font-size: 19px; margin-bottom: 10px; }
.form-success p { font-size: 13px; line-height: 1.6; max-width: 40ch; margin: 0 auto 20px; }

/* ─── Footer ────────────────────────────────────────────────────────────── */

.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 48px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand p { font-size: 13px; color: var(--ink-muted); margin-top: 12px; }
.footer-links-title { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-secondary); margin: 0 0 12px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 13.5px; color: var(--ink-muted); transition: color .15s var(--ease); }
.footer-links a:hover { color: var(--teal-dark); }
.footer-copyright { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-muted); padding-top: 28px; margin-top: 12px; border-top: 1px solid var(--border); }

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ─── Dialogs (Register Interest / Waitlist / Cookie Prefs) ────────────────── */

.dialog-overlay {
  position: fixed; inset: 0; z-index: 500; background: rgba(30,34,41,.5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .2s var(--ease);
}
/* The [hidden] attribute's UA-stylesheet display:none is author-overridden
   by the display:flex above (equal specificity, author wins) — without
   this, a "hidden" dialog still lays out full-screen and intercepts clicks
   meant for the page underneath it. */
.dialog-overlay[hidden] { display: none; }
.dialog-overlay.is-open { opacity: 1; }
.dialog-overlay--bottom { align-items: flex-end; }

.dialog {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px; position: relative; box-shadow: var(--shadow-lift);
  transform: scale(.96) translateY(8px); transition: transform .25s var(--ease-reveal);
}
.dialog-overlay.is-open .dialog { transform: scale(1) translateY(0); }
.dialog--gold { border-color: var(--persimmon-a40); }

.dialog-close {
  position: absolute; top: 16px; right: 16px; background: none; border: none; cursor: pointer;
  color: var(--ink-muted); font-size: 16px; width: 32px; height: 32px;
}
.dialog--gold .dialog-close { position: static; margin-left: auto; }
.dialog-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.dialog-header-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dialog-header-icon--gold { background: linear-gradient(135deg, var(--persimmon), var(--ochre)); color: #fff; font-size: 18px; }
.dialog-header h3 { font-size: 16px; }
.dialog-subtitle { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.dialog-subtitle--gold { color: var(--persimmon); font-weight: 600; }
.dialog-lede { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }

.role-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.role-chip {
  font-family: var(--font-body); font-size: 13px; padding: 12px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); color: var(--ink-secondary); cursor: pointer;
  transition: all .15s var(--ease);
}
.role-chip.is-active { background: var(--teal-glow); border-color: var(--teal); color: var(--teal); font-weight: 600; }

.benefits-card { background: var(--persimmon-glow); border: 1px solid var(--persimmon-a30); border-radius: 12px; padding: 14px; }
.benefits-title { font-size: 11px; font-weight: 700; color: var(--persimmon-dark); letter-spacing: .02em; margin-bottom: 10px; }
.benefits-card ul { list-style: none; margin: 0; padding: 0; }
.benefits-card li { position: relative; padding-left: 20px; font-size: 12px; color: var(--ink-secondary); margin-bottom: 6px; line-height: 1.4; }
.benefits-card li::before { content: '\2713'; position: absolute; left: 0; color: var(--persimmon-dark); font-weight: 700; font-size: 11px; }

/* Cookie preferences bottom sheet */
.sheet {
  width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px 20px 0 0; padding: 24px; margin: 0 auto;
  transform: translateY(100%); transition: transform .3s var(--ease-reveal);
}
.dialog-overlay--bottom.is-open .sheet { transform: translateY(0); }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border-light); margin: 0 auto 16px; }
.sheet h3 { font-size: 18px; margin-bottom: 6px; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-tint); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin: 16px 0;
}
.toggle-row strong { font-size: 14px; color: var(--ink); }
.toggle-row p { font-size: 11px; color: var(--ink-muted); margin-top: 3px; line-height: 1.4; }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer;
  transition: background .2s var(--ease);
}
.switch span::before {
  content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #fff;
  border-radius: 50%; transition: transform .2s var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch input:checked + span { background: var(--teal); }
.switch input:checked + span::before { transform: translateX(18px); }
.switch--disabled span { cursor: default; opacity: .7; }

/* ─── Cookie consent banner ─────────────────────────────────────────────── */

.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 400; max-width: 720px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow-lift);
  transform: translateY(140%); transition: transform .4s var(--ease-reveal);
}
.cookie-banner.is-open { transform: translateY(0); }
.cookie-banner-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cookie-banner-inner p { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.5; color: var(--ink-secondary); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cookie-btn {
  height: 42px; padding: 0 18px; border-radius: 12px; font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--ink-secondary);
  transition: all .15s var(--ease);
}
.cookie-btn--amber { border-color: var(--ochre); color: var(--ochre); }
.cookie-btn--rose { border-color: var(--rose); color: var(--rose); }
.cookie-btn--filled { background: var(--teal); border-color: var(--teal); color: var(--btn-fill-text); }
.cookie-btn--filled:hover { background: var(--teal-dark); }

/* ─── Mascot companion ──────────────────────────────────────────────────── */

.mascot-root { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mascot-avatar {
  width: 56px; height: 56px; border-radius: 50%; border: none; background: transparent; cursor: pointer; padding: 0;
  animation: mascot-idle 2.6s ease-in-out infinite alternate;
}
@keyframes mascot-idle { from { transform: translateY(0) scale(1); } to { transform: translateY(-6px) scale(1.04); } }
.mascot-avatar img { width: 100%; height: 100%; }

.mascot-bubble {
  width: 250px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px 12px 14px 16px; box-shadow: var(--shadow-lift); position: relative;
  animation: bubble-in .22s var(--ease-reveal);
}
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.mascot-bubble::after {
  content: ''; position: absolute; right: 22px; bottom: -7px; width: 14px; height: 14px;
  background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
.mascot-bubble-row { display: flex; align-items: flex-start; gap: 8px; }
.mascot-bubble-text { flex: 1; font-size: 13px; color: var(--ink); line-height: 1.4; }
.mascot-bubble-close { background: none; border: none; cursor: pointer; color: var(--ink-muted); font-size: 13px; padding: 2px; }
.mascot-actions { display: flex; gap: 8px; margin-top: 12px; }
.mascot-action-btn {
  flex: 1; font-family: var(--font-body); font-size: 12px; font-weight: 600; padding: 8px 10px;
  border-radius: 10px; cursor: pointer; border: 1px solid transparent; text-align: center;
}
.mascot-action-btn.primary { background: var(--teal); color: var(--btn-fill-text); }
.mascot-action-btn.outline { background: var(--teal-glow); border-color: rgba(15,118,110,.3); color: var(--teal); }
.mascot-action-btn.text { background: none; color: var(--teal); text-decoration: underline; }

.mascot-help-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mascot-help-row {
  display: flex; align-items: center; gap: 10px; background: var(--teal-glow); border: none; border-radius: 10px;
  padding: 9px 10px; cursor: pointer; text-align: left; font-family: var(--font-body);
}
.mascot-help-row svg { color: var(--teal); flex-shrink: 0; }
.mascot-help-row span { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.mascot-help-row .chev { color: var(--ink-muted); }

@media (max-width: 480px) {
  .mascot-bubble { width: 84vw; max-width: 280px; }
}

/* ─── Parallax layers (rAF-driven via script.js) ───────────────────────── */
[data-parallax] { will-change: transform; }

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .persona-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 800px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-sub { max-width: none; }
}

/* Only the desktop hero scroll-exit (heroScrollExit) animates these; hint
   the compositor there and nowhere else. */
@media (min-width: 801px) {
  .hero-copy, .hero-visual { will-change: transform, opacity; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    position: absolute; top: 72px; left: 0; right: 0; background: var(--cream);
    border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 20px; transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .2s var(--ease), opacity .2s var(--ease);
  }
  .primary-nav.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .primary-nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .nav-cta { display: none; }
  .nav-cta-btn { margin-top: 16px; width: 100%; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 620px) {
  .stats-grid { grid-template-columns: 1fr; gap: 36px; }
  .persona-grid { grid-template-columns: 1fr; }
  .section { padding: var(--sp-tight) 0; }
  .quiz-card { padding: 26px 20px; }
}