/* =====================================================================
   Mode Education - DESIGN TOKENS  (single source of truth)
   ---------------------------------------------------------------------
   This file is INLINED AT BUILD TIME into BOTH deployed stylesheets:
     - front-door:  styles.css   (cat tokens.css styles.css)
     - app:         layout.css   (base + tokens.css + mode-bridge.css)
   so the two stylesheet "worlds" share ONE palette + scale. Edit tokens
   here only. (Inlined rather than @import'd: the app's layout.css is
   server-stitched and a runtime <link> would FOUC on every app page.)
   ===================================================================== */
:root {
  /* ---- brand palette ---- */
  --c-bg:        #07090D;
  --c-bg-2:      #0B0C0E;
  --c-navy:      #0B1B52;  --c-navy-rgb: 11,27,82;
  --c-teal:      #1D9E75;  --c-teal-rgb: 29,158,117;  --c-teal-600: #178a65;
  --c-mint:      #3EE7B2;  --c-mint-rgb: 62,231,178;
  --c-green:     #11885f;  --c-green-rgb: 17,136,95;        /* app "completed" / typical-plan green (was --m-green) */
  --c-white:     #F8FAFC;
  --c-muted:     #A6B0BF;                                   /* front-door muted grey */
  --c-muted-app: #9aa7b6;                                   /* app/secondary muted grey - kept distinct (merging would shift colour) */
  --c-text-dark: #E7ECF2;                                   /* light text on dark entry pages (was --m-text) */
  --c-ink:       #0c1a2b;                                   /* front-door heading ink */
  --c-ink-app:   #0b1730;                                   /* app heading ink - near-identical, kept distinct for no visual change */

  /* ---- glass / lines / overlays ---- */
  --glass-border: rgba(255,255,255,0.14);
  --glass-panel:  rgba(10,14,22,0.62);
  --glass-nav:    rgba(8,10,14,0.55);
  --overlay-1:    rgba(0,0,0,0.45);
  --overlay-2:    rgba(0,0,0,0.65);
  --c-line:       rgba(255,255,255,0.10);                                                  /* was --m-line */
  --c-line-2:     rgba(255,255,255,0.16);                                                  /* was --m-line-2 */
  --c-panel-soft: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)); /* was --m-panel */
  --c-sh:         0 30px 60px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06);  /* was --m-sh */
  --c-ring:       rgba(var(--c-mint-rgb),0.30);                                             /* was --m-ring */

  /* ---- typography ---- */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-hero: clamp(2.6rem, 7vw, 6rem);
  --fs-h1:   clamp(2.1rem, 5vw, 3.8rem);
  --fs-h2:   clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-h3:   clamp(1.2rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: clamp(1rem, 1.1vw, 1.075rem);
  --fs-small: 0.8125rem;

  /* ---- layout ---- */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --nav-h: 70px;       /* front-door body top offset (decoupled magic number) */
  --sidebar-w: 84px;   /* app left sidebar width */

  /* ---- radius scale ---- */
  --r-pill:  999px;
  --r-panel: 16px;
  --r-card:  14px;
  --r-sub:   12px;
  --r-input: 10px;
  --r-sm:    8px;
  --r-chip:  6px;
  --radius:    var(--r-card);    /* legacy alias */
  --radius-sm: var(--r-input);   /* legacy alias */

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
  --lift:      -2px;   /* standard hover lift (pills / buttons) */
  --lift-card: -6px;   /* card hover lift */

  /* ---- glow / shadow scale ---- */
  --glow-sm:  0 10px 30px -12px rgba(var(--c-teal-rgb),0.7);
  --glow-md:  0 16px 40px -12px rgba(var(--c-teal-rgb),0.85);
  --glow-ring: 0 0 0 1px rgba(var(--c-mint-rgb),0.4);
  --glow-btn-hover: 0 0 0 1px rgba(var(--c-mint-rgb),0.55), 0 0 26px 2px rgba(var(--c-mint-rgb),0.55), 0 14px 30px -10px rgba(var(--c-teal-rgb),0.6);  /* app pill hover glow (de-duped x4) */
  --shadow-glow: 0 0 0 1px var(--glass-border), 0 24px 60px -24px rgba(0,0,0,0.8), 0 0 60px -30px rgba(var(--c-mint-rgb),0.25);

  /* ---- IELTS criterion colours (feedback legend + submission highlights) ---- */
  --crit-task:      #c77d11;  --crit-task-bg:      rgba(199,125,17,0.16);   /* Task Achievement (was neon pink) */
  --crit-coherence: #2d7ff0;  --crit-coherence-bg: rgba(45,127,240,0.15);   /* Coherence & Cohesion (was cyan) */
  --crit-lexical:   #12a06a;  --crit-lexical-bg:   rgba(18,160,106,0.16);   /* Lexical Resources (was green) */
  --crit-grammar:   #7a5af0;  --crit-grammar-bg:   rgba(122,90,240,0.15);   /* Grammatical Range (was purple) */

  /* ---- shared dark "panel" gradients (de-duplicated from 6 copies) ---- */
  --panel-gradient:
    radial-gradient(900px 540px at 80% -12%, rgba(var(--c-teal-rgb),0.40), rgba(0,0,0,0) 60%),
    radial-gradient(680px 460px at 4% 6%, rgba(var(--c-navy-rgb),0.72), rgba(0,0,0,0) 62%),
    linear-gradient(160deg, #0c1a33, #0a1422);                 /* big box: register / courses / about belief */
  --panel-gradient-auth:
    radial-gradient(700px 460px at 88% -18%, rgba(var(--c-teal-rgb),0.40), rgba(0,0,0,0) 60%),
    radial-gradient(560px 460px at -8% 4%, rgba(var(--c-navy-rgb),0.72), rgba(0,0,0,0) 62%),
    linear-gradient(160deg, #0c1a33, #0a1422);                 /* auth card: login / reg-form / reglogged */
}
/* ============================================================
   Mode Education - Front Door
   Premium cinematic design system (static, framework-free)
   ============================================================ */

/* ---- Design tokens live in tokens.css (inlined at build) ---- */

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Reserve the scrollbar gutter always, so pages without a scrollbar (or when a
   modal locks scroll) don't widen the viewport and shift the fixed nav sideways. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-white);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2px solid var(--c-mint); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
.font-display { font-family: var(--font-display); }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.eyebrow {
  display: inline-block; font-size: var(--fs-small); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-mint); font-weight: 600; margin-bottom: 1rem;
}
.lead { font-size: var(--fs-lead); color: var(--c-muted); max-width: 60ch; }
.muted { color: var(--c-muted); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.text-balance { text-wrap: balance; }
.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;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 1000; background: #3EE7B2;
  color: #05231a; padding: 0.6rem 1rem; border-radius: var(--r-sm); transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* gradient accent text */
.accent { color: var(--c-mint); }
.gradient-text {
  background: linear-gradient(100deg, var(--c-white) 30%, var(--c-mint));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* soft ambient glows for sections */
.glow-bg { position: relative; isolation: isolate; }
.glow-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(var(--c-teal-rgb),0.10), transparent 70%),
    radial-gradient(50% 50% at 100% 30%, rgba(var(--c-navy-rgb),0.30), transparent 70%);
}

/* ============================================================
   Buttons - PremiumButton
   ============================================================ */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; gap: 0.55em; justify-content: center;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  padding: 0.85em 1.6em; border-radius: var(--r-pill); position: relative;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  will-change: transform; text-align: center;
}
.btn:active { transform: translateY(1px) scale(0.99); }

