/* ============================================================
   LearnU — Direction B (Cellular Bright)
   Vanilla CSS, mobile-first.
   See: _Project Brain/SITE PLAN/design-system.md
   ============================================================ */

/* ----- Typography ----------------------------------------------
   Loaded via Adobe Fonts kit in index.html:
   <link rel="stylesheet" href="https://use.typekit.net/akf8fsr.css">

   Adobe-assigned family names + available weights:
   - "ff-real-text-pro"      body         400, 400i, 700, 700i
   - "ff-real-headline-pro"  H1 / H2 / H3 400, 400i, 700, 700i
   - "dunbar-tall"           held, unused 800
   ------------------------------------------------------------- */

/* ----- Design tokens -------------------------------------- */
:root {
  /* Color */
  --ink: #15171A;
  --ink-soft: #2C2C2A;
  --ink-muted: #5F5E5A;
  --cream: #FAF7EF;
  --cream-warm: #ECE3CC;
  --surface: #FFFFFF;
  --green: #8AC44F;
  --green-deep: #27500A;
  --green-tint: #EAF3DE;
  --border-hairline: rgba(21, 23, 26, 0.08);
  /* 0.32 alpha composites to ~3:1 contrast on cream — meets 1.4.11 for UI borders. */
  --border-strong: rgba(21, 23, 26, 0.32);
  /* Solid colors for focus rings — 1.4.11 requires ≥3:1 contrast against adjacent color.
     The previous rgba(39,80,10,0.45) composited to ~2.3:1 on cream and was invisible on ink. */
  --focus-ring: #1A3A05;          /* dark green — ≥10:1 on cream/surface */
  --focus-ring-on-dark: #C7E892;  /* pale green — ≥10:1 on ink/green-deep */
  /* Brand-locked pair — #8AC44F on #27500A passes 4.5:1 by 0.01.
     Do not edit either token without re-running contrast math. */

  /* Type — two-family system loaded via Adobe Fonts kit (see top of file). */
  --font-body:    "ff-real-text-pro",     "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-head:    "ff-real-headline-pro", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-sans:    var(--font-body);
  --font-display: var(--font-head);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Motion */
  --dur-fast: 180ms;
  --dur-base: 220ms;
  --dur-panel: 380ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layout */
  --container-max: 1200px;
  --prose-max: 680px;
  --header-h: 64px;
}

/* ----- Reset / base --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading defaults */
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; }
h1 { letter-spacing: -0.018em; line-height: 1.05; margin: 0; }
h2 { letter-spacing: -0.012em; line-height: 1.15; margin: 0; }
h3 {
  letter-spacing: 0.10em;
  line-height: 1.3;
  text-transform: uppercase;
  font-size: 16px;
  margin: 0;
}
@media (max-width: 640px) { h3 { font-size: 14px; } }

p { margin: 0 0 var(--space-4); }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Prevent the sticky header from obscuring focused elements — WCAG 2.4.11. */
:focus-visible { scroll-margin-top: calc(var(--header-h) + 16px); }

ul { margin: 0; padding: 0; list-style: none; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -10000px;
  top: 12px;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  z-index: 1000;
}
.skip-link:focus { left: 12px; outline: 2px solid var(--focus-ring-on-dark); outline-offset: 2px; }

/* Visually-hidden helper (for screen-reader-only labels) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ----- Typography utilities ------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 var(--space-3);
}
.eyebrow-on-dark { color: var(--green); }

.hl-green { color: var(--green); } /* bright lime — only legible on dark surfaces */
.hl-green-deep { color: var(--green-deep); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: var(--prose-max); }

@media (min-width: 768px) { .container { padding: 0 32px; } }
@media (min-width: 1025px) { .container { padding: 0 64px; } }

/* Section base */
.section {
  padding: var(--space-10) 0;
}
@media (min-width: 1025px) {
  .section { padding: var(--space-12) 0; }
}
.section--cream      { background: var(--cream); }
.section--cream-warm { background: var(--cream-warm); }
.section--surface    { background: var(--surface); }
.section--ink        { background: var(--ink); color: var(--cream); }

