/* Haseen landing page (§135) — the app's own design language on the web.
   Tokens mirror src/lib/theme.ts (HASEEN) exactly; display type is Baloo
   Bhaijaan 2, the app's coding-journey face (§119), with Tajawal for body
   text. Arabic-first RTL; the EN toggle swaps .l-ar / .l-en nodes.
   Motion is calm by policy and disabled under prefers-reduced-motion. */

/* Fonts are self-hosted: build.mjs writes the @font-face rules from
   src/fonts.css into each page's head (font-display per language), so no
   request leaves the site's own origin. */

:root {
  /* HASEEN tokens — identical values to src/lib/theme.ts */
  --teal: #0E7C7B;
  --teal-dark: #0A5F5E;
  --teal-soft: #E3F0EF;
  --cream: #FBF7EC;
  --sun: #E7B84C;
  --sun-soft: #FAF0D7;
  --gold: #C9A24B;
  --gold-soft: #F3E7C8;
  --gold-ink: #8A6414;
  --sky: #EAF5FB;
  --sky-deep: #D3E9F5;
  --leaf: #7FB99A;
  --leaf-soft: #E9F3EE;
  --blossom: #B76E9B;
  --blossom-soft: #F5E6EF;
  --ink: #2C3A39;
  --ink-soft: #5E6E6C;
  --ink-faint: #8A9795;
  --card: #FFFFFF;
  --indigo: #3D5CC4;

  --shadow-soft: 0 6px 20px rgba(14, 124, 123, .10);
  --shadow-lift: 0 16px 40px rgba(44, 58, 57, .13);
  --radius: 22px;
  --ease: cubic-bezier(.22, .9, .3, 1);
  --maxw: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  font-size: 17px;
  line-height: 1.8;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: "Baloo Bhaijaan 2", "Tajawal", sans-serif;
  font-weight: 700;
  line-height: 1.45;
}