/* outlined teal -> fills on hover */
.btn-outline {
  border: 1.5px solid var(--c-teal); color: var(--c-white);
  background: rgba(var(--c-teal-rgb),0.06);
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: linear-gradient(180deg, #3EE7B2, #1D9E75); color: #05231a; box-shadow: 0 10px 30px -10px rgba(var(--c-teal-rgb),0.7);
  transform: translateY(var(--lift));
}

/* solid teal */
.btn-solid {
  background: linear-gradient(180deg, #3EE7B2, #1D9E75);
  color: #05231a; box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-solid:hover, .btn-solid:focus-visible {
  transform: translateY(var(--lift));
  box-shadow: var(--glow-md), 0 0 0 1px rgba(var(--c-mint-rgb),0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-ghost { color: var(--c-white); border: 1px solid var(--glass-border); background: rgba(255,255,255,0.03); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); transform: translateY(var(--lift)); }
.btn-lg { padding: 1.05em 2em; font-size: 1.02rem; }
.btn-full { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* button spinner */
.btn .spinner {
  width: 1.05em; height: 1.05em; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; display: none;
  animation: spin 0.7s linear infinite;
}
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .btn-label, .btn.is-loading .arrow { opacity: 0.6; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   GlassNav
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.78rem var(--gutter);
  background: transparent; transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: var(--glass-nav);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--glass-border);
  padding-block: 0.56rem;
}
/* Dark-mode logo: white wordmark + colour globe/green accent - reads on the
   dark nav with no backing chip. */
/* 33px -> 38px (owner, 2026-07-27: "a little bit larger and a LOT clearer"). The nav's
   own height is set by the 44px CTA, not the logo, so 38px costs no vertical space.
   The clarity half of that request is in the ASSET, not here: logo-white.svg's globe
   squares moved from #262969 (1.41:1 on the #0a1422 bar - effectively invisible) to
   #6266C6 (3.73:1), same hue and saturation, lightness only. FOOTER AND CARDFOOT ARE
   DELIBERATELY UNCHANGED at 31px/25px on the mosaic variant - do not "unify" them. */
.nav__logo img { height: 38px; width: auto; display: block; }
.nav__links { display: flex; align-items: center; gap: 0.35rem; list-style: none; }
.nav__link {
  position: relative; padding: 0.5rem 0.85rem; border-radius: var(--r-pill); font-size: 0.98rem;
  color: var(--c-white); opacity: 0.86; transition: opacity 0.25s var(--ease), background 0.25s var(--ease);
  text-align: left; font-family: inherit;
}
button.nav__link { background: none; border: 0; cursor: pointer; }
.nav__link:hover, .nav__link:focus-visible { opacity: 1; background: rgba(255,255,255,0.06); }
.nav__link[aria-disabled="true"] { cursor: default; opacity: 0.55; }
.nav__cta { margin-left: 0.4rem; }

/* coming-soon tooltip */
.tooltip-wrap { position: relative; }
.tooltip {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--glass-panel); backdrop-filter: blur(12px); border: 1px solid var(--glass-border);
  color: var(--c-white); font-size: 0.78rem; padding: 0.4rem 0.7rem; border-radius: var(--r-sm); white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); pointer-events: none;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.8);
}
.tooltip::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: var(--glass-border);
}
.tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* mobile nav */
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-input); align-items: center; justify-content: center; position: relative; z-index: 101; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--c-white); position: relative; transition: 0.3s var(--ease); }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--c-white); transition: 0.3s var(--ease); }
.nav__toggle span::before { top: -7px; } .nav__toggle span::after { top: 7px; }
body.menu-open .nav__toggle span { background: transparent; }
body.menu-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav__toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); flex-direction: column; align-items: flex-start;
    gap: 0.4rem; padding: 6rem 1.5rem 2rem; background: var(--glass-panel);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 1px solid var(--glass-border);
    transform: translateX(100%); transition: transform 0.45s var(--ease); z-index: 99;
  }
  body.menu-open .nav__links { transform: translateX(0); }
  .nav__link { width: 100%; font-size: 1.05rem; padding: 0.7rem 0.6rem; }
  .nav__cta { margin: 0.6rem 0 0; width: 100%; }
  .tooltip { left: 0; transform: none; top: calc(100% + 4px); }
  .tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip { transform: none; }
}

/* ============================================================
   HeroBackgroundMedia + CinematicHero
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
/* move the home hero text down ~3 lines from centre */
.hero.home-hero .hero__content { transform: translateY(13.8rem); }
/* campaign hero: same lower-centre placement as home (title top lands on the
   vertical midline). translateY(50%) shifts the title-only block down by half its
   own height, so it tracks the home title position responsively. */