/* Default: centered. Use .section-head--left when the head sits in a column
   with side-by-side content beside it (rare — most heads stand alone). */
.section-head {
  max-width: var(--prose-max);
  margin: 0 auto var(--space-8);
  text-align: center;
}
.section-head--left   { text-align: left; }
.section-head--center { text-align: center; } /* kept for explicit-intent callers */
.section h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 var(--space-4);
  color: var(--ink);
}
.section .lede {
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--ink-soft);
  max-width: var(--prose-max);
  margin: 0 0 var(--space-4);
}

/* ----- Header / Nav --------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(250, 247, 239, 0);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 0.5px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(250, 247, 239, 0.92);
  border-bottom-color: var(--border-hairline);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { .nav-inner { padding: 0 32px; } }
@media (min-width: 1025px) { .nav-inner { padding: 0 64px; } }

.nav-logo { display: inline-flex; align-items: center; position: relative; }
.nav-logo img { height: 28px; width: auto; transition: opacity var(--dur-base) var(--ease-out); }
.nav-logo .logo-on-light { position: absolute; left: 0; top: 0; opacity: 0; }
.site-header.is-scrolled .nav-logo .logo-on-dark  { opacity: 0; }
.site-header.is-scrolled .nav-logo .logo-on-light { opacity: 1; }

.nav-links {
  display: none;
  gap: var(--space-6);
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
}
@media (min-width: 1025px) { .nav-links { display: inline-flex; } }
.nav-links a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--cream);
  opacity: 0.92;
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { opacity: 1; }
.site-header.is-scrolled .nav-links a { color: var(--ink-soft); }
.site-header.is-scrolled .nav-links a:hover { color: var(--green-deep); }

/* ----- Mobile nav: hamburger + slide-down panel ----------- */
/* Desktop CTA: hide below the breakpoint where the hamburger takes over.
   Chained .btn.nav-cta-desktop to outrank the later .btn { display: inline-flex } rule. */
.btn.nav-cta-desktop { display: none; }
@media (min-width: 1025px) { .btn.nav-cta-desktop { display: inline-flex; } }

/* Hamburger button: visible below the desktop breakpoint. */
.nav-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px; /* optical balance with logo's left edge */
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--cream);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.nav-hamburger:hover { background: rgba(250, 247, 239, 0.12); }
.nav-hamburger:focus-visible {
  outline: 2px solid var(--focus-ring-on-dark);
  outline-offset: 2px;
}
.site-header.is-scrolled .nav-hamburger { color: var(--ink-soft); }
.site-header.is-scrolled .nav-hamburger:hover { background: rgba(21, 23, 26, 0.06); }
.site-header.is-scrolled .nav-hamburger:focus-visible { outline-color: var(--focus-ring); }
.nav-hamburger-icon { font-size: 28px; line-height: 1; }
@media (min-width: 1025px) { .nav-hamburger { display: none; } }

/* While the menu is open, force the header into its solid state for legibility. */
.site-header.menu-open {
  background: rgba(250, 247, 239, 0.96);
  border-bottom-color: var(--border-hairline);
}
.site-header.menu-open .nav-logo .logo-on-dark { opacity: 0; }
.site-header.menu-open .nav-logo .logo-on-light { opacity: 1; }
.site-header.menu-open .nav-hamburger { color: var(--ink-soft); }

/* Slide-down panel, anchored under the header. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cream);
  border-bottom: 0.5px solid var(--border-hairline);
  box-shadow: 0 12px 24px -16px rgba(21, 23, 26, 0.18);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--dur-panel) var(--ease-out),
              opacity var(--dur-panel) var(--ease-out),
              visibility 0s linear var(--dur-panel);
}
.nav-panel[hidden] { display: block; } /* override [hidden] so transitions can run */
.nav-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--dur-panel) var(--ease-out),
              opacity var(--dur-panel) var(--ease-out),
              visibility 0s linear 0s;
}
@media (min-width: 1025px) { .nav-panel { display: none !important; } }

.nav-panel-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-5) 20px var(--space-6);
}
@media (min-width: 768px) { .nav-panel-inner { padding: var(--space-5) 32px var(--space-6); } }

