/* =====================================================================
   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: var(--c-teal);
  color: #fff; 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: var(--c-teal); color: #fff; 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, var(--c-teal), var(--c-teal-600));
  color: #fff; 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. */
.nav__logo img { height: 33px; 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: center; 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.825rem, 1.4rem + 2.3vw, 3.1875rem); letter-spacing: -0.015em; opacity: 0; transform: translateY(22px); }
.hero__title .l2 { display: block; font-weight: 700; font-size: clamp(2.595rem, 1.4rem + 5.1vw, 5.1875rem); 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; }

/* 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: var(--c-teal); color: #fff; 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__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(10,13,20,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(3,5,10,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(10,13,20,0.96); color: #fff; border-color: rgba(255,255,255,0.16); }
@media (max-width: 860px) {
  .nav__links { background: rgba(10,13,20,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); }
}
.nav .nav__cta { 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(3,5,10,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: var(--c-teal) !important; color: #fff !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.png?v=mode13") 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; }