.hero.timed-hero .hero__content { transform: translateY(50%); }
.hero__media { position: absolute; inset: 0; z-index: 0; background: var(--c-bg); }
.hero__media img, .hero__media video, .hero__media iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
}
.hero__media iframe { width: 100vw; height: 56.25vw; min-height: 100svh; min-width: 177.78svh; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* Generic heroes (campaign): poster covers, video fades up when ready. */
.hero__media img { transition: opacity 0.9s ease; }
.hero__media.media-ready img { opacity: 0; }
.hero__media iframe, .hero__media video { opacity: 0; transition: opacity 1.6s ease; }
.hero__media.media-ready iframe, .hero__media.media-ready video { opacity: 1; }
/* HOME hero load sequence: the first-frame poster (img) FADES IN over 0.5s so the
   hero never paints black; the video plays at FULL opacity BEHIND it; once the
   video is actually playing, the poster FADES OUT (0.6s) for a clean handoff.
   Keeping both visible only briefly avoids the ghost/double-image of the teacher. */
.home-hero .hero__media img { display: block; opacity: 0; object-position: center 42%; transition: opacity 0.5s ease; }
.home-hero .hero__media.poster-in img { opacity: 1; }
.home-hero .hero__media.media-ready img { opacity: 0; transition: opacity 0.25s ease; }
.home-hero .hero__media iframe, .home-hero .hero__media video { opacity: 1; transition: none; }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,9,13,0.46) 0%, rgba(7,9,13,0.24) 38%, rgba(7,9,13,0.45) 78%, var(--c-bg) 100%),
    radial-gradient(120% 85% at 50% 42%, transparent 32%, rgba(0,0,0,0.45));
}
.hero__content { position: relative; z-index: 2; text-align: left; padding-inline: var(--gutter); }
.hero__title { color: var(--c-white); text-shadow: 0 2px 30px rgba(0,0,0,0.62), 0 1px 3px rgba(0,0,0,0.55); line-height: 1.04; }
/* Source Serif 4: line 1 smaller/medium, line 2 larger/semibold - editorial contrast */
.hero__title .l1 { display: block; font-weight: 600; font-size: clamp(1.6rem, 1.15rem + 1.85vw, 2.6rem); letter-spacing: -0.015em; opacity: 0; transform: translateY(22px); }
.hero__title .l2 { display: block; font-weight: 700; font-size: clamp(2.2rem, 1.15rem + 4vw, 4.25rem); letter-spacing: -0.025em; margin-top: 0.15em; opacity: 0; transform: translateY(22px); }
.hero__sub { margin-top: 5.5rem; opacity: 0; transform: translateY(18px); text-shadow: 0 1px 16px rgba(0,0,0,0.6); }
.hero__cta { margin-top: 2.2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; transform: translateY(18px); }
.hero__cta .btn-lg { padding-block: 0.85em; line-height: 1.2; }

/* ------------------------------------------------------------------
   HERO: left aligned, on EVERY page with the video hero - the home page
   and all the campaign landing pages (intcmpgn41, intcmpgn5mx4hk and its
   zh-hans / zh-hant variants), which share this component.

   The point is not "text-align: left" - it is that the headline's left
   edge lands on the SAME vertical line as the nav logo and every section
   heading below it. Sharing the container's max-width and gutter is what
   makes it read as designed rather than nudged, and it means the edge
   stays true at every breakpoint without a single magic number.
   ------------------------------------------------------------------ */
.hero .hero__content {
  text-align: left;
  width: 100%;
  /* Mark wanted it further left, so the edge moves from the CONTAINER line to the NAV LOGO line:
     full-bleed with only the page gutter, which is exactly what the nav uses. Both are real
     alignments - this one is simply the outer of the two, and it gives the hero more presence
     against the video. The measure caps below stop the type running silly on an ultra-wide screen
     now that the container is no longer doing it. */
  padding-inline: var(--gutter);
}
.hero .hero__title {
  max-width: 1100px;
  /* Balance the ragged edge when the headline DOES wrap: the browser evens the line lengths instead
     of leaving one long line and a short orphan. It does NOT force a single line - only a smaller cap
     can do that - so at widths where "Communicate with confidence." must break, it now breaks tidily
     near the middle rather than dropping a lone word. Inherited by the l1/l2 spans, which are the
     block boxes that actually wrap. Ignored by older browsers, which simply wrap as before. */
  text-wrap: balance;
}
/* The subhead is body copy, not a headline: `pretty` only prevents orphans and keeps the last line
   from stranding a single word, without the line-count limit `balance` carries. */
.hero .hero__sub { text-wrap: pretty; }
/* The subhead carries mx-auto in the markup, which would re-centre the block. */
.hero .hero__sub {
  margin-inline: 0;
  max-width: 44ch;              /* a readable measure; full-bleed lines are unreadable */
  margin-top: 1.75rem;          /* 5.5rem was spacing a centred stack; left-aligned wants a tighter pair */
}
/* NO measure on the title. Tried 20ch and it resolved to 422px against the h1's own font-size,
   which broke "Communicate with confidence." into three lines - the l2 is designed to hold one line
   at up to 5.19rem, and the container's max-width already stops it running full-bleed. Verified in
   the browser: the cap was a regression, not an improvement. */
.hero .hero__cta { justify-content: flex-start; }

/* Legibility. A centred vignette lit the middle of the frame while the text
   now sits left, so the first characters of the largest type had the least
   protection. This adds a left-weighted scrim on top of the existing overlay:
   strongest behind the text, gone by the midpoint, so the video is still the
   hero everywhere it matters. */
.hero .hero__overlay {
  background:
    linear-gradient(90deg, rgba(7,9,13,0.72) 0%, rgba(7,9,13,0.55) 26%, rgba(7,9,13,0.18) 55%, rgba(7,9,13,0) 78%),
    linear-gradient(180deg, rgba(7,9,13,0.46) 0%, rgba(7,9,13,0.20) 38%, rgba(7,9,13,0.45) 78%, var(--c-bg) 100%);
}

/* Narrow screens: the gutter alone is the alignment, and the measure caps
   stop constraining anything, so let the text use the full column. */
@media (max-width: 640px) {
  .hero .hero__sub { max-width: none; }
  /* A left-weighted scrim is pointless when the text spans the full width. */
  .hero .hero__overlay {
    background:
      linear-gradient(180deg, rgba(7,9,13,0.52) 0%, rgba(7,9,13,0.34) 38%, rgba(7,9,13,0.52) 78%, var(--c-bg) 100%);
  }
}