.nav-panel-links {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-panel-links li + li { border-top: 0.5px solid var(--border-hairline); }
.nav-panel-links a {
  display: block;
  padding: var(--space-4) var(--space-2);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--ink-soft);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.nav-panel-links a:hover { color: var(--green-deep); }
/* Keyboard focus only — subtle tint instead of a bright outline.
   Touch/mouse don't trigger :focus-visible, so this never flashes on tap. */
.nav-panel-links a:focus-visible {
  outline: none;
  color: var(--green-deep);
  background: var(--green-tint);
  border-radius: var(--radius-sm);
}

.btn.nav-panel-cta {
  display: flex;
  width: 100%;
}

/* Scrim under the panel — click to close. */
.nav-scrim {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(21, 23, 26, 0.32);
  opacity: 0;
  visibility: hidden;
  z-index: 40; /* below header (50), above page content */
  transition: opacity var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.nav-scrim[hidden] { display: block; }
.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility 0s linear 0s;
}
@media (min-width: 1025px) { .nav-scrim { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .nav-panel,
  .nav-panel.is-open,
  .nav-scrim,
  .nav-scrim.is-open {
    transition: opacity 1ms linear, visibility 0s linear;
    transform: none;
  }
}

/* Lock background scroll while the menu is open. */
body.nav-menu-open { overflow: hidden; }

/* ----- Buttons -------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 18px 88px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(39, 80, 10, 0.10);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
  min-height: 58px;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(39, 80, 10, 0.22);
}
.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* Buttons on dark surfaces need the light ring instead. */
.you .btn:focus-visible,
.book .btn:focus-visible,
.site-footer .btn:focus-visible,
.hero .btn:focus-visible { outline-color: var(--focus-ring-on-dark); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 8px rgba(39, 80, 10, 0.18); }
.btn-sm {
  padding: 12px 44px;
  font-size: 14px;
  /* WCAG 2.5.5 — 44×44 touch target. */
  min-height: 44px;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(39, 80, 10, 0.10);
}
.btn-sm:hover { box-shadow: 0 8px 18px rgba(39, 80, 10, 0.22); }

/* Oversized LearnU mark — right-side accent on every button */
.btn::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  width: 78px;
  height: 78px;
  background: url('assets/learnu-icon.svg') center / contain no-repeat;
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover::after { transform: translateY(-50%) rotate(4deg) scale(1.08); }
.btn-sm::after { width: 36px; height: 36px; right: 4px; }
/* Hide redundant arrow icons — the brand mark takes the accent role now */
.btn .ph-arrow-right { display: none; }

.btn-primary {
  background: var(--green);
  color: var(--green-deep);
}
.btn-primary:hover { background: #95d058; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--cream-warm); }

.btn-ghost-light {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(250, 247, 239, 0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  padding: 14px 22px;
}
.btn-ghost-light:hover {
  background: rgba(250, 247, 239, 0.1);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.btn-ghost-light::after { content: none; }
.btn-ghost-light .ph { font-size: 20px; }

/* Text link (used for inline CTAs in body copy and tertiary links) */
.text-link {
  color: var(--green-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 700;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* ----- Hero ----------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 20px var(--space-10);
}
@media (min-width: 768px) { .hero-content { padding: 0 32px var(--space-12); } }
@media (min-width: 1025px) { .hero-content { padding: 0 64px var(--space-12); } }

.hero-content > * { max-width: 720px; }

.hero-h1 {
  font-family: var(--font-head);
  font-size: clamp(36px, 6.4vw, 68px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--cream);
  margin: 0 0 var(--space-4);
}

.hero-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: rgba(250, 247, 239, 0.92);
  margin: 0 0 var(--space-5);
  max-width: 560px;
}

.hero-credentials {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 var(--space-6);
  max-width: 720px;
}

.eyebrow-on-dark { color: var(--green); }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-5);
}

.hero-tertiary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.hero-tertiary {
  display: inline-block;
  font-size: 13px;
  color: rgba(250, 247, 239, 0.85);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.hero-tertiary:hover { color: var(--cream); }
.hero-tertiary-sep { color: rgba(250, 247, 239, 0.5); }
.hero-tertiary-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  padding: 4px 0;
  /* WCAG 2.5.5 — keep the hit target reasonable. */
  min-height: 32px;
}

/* Trim hero clutter on smaller laptops — keep headline, sub, and primary CTAs only. */
@media (max-width: 1279.98px) {
  .hero-credentials,
  .hero-tertiary-row { display: none; }
}

/* Hero transcript disclosure — written equivalent for the lightbox video. */
.video-transcript {
  position: relative;
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-5);
  background: rgba(21, 23, 26, 0.78);
  border: 1px solid rgba(250, 247, 239, 0.18);
  border-radius: var(--radius-md);
  color: var(--cream);
  max-width: 640px;
  font-size: 15px;
  line-height: 1.65;
}
.video-transcript[hidden] { display: none; }
.video-transcript-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 var(--space-3);
}
.video-transcript p {
  color: rgba(250, 247, 239, 0.92);
  margin: 0 0 var(--space-3);
}
.video-transcript p:last-child { margin-bottom: 0; }
.video-transcript strong { color: var(--cream); }

/* Pause/Play toggle for hero video — WCAG 2.2.2 (Pause, Stop, Hide). */
.hero-motion-toggle {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(21, 23, 26, 0.55);
  color: var(--cream);
  border: 1px solid rgba(250, 247, 239, 0.7);
  font-size: 18px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.hero-motion-toggle:hover { background: rgba(21, 23, 26, 0.78); }
.hero-motion-toggle:focus-visible {
  outline: 2px solid var(--focus-ring-on-dark);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion-toggle { display: none; }
}

/* ----- OAT callout band (transition between hero and #becoming) ----- */
.oat-callout {
  background: var(--green);
  padding: var(--space-8) 0;
  text-align: center;
}
@media (min-width: 768px) {
  .oat-callout { padding: var(--space-10) 0; }
}
.oat-callout .eyebrow {
  color: var(--green-deep);
  margin-bottom: var(--space-3);
}
.oat-callout-title {
  font-family: var(--font-head);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--green-deep);
  margin: 0 0 var(--space-4);
}
.oat-callout-sub {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--green-deep);
  max-width: 560px;
  margin: 0 auto var(--space-5);
}
.oat-callout-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--green-deep);
}
.oat-callout-link .ph { font-size: 16px; }