a { color: var(--teal); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
/* height:auto keeps the intrinsic width/height attributes (which reserve
   layout space and protect CLS) from fixing the rendered height. */
img { max-width: 100%; height: auto; display: block; }

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

/* Language visibility. The build removes the other language's nodes from each
   page, so these rules are only a belt for anything that slips through. */
html[data-lang="ar"] .l-en { display: none !important; }
html[data-lang="en"] .l-ar { display: none !important; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 99;
  background: var(--card); color: var(--teal-dark); padding: 12px 20px;
  border-radius: 0 0 12px 12px; font-weight: 800;
}
.skip:focus { inset-inline-start: 0; }

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

section { padding: 84px 0; position: relative; }
section.tight { padding: 62px 0; }

.eyebrow {
  color: var(--gold-ink); font-weight: 800; font-size: 14.5px;
  letter-spacing: .5px; margin-bottom: 10px;
}
.section-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.section-head h2 { font-size: clamp(26px, 4vw, 38px); color: var(--teal-dark); }
.section-head p { color: var(--ink-soft); margin-top: 12px; font-size: 17.5px; }

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* ── Top bar ────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 247, 236, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(14, 124, 123, .10);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 10px 22px;
  display: flex; align-items: center; gap: 14px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.nav a.nav-brand:hover { text-decoration: none; }
.nav-brand .mark { width: 30px; height: 30px; }
.nav-brand .name {
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 21px; color: var(--teal-dark);
}
.nav-spacer { flex: 1; }
.nav a.nav-cta {
  background: var(--teal); color: #fff; border-radius: 999px;
  padding: 8px 18px; font-size: 14.5px; font-weight: 800;
  box-shadow: var(--shadow-soft);
}
.nav a.nav-cta:hover { background: var(--teal-dark); text-decoration: none; }
.nav a.nav-link { color: var(--teal-dark); font-size: 14px; font-weight: 700; }
.lang-toggle {
  background: var(--card); color: var(--teal); border: 1.5px solid var(--teal-soft);
  border-radius: 999px; padding: 7px 16px; font-weight: 800; font-size: 14px;
  font-family: inherit; cursor: pointer;
}
.lang-toggle:hover { background: var(--teal-soft); text-decoration: none; }
/* Responsive images: the <picture> wrapper must be invisible to layout so the
   phone frames keep sizing the <img> itself. */
picture { display: contents; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(90% 120% at 80% 0%, rgba(234, 245, 251, .95) 0%, rgba(251, 247, 236, 0) 60%),
    linear-gradient(180deg, var(--sky) 0%, var(--teal-soft) 42%, var(--cream) 100%);
  padding: 56px 0 76px; overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 48px; align-items: center;
}
/* The H1 is now a full sentence — a question — so it runs smaller than the
   old three-word claim did, and stays readable when it wraps to three lines. */
.hero h1 {
  font-size: clamp(30px, 4.6vw, 48px);
  color: var(--teal-dark); margin-bottom: 12px;
}
.hero .promise {
  font-size: clamp(17px, 2.1vw, 20px); color: var(--ink-soft);
  max-width: 34ch; margin-bottom: 18px;
}
.hero-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hero-brand .mark { width: 60px; height: 60px; flex: none; }
.hero-brand .name {
  font-family: "Baloo Bhaijaan 2", sans-serif; font-size: 34px;
  color: var(--teal-dark); line-height: 1.1;
}
.hero-brand .latin {
  color: var(--gold); font-size: 12.5px; letter-spacing: 6px; font-weight: 800;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 14px 26px; font-weight: 800; font-size: 16px;
  font-family: inherit; cursor: pointer; border: 2px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn-primary { background: var(--teal); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-2px); text-decoration: none; }
.btn-ghost { background: var(--card); color: var(--teal-dark); border-color: var(--gold-soft); }
.btn-ghost:hover { background: var(--sun-soft); transform: translateY(-2px); text-decoration: none; }

/* The answer to the H1's question, in two short lines: who is choosing, and
   who should be. The <br> is deliberate — these are two beats, not a wrap. */
.hero .sub {
  font-family: "Baloo Bhaijaan 2", "Tajawal", sans-serif;
  font-size: clamp(20px, 2.7vw, 27px); color: var(--teal); font-weight: 700;
  line-height: 1.5; margin-bottom: 12px;
}
.offer {
  display: inline-block; background: var(--sun-soft); color: var(--gold-ink);
  border: 1.5px solid var(--gold-soft); border-radius: 999px;
  padding: 8px 18px; font-weight: 800; font-size: 15px;
  box-shadow: 0 4px 14px rgba(201, 162, 75, .15); margin-bottom: 10px;
}
/* Plain text on purpose — it used to look like a button and wasn't one. */
.launch { color: var(--ink-soft); font-size: 15px; font-weight: 700; margin-bottom: 18px; }
/* Store names never break mid-name on narrow screens. */
.nw { white-space: nowrap; }

/* ── Waitlist form — one partial, three mounts ──────────────────────────── */
.waitlist {
  margin-top: 6px; max-width: 480px; display: grid; gap: 12px;
  background: var(--card); border-radius: var(--radius); padding: 18px 18px 14px;
  border: 1px solid var(--teal-soft); box-shadow: var(--shadow-soft);
}
.waitlist .field { margin: 0; }
.waitlist legend { font-size: 14.5px; font-weight: 800; margin-bottom: 8px; }
.waitlist input[type="tel"], .waitlist select {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--teal-soft);
  background: var(--card);
}
.waitlist input::placeholder { color: var(--ink-faint); }
.waitlist input:focus, .waitlist select:focus { border-color: var(--teal); outline: none; }
.waitlist .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chips { border: 0; padding: 0; min-width: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* The checkbox stays a real checkbox (keyboard, screen readers); only its
   pill is painted. */
.chip { position: relative; display: inline-block; }
.chip input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.chip > span {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  font-weight: 800; font-size: 15px; line-height: 1.5;
  background: var(--sky); color: var(--teal-dark); border: 1.5px solid var(--sky-deep);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.chip input:checked + span { background: var(--teal); color: #fff; border-color: var(--teal); }
.chip input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.help { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 4px 0 0; }
.waitlist .btn { width: 100%; justify-content: center; }
.micro { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.form-note { font-size: 13.5px; min-height: 20px; color: var(--ink-soft); }
.form-note.ok { color: #2F7D4F; font-weight: 700; }
.form-note.err { color: #B3261E; font-weight: 700; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; }

/* Phone frame */
.phone-stage { display: flex; justify-content: center; position: relative; }
.phone {
  position: relative; width: min(310px, 76vw); aspect-ratio: 430 / 932;
  background: #23302F; border-radius: 46px; padding: 11px;
  box-shadow: 0 34px 80px rgba(14, 124, 123, .30), 0 0 0 1px rgba(255, 255, 255, .10) inset;
}
.phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 36px; overflow: hidden; background: var(--cream);
}
.phone-screen img, .phone-screen video {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.phone-notch {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 36%; height: 24px; background: #23302F;
  border-radius: 0 0 15px 15px; z-index: 2;
}
.hero-deco {
  position: absolute; font-size: 26px; opacity: .5; pointer-events: none;
  user-select: none;
}

/* ── Seven gates ────────────────────────────────────────────────────────── */
.gates {
  background:
    radial-gradient(120% 70% at 50% 0%, var(--sky) 0%, rgba(234, 245, 251, 0) 60%),
    var(--card);
}
.gates-stage { position: relative; padding: 14px 0 4px; }
/* Track and fill are positioned in physical px by landing.js — measured from
   the live dot centres, so one code path serves both orientations and both
   text directions. */
/* The rail ahead of the clip is dashed — "not travelled yet"; the part
   behind it fills in solid. Orientation comes from data-horizontal, which
   landing.js sets from the measured layout. */
.gate-track {
  position: absolute; left: 0; top: 0; width: 0; height: 3px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #CBDEDC 0 7px, transparent 7px 15px);
}
.gates-stage[data-horizontal="0"] .gate-track {
  background: repeating-linear-gradient(180deg, #CBDEDC 0 7px, transparent 7px 15px);
}
.gate-fill {
  position: absolute; left: 0; top: 0; width: 0; height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--leaf), var(--teal));
  box-shadow: 0 0 12px rgba(14, 124, 123, .30);
}
.gates-stage[data-horizontal="0"] .gate-fill {
  background: linear-gradient(180deg, var(--leaf), var(--teal));
}
.gate-list {
  position: relative; list-style: none; display: grid;
  grid-template-columns: repeat(7, 1fr); gap: 8px;
  counter-reset: gate;
}
.gate { text-align: center; position: relative; counter-increment: gate; }
.gate-dot {
  width: 68px; height: 68px; margin: 18px auto 14px; border-radius: 50%;
  background: var(--card); border: 2px solid #DCE9E8;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
  box-shadow: 0 2px 10px rgba(44, 58, 57, .05);
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease),
              background .45s var(--ease), transform .45s var(--ease);
}
.gate-dot svg {
  width: 29px; height: 29px; stroke: #9FAEAC;
  transition: stroke .45s var(--ease);
}
.gate.lit .gate-dot {
  border-color: var(--teal); background: var(--teal-soft);
  box-shadow: 0 8px 20px rgba(14, 124, 123, .18), 0 0 0 5px rgba(14, 124, 123, .07);
  transform: translateY(-3px);
}
.gate.lit .gate-dot svg { stroke: var(--teal-dark); }

/* A ring that breathes on whichever gate the clip is passing through. */
.gate-dot::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid transparent; transition: border-color .4s var(--ease);
}
.gate.active .gate-dot::after {
  border-color: rgba(14, 124, 123, .30);
  animation: gateRing 2s ease-in-out infinite;
}
@keyframes gateRing {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.14); opacity: .12; }
}

/* The last gate is the parent's word — it earns the gold. */
.gate:last-child .gate-dot { border-color: #EBDFC3; }
.gate:last-child.lit .gate-dot {
  border-color: var(--gold); background: var(--gold-soft);
  box-shadow: 0 8px 22px rgba(201, 162, 75, .28), 0 0 0 6px rgba(201, 162, 75, .12);
}
.gate:last-child.lit .gate-dot svg { stroke: var(--gold-ink); }
.gate:last-child.lit .gate-label { color: var(--gold-ink); }
.gate:last-child.active .gate-dot::after { border-color: rgba(201, 162, 75, .38); }

.gate-label {
  display: block; font-size: 13.5px; font-weight: 800;
  color: var(--ink-soft); line-height: 1.45;
  /* Two lines reserved so a wrapping label never drops the row out of line. */
  min-height: 2.9em; padding: 0 2px;
  transition: color .45s var(--ease);
}
.gate.lit .gate-label { color: var(--teal-dark); }

/* The travelling clips: a chip, not a dot — it reads as a piece of video. */
.token {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 29px;
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; z-index: 4; will-change: transform;
}
.token-pass {
  background: var(--card); border: 2px solid var(--teal); color: var(--teal);
  box-shadow: 0 7px 18px rgba(14, 124, 123, .30);
}
.token-fail {
  background: var(--card); border: 2px solid #E7B4B4; color: #B3261E;
  box-shadow: 0 7px 18px rgba(179, 38, 30, .20);
}

/* Legend — makes the animation legible even to someone who glances once. */
.gates-legend {
  display: flex; flex-wrap: wrap; gap: 10px 44px; justify-content: center;
  margin-top: 36px;
}
.lg {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; color: var(--ink-soft);
}
.lg i {
  font-style: normal; width: 30px; height: 23px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; background: var(--card); border: 1.5px solid;
}
.lg-pass i { border-color: var(--teal); color: var(--teal); }
.lg-fail i { border-color: #E7B4B4; color: #B3261E; }

.gates-caption {
  text-align: center; margin-top: 26px; color: var(--teal-dark);
  font-weight: 800; font-size: clamp(16px, 2.2vw, 19px);
  font-family: "Baloo Bhaijaan 2", sans-serif;
}
.gates-sub { text-align: center; color: var(--ink-soft); font-size: 15.5px; margin-top: 8px; }

/* ── Categories ─────────────────────────────────────────────────────────── */
.cat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.cat {
  background: var(--card); border-radius: 20px; padding: 20px 14px;
  text-align: center; border: 1px solid rgba(14, 124, 123, .08);
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
/* Both names always show (as the app's own shelf headers do); the reading
   language simply takes the lead. */
html[data-lang="en"] .cat-ar { order: 2; font-size: 12.5px; color: var(--ink-faint); font-weight: 700; }
html[data-lang="en"] .cat-en { order: 1; font-size: 16px; color: var(--ink); font-weight: 800; letter-spacing: 0; }
.cat-medallion {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center; font-size: 27px;
  border: 2px solid transparent;
}
.cat-ar { font-weight: 800; font-size: 16px; color: var(--ink); }
.cat-en { font-size: 12.5px; color: var(--ink-faint); font-weight: 700; letter-spacing: .3px; }

/* ── Journeys rail ──────────────────────────────────────────────────────── */
.journeys { background: linear-gradient(180deg, var(--cream) 0%, var(--teal-soft) 100%); }
.rail {
  display: flex; gap: 20px; overflow-x: auto; padding: 6px 22px 26px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  max-width: var(--maxw); margin: 0 auto;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: rgba(14, 124, 123, .25); border-radius: 999px; }
.jcard {
  flex: 0 0 auto; width: 252px; scroll-snap-align: center; text-align: center;
}
.jcard .phone { width: 100%; border-radius: 34px; padding: 8px; }
.jcard .phone-screen { border-radius: 27px; }
.jcard .phone-notch { width: 38%; height: 17px; top: 8px; border-radius: 0 0 11px 11px; }
.jcard h3 { font-size: 18px; color: var(--teal-dark); margin: 16px 0 4px; }
.jcard p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }
.jcard.more {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px dashed rgba(14, 124, 123, .32); border-radius: 30px;
  background: rgba(255, 255, 255, .55); padding: 30px 22px; align-self: stretch;
}
.jcard.more .sparkle { font-size: 40px; margin-bottom: 10px; }

/* ── Parents Academy ────────────────────────────────────────────────────── */
.academy-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center;
}
.academy-art { position: relative; display: flex; justify-content: center; }
.academy-art .phone { width: min(300px, 80%); will-change: transform; }
.academy h2 { font-size: clamp(26px, 4vw, 38px); color: var(--teal-dark); margin-bottom: 16px; }
.aca-item {
  background: var(--card); border-radius: 18px; padding: 16px 20px; margin-bottom: 12px;
  border-inline-start: 4px solid var(--gold); box-shadow: var(--shadow-soft);
}
.aca-item h3 { font-size: 18px; color: var(--gold-ink); margin-bottom: 3px; }
.aca-item p { font-size: 15px; color: var(--ink-soft); }
.aca-quote {
  margin-top: 22px; font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: clamp(17px, 2.4vw, 21px); color: var(--teal-dark);
  line-height: 1.7; border-top: 2px dashed var(--gold-soft); padding-top: 20px;
}

/* ── Parent control ─────────────────────────────────────────────────────── */
.control { background: var(--card); }
.control-grid {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 52px; align-items: center;
}
.control h2 { font-size: clamp(26px, 4vw, 38px); color: var(--teal-dark); margin-bottom: 20px; }
.point { display: flex; gap: 16px; margin-bottom: 22px; align-items: flex-start; }
.point-ic {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--teal-soft);
}
.point h3 { font-size: 17.5px; color: var(--ink); margin-bottom: 2px; }
.point p { font-size: 15px; color: var(--ink-soft); }
.shot-pair { display: flex; gap: 22px; justify-content: center; align-items: center; }
.shot-pair .phone { width: min(232px, 46%); border-radius: 32px; padding: 8px; }
.shot-pair .phone-screen { border-radius: 25px; }
.shot-pair .phone-notch { width: 38%; height: 15px; top: 8px; border-radius: 0 0 10px 10px; }
/* A detail card lifted out of the approvals screen, floating beside the phone. */
.shot-pair .ui-card {
  width: min(300px, 50%); border-radius: 18px;
  box-shadow: var(--shadow-lift); border: 1px solid rgba(14, 124, 123, .10);
}

/* ── Trust strip ────────────────────────────────────────────────────────── */
.trust { background: var(--teal-dark); color: #EAF6F5; }
.trust h2 { color: #fff; }
.trust .section-head p { color: rgba(234, 246, 245, .8); }
.trust-row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px;
}
.trust-item { text-align: center; }
.trust-ic {
  width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
}
.trust-ic svg { width: 25px; height: 25px; stroke: var(--sun); }
.trust-item span { font-size: 13.5px; font-weight: 700; line-height: 1.55; display: block; }

/* ── National alignment ─────────────────────────────────────────────────── */
.national-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.nat {
  background: var(--card); border-radius: 20px; padding: 26px 28px;
  border: 1px solid var(--gold-soft); box-shadow: var(--shadow-soft);
}
.nat h3 { font-size: 19px; color: var(--gold-ink); margin-bottom: 6px; }
.nat p { font-size: 15.5px; color: var(--ink-soft); }

/* ── Partners ───────────────────────────────────────────────────────────── */
.partners { background: var(--card); }
.partner-box {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
  background: var(--cream); border-radius: 26px; padding: 42px;
  border: 1px solid var(--gold-soft);
}
.partner-box h1, .partner-box h2 { font-size: clamp(24px, 3.4vw, 32px); color: var(--teal-dark); margin-bottom: 14px; }
/* /partners opens on the box itself — no hero above it. */
.page-partners .partners { padding-top: 40px; }
.partner-box p { color: var(--ink-soft); font-size: 16.5px; margin-bottom: 12px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14.5px; font-weight: 800; margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--teal-soft);
  background: var(--card);
}
.field textarea { min-height: 116px; resize: vertical; line-height: 1.7; }
.field input:focus, .field textarea:focus { border-color: var(--teal); outline: none; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { background: var(--card); }
.faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item {
  background: var(--cream); border: 1px solid var(--gold-soft); border-radius: 18px;
  padding: 20px 24px;
}
.faq-item h3 { font-size: 19px; color: var(--teal-dark); margin-bottom: 6px; }
.faq-item p { color: var(--ink-soft); font-size: 16px; }

/* ── Testimonials — cards that echo a WhatsApp bubble ───────────────────── */
.voices { background: linear-gradient(180deg, var(--cream) 0%, var(--leaf-soft) 100%); }
.voices-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; max-width: 960px; margin: 0 auto; align-items: start;
}
.bubble {
  position: relative; background: var(--card); border: 1px solid var(--leaf-soft);
  border-radius: 18px; border-end-start-radius: 4px; padding: 18px 20px 14px;
  box-shadow: var(--shadow-soft);
}
.bubble::before {
  content: ""; position: absolute; bottom: -1px; inset-inline-start: -9px;
  border: 9px solid transparent; border-bottom-color: var(--card);
  border-inline-end-color: var(--card);
}
.bubble blockquote { font-size: 16.5px; color: var(--ink); line-height: 1.75; margin: 0 0 10px; }
.bubble figcaption { font-size: 13.5px; color: var(--ink-soft); font-weight: 700; }

/* ── Waitlist bands (mid-page and final) ────────────────────────────────── */
.cta-band { background: linear-gradient(180deg, var(--teal-soft) 0%, var(--cream) 100%); }
.cta-band.final { background: linear-gradient(180deg, var(--cream) 0%, var(--sun-soft) 100%); }
.band-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.band-copy h2 { font-size: clamp(24px, 3.6vw, 34px); color: var(--teal-dark); margin-bottom: 10px; }
.band-copy p { color: var(--ink-soft); font-size: 16.5px; }
.band-copy .offer { margin: 6px 0 8px; }
.band-copy .launch { margin-bottom: 6px; }
.cta-band .waitlist { max-width: none; margin-top: 0; }

/* ── Thank-you page ─────────────────────────────────────────────────────── */
.thanks { min-height: 62vh; display: flex; align-items: center; padding: 56px 0; }
.thanks-card {
  max-width: 640px; margin: 0 auto; text-align: center;
  background: var(--card); border-radius: var(--radius); padding: 40px 32px;
  border: 1px solid var(--gold-soft); box-shadow: var(--shadow-soft);
}
.thanks-card > .mark { width: 64px; height: 64px; margin: 0 auto; }
.thanks-card h1 { font-size: clamp(28px, 4.4vw, 40px); color: var(--teal-dark); margin: 14px 0 10px; }
.thanks-card p { color: var(--ink-soft); font-size: 17.5px; margin-bottom: 22px; }
.thanks-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn-wa { background: #25D366; color: #fff; box-shadow: var(--shadow-soft); }
.btn-wa:hover { background: #1DA851; transform: translateY(-2px); text-decoration: none; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer.site {
  background: var(--teal-soft); color: var(--ink-soft);
  padding: 40px 0 34px; text-align: center; font-size: 15px;
}
footer.site nav { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; }
footer.site a { color: var(--teal-dark); }
/* Full-strength ink: at .85 opacity this failed AA on the teal-soft band. */
footer.site .copy { color: var(--ink-soft); font-size: 14px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-row { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
@media (max-width: 860px) {
  section { padding: 62px 0; }
  .hero-grid, .academy-grid, .control-grid, .partner-box, .band-in { grid-template-columns: 1fr; gap: 34px; }
  .hero .promise { max-width: none; }
  .academy-art { order: -1; }
  .partner-box { padding: 28px 22px; }

  /* Gates become a vertical pipeline — the labels get room to breathe, and
     the inline-start gutter is the lane the travelling tokens ride in. */
  .gates-stage { padding-inline-start: 46px; }
  .gate-list { grid-template-columns: 1fr; gap: 4px; }
  .gate {
    display: grid; grid-template-columns: 68px 1fr; align-items: center;
    gap: 16px; text-align: start; padding: 3px 0;
  }
  .gate-dot { margin: 6px 0; }
  /* Stacked, each label owns its own row — no need to reserve two lines. */
  .gate-label { font-size: 15.5px; min-height: 0; }
  .gates-legend { margin-top: 26px; gap: 10px 18px; }
  .lg { font-size: 13.5px; }
}
/* The header already shows the mark: on a phone the second one only pushes
   the form down. */
@media (max-width: 767px) {
  .hero-brand { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-row { grid-template-columns: repeat(2, 1fr); }
  .shot-pair { flex-direction: column; align-items: center; }
  .shot-pair .phone { width: min(260px, 70%); }
  .shot-pair .ui-card { width: min(340px, 88%); }
  /* The parent action stays in the sticky bar on phones; the institutions
     link moves out of the way (it lives on /partners). The button never
     wraps, the brand never shrinks — and on the English page, whose button
     is twice as long, the wordmark yields to the mark alone. */
  .nav-in { gap: 8px; }
  .nav-brand { flex: none; }
  .nav a.nav-cta { padding: 7px 12px; font-size: 13px; white-space: nowrap; }
  .nav a.nav-link { display: none; }
  .lang-toggle { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
  html[lang="en"] .nav-brand .name { display: none; }
  /* Decorative emoji have no room beside a three-line H1 on a phone. */
  .hero-deco { display: none; }
  .national-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .waitlist .two { grid-template-columns: 1fr; }
}
/* Below 340px even the Arabic bar cannot hold wordmark + button + language
   link; the mark alone carries the brand. */
@media (max-width: 340px) {
  .nav-brand .name { display: none; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cat, .btn, .gate-dot, .gate-label { transition: none; }
  .cat:hover, .btn:hover { transform: none; }
  .gate.active .gate-dot::after { animation: none; }
  .gate-fill { transition: none; }
  #treeArt { transform: none !important; }
}