/* entrance animation (home: on load) */
/* Delayed ~1.2s so the text arrives after the poster has faded in, not over a black frame. */
.hero.reveal .l1 { animation: rise 1s var(--ease) 1.45s forwards; }
.hero.reveal .l2 { animation: rise 1s var(--ease) 1.8s forwards; }
.hero.reveal .hero__sub { animation: rise 1s var(--ease) 2.2s forwards; }
.hero.reveal .hero__cta { animation: rise 1s var(--ease) 2.45s forwards; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* scroll cue */
.scroll-cue { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--c-muted); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; opacity: 0.4; }
.scroll-cue .line { width: 1px; height: 26px; background: linear-gradient(rgba(var(--c-mint-rgb),0.55), rgba(var(--c-mint-rgb),0.15)); }
/* "rolling down" chevron: drops downward and fades, on a loop */
.scroll-cue .scroll-chev { color: var(--c-mint); margin-top: -3px; animation: scrollDrop 2.6s var(--ease) infinite; }
@keyframes scrollDrop { 0% { transform: translateY(-3px); opacity: 0; } 25% { opacity: 1; } 70% { opacity: 0.9; } 100% { transform: translateY(8px); opacity: 0; } }
@keyframes cue { 0%,100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* campaign timed hero text */
.timed-hero .hero__title .l1, .timed-hero .hero__title .l2 { opacity: 0; transform: none; }
.timed-hero.show-text .hero__title .l1 { animation: fadeIn 1.4s var(--ease) forwards; }
.timed-hero.show-text .hero__title .l2 { animation: fadeIn 1.4s var(--ease) 0.25s forwards; }
.timed-hero.hide-text .hero__title .l1, .timed-hero.hide-text .hero__title .l2 { animation: fadeOut 1.4s var(--ease) forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-up.in { opacity: 1; transform: none; }
.reveal-up.d1 { transition-delay: 0.08s; } .reveal-up.d2 { transition-delay: 0.16s; } .reveal-up.d3 { transition-delay: 0.24s; } .reveal-up.d4 { transition-delay: 0.32s; }

/* ============================================================
   Sections, cards
   ============================================================ */
.section__head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__head.center { margin-inline: auto; }
.section__head h2 { font-size: var(--fs-h2); }
.section__head p { margin-top: 1rem; }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.glass-card {
  position: relative; background: var(--glass-panel); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: clamp(1.4rem, 2.5vw, 2rem);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
  overflow: hidden; height: 100%;
}
.glass-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 120% at 0% 0%, rgba(var(--c-mint-rgb),0.08), transparent 45%); opacity: 0; transition: opacity 0.5s var(--ease);
}
.glass-card:hover { transform: translateY(var(--lift-card)); border-color: rgba(var(--c-mint-rgb),0.35); box-shadow: var(--shadow-glow); }
.glass-card:hover::after { opacity: 1; }
.glass-card h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.glass-card p { color: var(--c-muted); font-size: 0.98rem; }
.card-icon {
  width: 46px; height: 46px; border-radius: var(--r-input); display: grid; place-items: center; margin-bottom: 1.1rem;
  background: linear-gradient(160deg, rgba(var(--c-teal-rgb),0.25), rgba(var(--c-navy-rgb),0.4)); border: 1px solid var(--glass-border); color: var(--c-mint);
}
.card-icon svg { width: 22px; height: 22px; }

/* product / pathway card */
.product-card { display: flex; flex-direction: column; }
.product-card .price { font-family: var(--font-display); font-size: 1.6rem; color: var(--c-white); margin: 0.2rem 0 0.2rem; }
.product-card .price small { font-size: 0.8rem; color: var(--c-muted); font-family: var(--font-sans); }
.product-card .tag { font-size: var(--fs-small); color: var(--c-mint); letter-spacing: 0.12em; text-transform: uppercase; }
.product-card .card-foot { margin-top: auto; padding-top: 1.2rem; }
.badge {
  position: absolute; top: 1rem; right: 1rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: #3EE7B2; color: #05231a; padding: 0.25rem 0.6rem; border-radius: var(--r-pill); font-weight: 600;
}

/* resource card states */
a.glass-card { display: flex; flex-direction: column; color: inherit; }
a.resource-card .state-ready { transition: gap 0.3s var(--ease); }
a.resource-card:hover .state-ready { gap: 0.7rem; }
.resource-card .state { font-size: var(--fs-small); margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.state-soon { color: var(--c-muted); }
.state-ready { color: var(--c-mint); }
.pill { display: inline-block; font-size: 0.7rem; padding: 0.2rem 0.55rem; border-radius: var(--r-pill); border: 1px solid var(--glass-border); color: var(--c-muted); letter-spacing: 0.08em; text-transform: uppercase; }

/* split editorial */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.stat-row { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 2rem; }
.stat .n { font-family: var(--font-display); font-size: 2.2rem; color: var(--c-white); }
.stat .l { font-size: var(--fs-small); color: var(--c-muted); }

/* CTA band */
.cta-band {
  text-align: center; border-radius: var(--radius); padding: clamp(2.5rem, 6vw, 5rem);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(var(--c-teal-rgb),0.22), transparent 60%),
    linear-gradient(180deg, rgba(var(--c-navy-rgb),0.5), rgba(10,14,22,0.7));
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-glow);
}
.cta-band h2 { font-size: var(--fs-h2); }
.cta-band p { margin: 1rem auto 2rem; }