/* ----- Becoming section ------------------------------------ */
.becoming {
  position: relative;
}
.becoming .container { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) {
  .becoming .container {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-12);
  }
}
.becoming h2 {
  font-size: clamp(32px, 5.2vw, 56px);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 var(--space-5);
}
.becoming .lede {
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
}
.becoming .sig {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-top: var(--space-5);
}
.becoming-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.becoming-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(0.96);
}

/* ----- You section (symptom list) — dark green moment ----- */
.you {
  background: var(--green-deep);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.you .container { position: relative; z-index: 1; }
.you .eyebrow      { color: var(--green); }
.you h2            { font-size: clamp(28px, 3.8vw, 38px); margin-bottom: var(--space-4); color: var(--cream); }
.you .lede         { color: rgba(250, 247, 239, 0.88); }
.you a:focus-visible,
.book a:focus-visible,
.site-footer a:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible {
  outline-color: var(--focus-ring-on-dark);
}
.you-intro {
  max-width: var(--prose-max);
  margin: 0 auto;
  text-align: left;
}

/* Aura — radial glow that swells in as the words land */
.you-aura {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 90%;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 30% 35%, rgba(138, 196, 79, 0.32), transparent 70%),
    radial-gradient(50% 50% at 75% 20%, rgba(234, 243, 222, 0.18), transparent 70%);
  opacity: 0;
  transform: scale(0.9);
  filter: blur(20px);
  transition: opacity 1600ms var(--ease-out), transform 2400ms var(--ease-out);
  z-index: 0;
}
.you.is-staged .you-aura {
  opacity: 1;
  transform: scale(1);
}