/* ============================================================
   Contact panel / forms (shared field styles)
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.field label { font-size: 0.85rem; color: var(--c-muted); font-weight: 500; }
.field .req { color: var(--c-mint); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.98rem; color: var(--c-white); background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border); border-radius: var(--r-input); padding: 0.8rem 0.95rem; width: 100%;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(166,176,191,0.6); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--c-teal); background: rgba(var(--c-teal-rgb),0.06);
  box-shadow: 0 0 0 3px rgba(var(--c-teal-rgb),0.18);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A6B0BF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.4rem; }
.field option { background: #0B0C0E; color: var(--c-white); }
.field--error input, .field--error select { border-color: #ff6b6b; }
.field__msg { font-size: 0.78rem; color: #ff8a8a; min-height: 1em; display: none; }
.field--error .field__msg { display: block; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .row-2 { grid-template-columns: 1fr; } }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   EarlyAccessModal
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.25rem;
  background: var(--overlay-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  width: min(560px, 100%); max-height: 92vh; max-height: 92svh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(13,18,28,0.92), rgba(10,14,22,0.92));
  border: 1px solid var(--glass-border); border-radius: var(--r-panel); padding: clamp(1.5rem, 4vw, 2.5rem);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(var(--c-mint-rgb),0.12), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(24px) scale(0.98); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.modal-overlay.open .modal { transform: none; opacity: 1; }
.modal__close {
  position: absolute; top: 0.9rem; right: 0.9rem; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--c-muted); border: 1px solid var(--glass-border); background: rgba(255,255,255,0.03);
  transition: 0.25s var(--ease);
}
.modal__close:hover { color: #fff; background: rgba(255,255,255,0.1); transform: rotate(90deg); }
.modal__head { margin-bottom: 1.5rem; padding-right: 2.5rem; }
.modal__head h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.modal__head p { color: var(--c-muted); margin-top: 0.75rem; font-size: 0.96rem; }
.modal__head .highlight { color: var(--c-mint); font-weight: 600; }
.form-smallprint { font-size: 0.75rem; color: var(--c-muted); text-align: center; margin-top: 1rem; }
.modal.positioned { position: relative; }

/* modal success */
.modal__success { display: none; text-align: center; padding: 1rem 0; }
.modal.success .modal__form { display: none; }
.modal.success .modal__success { display: block; animation: rise 0.7s var(--ease) forwards; }
.success-mark { width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--c-teal-rgb),0.15); border: 1px solid rgba(var(--c-mint-rgb),0.4); color: var(--c-mint); }
.modal__success h2 { font-size: 1.8rem; }
.modal__success p { color: var(--c-muted); margin-top: 0.8rem; }
.form-error-banner { display: none; background: rgba(255,107,107,0.12); border: 1px solid rgba(255,107,107,0.4); color: #ffb3b3; border-radius: var(--r-sm); padding: 0.7rem 0.9rem; font-size: 0.85rem; margin-bottom: 1rem; }
.form-error-banner.show { display: block; }

/* ============================================================
   Footer
   ============================================================ */
.footer { border-top: 1px solid var(--glass-border); padding-block: clamp(1.5rem, 3vw, 2.5rem) 2rem; background: linear-gradient(180deg, transparent, rgba(var(--c-navy-rgb),0.15)); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
/* Footer logo is DELIBERATELY a different variant of the mark (logo-white-footer.svg:
   mosaic globe) from the nav (logo-white.svg: brand-master crescent globe). Owner's
   choice, 2026-07-27 - "to show dynamism". This is not drift; do not "fix" it.
   Height stays 31px. */
.footer__brand img { height: 31px; margin-bottom: 1rem; }
.footer__brand p { color: var(--c-muted); font-size: 0.92rem; max-width: 32ch; }
.footer h4 { font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-mint); margin-bottom: 1rem; font-weight: 600; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer a { color: var(--c-white); opacity: 0.8; font-size: 0.92rem; transition: opacity 0.2s, color 0.2s; }
.footer a:hover { opacity: 1; color: var(--c-mint); }
.footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--glass-border); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--c-muted); font-size: var(--fs-small); }

/* page top spacing for non-hero pages */
.page-top { padding-top: clamp(8rem, 14vh, 12rem); }

/* utility */
.stack > * + * { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; } .mt-1 { margin-top: 1rem; }
.maxw-sm { max-width: 640px; }

/* ============================================================
   Resource article (prose)
   ============================================================ */