/* Dramatic word/phrase drop */
.you-headline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.28em 0.32em;
  line-height: 1.15;
}
.you-headline .drop {
  display: inline-block;
  opacity: 0;
  transform: translateY(-110%) rotate(-3deg);
  filter: blur(6px);
  transform-origin: 50% 0%;
  transition:
    opacity 520ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 720ms cubic-bezier(0.18, 1.5, 0.4, 1),
    filter 520ms ease-out,
    text-shadow 600ms ease-out,
    color 600ms ease-out;
  will-change: transform, opacity, filter;
}
.you-headline .drop.is-down {
  opacity: 1;
  transform: translateY(0) rotate(0);
  filter: blur(0);
}
.you-headline .drop--lead {
  color: rgba(250, 247, 239, 0.78);
  font-weight: 400;
}
.you-headline .drop--punch {
  color: var(--green);
  font-style: italic;
  transform: translateY(-130%) rotate(-5deg) scale(1.08);
}
.you-headline .drop--punch.is-down {
  text-shadow: 0 0 24px rgba(138, 196, 79, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .you-headline .drop {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .you-aura { opacity: 1; transform: none; transition: none; }
}

.symptom-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
@media (min-width: 700px) {
  .symptom-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
}
.symptom-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
  border-bottom: 0.5px solid var(--border-hairline);
}
.symptom-list li:last-child,
.symptom-list li:nth-last-child(2) { border-bottom: 0; }
.symptom-list .ph {
  color: var(--green-deep);
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
/* Symptom list inside the dark-green #you section flips colors */
.you .symptom-list li {
  color: var(--cream);
  border-bottom-color: rgba(250, 247, 239, 0.15);
}
.you .symptom-list .ph { color: var(--green); }
.you-cta { margin-top: var(--space-6); display: flex; justify-content: center; }
.you-cta a { font-size: 16px; }

/* ----- OAT section ----------------------------------------- */
.oat h2 { color: var(--ink); margin-bottom: var(--space-4); }
.oat-intro {
  max-width: var(--prose-max);
  margin: 0 auto var(--space-8);
  text-align: left;
}
.oat-body { color: var(--ink-soft); font-size: 17px; line-height: 1.7; }

.oat-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-8) 0;
}
@media (min-width: 640px) { .oat-panels { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .oat-panels { grid-template-columns: repeat(5, 1fr); } }
.oat-panel {
  background: var(--surface);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.oat-panel .ph {
  color: var(--green-deep);
  font-size: 28px;
  display: block;
  margin-bottom: var(--space-3);
}
.oat-panel h3 {
  font-size: 12px;
  letter-spacing: 0.10em;
  margin-bottom: var(--space-2);
  color: var(--ink);
}
.oat-panel p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.oat-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 768px) { .oat-cards { grid-template-columns: repeat(3, 1fr); } }
.oat-card {
  background: var(--surface);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.oat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(21, 23, 26, 0.06);
}
.oat-card .ph {
  color: var(--green-deep);
  font-size: 32px;
  display: block;
  margin-bottom: var(--space-4);
}
.oat-card h3 {
  font-size: 14px;
  margin-bottom: var(--space-3);
  color: var(--ink);
}
.oat-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.oat-cta { margin-top: var(--space-8); display: flex; justify-content: center; }

/* ----- Tali bio -------------------------------------------- */
.tali .container {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 900px) {
  .tali .container {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-12);
  }
}
.tali-portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  align-self: start;
}
@media (min-width: 900px) {
  .tali-portrait {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}
.tali-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  /* THE one color photo on the page — no grayscale filter. */
}
.tali h2 {
  font-size: clamp(28px, 3.8vw, 40px);
  margin-bottom: var(--space-5);
  color: var(--ink);
}
.tali p {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: var(--space-4);
}
.tali p:last-of-type { margin-bottom: var(--space-6); }
.tali-creds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  padding: var(--space-5) 0 0;
  border-top: 0.5px solid var(--border-hairline);
}
.tali-creds li {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--green-deep);
  position: relative;
  padding-right: var(--space-3);
}
.tali-creds li::after {
  content: '·';
  position: absolute;
  right: 0;
  color: var(--ink-muted);
}
.tali-creds li:last-child::after { content: ''; }

/* ----- Path (4 steps) -------------------------------------- */
.path-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
  counter-reset: stepcounter;
}
@media (min-width: 768px) {
  .path-steps { grid-template-columns: 1fr 1fr; }
}
.path-step {
  position: relative;
  background: var(--surface);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  counter-increment: stepcounter;
}
.path-step::before {
  content: counter(stepcounter, decimal-leading-zero);
  display: block;
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 700;
  /* WCAG 1.4.3 — bright lime on white was 2.08:1. green-deep on white is 8.9:1. */
  color: var(--green-deep);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.path-step h3 {
  font-size: 14px;
  letter-spacing: 0.10em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.path-step p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.path-cta { margin-top: var(--space-6); text-align: center; }

/* ----- Programs -------------------------------------------- */
.programs h2 {
  font-size: clamp(28px, 3.8vw, 40px);
  margin-bottom: var(--space-4);
}
.programs .lede {
  margin-bottom: var(--space-8);
  max-width: var(--prose-max);
}
.programs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) { .programs-grid { grid-template-columns: repeat(3, 1fr); } }
.program-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.program-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(21, 23, 26, 0.06);
}
.program-card--flagship {
  background: var(--green-tint);
  border: 1px solid var(--green);
  position: relative;
}
.program-card--flagship::before {
  content: 'Flagship';
  position: absolute;
  top: -10px;
  left: var(--space-5);
  background: var(--green-deep);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.program-name {
  font-size: 14px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  color: var(--ink);
}
.program-price {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--green-deep);
  line-height: 1.1;
  margin-bottom: var(--space-2);
}
.program-meta {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}
.program-best {
  font-style: italic;
  font-size: 14px;
  color: var(--ink-muted);
  margin-bottom: var(--space-5);
}
.program-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  flex-grow: 1;
}
.program-features li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: var(--space-2) 0;
  border-bottom: 0.5px solid var(--border-hairline);
}
.program-features li:last-child { border-bottom: 0; }
.program-features .ph {
  color: var(--green-deep);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 3px;
}
.program-card .btn {
  width: 100%;
  font-size: 14px;
  padding: 14px 18px;
  min-height: 48px;
  letter-spacing: 0.03em;
  white-space: normal;
  line-height: 1.3;
  box-shadow: none;
}
.program-card .btn:hover { box-shadow: 0 6px 14px rgba(39, 80, 10, 0.14); }
.program-card .btn::after { display: none; }
.programs-note {
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
  margin-top: var(--space-6);
}

/* ----- Testimonials — 3D liquid-glass carousel ------------- */
.testimonials {
  position: relative;
  overflow: hidden; /* keep blobs + ghost slides clipped to section bounds */
}
.testimonials h2 {
  font-size: clamp(28px, 3.8vw, 40px);
  margin-bottom: var(--space-8);
}

/* Decorative blurred shapes — give the glass cards something to blur against. */
.testimonials-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.deco-blob {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
}
.deco-blob-1 { background: var(--green); top: -120px; left: -160px; opacity: 0.32; }
.deco-blob-2 { background: var(--green-deep); bottom: -160px; right: -180px; opacity: 0.22; }
.deco-blob-3 { background: var(--green); top: 30%; right: -240px; opacity: 0.16; width: 420px; height: 420px; }

/* Carousel container — establishes 3D space */
.testimonials .container { position: relative; z-index: 1; }
.testimonials-carousel {
  position: relative;
  perspective: 1500px;
  min-height: 620px;
  margin: 0 auto;
  outline: none;
}
.testimonials-carousel:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) { .testimonials-carousel { min-height: 500px; } }

.testimonials-track {
  position: relative;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
}

/* The cards themselves — frosted glass */
.testimonial {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(640px, calc(100% - 32px));
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(21, 23, 26, 0.08);
  display: flex;
  flex-direction: column;
  transition:
    transform 420ms cubic-bezier(0.32, 0.72, 0.24, 1),
    opacity 420ms cubic-bezier(0.32, 0.72, 0.24, 1);
  transform-origin: center center;
  will-change: transform;
  overflow: hidden; /* keep the cream watermark inside the card's rounded edge */
}
/* Frosted glass only on the active card — backdrop-filter on a transforming
   element is one of the most expensive compositor operations, and at 16–42%
   opacity nobody can see it on the ghost cards anyway. */