.article { max-width: 760px; margin-inline: auto; }
.article .kicker { font-size: var(--fs-small); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-mint); font-weight: 600; }
.article h1 { font-size: var(--fs-h1); margin: 0.6rem 0 0.6rem; }
.article .meta { color: var(--c-muted); font-size: 0.9rem; margin-bottom: 2.5rem; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: var(--fs-h3); font-family: var(--font-display); margin-top: 2.4rem; }
.prose p, .prose li { color: #cfd6e0; font-size: 1.05rem; line-height: 1.75; }
.prose strong { color: var(--c-white); }
.prose ul, .prose ol { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.prose ul li { list-style: none; position: relative; padding-left: 1.6rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c-mint); box-shadow: 0 0 12px rgba(var(--c-mint-rgb),0.6); }
.prose .callout { background: var(--glass-panel); border: 1px solid var(--glass-border); border-left: 3px solid var(--c-teal); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; }
.prose .callout p { color: var(--c-muted); }
.article__back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--c-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.article__back:hover { color: var(--c-mint); }
.article__cta { margin-top: 3rem; }

/* ============================================================
   Course funnel (Diagnostic -> Paths -> Practice Lab)
   ============================================================ */
.step-label { display: flex; align-items: center; gap: 0.7rem; font-size: var(--fs-small); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-mint); font-weight: 600; margin-bottom: 1.25rem; }
.step-label .num { width: 1.85rem; height: 1.85rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, rgba(var(--c-teal-rgb),0.3), rgba(var(--c-navy-rgb),0.5)); border: 1px solid var(--glass-border); color: var(--c-white); font-family: var(--font-display); font-size: 0.95rem; }
.funnel-arrow { display: flex; justify-content: center; color: var(--c-mint); margin: 0.4rem 0; opacity: 0.55; }
.diagnostic-card { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; background: radial-gradient(120% 140% at 0% 0%, rgba(var(--c-teal-rgb),0.18), transparent 55%), linear-gradient(180deg, rgba(var(--c-navy-rgb),0.55), rgba(10,14,22,0.78)); border: 1px solid rgba(var(--c-mint-rgb),0.4); box-shadow: var(--shadow-glow); }
.diagnostic-card .dx-body { display: flex; flex-direction: column; gap: 0.5rem; }
.diagnostic-card .price { font-family: var(--font-display); font-size: 1.9rem; color: #fff; }
.diagnostic-card ul, .path-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0 0; }
.diagnostic-card li, .path-card li { position: relative; padding-left: 1.5rem; color: #cfd6e0; font-size: 0.93rem; }
.diagnostic-card li::before, .path-card li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-mint); box-shadow: 0 0 10px rgba(var(--c-mint-rgb),0.6); }
.diagnostic-card .dx-cta { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; min-width: 220px; }
@media (max-width: 680px) { .diagnostic-card { grid-template-columns: 1fr; } }
.path-card { display: flex; flex-direction: column; }
.path-card .tier { font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-mint); }
.path-card .price { font-family: var(--font-display); font-size: 1.7rem; color: #fff; margin: 0.1rem 0 0.2rem; }
.path-card .card-foot { margin-top: auto; padding-top: 1.3rem; }
.practice-lab { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; }
.practice-lab .price { font-family: var(--font-display); font-size: 1.5rem; color: #fff; }
@media (max-width: 680px) { .practice-lab { grid-template-columns: 1fr; } }

/* ============================================================
   Comparison: Typical IELTS course vs Mode Education
   ============================================================ */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }
.compare-col { border-radius: var(--radius); padding: clamp(1.4rem, 2.5vw, 2rem); border: 1px solid var(--glass-border); height: 100%; }
.compare-col.typical { background: rgba(255,255,255,0.02); }
.compare-col.mode { background: var(--glass-panel); border-color: rgba(var(--c-mint-rgb),0.32); box-shadow: var(--shadow-glow); backdrop-filter: blur(14px); }
.compare-col > h3 { font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.4rem; }
.compare-col.typical > h3 { color: var(--c-muted); }
.compare-col.mode > h3 { color: var(--c-mint); }
.compare-row { padding: 0.85rem 0; border-top: 1px solid var(--glass-border); }
.compare-row:first-of-type { border-top: 0; }
.compare-row .t { font-weight: 600; color: var(--c-white); font-size: 0.97rem; }
.compare-col.typical .t { color: #b9c2cd; }
.compare-row .d { color: var(--c-muted); font-size: 0.88rem; margin-top: 0.2rem; }
.compare-divider { text-align: center; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--c-white); max-width: 50ch; margin: 2.5rem auto 0; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero__title .l1, .hero__title .l2, .hero__sub, .hero__cta, .reveal-up { opacity: 1 !important; transform: none !important; }
  .scroll-cue .line { animation: none; }
}

/* ============================================================
   CONVERGENCE THEME v2 (2026-06-15)
   Dark cinematic hero preserved; content sections lightened &
   greener; unified light/frosted nav + colour logo; dark footer
   anchor. Implemented by re-pointing tokens inside .section so the
   existing component rules inherit light values (surgical, reversible).
   ============================================================ */

/* page canvas: faint green-white */
body { background: #F4F8F5; color: #11202A; }

/* ---- Cinematic nav: TRANSPARENT over the hero, soft blurry blue-grey when
   scrolled (and over the light sections lower down); white text + the
   white-wordmark logo. Frosting on .nav::before so .nav stays filter-free
   (otherwise it becomes the containing block for the fixed mobile menu). */
.nav { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid transparent; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: transparent; opacity: 0; transition: opacity 0.45s var(--ease), background 0.45s var(--ease); }
.nav.scrolled { border-bottom-color: rgba(255,255,255,0.10); }
.nav.scrolled::before { background: rgba(14,22,34,0.62); opacity: 1; backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); }
/* Inner pages (no dark video hero) sit over LIGHT content, so the nav starts in
   the same darker frosted shade it uses when scrolled over light - consistent
   from the very top instead of jumping darker on scroll. */
body:not(:has(.home-hero)) .nav::before { background: rgba(10,16,26,0.9); opacity: 1; backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); }
body:not(:has(.home-hero)) .nav { border-bottom-color: rgba(255,255,255,0.10); }
.nav__link { color: var(--c-white) !important; opacity: 0.85; }
.nav__link:hover, .nav__link:focus-visible { opacity: 1; background: rgba(255,255,255,0.10); color: #fff !important; }
/* current page highlight */
.nav__link[aria-current="page"] { opacity: 1; background: rgba(255,255,255,0.12); color: #fff !important; }
.nav__link[aria-disabled="true"] { color: rgba(255,255,255,0.5) !important; background: none !important; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { background: #fff; }
.nav .nav__cta.btn-outline { color: #fff; font-size: 0.98rem; padding-block: 0.7em; line-height: 1.2; }
.nav .tooltip { background: rgba(14,22,34,0.96); color: #fff; border-color: rgba(255,255,255,0.16); }
@media (max-width: 860px) {
  .nav__links { background: rgba(14,22,34,0.6) !important; backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); border-left: 1px solid rgba(255,255,255,0.10); box-shadow: -24px 0 70px rgba(0,0,0,0.55); }
  .nav__links .nav__link { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav__links .nav__cta { margin-top: 1rem; }
}
/* #5 Apply-button very subtle twinkle */
@keyframes navTwinkle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--c-mint-rgb),0); border-color: var(--c-teal); }
  45% { box-shadow: 0 0 15px 0 rgba(var(--c-mint-rgb),0.5); border-color: rgba(var(--c-mint-rgb),0.7); }
}
/* The header Login button is plain - no twinkle (Mark, 2026-09-23). Campaign pages keep it on Apply. */
.nav .nav__cta:not(.nav__cta--login) { animation: navTwinkle 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .nav .nav__cta { animation: none; } }
/* #12 nav 10% darker when over a light section (toggled by site.js) */
.nav.nav--over-light.scrolled::before { background: rgba(10,16,26,0.9); }

/* ---- lighten content sections (hero & footer excluded) ---- */
.section {
  --c-white: #11202A;        /* text ink (was near-white) */
  --c-muted: #5a6b78;        /* muted on light */
  --c-mint:  #11885f;        /* accent -> deeper green, reads on light */
  --glass-panel: #ffffff;    /* cards -> white */
  --glass-border: rgba(var(--c-navy-rgb),0.10);
  --shadow-glow: 0 1px 0 rgba(var(--c-navy-rgb),0.03), 0 20px 50px -30px rgba(var(--c-navy-rgb),0.30);
  color: #11202A;
}
.section h1, .section h2, .section h3 { color: var(--c-ink); }
.section .glass-card { background: #fff; border: 1px solid rgba(var(--c-navy-rgb),0.10); box-shadow: 0 1px 2px rgba(var(--c-navy-rgb),0.04), 0 22px 50px -34px rgba(var(--c-navy-rgb),0.35); backdrop-filter: none; -webkit-backdrop-filter: none; }
.section .glass-card:hover { border-color: rgba(var(--c-green-rgb),0.45); box-shadow: 0 1px 2px rgba(var(--c-navy-rgb),0.05), 0 26px 56px -30px rgba(var(--c-green-rgb),0.40); }
/* "Our belief" box styled like the big /register box: dark gradient panel, white text */
.section .belief-card {
  background: var(--panel-gradient) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--r-panel) !important;
  box-shadow: 0 45px 120px -55px rgba(8,18,40,0.7) !important;
  padding: clamp(1.6rem, 4vw, 2.4rem) !important;
  color: #fff !important;
}
.section .belief-card:hover { border-color: rgba(var(--c-mint-rgb),0.45) !important; box-shadow: 0 45px 120px -55px rgba(8,18,40,0.7), 0 0 50px -28px rgba(var(--c-mint-rgb),0.4) !important; }
.section .belief-card h3 { color: #fff !important; }
.section .belief-card p, .section .belief-card .muted { color: rgba(255,255,255,0.78) !important; }
/* hard-coded whites -> ink/green */
.section .diagnostic-card .price, .section .path-card .price, .section .practice-lab .price, .section .product-card .price, .section .stat .n, .section .compare-divider, .section .compare-row .t { color: var(--c-ink); }
.section .diagnostic-card li, .section .path-card li { color: #48586a; }
.section .compare-col.typical .t { color: #48586a; }
.section .step-label .num { color: #fff; }
/* diagnostic -> light green-tinted feature card */
.section .diagnostic-card { background: radial-gradient(120% 140% at 0% 0%, rgba(var(--c-green-rgb),0.10), transparent 55%), linear-gradient(180deg, #ffffff, #f1f7f3); border: 1px solid rgba(var(--c-green-rgb),0.30); }
.section .compare-col.typical { background: #f1f4f2; border-color: rgba(var(--c-navy-rgb),0.08); }
.section .compare-col.mode { background: #fff; border-color: rgba(var(--c-green-rgb),0.32); backdrop-filter: none; }
/* ghost / outline buttons on light */
.section .btn-ghost { color: #1b2a39; border: 1px solid rgba(var(--c-navy-rgb),0.18); background: rgba(var(--c-navy-rgb),0.02); }
.section .btn-ghost:hover { background: rgba(var(--c-green-rgb),0.08); }
.section .btn-outline { color: #14503b; }
/* glow accents -> green on light */
.section.glow-bg::before { background: radial-gradient(60% 50% at 15% 0%, rgba(var(--c-green-rgb),0.08), transparent 70%), radial-gradient(50% 50% at 100% 30%, rgba(var(--c-green-rgb),0.05), transparent 70%); }
/* CTA band stays a dark green feature accent with light text */
.section .cta-band { background: radial-gradient(80% 120% at 50% 0%, rgba(var(--c-teal-rgb),0.30), transparent 60%), linear-gradient(180deg, #0e2a3f, #0a1c2b); border-color: rgba(var(--c-mint-rgb),0.25); }
.section .cta-band h2 { color: #fff; }
.section .cta-band p { color: rgba(255,255,255,0.86); }

/* ---- dark footer anchor (keeps its light text readable) ---- */
.footer { background: #0a1422; border-top: 1px solid rgba(255,255,255,0.08); }
/* colour logo's navy is low-contrast on the dark footer -> render it white there */
.footer__brand img { filter: none; opacity: 1; }

/* ---- modals (Early Access + Contact) -> light theme to match ----
   These aren't .section, so they'd otherwise inherit the dark panel +
   the new dark body text (title went invisible). Bring them into light. */
.modal { background: #fff; border-color: rgba(var(--c-navy-rgb),0.10); color: #11202A; box-shadow: 0 40px 120px -30px rgba(var(--c-navy-rgb),0.45), 0 0 0 1px rgba(var(--c-green-rgb),0.10), inset 0 1px 0 rgba(255,255,255,0.6);
  /* The modal is opaque white, so backdrop-filter does nothing visible here AND triggers an iOS Safari
     paint bug (inner content of a scrollable+transformed+backdrop-filtered box stays blank until you
     scroll). Removing it fixes the white-modal-on-iPhone issue with zero visual change. */
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal__head h2, .modal__success h2, #modalTitle { color: var(--c-ink); }
.modal__head p, .modal__success p, .form-smallprint { color: #5a6b78; }
.modal__head .highlight, .modal .highlight { color: #11885f; }
.modal__close { color: #5a6b78; border-color: rgba(var(--c-navy-rgb),0.12); background: rgba(var(--c-navy-rgb),0.04); }
.modal__close:hover { color: var(--c-ink); background: rgba(var(--c-navy-rgb),0.08); }
.field label { color: #11202A; }
.field .req { color: #11885f; }
.field input, .field select, .field textarea { color: #11202A; background-color: #fff; border-color: rgba(var(--c-navy-rgb),0.16); }
.field input::placeholder, .field textarea::placeholder { color: #98a4b0; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #11885f; background-color: #fff; box-shadow: 0 0 0 3px rgba(var(--c-green-rgb),0.18); }
.field option { background: #fff; color: #11202A; }
/* keep the single chevron (background-color above must not reset repeat/position) */
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6b78' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; }
.success-mark { background: rgba(var(--c-green-rgb),0.12); border-color: rgba(var(--c-green-rgb),0.40); color: #11885f; }
.form-error-banner { background: rgba(216,83,79,0.08); border-color: rgba(216,83,79,0.35); color: #b5403c; }

/* ============================================================
   Cinematic DARK BAND (e.g. the "Simulate / Improve / Perform"
   method section) - a deliberate dark interlude in the light page.
   Re-points tokens back to dark for this section only.
   ============================================================ */
.section.dark-band {
  --c-white: #F8FAFC; --c-muted: var(--c-muted-app); --c-mint: #3EE7B2;
  color: #F8FAFC;
  background:
    radial-gradient(95% 75% at 50% -12%, rgba(var(--c-teal-rgb),0.20), transparent 60%),
    radial-gradient(70% 60% at 100% 120%, rgba(var(--c-navy-rgb),0.45), transparent 55%),
    linear-gradient(180deg, #0a0f16 0%, #07090D 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.section.dark-band h2, .section.dark-band h3 { color: #fff; }
.section.dark-band .lead { color: var(--c-muted-app); }
.section.dark-band .eyebrow { color: var(--c-mint); }

.method-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .method-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.method-card {
  position: relative; padding: 2.3rem 1.9rem 2rem; border-radius: var(--r-card); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.method-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 100% at 0% 0%, rgba(var(--c-mint-rgb),0.12), transparent 50%);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.method-card:hover { transform: translateY(var(--lift-card)); border-color: rgba(var(--c-mint-rgb),0.38); box-shadow: 0 36px 72px -36px rgba(0,0,0,0.95), 0 0 54px -28px rgba(var(--c-mint-rgb),0.5); }
.method-card:hover::after { opacity: 1; }
.method-num { position: absolute; top: 1.05rem; right: 1.35rem; font-family: var(--font-display); font-weight: 600; font-size: 2.7rem; line-height: 1; color: rgba(255,255,255,0.07); letter-spacing: -0.02em; }
.method-ic {
  width: 54px; height: 54px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 1.2rem; color: var(--c-mint);
  background: radial-gradient(120% 120% at 30% 20%, rgba(var(--c-mint-rgb),0.22), rgba(var(--c-teal-rgb),0.05));
  border: 1px solid rgba(var(--c-mint-rgb),0.32); box-shadow: inset 0 0 18px rgba(var(--c-mint-rgb),0.12);
}
.method-ic svg { width: 24px; height: 24px; }
.method-card h3 { font-family: var(--font-display); font-size: 1.45rem; color: #fff; margin-bottom: 0.5rem; }
.method-card p { color: var(--c-muted-app); font-size: 0.97rem; line-height: 1.62; }

/* Dark elements woven through the light pages: glass-cards inside a dark band,
   plus the comparison "Mode" column as a dark feature card. */
.dark-band .glass-card { background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)) !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 30px 60px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06) !important; backdrop-filter: none !important; }
.dark-band .glass-card:hover { border-color: rgba(var(--c-mint-rgb),0.35) !important; box-shadow: 0 36px 70px -36px rgba(0,0,0,0.95), 0 0 50px -28px rgba(var(--c-mint-rgb),0.42) !important; }
.dark-band .glass-card h3 { color: #fff; }
.dark-band .glass-card p { color: var(--c-muted-app) !important; }
.dark-band .card-icon { color: var(--c-mint); background: linear-gradient(160deg, rgba(var(--c-mint-rgb),0.22), rgba(var(--c-teal-rgb),0.05)); border-color: rgba(var(--c-mint-rgb),0.30); }
.section .compare-col.mode { background: linear-gradient(180deg, rgba(14,22,34,0.97), rgba(9,12,18,0.98)) !important; border-color: rgba(var(--c-mint-rgb),0.32) !important; }
.section .compare-col.mode > h3 { color: var(--c-mint) !important; }
.section .compare-col.mode .t { color: #fff !important; }
.section .compare-col.mode .d { color: var(--c-muted-app) !important; }

/* #4 "Contact us" outline button on dark CTA bands: readable + gentle glow */
.section .cta-band .btn-outline { color: #fff !important; border-color: var(--c-teal) !important; background: rgba(var(--c-teal-rgb),0.12) !important; animation: contactGlow 3.4s ease-in-out infinite; }
.section .cta-band .btn-outline:hover { background: linear-gradient(180deg, #3EE7B2, #1D9E75) !important; color: #05231a !important; }
@keyframes contactGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--c-mint-rgb),0); } 50% { box-shadow: 0 0 22px -3px rgba(var(--c-mint-rgb),0.55); } }
@media (prefers-reduced-motion: reduce) { .section .cta-band .btn-outline { animation: none; } }

/* #13 founding-cohort CTA band: faint white-logo watermark, top-left */
.cta-band.watermark-logo { position: relative; overflow: hidden; }
.cta-band.watermark-logo::before { content: ""; position: absolute; top: 8px; left: 24px; width: 200px; height: 74px; background: url("/fd-assets/img/logo-white.svg?v=mode55") left center / contain no-repeat; opacity: 0.16; pointer-events: none; }

/* #11 compare "Mode" box: decorative coloured globe, top-right */
.section .compare-col.mode { position: relative; overflow: hidden; }
.section .compare-col.mode .mode-globe { position: absolute; top: 14px; right: 16px; width: 52px; height: auto; opacity: 0.55; pointer-events: none; }

/* #15/#16 legal pages (terms / privacy): darker, high-contrast body text */
.section.article, .section.article p, .section.article li, .section.article h2, .section.article h3, .section.article strong, .section.article td, .section.article th { color: #14202c !important; }
.section.article .meta { color: #5a6b78 !important; }

/* ─── WCAG 2.2 AA contrast fixes (2026-07-10) ────────────────────────────────
   Targeted, additive. Only nudges colours that measured below 4.5:1 on SOLID
   LIGHT backgrounds; the dark-theme palette and design tokens are untouched.
   NB: the nav/CTA "Apply"/"Contact" buttons are OUTLINED buttons over the dark
   hero - white text there is correct (the earlier 3.39 reading was a hover/scroll
   fill state, already handled by .btn-outline:hover -> dark text on the mint fill).
   So no button colour is changed. ──────────────────────────────────────────── */
/* Green eyebrows/labels on LIGHT sections: 4.16 -> 4.7:1 (dark-band eyebrows are mint, unaffected). */
.section:not(.dark-band) .eyebrow { color: #0f7a54; }
/* Muted small-print on LIGHT sections: 2.04 -> 5.5:1 (dark-theme muted keeps var(--c-muted)). */
.section:not(.dark-band) .muted { color: #5b6673; }
/* Signed-in header chip on the static pages (site.js, 2026-09-23): the person's initial and first
   name where "Login" was, matching the app header's account chip. */
.nav .nav__cta--me{display:inline-flex;align-items:center;gap:.5rem;padding-block:.45em;padding-inline:.5em 1em;}
.nav__me-av{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;border-radius:50%;
  background:linear-gradient(135deg,var(--c-teal),var(--c-mint));color:#06210f;font-weight:800;font-size:.85em;line-height:1;}
.nav__me-name{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}