.testimonial[data-offset="0"] {
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
@media (min-width: 768px) {
  .testimonial { padding: var(--space-8); }
}

/* Cream watermark quote mark — sits behind every other card child */
.testimonial::before {
  content: '“';
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(260px, 32vw, 380px);
  line-height: 0.8;
  color: var(--cream);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Card content sits above the watermark */
.testimonial-stars,
.testimonial-quote,
.testimonial figcaption {
  position: relative;
  z-index: 1;
}

/* 3D offsets driven by [data-offset] set in JS */
.testimonial[data-offset="0"]   { transform: translate3d(0, 0, 0) rotateY(0) scale(1.02);  opacity: 1;    z-index: 4; }
.testimonial[data-offset="-1"]  { transform: translate3d(-46%, 12px, -200px) rotateY(28deg);   opacity: 0.42; z-index: 3; }
.testimonial[data-offset="1"]   { transform: translate3d(46%, 12px, -200px) rotateY(-28deg);   opacity: 0.42; z-index: 3; }
.testimonial[data-offset="-2"]  { transform: translate3d(-82%, 28px, -420px) rotateY(38deg);   opacity: 0.16; z-index: 2; }
.testimonial[data-offset="2"]   { transform: translate3d(82%, 28px, -420px) rotateY(-38deg);   opacity: 0.16; z-index: 2; }
.testimonial[data-offset="far"] { transform: translate3d(0, 0, -700px); opacity: 0; z-index: 1; pointer-events: none; }

/* Green 5-star row — sits above the quote, brand stamp + social proof */
.testimonial-stars {
  position: relative;
  z-index: 2;
  font-size: 18px;
  letter-spacing: 4px;
  line-height: 1;
  color: var(--green-deep);
  margin: 0 0 var(--space-3);
  font-family: "Helvetica Neue", system-ui, -apple-system, sans-serif;
}

.testimonial-quote {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 var(--space-5);
  flex-grow: 1;
}
.testimonial-author {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.testimonial-role {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Carousel controls */
.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
  position: relative;
  z-index: 2;
}
.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--green-deep);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.carousel-btn:hover { background: var(--green); border-color: var(--green); color: var(--green-deep); }
.carousel-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.carousel-btn:active { transform: scale(0.95); }

.carousel-counter {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  min-width: 56px;
  text-align: center;
}

/* Reduced motion — fade only, no 3D rotation, no translate */
@media (prefers-reduced-motion: reduce) {
  .testimonial { transition: opacity 200ms ease; }
  .testimonial[data-offset]:not([data-offset="0"]) {
    transform: none;
    opacity: 0;
    pointer-events: none;
  }
  .testimonial[data-offset="0"] { transform: none; opacity: 1; }
  .deco-blob { animation: none; }
}

/* ----- FAQ accordion --------------------------------------- */
.faq h2 {
  font-size: clamp(28px, 3.8vw, 40px);
  margin-bottom: var(--space-4);
}
.faq .lede { margin-bottom: var(--space-8); }
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.faq-item {
  border-top: 0.5px solid var(--border-hairline);
}
.faq-item:last-child { border-bottom: 0.5px solid var(--border-hairline); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.faq-item summary .faq-caret {
  font-size: 20px;
  color: var(--green-deep);
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item[open] summary .faq-caret { transform: rotate(180deg); }
.faq-answer {
  padding: 0 0 var(--space-5);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: var(--prose-max);
}
.faq-answer p { margin: 0 0 var(--space-3); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-foot {
  margin-top: var(--space-8);
  font-size: 14px;
  color: var(--ink-muted);
  text-align: center;
}

/* ----- Final CTA / book section ---------------------------- */
.book {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
}
.book .eyebrow { color: var(--green); margin-bottom: var(--space-4); }
.book h2 {
  font-size: clamp(34px, 5vw, 56px);
  color: var(--cream);
  margin-bottom: var(--space-5);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.book p {
  color: rgba(250, 247, 239, 0.82);
  font-size: 17px;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto var(--space-6);
}
.book-cta { display: inline-flex; }
.book-contact {
  margin-top: var(--space-6);
  font-size: 14px;
  color: rgba(250, 247, 239, 0.7);
}
.book-contact a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.book-contact a:hover { color: var(--cream); }

/* ----- Footer ---------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: var(--space-12) 0 var(--space-6);
  border-top: 1px solid var(--green);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.footer-brand img {
  height: 28px;
  width: auto;
  margin-bottom: var(--space-4);
}
.footer-brand p {
  font-size: 14px;
  color: rgba(250, 247, 239, 0.72);
  line-height: 1.5;
  max-width: 280px;
}
.footer-col h3 {
  font-size: 12px;
  letter-spacing: 0.10em;
  color: var(--green);
  margin-bottom: var(--space-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--space-3); font-size: 14px; }
.footer-col a {
  color: rgba(250, 247, 239, 0.78);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--cream); }
.footer-col a:focus-visible { outline: 2px solid var(--focus-ring-on-dark); outline-offset: 2px; border-radius: 2px; }

.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.5.5 — 44×44 touch target. */
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(250, 247, 239, 0.08);
  color: var(--cream);
  font-size: 18px;
}
.footer-social a:hover { background: var(--green); color: var(--ink); }

.footer-legal {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 0.5px solid rgba(250, 247, 239, 0.12);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.footer-disclaimer {
  font-size: 13px;
  color: rgba(250, 247, 239, 0.7);
  line-height: 1.6;
  max-width: 900px;
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 13px;
  color: rgba(250, 247, 239, 0.7);
}

/* ----- /book + /privacy + /terms simple pages -------------- */
.simple-page {
  padding-top: calc(var(--header-h) + var(--space-10));
  padding-bottom: var(--space-12);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cream);
}
.simple-page h1 {
  font-size: clamp(32px, 4.5vw, 48px);
  margin-bottom: var(--space-4);
  color: var(--ink);
}
.simple-page .lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: var(--prose-max);
  margin-bottom: var(--space-8);
}
.simple-page h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  margin: var(--space-8) 0 var(--space-3);
  color: var(--ink);
}
.simple-page h3 {
  font-size: 14px;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--ink);
}
.simple-page p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: var(--prose-max);
}
.simple-page ul {
  padding-left: 0;
  margin: 0 0 var(--space-5);
  max-width: var(--prose-max);
}
.simple-page ul li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}
.simple-page ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px; height: 6px;
  background: var(--green-deep);
  border-radius: 50%;
}
.simple-page .embed-frame {
  background: var(--surface);
  border: 0.5px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-height: 600px;
  margin: var(--space-6) 0;
}
.simple-page .disclaimer-card {
  background: var(--cream-warm);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-5) 0 var(--space-6);
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: var(--prose-max);
}

/* 404 / error page */
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-8);
}
.error-links {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 0.5px solid var(--border-hairline);
}
.error-links p { margin-bottom: var(--space-3); }
.error-links ul { list-style: none; }
.error-links ul li::before { background: var(--green); }

/* ----- Video lightbox modal ------------------------------- */
.modal[hidden] { display: none !important; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 23, 26, 0.85);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: auto;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 23, 26, 0.65);
  color: var(--cream);
  border: 0;
  cursor: pointer;
  font-size: 22px;
  border-radius: var(--radius-md);
}
.modal-close:hover { background: rgba(21, 23, 26, 0.85); }
.modal-close:focus-visible { outline: 2px solid var(--focus-ring-on-dark); outline-offset: 2px; }
.modal-video-wrap { width: 100%; aspect-ratio: 16 / 9; flex-shrink: 0; }
.modal-video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ----- Reveal-on-scroll (progressive enhancement) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-panel) var(--ease-out),
              transform var(--dur-panel) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ----- Reduced motion ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-video { display: none; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ----- Slow-connection fallback (handled in JS too) ------- */
.hero.is-low-bw .hero-video { display: none; }

/* ----- Print: hide nav/modal, keep typography ------------- */
@media print {
  .site-header, .modal, .footer-social, .hero-video, .hero-overlay { display: none !important; }
  body { background: white; color: black; }
}