/* ==========================================================================
   MASHI — marketing site
   Design system: Kemet Kids (the live app theme since 2026-07-17).
   LIGHT MODE ONLY — the site does not ship a dark theme.
   Every token below is copied literally from the :root block of
   arabicapp/design/kemet_kids_screens_v1.html — do not eyeball new values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Kemet Kids core (light) --- */
  --papyrus:      #FBF6ED;
  --surface:      #FFFFFF;
  --ink:          #232C4E;
  --muted:        #626A8A; /* app token is #757D9C; darkened for WCAG AA body text on web */
  --line:         #EAE2D0;

  /* --- Sobek brand (2026-09) — sampled from Logo_appicon.png and the splash art.
     The mascot's own colours. They sit on top of the Kemet Kids tokens below,
     which the app's screens still use, so the screen replicas stay truthful. --- */
  --navy:         #0B3A7E;   /* wordmark, display headings */
  --navy-dk:      #082C61;
  --yolk:         #FED208;   /* app-icon yellow: hero field + primary CTA */
  --yolk-dk:      #E9BF00;
  --sky:          #0680E6;   /* the splash-screen sky and river */
  --sky-text:     #0A5FB0;   /* AA on papyrus and on yolk (large text) */
  --croc:         #6BB634;   /* his skin — ticks and success, nothing else */
  --croc-text:    #3E7A16;

  /* --- Brand accents --- */
  --lapis:        #2E4FE3;
  --lapis-dk:     #2340C0;
  --gold:         #F5B82E;
  --gold-dk:      #D89B12;
  --faience:      #2EB8A6;
  --faience-dk:   #1F9A8A;
  --terra:        #E2725B;
  --sun:          #FFD75E;

  /* --- Tints --- */
  --sand:         #F6EBD7;
  --sand-dk:      #E3D2AE;
  --mist:         #EAF1FF;
  --lemon:        #FCF0CE;
  --mint:         #E5F6F2;
  --blush:        #FBE3DC;

  /* --- On-tint TEXT tones (web only) ---------------------------------------
     The app's rule is "text on a tint uses the matching *Dk tone, or ink".
     At web body sizes the *Dk tones fail WCAG AA on their own tints
     (goldDk on sand is 2.06:1), so text gets these darker siblings while the
     fills, borders and glow shadows keep the exact app values above.
     All three clear 4.5:1 on sand / lemon / mint / blush and on white.        */
  --gold-text:    #8E6207;
  --faience-text: #12695E;
  --terra-text:   #A84330;
  --lapis-text:   #2E4FE3;

  /* Fills that carry WHITE text need to stay dark enough for AA. The brand
     lapis/terra above are correct for text and borders; these are their
     filled-surface siblings. Faience never takes white text on web — it
     takes `ink` (white on faience is 2.46:1). */
  --lapis-fill:   #2E4FE3;
  --terra-fill:   #B04630;

  /* --- Derived surfaces (web only; kept inside the app's hue family) --- */
  --surface-2:    #FFFFFF;
  --header-bg:    rgba(251, 246, 237, .82);
  --code-bg:      var(--sand);
  --ink-on-tint:  var(--ink);

  /* --- Shape --- */
  --r-card:   24px;
  --r-input:  20px;
  --r-pill:   28px;
  --r-chip:   16px;
  --r-cartouche: 32px;
  --border-w: 1.5px;

  /* --- Elevation: only two shadows exist in this system --- */
  --shadow-soft:   0 8px 20px -4px rgba(35, 44, 78, .07);
  --shadow-lift:   0 18px 44px -12px rgba(35, 44, 78, .16);
  --glow-lapis:    0 8px 18px -4px rgba(46, 79, 227, .32);
  --glow-gold:     0 8px 18px -4px rgba(216, 155, 18, .40);
  --glow-faience:  0 8px 18px -4px rgba(46, 184, 166, .40);

  /* --- Type --- */
  --f-head: 'Fredoka', 'Baloo 2', system-ui, sans-serif;   /* the wordmark face */
  --f-app:  'Baloo 2', system-ui, sans-serif;               /* what the app itself renders — screen replicas only */
  --f-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --f-ar:   'Noto Sans Arabic', 'Segoe UI', sans-serif;

  /* --- Layout --- */
  --maxw:        1180px;
  --maxw-narrow: 760px;
  --pad-x:       clamp(20px, 5vw, 40px);
  --section-y:   clamp(64px, 9vw, 116px);

  /* --- Motion --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .32s;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--papyrus);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

/* Papyrus grain. A single tiled SVG turbulence, fixed behind everything and
   multiplied over the page so the flat #FBF6ED reads as a surface rather than
   a colour swatch. Costs one ~400-byte data URI and no layout work. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .5;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--lapis); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

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

::selection { background: var(--gold); color: #232C4E; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--lapis-fill); color: #fff; padding: 12px 20px;
  border-radius: 0 0 14px 14px; font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; text-decoration: none; }

/* --------------------------------------------------------------------------
   4. TYPE SCALE  (mirrors the app's ratios, fluid for web)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, .display, .h1, .h2, .h3 {
  font-family: var(--f-head);
  font-weight: 700;            /* Fredoka tops out at 700; the roundness does the work 800 used to */
  line-height: 1.14;
  letter-spacing: 0;
  color: var(--navy);
  text-wrap: balance;
}
h1, .display { font-size: clamp(2.35rem, 1.35rem + 4.2vw, 4.15rem); line-height: 1.04; }
h2, .h1      { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 2.9rem); }
h3, .h2      { font-size: clamp(1.22rem, 1.02rem + .8vw, 1.5rem); font-weight: 600; color: var(--ink); }
h4, .h3      { font-size: 1.05rem; font-weight: 600; color: var(--ink); }

.lede {
  font-size: clamp(1.06rem, .98rem + .42vw, 1.28rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
}

/* Section kicker. Sentence case in the wordmark face, sky blue — a small
   handwritten label rather than tracked-out caps. */
.overline {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sky-text);
  display: block;
  margin-bottom: 10px;
}

.muted   { color: var(--muted); }
.small   { font-size: .875rem; line-height: 1.55; }
.tiny    { font-size: .84rem; line-height: 1.5; color: var(--muted); }
.center  { text-align: center; }
.nowrap  { white-space: nowrap; }

strong, b { font-weight: 700; color: var(--ink); }

/* Arabic — ALWAYS rtl + Noto Sans Arabic. Never mix unmarked with Latin. */
.ar {
  font-family: var(--f-ar);
  font-weight: 700;
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 1.6;
}
.ar-lg { font-size: 1.72rem; line-height: 1.65; }
.ar-sm { font-family: var(--f-ar); font-weight: 500; font-size: .9rem; direction: rtl; unicode-bidi: isolate; }
.translit { font-style: italic; color: var(--muted); font-weight: 700; }
.glyph { font-family: var(--f-ar), serif; font-weight: 400; line-height: 1; }

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.wrap-narrow { width: 100%; max-width: var(--maxw-narrow); margin-inline: auto; padding-inline: var(--pad-x); }

section { position: relative; }
.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(44px, 6vw, 72px); }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.section-head p { margin-top: 16px; }

.band { background: var(--surface); border-block: var(--border-w) solid var(--line); }
.band-sand { background: var(--sand); }
.band-mist { background: var(--mist); }

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); } }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.gap-8   { gap: 8px; }  .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-24  { gap: 24px; } .gap-32 { gap: 32px; }
.wrapflex{ flex-wrap: wrap; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }

/* --------------------------------------------------------------------------
   6. BUTTONS  (pill 28, h≈56, glow shadow — per §4 of the design system)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-head); font-weight: 700; font-size: 1.0625rem;
  padding: 16px 30px; min-height: 56px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Yolk yellow is the primary CTA — the app-icon colour. Never green. */
.btn-gold  { background: var(--yolk); color: var(--navy); box-shadow: 0 8px 18px -4px rgba(233,191,0,.45); }
.btn-gold:hover { background: #FFDD2E; box-shadow: 0 12px 26px -6px rgba(233,191,0,.55); }

.btn-lapis { background: var(--lapis-fill); color: #fff; box-shadow: var(--glow-lapis); }
.btn-lapis:hover { filter: brightness(1.12); box-shadow: 0 12px 26px -6px rgba(46,79,227,.45); }

/* Navy — the CTA that sits ON the yellow hero field. */
.btn-navy  { background: var(--navy); color: #fff; box-shadow: 0 8px 18px -4px rgba(11,58,126,.4); }
.btn-navy:hover { background: var(--navy-dk); box-shadow: 0 12px 26px -6px rgba(11,58,126,.5); }

.btn-ghost {
  background: var(--surface); color: var(--lapis);
  border: 2px solid var(--line); box-shadow: var(--shadow-soft);
}
.btn-ghost:hover { border-color: var(--lapis); background: var(--mist); }

.btn-sm { padding: 11px 20px; min-height: 44px; font-size: .95rem; }
.btn-full { width: 100%; }

/* Long CTA labels must wrap on narrow screens rather than push the page wide. */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; padding-inline: 22px; }
}

.link-arrow {
  font-family: var(--f-head); font-weight: 700; font-size: 1rem;
  color: var(--lapis); display: inline-flex; align-items: center; gap: 7px;
}
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. CARDS, CHIPS, PILLS
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(20px, 2.4vw, 28px);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card h3 { margin-bottom: 10px; }
.card p  { color: var(--muted); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: var(--border-w) solid var(--line);
  border-radius: var(--r-chip); padding: 7px 13px;
  font-weight: 700; font-size: .84rem; color: var(--ink);
  white-space: nowrap;
}
.chip-gold    { background: var(--lemon); border-color: transparent; color: var(--gold-text); }
.chip-faience { background: var(--mint);  border-color: transparent; color: var(--faience-text); }
.chip-lapis   { background: var(--mist);  border-color: transparent; color: var(--lapis-text); }
.chip-terra   { background: var(--blush); border-color: transparent; color: var(--terra-text); }

.icon-circle {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
}
.ic-lapis   { background: var(--mist);  color: var(--lapis-text); }
.ic-gold    { background: var(--lemon); color: var(--gold-text); }
.ic-faience { background: var(--mint);  color: var(--faience-text); }
.ic-terra   { background: var(--blush); color: var(--terra-text); }

svg.ic { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Cartouche — the signature shape. Dashed gold on sand, r32. Pull-quotes only. */
.cartouche {
  background: var(--sand);
  border: 2.5px dashed var(--gold);
  border-radius: var(--r-cartouche);
  padding: clamp(26px, 3.4vw, 44px);
  position: relative;
}
.cartouche-quote {
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(1.28rem, 1.05rem + 1.1vw, 1.85rem);
  line-height: 1.34; color: var(--ink); text-wrap: balance;
}

/* --------------------------------------------------------------------------
   8. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1.5px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 4px 20px -8px rgba(35,44,78,.14); }
.header-inner { display: flex; align-items: center; gap: 20px; height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 36px; height: 36px; border-radius: 0; filter: drop-shadow(0 3px 5px rgba(11,58,126,.22)); }   /* the app icon; its corners are already rounded */
.brand-word { height: 30px; width: auto; }       /* the Fredoka wordmark with its three rays */
.brand-name {
  font-family: var(--f-head); font-weight: 700; font-size: 1.5rem;
  color: var(--navy); letter-spacing: 0; line-height: 1;
}

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  font-weight: 500; font-size: .95rem; color: var(--muted);
  padding: 9px 14px; border-radius: 14px;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--sand); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--navy); background: var(--lemon); font-weight: 700; }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: 8px; }

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 14px; color: var(--ink); }

@media (max-width: 1020px) {
  .nav-toggle { display: grid; place-items: center; }
  .header-actions { margin-left: auto; }
  .nav {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1.5px solid var(--line);
    padding: 14px var(--pad-x) 26px; margin: 0;
    box-shadow: var(--shadow-lift);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav a { padding: 14px 16px; font-size: 1.05rem; }
  .nav .btn { margin-top: 10px; }
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 6vw, 84px) clamp(56px, 7vw, 100px); }
.hero::before {
  /* Sun glow, top-right — the app's own motif */
  content: ""; position: absolute; z-index: 0;
  width: 620px; height: 620px; right: -180px; top: -300px;
  background: radial-gradient(circle, rgba(255,215,94,.34) 0%, rgba(255,215,94,0) 68%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; z-index: 0;
  width: 560px; height: 560px; left: -240px; bottom: -280px;
  background: radial-gradient(circle, rgba(46,184,166,.20) 0%, rgba(46,184,166,0) 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
@media (max-width: 940px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero-copy .lede, .hero-copy .eyebrow-pill { margin-inline: auto; }
  .hero-cta, .hero-proof { justify-content: center; }
  .hero-visual { order: -1; }
}

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface); border: var(--border-w) solid var(--line);
  border-radius: 999px; padding: 8px 16px 8px 10px;
  font-size: .84rem; font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow-soft); margin-bottom: 26px;
}
.eyebrow-pill .dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--mint);
  display: grid; place-items: center; color: var(--faience-text); flex-shrink: 0;
}

.hero h1 .accent {
  color: var(--sky-text);
  position: relative; white-space: nowrap;
}

/* ---- The Sobek hero (home page) ---------------------------------------------
   One yolk-yellow field — the app icon at page width — with the crocodile
   standing in it. The only place on the site that spends this much colour;
   everything after it is papyrus. Ends in a soft wave into the page. */
.hero-sobek {
  background: var(--yolk);
  padding-block: clamp(36px, 5vw, 64px) 0;
  /* clip the glow sideways (it is 900px wide) but let his shadow fall onto the wave */
  overflow: visible; overflow-x: clip;
}
.hero-sobek::before {
  width: 900px; height: 900px; right: -300px; top: -420px;
  background: radial-gradient(circle, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 66%);
}
.hero-sobek::after { display: none; }
.hero-sobek .hero-inner {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: end; gap: clamp(20px, 3vw, 48px);
}
.hero-sobek .hero-copy { padding-bottom: clamp(48px, 7vw, 108px); }
.hero-sobek h1 { color: var(--navy); }
.hero-sobek h1 .strike { color: rgba(11,58,126,.55); text-decoration-color: var(--navy); }
.hero-sobek h1 .accent { color: var(--navy); }
.hero-sobek .lede { color: var(--navy-dk); opacity: .86; }
.hero-sobek .hero-proof { color: var(--navy-dk); }
.hero-sobek .hero-proof svg { color: var(--croc-text); }
.hero-sobek .eyebrow-pill { background: rgba(255,255,255,.72); border-color: rgba(11,58,126,.12); color: var(--navy); }
.hero-sobek .eyebrow-pill .dot { background: var(--navy); color: #fff; }
.hero-sobek .btn-ghost { background: rgba(255,255,255,.82); color: var(--navy); border-color: rgba(11,58,126,.16); }
.hero-sobek .btn-ghost:hover { background: #fff; border-color: var(--navy); }

.hero-sobek-figure {
  position: relative; z-index: 2; align-self: end; justify-self: center;
  margin-bottom: -2px; line-height: 0;
}
.hero-sobek-figure img {
  width: min(100%, 430px); height: auto;
  filter: drop-shadow(0 26px 30px rgba(8,44,97,.28));
}
/* The wave — the field's bottom edge dips into the papyrus, like water. */
.hero-wave { display: block; width: 100%; height: clamp(34px, 6vw, 84px); background: var(--yolk); line-height: 0; }
.hero-wave svg { width: 100%; height: 100%; display: block; }
@media (max-width: 940px) {
  .hero-sobek .hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero-sobek .hero-copy { padding-bottom: 0; }
  .hero-sobek-figure { order: 1; margin-top: 8px; }
  .hero-sobek-figure img { width: min(72vw, 320px); }
}

/* ---- Mascot helpers ------------------------------------------------------- */
.sobek { line-height: 0; }
.sobek img { height: auto; }
.sobek-corner { position: absolute; z-index: 3; pointer-events: none; }
/* A painted scene in a rounded frame, used as a page's hero visual. */
.scene-card { margin: 0; border-radius: var(--r-cartouche); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--surface); border: var(--border-w) solid var(--line); }
.scene-card img { width: 100%; height: auto; display: block; }
.scene-card figcaption { padding: 14px 20px; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.scene-band { width: 100%; line-height: 0; overflow: hidden; }
.scene-band img { width: 100%; height: clamp(180px, 32vw, 420px); object-fit: cover; object-position: center 40%; display: block; }
.scene-band figcaption { display: none; }
.hero h1 .strike {
  color: var(--muted); text-decoration: line-through;
  text-decoration-color: var(--terra); text-decoration-thickness: 4px;
}
.hero-copy .lede { margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-proof {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px;
  font-size: .875rem; color: var(--muted); font-weight: 500;
}
.hero-proof li { display: flex; align-items: center; gap: 8px; }
.hero-proof svg { color: var(--faience-text); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   10. PHONE MOCK
   CSS recreation of the shipped Kemet Kids screens. Replace with real
   captures when the shot list in 01_BRAND_AND_MEDIA_ASSETS.md §1.6 is done.
   -------------------------------------------------------------------------- */
.phone {
  width: 320px; max-width: 100%; margin-inline: auto;
  background: var(--surface);
  border: 10px solid #232C4E;
  border-radius: 44px;
  box-shadow: 0 34px 70px -20px rgba(35,44,78,.42), 0 0 0 2px rgba(35,44,78,.12);
  overflow: hidden; position: relative;
  aspect-ratio: 320 / 660;
}
.phone-screen {
  position: absolute; inset: 0; background: var(--papyrus);
  display: flex; flex-direction: column; overflow: hidden;
}
.phone-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px; border-radius: 12px; background: #232C4E; z-index: 5;
}
.phone-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px 4px; font-size: 11px; font-weight: 700; color: var(--ink);
}
.phone-body { flex: 1; padding: 6px 14px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }

.pm-head { display: flex; align-items: center; gap: 9px; }
.pm-back {
  width: 30px; height: 30px; border-radius: 50%; background: var(--surface);
  border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--ink); flex-shrink: 0;
}
.pm-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.pm-title { font-family: var(--f-head); font-weight: 800; font-size: 16px; line-height: 1.1; color: var(--ink); }
.pm-chip {
  font-size: 10px; font-weight: 700; background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 11px; padding: 4px 8px; color: var(--gold-text); display: inline-flex; gap: 4px; align-items: center;
}
.pm-prog { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pm-prog > i { display: block; height: 100%; border-radius: 4px; background: var(--gold); }

/* Level Path — two columns: one continuous river, and the stops beside it.
   This is the app's most distinctive screen (04_TEACHER_AND_STUDENT §A.1):
   ONE unbroken river, never a zigzag path. */
/* The stream is the real KKRiverCol geometry, scaled to the phone: a 42x400
   SVG whose 380px of water matches the stops column exactly, so the felucca
   sits on the water beside the current lesson. */
.pm-path { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; min-height: 0; }
.pm-river { position: relative; }
/* overflow:visible — the boat's halo is wider than the stream and would be
   clipped at the outside of a bend. The wider column gap gives it room. */
.pm-river-svg { display: block; overflow: visible; }
/* 450px of rows beside a 470px river (3 whole waves + the two 10px insets).
   The lesson rows are 1fr so they divide the remaining height exactly, which
   keeps the felucca on the row it marks. */
.pm-stops {
  display: grid; gap: 9px; min-width: 0; height: 450px;
  grid-template-rows: 20px repeat(3, 1fr) 20px repeat(4, 1fr);
}

.pm-sect { display: flex; align-items: center; gap: 6px; align-self: center; }
.pm-sect span { font-size: 8.5px; font-weight: 700; letter-spacing: .09em; color: var(--muted); text-transform: uppercase; }
.pm-sect i { flex: 1; height: 1.5px; background: var(--line); }

.pm-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 13px; padding: 0 10px;
}
/* A flex child will not shrink below its content unless min-width is 0 — without
   this the subtitle forces the row wider than the phone and gets clipped. */
.pm-row > span { min-width: 0; }
.pm-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* The subtitle must wrap: "Pass the previous lesson to unlock this one." is
   wider than the 320px frame and was being clipped mid-sentence. */
.pm-row .sub {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.2; font-size: 7.5px; min-width: 0;
  overflow-wrap: anywhere;
}
.pm-row .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.pm-row .nm { font-family: var(--f-head); font-weight: 700; font-size: 12px; color: var(--ink); flex: 1; line-height: 1.2; }
.pm-row .meta { font-size: 9px; font-weight: 700; color: var(--gold-text); }
.pm-row.done .dot { background: var(--gold); color: #fff; }
.pm-row.current {
  background: var(--mist); border: 2px solid var(--lapis); box-shadow: var(--glow-lapis);
}
.pm-row.current .dot { background: var(--lapis-fill); color: #fff; }
.pm-row.current .nm { color: var(--lapis-text); }
.pm-row.current .sub { font-size: 8.5px; color: var(--muted); font-weight: 500; }
.pm-row.current .go {
  background: var(--lapis-fill); color: #fff; border-radius: 10px; padding: 4px 9px;
  font-family: var(--f-head); font-weight: 700; font-size: 10px;
}
.pm-row.current .here-tag {
  background: var(--lapis-fill); color: #fff; border-radius: 9px;
  padding: 3px 7px; font-family: var(--f-body); font-weight: 700;
  font-size: 7.5px; letter-spacing: .07em; white-space: nowrap;
}
.pm-row.locked .dot { background: var(--sand-dk); color: var(--muted); }
.pm-row.locked .nm { color: var(--muted); }
.pm-row.pro { background: var(--lemon); border-color: var(--gold); }
.pm-row.pro .dot { background: var(--gold); color: #fff; }
.pm-row.pro .nm { color: var(--gold-text); }
.pm-row.pro .badge {
  background: var(--gold); color: #232C4E; border-radius: 9px;
  padding: 3px 7px; font-size: 8.5px; font-weight: 700; white-space: nowrap;
}
.pm-row.quiz { background: var(--sand); border: 2px dashed var(--gold); border-radius: 15px; }
.pm-row.quiz .dot { background: var(--gold); color: #fff; box-shadow: var(--glow-gold); }
.pm-row.quiz .nm { color: var(--gold-text); }
.pm-row.quiz .badge {
  background: var(--surface); border-radius: 9px; padding: 3px 7px;
  font-size: 9px; font-weight: 700; color: var(--gold-text);
}

/* The learner's felucca, riding the stream. Lives inside the river SVG, so the
   transform needs an explicit transform-box to rotate about its own centre. */
.kk-boat { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .kk-boat { animation: bob 3.6s ease-in-out infinite; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-2px) rotate(2deg); }
}

/* Teacher dashboard mock */
.td-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.td-stat {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 9px 6px; text-align: center;
}
.td-stat b { display: block; font-family: var(--f-head); font-weight: 800; font-size: 17px; color: var(--lapis-text); }
.td-stat span { font-size: 8px; font-weight: 700; color: var(--muted); }

.td-code {
  background: var(--sand); border: 2px dashed var(--gold); border-radius: 16px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; text-align: center;
}
.td-code b {
  font-family: var(--f-head); font-weight: 800; font-size: 18px;
  letter-spacing: .06em; color: var(--gold-text);
}
.td-code-sub { font-size: 8px; font-weight: 700; color: var(--muted); }

.td-block {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px;
  padding: 11px 12px; display: flex; flex-direction: column; gap: 7px;
}
.td-h { font-size: 8.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.td-row { display: flex; align-items: center; gap: 7px; }
.td-av {
  width: 21px; height: 21px; border-radius: 50%; background: var(--mist); color: var(--lapis-text);
  display: grid; place-items: center; font-size: 8px; font-weight: 700; flex-shrink: 0;
}
.td-nm { flex: 1; font-family: var(--f-head); font-weight: 700; font-size: 11px; color: var(--ink); }
.td-tag { font-size: 8px; font-weight: 700; color: var(--muted); background: var(--sand); border-radius: 8px; padding: 2px 6px; }
.td-tag.warn { background: var(--blush); color: var(--terra-text); }

.td-cta {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 15px; padding: 10px 12px;
}
.td-cta.gold { background: var(--gold); border-color: transparent; box-shadow: var(--glow-gold); }
.td-cta .td-ic {
  width: 25px; height: 25px; border-radius: 50%; background: var(--mist); color: var(--lapis-text);
  display: grid; place-items: center; flex-shrink: 0;
}
.td-cta.gold .td-ic { background: rgba(255,255,255,.55); color: #232C4E; }
.td-cta b { font-family: var(--f-head); font-weight: 700; font-size: 12px; color: var(--ink); display: block; }
.td-cta i { font-style: normal; font-size: 8.5px; color: var(--muted); }

/* Static form labels inside illustrative mock-ups (no real input behind them) */
.fake-label { font-weight: 700; font-size: .84rem; color: var(--ink); }

/* phone bottom nav */
.pm-nav {
  display: flex; justify-content: space-between; align-items: flex-end;
  background: var(--surface); border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 16px rgba(35,44,78,.08);
  padding: 8px 10px 12px; margin: 4px -14px -12px;
}
.pm-nav div {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 8px; font-weight: 700; color: var(--muted);
  padding: 5px 9px; border-radius: 12px; flex: 1;
}
.pm-nav div.on { background: var(--sand); color: var(--lapis-text); }

.phone-caption { text-align: center; margin-top: 18px; font-size: .8rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   11. WORD CARD (the audio demo)
   -------------------------------------------------------------------------- */
.demo-grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
@media (max-width: 900px) { .demo-grid { grid-template-columns: minmax(0, 1fr); } }

.word-deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .word-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.word-card {
  background: var(--sand); border: 1.5px solid var(--line);
  border-radius: 20px; padding: 16px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  cursor: pointer; width: 100%;
}
.word-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--gold); }
.word-card[aria-pressed="true"] {
  background: var(--mist); border: 2px solid var(--lapis); box-shadow: var(--glow-lapis);
}
.word-card .en { font-family: var(--f-head); font-weight: 700; font-size: 1rem; color: var(--ink); }
.word-card .tr { font-size: .8rem; font-style: italic; font-weight: 700; color: var(--muted); }
.word-card .ar { font-size: 1.25rem; color: var(--ink); }

.word-stage {
  background: var(--sand);
  border: 2.5px dashed var(--gold);
  border-radius: var(--r-cartouche);
  padding: clamp(26px, 3vw, 38px) clamp(20px, 3vw, 34px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.speaker {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--lapis-fill); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--glow-lapis);
  transition: transform .18s var(--ease), background-color .2s var(--ease);
  position: relative;
}
.speaker:hover { transform: scale(1.06); }
.speaker[data-state="playing"] { background: var(--lapis-dk); color: #fff; }
.speaker[data-state="unavailable"] { background: var(--sand-dk); color: var(--muted); box-shadow: none; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
  .speaker[data-state="playing"]::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid var(--lapis); animation: ripple 1.1s ease-out infinite;
  }
}
@keyframes ripple { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }

.word-stage .stage-en { font-family: var(--f-head); font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem); color: var(--ink); }
.word-stage .stage-tr { font-style: italic; font-weight: 700; color: var(--muted); font-size: 1.06rem; }
.word-stage .stage-ar { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.35rem); }
.audio-note {
  font-size: .82rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 5px 13px;
}

/* --------------------------------------------------------------------------
   12. STATS
   -------------------------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 860px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat {
  background: var(--surface); border: var(--border-w) solid var(--line);
  border-radius: var(--r-card); padding: clamp(20px, 2.4vw, 30px) 18px;
  text-align: center; box-shadow: var(--shadow-soft);
}
.stat .n {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(2.1rem, 1.6rem + 2.1vw, 3.05rem);
  line-height: 1; color: var(--lapis);
  font-variant-numeric: tabular-nums;
}
.stat.gold    .n { color: var(--gold-text); }
.stat.faience .n { color: var(--faience-text); }
.stat.terra   .n { color: var(--terra-text); }
.stat .l { margin-top: 10px; font-weight: 700; font-size: .92rem; color: var(--ink); }
.stat .s { margin-top: 3px; font-size: .82rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   13. STEPS / FEATURES
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); position: relative; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.step { text-align: left; }
.step .num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--lapis-fill); color: #fff;
  font-family: var(--f-head); font-weight: 800; font-size: 1.15rem;
  display: grid; place-items: center; box-shadow: var(--glow-lapis); margin-bottom: 18px;
}
.step:nth-child(2) .num { background: var(--faience); color: #232C4E; box-shadow: var(--glow-faience); }
.step:nth-child(3) .num { background: var(--gold); color: #232C4E; box-shadow: var(--glow-gold); }
.step:nth-child(4) .num { background: var(--terra-fill); box-shadow: 0 8px 18px -4px rgba(226,114,91,.4); }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .96rem; }

.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature h3 { font-size: 1.08rem; margin-bottom: 6px; }
.feature p { font-size: .95rem; color: var(--muted); }

/* checklist */
.checklist li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.checklist li:last-child { border-bottom: 0; }
.checklist svg { color: var(--faience-text); flex-shrink: 0; margin-top: 4px; }
.checklist strong { display: block; }
.checklist span { font-size: .92rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   14. LEVELS / DYNASTIES
   -------------------------------------------------------------------------- */
.level-card {
  background: var(--surface); border: var(--border-w) solid var(--line);
  border-radius: var(--r-card); padding: 26px 24px;
  box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}
.level-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.level-card .amulet {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px;
  background: var(--lemon); color: var(--gold-text); margin-bottom: 18px;
}
.level-card:nth-child(2) .amulet { background: var(--mist);  color: var(--lapis); }
.level-card:nth-child(3) .amulet { background: var(--mint);  color: var(--faience-text); }
.level-card:nth-child(4) .amulet { background: var(--blush); color: var(--terra-text); }
.level-card .lvl { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.level-card h3 { margin: 4px 0 10px; }
.level-card p { font-size: .94rem; color: var(--muted); }
.level-card .stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* --------------------------------------------------------------------------
   12b. THE COMPOSITION FIGURE
   Replaces a row of stat boxes. One headline number, then the real make-up of
   it as a single proportional bar — 359 nouns / 356 sentences / 301 adjectives
   / 175 verbs / 109 themed items = 1,300. The proportions are the data, so the
   bar is informative rather than decorative.
   -------------------------------------------------------------------------- */
.composition {
  background: var(--surface); border: var(--border-w) solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-soft);
  padding: clamp(24px, 3vw, 40px);
}
.comp-top {
  display: flex; align-items: baseline; gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap; margin-bottom: 22px;
}
.comp-n {
  font-family: var(--f-head); font-weight: 800; line-height: .9;
  font-size: clamp(3.4rem, 2.2rem + 5vw, 6rem);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.comp-what { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); color: var(--ink); }
.comp-what span { display: block; font-family: var(--f-body); font-weight: 400; font-size: .92rem; color: var(--muted); margin-top: 2px; }

.comp-bar {
  display: flex; height: 26px; border-radius: 13px; overflow: hidden;
  border: 1.5px solid var(--line); background: var(--sand);
}
.comp-bar > span { display: block; height: 100%; }
.comp-bar .s1 { background: var(--lapis); }
.comp-bar .s2 { background: var(--faience); }
.comp-bar .s3 { background: var(--gold); }
.comp-bar .s4 { background: var(--terra); }
.comp-bar .s5 { background: var(--sand-dk); }

.comp-key { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.comp-key li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.comp-key i { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.comp-key b { font-family: var(--f-head); font-weight: 700; color: var(--ink); }
.comp-key-s1 { background: var(--lapis); }
.comp-key-s2 { background: var(--faience); }
.comp-key-s3 { background: var(--gold); }
.comp-key-s4 { background: var(--terra); }
.comp-key-s5 { background: var(--sand-dk); }

.comp-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px); margin-top: 28px;
  border-top: 1.5px solid var(--line); padding-top: 26px;
}
@media (max-width: 640px) { .comp-facts { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.comp-fact b {
  display: block; font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1;
  color: var(--lapis-text); font-variant-numeric: tabular-nums;
}
.comp-fact.gold b    { color: var(--gold-text); }
.comp-fact.faience b { color: var(--faience-text); }
.comp-fact span { display: block; margin-top: 7px; font-size: .9rem; color: var(--muted); }
.comp-fact span strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   13b. THE QUIZ — a replica of QuizKK, with a real question from the data
   From quiz_k_k_widget.dart: tile radius 24 · idle white + line 1.5 ·
   picked mist #EAF1FF + lapis 2.5 · correct mint #E5F6F2 + faience 2.5 ·
   wrong #FBEAE6 + terra 2.5 · action button h54 r28, gold then faience/terra
   with a matching 40%-alpha glow · the prompt speaker is a 52px gold circle.
   -------------------------------------------------------------------------- */
.quiz-screen {
  position: relative;
  background: var(--papyrus);
  border: var(--border-w) solid var(--line);
  border-radius: 32px;
  box-shadow: var(--shadow-lift);
  padding: clamp(20px, 2.6vw, 30px);
  max-width: 560px; margin-inline: auto;
}
.qz-bar { height: 10px; border-radius: 5px; background: var(--sand); border: 1px solid var(--line); overflow: hidden; }
.qz-bar > i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(to right, var(--gold), var(--gold-dk)); }
.qz-count { font-size: .72rem; font-weight: 700; color: var(--muted); margin-top: 8px; display: block; }

.qz-prompt { display: flex; align-items: center; gap: 16px; margin: 22px 0 6px; }
.qz-speaker {
  width: 52px; height: 52px; border-radius: 26px; flex-shrink: 0;
  background: var(--gold); color: #232C4E;
  display: grid; place-items: center;
  box-shadow: 0 8px 18px -4px rgba(216, 155, 18, .40);
}
.qz-lead { font-family: var(--f-head); font-weight: 700; font-size: .92rem; color: var(--gold-text); display: block; }
.qz-word { font-family: var(--f-head); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); color: var(--ink); line-height: 1.15; }
.qz-hint { font-weight: 700; font-size: .82rem; color: var(--muted); display: block; margin-bottom: 16px; }

.qz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .qz-grid { grid-template-columns: minmax(0, 1fr); } }

.qz-tile {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 24px;
  padding: 18px 12px; text-align: center; cursor: pointer; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .16s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.qz-tile:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--lapis); }
.qz-tile .qa { font-family: var(--f-ar); font-weight: 700; font-size: 1.3rem; color: var(--ink); direction: rtl; unicode-bidi: isolate; }
.qz-tile .qt { font-size: .84rem; color: var(--muted); font-style: italic; font-weight: 700; }

.qz-tile[data-state="picked"]  { background: var(--mist);  border: 2.5px solid var(--lapis); }
.qz-tile[data-state="picked"] .qt { color: var(--lapis-text); }
.qz-tile[data-state="correct"] { background: #E5F6F2; border: 2.5px solid var(--faience); }
.qz-tile[data-state="wrong"]   { background: #FBEAE6; border: 2.5px solid var(--terra); }
.qz-tile[disabled] { cursor: default; }

.qz-action {
  min-height: 54px; border-radius: 28px; width: 100%; margin-top: 18px;
  font-family: var(--f-head); font-weight: 700; font-size: 1.0625rem;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--gold); color: #232C4E;
  box-shadow: 0 8px 18px -4px rgba(216, 155, 18, .40);
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.qz-action[disabled] { opacity: .5; box-shadow: none; cursor: default; }

/* Sobek marks the quiz demo: thinking while you choose, cheering when you are
   right, crying when you are wrong — the same three moods the app uses. */
.qz-sobek { position: absolute; right: -26px; bottom: -8px; width: 132px; pointer-events: none; line-height: 0; }
.qz-sobek img { width: 100%; height: auto; transition: opacity .2s var(--ease); }
.qz-sobek[data-mood="wrong"] img   { transform: translateY(6px); }
@media (prefers-reduced-motion: no-preference) {
  .qz-sobek[data-mood="correct"] img { animation: hop .5s var(--ease); }
}
@keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-16px) rotate(-3deg); } 100% { transform: translateY(0); } }
@media (max-width: 640px) { .qz-sobek { width: 92px; right: -14px; } }
.qz-action[data-graded="correct"] { background: var(--faience); color: #232C4E; box-shadow: 0 6px 14px -4px rgba(46,184,166,.45); }
.qz-action[data-graded="wrong"]   { background: var(--terra);   color: #fff;     box-shadow: 0 6px 14px -4px rgba(226,114,91,.45); }

.qz-note { font-size: .82rem; color: var(--muted); margin-top: 14px; min-height: 1.4em; text-align: center; }

/* --------------------------------------------------------------------------
   14a. THE VERB PEEK
   A taste of one real conjugation, not the whole table. The last row fades
   out under a count of what is behind it — the curriculum is the product, so
   the site proves its depth without publishing it.
   -------------------------------------------------------------------------- */
.peek {
  background: var(--sand); border-radius: var(--r-card);
  border: 1.5px solid var(--line); padding: 20px 22px 16px;
  position: relative; overflow: hidden;
}
.peek-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.peek-verb { font-family: var(--f-head); font-weight: 800; font-size: 1.3rem; color: var(--ink); }

.peek-rows { display: flex; flex-direction: column; gap: 4px; }
.peek-rows li {
  display: grid; grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px;
  background: var(--surface); border-radius: 12px; padding: 9px 13px;
}
.peek-rows .p { font-size: .82rem; font-weight: 700; color: var(--muted); }
.peek-rows .t { font-style: italic; color: var(--ink); font-weight: 700; font-size: .94rem; }
.peek-rows .ar { font-size: 1.15rem; color: var(--ink); justify-self: end; }

/* the teaser row dissolves rather than being cut off */
.peek-rows .fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
  opacity: .55;
}
.peek-more {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 10px; font-size: .8rem; font-weight: 700; color: var(--muted);
}
.peek-more svg { color: var(--gold-text); }

/* --------------------------------------------------------------------------
   14b. THE LEVELS SCREEN — a faithful replica of LevelsKK
   Values taken from generated_code/.../levels_k_k_widget.dart, not eyeballed:
     medallion 68px with a 4px ring · done = faience #2EB8A6 on #D8F0EC ·
     current = gold #F5B82E on lemon #FCF0CE · locked = sand #F6EBD7 on #E3D2AE ·
     amulet white (ink when locked) · current city + name in lapis ·
     CURRENT DYNASTY overline in goldDk · progress track sand + line hairline
     with a gold→goldDk fill · Continue pill gold, radius 20, padding 15/9.
   Rows are NOT cards in the app — they are plain rows on the page background.
   NOTE: currently unused. The home page shows the Level Path instead. Kept
   because it is a faithful component and cheap to re-introduce.
   -------------------------------------------------------------------------- */
.levels-screen {
  background: var(--papyrus);
  border: var(--border-w) solid var(--line);
  border-radius: 32px;
  box-shadow: var(--shadow-lift);
  padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 30px);
  max-width: 760px;
  margin-inline: auto;
}

.levels-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 18px; margin-bottom: 6px;
}
.levels-head .lh-copy { flex: 1; min-width: 0; }
.levels-head .overline { margin-bottom: 3px; color: var(--muted); }
.levels-head h3 {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.1; color: var(--ink);
}
.xp-chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 7px 11px;
  font-weight: 700; font-size: .9rem; color: var(--ink);
}
.xp-chip svg { color: var(--terra-text); }

.level-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px); align-items: center;
  padding-block: 14px;
  border-top: 1px solid var(--line);
}
.level-row:first-of-type { border-top: 0; }

.lr-medal { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lr-disc {
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-ar), serif; font-size: 30px; line-height: 1;
  color: #fff;
}
.lr-city { font-family: var(--f-head); font-weight: 700; font-size: .82rem; color: var(--ink); text-align: center; }

.level-row.done    .lr-disc { background: var(--faience); border: 4px solid #D8F0EC; }
.level-row.current .lr-disc { background: var(--gold);    border: 4px solid var(--lemon); box-shadow: var(--glow-gold); }
.level-row.locked  .lr-disc { background: var(--sand);    border: 4px solid var(--sand-dk); color: var(--ink); }
.level-row.current .lr-city { color: var(--lapis-text); }

.lr-body { min-width: 0; }
.lr-eyebrow {
  font-weight: 700; font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-text); display: block; margin-bottom: 4px;
}
.lr-name {
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(1.05rem, .96rem + .4vw, 1.25rem); color: var(--ink); line-height: 1.2;
}
.level-row.current .lr-name { color: var(--lapis-text); }
.lr-sub { font-size: .88rem; color: var(--muted); margin-top: 3px; }

.lr-bar {
  width: min(190px, 100%); height: 8px; border-radius: 4px;
  background: var(--sand); border: 1px solid var(--line);
  margin-top: 10px; overflow: hidden; position: relative;
}
.lr-bar > i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(to right, var(--gold), var(--gold-dk));
  position: relative;
}
.lr-bar > i::after {
  content: ""; position: absolute; inset: 1px 0 auto 0; height: 42%;
  border-radius: 4px; background: rgba(255, 255, 255, .23);
}

.lr-go {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold); color: #232C4E;
  border-radius: 20px; padding: 9px 15px;
  font-family: var(--f-head); font-weight: 700; font-size: .92rem;
  box-shadow: var(--glow-gold); margin-top: 12px;
}
.lr-lock { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--muted); font-size: .8rem; font-weight: 700; }

@media (max-width: 560px) {
  .level-row { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .lr-disc { width: 56px; height: 56px; font-size: 25px; border-width: 3px; }
}

/* --------------------------------------------------------------------------
   14c. THE LEVEL PATH SCREEN — a replica of LevelPathKK
   The app's signature screen: one continuous Nile down the left, the lesson
   stops beside it, and the learner's felucca on the water at the current stop.
   River geometry and colours come from custom_code/widgets/k_k_river_col.dart
   (period 190 · amp = w*0.28 · #7FC9E8 @55% under #4FA9D4 · lapis felucca).
   Row radii/colours come from level_path_k_k_widget.dart — the whole screen
   uses only papyrus/ink/muted/line/lapis/gold/goldDk/sand/sandDk.
   -------------------------------------------------------------------------- */
.lp-screen {
  background: var(--papyrus);
  border: var(--border-w) solid var(--line);
  border-radius: 32px;
  box-shadow: var(--shadow-lift);
  padding: clamp(20px, 2.2vw, 28px);
  max-width: 100%; margin: 0;
}

/* Screen on the left at app-like proportions, the explanation beside it, so the
   full column width carries meaning instead of stretching the rows. */
.lp-layout {
  display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.lp-side { align-self: center; }
.lp-side h3 { margin-bottom: 4px; }
@media (max-width: 1000px) {
  .lp-layout { grid-template-columns: minmax(0, 1fr); }
  .lp-side { max-width: 620px; }
}

.lp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lp-back {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface); border: 1.5px solid var(--line);
  display: grid; place-items: center; color: var(--ink);
}
.lp-head .lp-copy { flex: 1; min-width: 0; }
.lp-head .overline { margin-bottom: 2px; color: var(--muted); }
.lp-head h3 { font-family: var(--f-head); font-weight: 800; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); color: var(--ink); line-height: 1.15; }

.lp-prog { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-bottom: 18px; }
.lp-prog > i { display: block; height: 100%; border-radius: 4px; background: var(--gold); }

.lp-body { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 20px; }
.lp-river { display: block; flex-shrink: 0; overflow: visible; }

.lp-rows {
  display: grid; gap: 11px;
  grid-template-rows: 28px 76px 76px 76px 28px 76px 76px 76px;   /* = 589px, matches the river */
}

.lp-sect { display: flex; align-items: center; gap: 8px; align-self: center; }
.lp-sect span { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.lp-sect i { flex: 1; height: 1.5px; background: var(--line); }

.lp-row {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 0 16px;
}
.lp-row .lp-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.lp-row .lp-txt { flex: 1; min-width: 0; }
.lp-row .lp-name { font-family: var(--f-head); font-weight: 700; font-size: 1.02rem; color: var(--ink); display: block; line-height: 1.25; }
.lp-row .lp-meta { font-size: .78rem; color: var(--muted); }

.lp-row.done .lp-dot { background: var(--gold); color: #fff; }
.lp-row.done .lp-meta { color: var(--gold-text); font-weight: 700; }

.lp-row.here { border: 2.5px solid var(--lapis); box-shadow: var(--glow-lapis); }
.lp-row.here .lp-dot { background: var(--lapis-fill); color: #fff; }
.lp-row.here .lp-name { color: var(--lapis-text); }
.lp-here-tag {
  background: var(--lapis-fill); color: #fff; border-radius: 9px;
  padding: 5px 10px; font-weight: 700; font-size: .64rem;
  letter-spacing: .1em; white-space: nowrap; flex-shrink: 0;
}

.lp-row.locked { background: var(--papyrus); }
.lp-row.locked .lp-dot { background: var(--sand-dk); color: var(--muted); }
.lp-row.locked .lp-name { color: var(--muted); }

.lp-row.quiz { background: var(--sand); border: 2px dashed var(--gold); border-radius: 16px; }
.lp-row.quiz .lp-dot { background: var(--gold); color: #fff; box-shadow: var(--glow-gold); }
.lp-row.quiz .lp-name { color: var(--gold-text); }
.lp-badge {
  background: var(--surface); border-radius: 12px; padding: 5px 11px;
  font-size: .72rem; font-weight: 700; color: var(--gold-text); white-space: nowrap; flex-shrink: 0;
}
.lp-row.quiz.locked { background: var(--sand); border-color: var(--sand-dk); }
.lp-row.quiz.locked .lp-dot { background: var(--sand-dk); box-shadow: none; }
.lp-row.quiz.locked .lp-name { color: var(--muted); }

/* The river SVG is a fixed 64x589 and .lp-rows is exactly 589 tall, so the
   felucca always lands on the current row. Do NOT scale one without the other
   — keep the same geometry at every width and let the text adapt instead. */
.lp-row .lp-meta {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}

@media (max-width: 620px) {
  .lp-screen { padding: 16px 12px; border-radius: 24px; }
  .lp-body { gap: 8px; }
  .lp-row { padding: 0 11px; gap: 9px; border-radius: 16px; }
  .lp-row .lp-dot { width: 32px; height: 32px; }
  .lp-row .lp-name { font-size: .88rem; }
  .lp-row .lp-meta { font-size: .68rem; }
  .lp-here-tag { font-size: .52rem; padding: 4px 6px; letter-spacing: .06em; }
  .lp-badge { font-size: .62rem; padding: 4px 7px; }
  .lp-head h3 { font-size: 1.15rem; }
  .lp-back { width: 32px; height: 32px; }
}

/* Legend under the Level Path — explains what each row state means */
.lp-aside { display: grid; gap: 16px; margin-top: 22px; }
@media (max-width: 560px) { .lp-aside { gap: 14px; } }
.lp-leg { display: flex; gap: 10px; align-items: flex-start; }
.lp-leg .sw {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  display: grid; place-items: center; color: #fff;
}
.lp-leg .sw.done   { background: var(--gold); }
.lp-leg .sw.here   { background: var(--lapis-fill); }
.lp-leg .sw.locked { background: var(--sand-dk); color: var(--muted); }
.lp-leg .sw.quiz   { background: var(--gold); box-shadow: var(--glow-gold); }
.lp-leg b { display: block; font-family: var(--f-head); font-weight: 700; font-size: .92rem; color: var(--ink); }
.lp-leg span { font-size: .82rem; color: var(--muted); line-height: 1.45; }

/* --------------------------------------------------------------------------
   15. CURRICULUM PAGE
   -------------------------------------------------------------------------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.tab {
  font-family: var(--f-head); font-weight: 700; font-size: .98rem;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--muted);
  border-radius: var(--r-chip); padding: 11px 20px;
  display: inline-flex; align-items: center; gap: 9px;
  transition: all .2s var(--ease);
}
.tab:hover { border-color: var(--lapis); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--mist); border: 2px solid var(--lapis); color: var(--lapis-text); }
.tab .glyph { font-size: 1.15em; }

/* The syllabus outline. Themes and a three-word taste — never the full
   vocabulary. The curriculum is the product; this proves its shape, not its
   contents. Generated by tools/gen_curriculum.py. */
.lesson-list { margin-top: 4px; }
.syllabus { display: flex; flex-direction: column; }

.syl-sect {
  display: flex; align-items: center; gap: 10px; margin: 22px 0 8px;
}
.syl-sect:first-child { margin-top: 4px; }
.syl-sect span {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faience-text); white-space: nowrap;
}
.syl-sect i { flex: 1; height: 1.5px; background: var(--line); }

.syl-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: baseline; gap: 14px;
  padding: 13px 14px; border-radius: 14px;
  transition: background-color .16s var(--ease);
}
.syl-row:hover { background: var(--sand); }
.syl-n {
  font-family: var(--f-head); font-weight: 800; font-size: .95rem;
  color: var(--gold-text); text-align: right;
}
.syl-t { font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.syl-h { font-size: .84rem; color: var(--muted); text-align: right; }
.syl-h em { font-style: italic; }

@media (max-width: 620px) {
  .syl-row { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 11px 10px; }
  .syl-h { grid-column: 2; text-align: left; margin-top: 2px; }
}

.tabpanel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   16. PRICING
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); align-items: start; }
@media (max-width: 800px) { .plans { grid-template-columns: minmax(0, 1fr); } }

.plan {
  background: var(--surface); border: var(--border-w) solid var(--line);
  border-radius: var(--r-card); padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--shadow-soft); position: relative;
}
.plan.featured {
  border: 2.5px solid var(--gold);
  box-shadow: var(--glow-gold), var(--shadow-lift);
}
.plan .ribbon {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #232C4E;
  font-family: var(--f-head); font-weight: 700; font-size: .82rem;
  padding: 6px 18px; border-radius: 999px; white-space: nowrap;
  box-shadow: var(--glow-gold);
}
.plan h2 { font-size: 1.5rem; }
.plan .price { font-family: var(--f-head); font-weight: 800; font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem); line-height: 1.1; margin: 14px 0 4px; }
.plan .price-sub { font-size: .9rem; color: var(--muted); }
/* "Best value" tag above the yearly price (matches the app paywall, owner 2026-10-05) */
.plan .value-tag {
  display: table; margin: 16px 0 -4px;
  background: var(--faience-text); color: #fff;
  font-family: var(--f-head); font-weight: 700; font-size: .78rem; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
}
.plan ul { margin: 24px 0; }
.plan li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: .96rem; }
.plan li svg { flex-shrink: 0; margin-top: 4px; }
.plan li.yes svg { color: var(--faience-text); }
.plan li.no  { color: var(--muted); }
.plan li.no svg { color: var(--sand-dk); }

.compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
.compare th, .compare td { padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th {
  font-family: var(--f-head); font-weight: 700; font-size: 1rem;
  border-bottom: 2px solid var(--line); color: var(--ink);
}
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 22%; }
.compare tbody th { font-weight: 500; color: var(--ink); }
.compare .tick { color: var(--faience-text); }
.compare .dash { color: var(--muted); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-card); }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq-group { margin-bottom: 44px; }
.faq-group > h2 { margin-bottom: 18px; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); }

details.faq {
  background: var(--surface); border: var(--border-w) solid var(--line);
  border-radius: var(--r-input); margin-bottom: 10px; overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
details.faq[open] { border-color: var(--lapis); box-shadow: var(--shadow-soft); }
details.faq summary {
  list-style: none; cursor: pointer;
  padding: 19px 22px; display: flex; align-items: center; gap: 16px;
  font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; color: var(--ink);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: ""; margin-left: auto; flex-shrink: 0;
  width: 11px; height: 11px; border-right: 2.4px solid var(--muted); border-bottom: 2.4px solid var(--muted);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .24s var(--ease), border-color .24s var(--ease);
}
details.faq[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); border-color: var(--lapis); }
details.faq .answer { padding: 0 22px 22px; color: var(--muted); font-size: .98rem; }
details.faq .answer p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   18. FORMS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-weight: 700; font-size: .84rem; color: var(--ink); }
.input, textarea.input {
  background: var(--surface); border: var(--border-w) solid var(--line);
  border-radius: var(--r-input); padding: 15px 18px;
  font-size: 1rem; color: var(--ink); width: 100%;
  box-shadow: var(--shadow-soft);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--lapis); box-shadow: var(--glow-lapis); }
textarea.input { min-height: 130px; resize: vertical; font-family: var(--f-body); line-height: 1.6; }

.signup-form { display: flex; gap: 12px; flex-wrap: wrap; }
.signup-form .input { flex: 1 1 260px; }
.form-status { margin-top: 14px; font-size: .9rem; font-weight: 500; min-height: 1.4em; }
.form-status.ok  { color: var(--faience-text); }
.form-status.err { color: var(--terra-text); }

/* store buttons — disabled until the listings are live */
.store-row { display: flex; gap: 12px; flex-wrap: wrap; }
.store-btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--surface); border: var(--border-w) solid var(--line);
  border-radius: 18px; padding: 11px 20px; color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.store-btn[aria-disabled="true"] { opacity: .58; cursor: not-allowed; pointer-events: none; }
.store-btn .lbl { display: flex; flex-direction: column; line-height: 1.15; }
.store-btn .lbl small { font-size: .66rem; color: var(--muted); font-weight: 500; }
.store-btn .lbl b { font-family: var(--f-head); font-weight: 700; font-size: 1.02rem; }

/* --------------------------------------------------------------------------
   19. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--navy);
  color: #fff; border-radius: 0; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; width: 520px; height: 520px;
  right: -160px; top: -230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(254,210,8,.28) 0%, rgba(254,210,8,0) 70%);
}
.cta-band h2 { color: #fff; }
.cta-band .overline { color: var(--yolk); }
/* A mascot standing in the band's corner, feet on the bottom edge. */
.cta-band .sobek-corner { right: clamp(8px, 4vw, 64px); bottom: 0; width: clamp(120px, 16vw, 220px); }
.cta-band .sobek-corner img { width: 100%; filter: drop-shadow(0 12px 18px rgba(0,0,0,.25)); }
@media (max-width: 760px) { .cta-band .sobek-corner { display: none; } }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2, .cta-band p, .cta-band .overline { color: #fff; }
.cta-band .overline { color: rgba(255,255,255,.72); }
.cta-band p { color: rgba(255,255,255,.86); }
.cta-band .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.34); box-shadow: none; }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.cta-band .input { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; box-shadow: none; }
.cta-band .input::placeholder { color: rgba(255,255,255,.66); }
.cta-band .input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.2); }
.cta-band .form-status.ok { color: #FFE9A8; }
.cta-band .tiny { color: rgba(255,255,255,.66); }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--surface); border-top: var(--border-w) solid var(--line); padding-block: clamp(44px, 5vw, 68px) 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.site-footer .foot-h { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; font-family: var(--f-body); font-weight: 700; }
.site-footer nav a { display: block; padding: 6px 0; color: var(--muted); font-size: .94rem; }
.site-footer nav a:hover { color: var(--lapis); text-decoration: none; }
.footer-about p { color: var(--muted); font-size: .92rem; margin-top: 14px; max-width: 34ch; }
.footer-bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .84rem; color: var(--muted);
}

/* --------------------------------------------------------------------------
   21. UTIL — notice blocks (used on pre-launch / honesty statements)
   -------------------------------------------------------------------------- */
.notice {
  background: var(--mint); border-left: 4px solid var(--faience);
  border-radius: 14px; padding: 18px 22px; font-size: .95rem; color: var(--ink);
}
.notice.warn { background: var(--lemon); border-left-color: var(--gold); }
.notice.info { background: var(--mist); border-left-color: var(--lapis); }
.notice strong { display: block; margin-bottom: 4px; }

.prose h2 { margin: 44px 0 14px; }
.prose h3 { margin: 30px 0 10px; }
.prose p, .prose ul, .prose ol { margin-bottom: 16px; color: var(--muted); }
.prose ul li, .prose ol li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.prose ul li::before { content: ""; position: absolute; left: 6px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before { content: counter(n) "."; position: absolute; left: 0; color: var(--gold-text); font-weight: 700; }
.prose strong { color: var(--ink); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: .93rem; }
.prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-weight: 700; color: var(--ink); }
.prose td { color: var(--muted); }

.page-head { padding-block: clamp(44px, 6vw, 78px) clamp(28px, 3vw, 44px); }

/* --------------------------------------------------------------------------
   21a. THE NILE SCENE — full-bleed band adapted from kk_welcome.svg
   -------------------------------------------------------------------------- */
.nile-scene { width: 100%; line-height: 0; overflow: hidden; }
.nile-scene svg { width: 100%; height: clamp(120px, 15vw, 210px); display: block; }
@media (prefers-reduced-motion: no-preference) {
  .nile-scene .scene-boat { animation: sail-across 26s ease-in-out infinite; }
}
@keyframes sail-across {
  0%   { transform: translate(140px, 150px) rotate(-1.5deg); }
  50%  { transform: translate(1010px, 150px) rotate(1.5deg); }
  100% { transform: translate(140px, 150px) rotate(-1.5deg); }
}

/* --------------------------------------------------------------------------
   21c. BLOG
   -------------------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: minmax(0, 1fr); } }

.post-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: var(--border-w) solid var(--line);
  border-radius: var(--r-card); padding: 24px; box-shadow: var(--shadow-soft);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold); text-decoration: none; }
.post-card h2 { font-size: 1.16rem; line-height: 1.28; }
.post-card p { color: var(--muted); font-size: .93rem; }
.post-meta { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

.post-head { padding-block: clamp(40px, 5vw, 66px) 0; }
.post-head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
.post-dek { font-size: clamp(1.05rem, .98rem + .4vw, 1.24rem); color: var(--muted); margin-top: 18px; max-width: 62ch; }

/* A real phrase, laid out the way the app lays it out */
.phrase-list { display: flex; flex-direction: column; gap: 10px; margin: 26px 0 30px; }
.phrase {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 20px; align-items: baseline;
  background: var(--sand); border-radius: 18px; padding: 15px 20px;
}
.phrase .en { font-family: var(--f-head); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.phrase .tr { font-style: italic; color: var(--muted); font-size: .9rem; grid-column: 1; }
.phrase .ar { font-family: var(--f-ar); font-weight: 700; font-size: 1.35rem; color: var(--ink);
  direction: rtl; unicode-bidi: isolate; grid-row: 1 / span 2; align-self: center; }
@media (max-width: 560px) {
  .phrase { grid-template-columns: minmax(0, 1fr); }
  .phrase .ar { grid-row: auto; margin-top: 4px; }
}

.pull {
  border-left: 4px solid var(--gold); background: var(--lemon);
  border-radius: 0 16px 16px 0; padding: 18px 22px; margin: 28px 0;
  font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; color: var(--ink);
}

/* --------------------------------------------------------------------------
   22. SCROLL REVEAL
   -------------------------------------------------------------------------- */
/* The hidden state is scoped to .js (set by the inline head script). Without
   JavaScript — or if IntersectionObserver never fires — every .reveal block
   stays visible instead of leaving the page blank. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .reveal-d1 { transition-delay: .07s; }
  .reveal-d2 { transition-delay: .14s; }
  .reveal-d3 { transition-delay: .21s; }
  .reveal-d4 { transition-delay: .28s; }
}

/* --------------------------------------------------------------------------
   23. THE RIVER (section divider + scroll-driven felucca)
   -------------------------------------------------------------------------- */
.river-strip { width: 100%; overflow: hidden; line-height: 0; }
.river-strip svg { width: 100%; height: auto; min-width: 720px; }
.river-scroll { position: relative; }
.river-boat { transition: offset-distance .1s linear; }

@media print {
  .site-header, .site-footer, .cta-band,  .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   24. SOBEK — page-specific placements
   -------------------------------------------------------------------------- */
/* Curriculum: he holds the map beside the page heading (wide screens only). */
.page-head .wrap { position: relative; }
.curriculum-sobek { position: absolute; right: var(--pad-x); top: -8px; width: clamp(150px, 16vw, 210px); }
.curriculum-sobek img { width: 100%; }
@media (max-width: 1080px) { .curriculum-sobek { display: none; } }

/* Teachers: the worked commission example. */
.earn-card { position: relative; padding-bottom: clamp(20px, 2.4vw, 28px); }
.earn-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .95rem; }
.earn-table td { padding: 14px 8px 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: baseline; }
.earn-table td:first-child { color: var(--ink); font-weight: 700; }
.earn-table td:last-child { text-align: right; white-space: nowrap; color: var(--ink); }
.earn-table b { font-family: var(--f-head); font-size: 1.25rem; color: var(--navy); }
.earn-sobek { position: absolute; right: -18px; top: -92px; width: 118px; height: auto; pointer-events: none; }
@media (max-width: 600px) { .earn-sobek { width: 84px; top: -64px; right: -6px; } .earn-table td:nth-child(2) { display: none; } }

/* The app's own screens keep the app's own face. */
.phone, .phone *, .lp-screen h3, .lp-name, .qz-word, .qz-lead, .pm-title { font-family: var(--f-app); }
.phone .pm-eyebrow, .phone .sub, .phone .meta, .phone .td-h, .phone .td-code-sub, .phone i { font-family: var(--f-body); }
.phone .ar, .phone [lang="ar"] { font-family: var(--f-ar); }
.lp-screen h3 { color: var(--ink); }

/* Stat cards are built from <span>s: stack them (they ran inline before). */
.stat .n, .stat .l, .stat .s { display: block; }
.stat .s { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   26. THE MOTIF — small pharaonic line drawings (ankh, pyramid, eye of Horus,
   sun disk, felucca, lotus, the Nile), tiled at 260px. One drawing, three inks.
   Used in exactly four places, always behind content and always fading out:
     dark bands (white ink) · inner-page headings · sand bands · the footer
   Do not add it to cards, heroes or body sections: it works because it is rare.
   -------------------------------------------------------------------------- */
:root {
  --motif-white: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg opacity=%22.10%22%3E%3Cellipse cx=%2242%22 cy=%2238%22 rx=%229%22 ry=%2213%22/%3E%3Cpath d=%22M42 51v36M28 60h28%22/%3E%3Cpath d=%22M128 84l30-46 30 46zM158 38l11 46%22/%3E%3Cpath d=%22M36 160q32-26 64 0q-32 22-64 0z%22/%3E%3Ccircle cx=%2268%22 cy=%22160%22 r=%227%22/%3E%3Cpath d=%22M68 173v16q0 9 11 9M94 169l17 15%22/%3E%3Ccircle cx=%22206%22 cy=%22150%22 r=%2211%22/%3E%3Cpath d=%22M206 128v-8M206 180v-8M184 150h-8M236 150h-8M190 134l-6-6M228 172l-6-6M222 134l6-6M184 172l6-6%22/%3E%3Cpath d=%22M150 214h46l-7 11h-32zM172 211v-36q20 15 17 36z%22/%3E%3Cpath d=%22M24 232q9-8 18 0t18 0t18 0%22/%3E%3Cpath d=%22M226 58c-10-4-14-14-12-24c6 4 10 10 12 18c2-8 6-14 12-18c2 10-2 20-12 24zM226 58v18%22/%3E%3C/g%3E%3C/svg%3E");
  --motif-navy:  url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22 fill=%22none%22 stroke=%22%230B3A7E%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg opacity=%22.085%22%3E%3Cellipse cx=%2242%22 cy=%2238%22 rx=%229%22 ry=%2213%22/%3E%3Cpath d=%22M42 51v36M28 60h28%22/%3E%3Cpath d=%22M128 84l30-46 30 46zM158 38l11 46%22/%3E%3Cpath d=%22M36 160q32-26 64 0q-32 22-64 0z%22/%3E%3Ccircle cx=%2268%22 cy=%22160%22 r=%227%22/%3E%3Cpath d=%22M68 173v16q0 9 11 9M94 169l17 15%22/%3E%3Ccircle cx=%22206%22 cy=%22150%22 r=%2211%22/%3E%3Cpath d=%22M206 128v-8M206 180v-8M184 150h-8M236 150h-8M190 134l-6-6M228 172l-6-6M222 134l6-6M184 172l6-6%22/%3E%3Cpath d=%22M150 214h46l-7 11h-32zM172 211v-36q20 15 17 36z%22/%3E%3Cpath d=%22M24 232q9-8 18 0t18 0t18 0%22/%3E%3Cpath d=%22M226 58c-10-4-14-14-12-24c6 4 10 10 12 18c2-8 6-14 12-18c2 10-2 20-12 24zM226 58v18%22/%3E%3C/g%3E%3C/svg%3E");
  --motif-gold:  url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22 fill=%22none%22 stroke=%22%238E6207%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg opacity=%22.11%22%3E%3Cellipse cx=%2242%22 cy=%2238%22 rx=%229%22 ry=%2213%22/%3E%3Cpath d=%22M42 51v36M28 60h28%22/%3E%3Cpath d=%22M128 84l30-46 30 46zM158 38l11 46%22/%3E%3Cpath d=%22M36 160q32-26 64 0q-32 22-64 0z%22/%3E%3Ccircle cx=%2268%22 cy=%22160%22 r=%227%22/%3E%3Cpath d=%22M68 173v16q0 9 11 9M94 169l17 15%22/%3E%3Ccircle cx=%22206%22 cy=%22150%22 r=%2211%22/%3E%3Cpath d=%22M206 128v-8M206 180v-8M184 150h-8M236 150h-8M190 134l-6-6M228 172l-6-6M222 134l6-6M184 172l6-6%22/%3E%3Cpath d=%22M150 214h46l-7 11h-32zM172 211v-36q20 15 17 36z%22/%3E%3Cpath d=%22M24 232q9-8 18 0t18 0t18 0%22/%3E%3Cpath d=%22M226 58c-10-4-14-14-12-24c6 4 10 10 12 18c2-8 6-14 12-18c2 10-2 20-12 24zM226 58v18%22/%3E%3C/g%3E%3C/svg%3E");
}

/* Dark bands: never flat. No character art on dark backgrounds. */
.cta-band {
  background:
    var(--motif-white) 0 0 / 260px 260px repeat,
    radial-gradient(900px 520px at 88% -10%, rgba(254,210,8,.20), rgba(254,210,8,0) 62%),
    radial-gradient(760px 480px at 6% 112%, rgba(6,128,230,.42), rgba(6,128,230,0) 64%),
    linear-gradient(135deg, #072654 0%, #0B3A7E 46%, #0E4C9E 100%);
}
.cta-band::before { display: none; }
.cta-band::after {   /* the striped hem of the headdress, as a top rule */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--yolk) 0 34px, #0680E6 34px 68px);
  opacity: .9;
}

/* Inner-page headings: the motif drifts in from the top-right corner and is gone by mid-page. */
.page-head { isolation: isolate; overflow: hidden; }
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--motif-navy) 100% 0 / 260px 260px repeat;
  -webkit-mask-image: radial-gradient(120% 130% at 100% 0%, #000 0%, rgba(0,0,0,.5) 34%, transparent 62%);
          mask-image: radial-gradient(120% 130% at 100% 0%, #000 0%, rgba(0,0,0,.5) 34%, transparent 62%);
}

/* Sand bands: gold ink, only around the edges, clear behind the content in the middle. */
.band-sand { isolation: isolate; }
.band-sand::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--motif-gold) 0 0 / 260px 260px repeat;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, transparent 58%, #000 100%);
          mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, transparent 58%, #000 100%);
}

/* Footer: the striped hem on top, and the motif fading up from the bottom-right corner. */
.site-footer { position: relative; isolation: isolate; overflow: hidden; border-top: 0; }
.site-footer::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--yolk) 0 34px, var(--navy) 34px 68px);
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--motif-navy) 100% 100% / 260px 260px repeat;
  -webkit-mask-image: radial-gradient(90% 120% at 100% 100%, #000 0%, rgba(0,0,0,.45) 36%, transparent 64%);
          mask-image: radial-gradient(90% 120% at 100% 100%, #000 0%, rgba(0,0,0,.45) 36%, transparent 64%);
}
@media print { .page-head::before, .band-sand::before, .site-footer::before, .site-footer::after { display: none; } }

/* Content that can sit inside a dark band. */
.cta-band strong { color: #fff; }
.cta-band .lede { color: rgba(255,255,255,.88); }
.cta-band .link-arrow { color: var(--yolk); }
.cta-band .cartouche { background: #FFF6DD; border-color: var(--yolk); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }
.cta-band .cartouche p, .cta-band .cartouche .cartouche-quote { color: var(--ink); }
.cta-band .cartouche strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   27. SMART-LINK PAGE (join.html, 2026-10-05)
   One page for /join/org, /join/teacher, /join/family, /r and /get.
   Mobile first: a single column at every width, held to the narrow wrap.
   -------------------------------------------------------------------------- */
.join-head { padding-bottom: clamp(20px, 3vw, 32px); }
.join-head h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.3rem); }
.join-body { padding-block: 0 clamp(52px, 7vw, 88px); }

.join-code-card {
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 3vw, 26px);
}
.join-code-label {
  font-family: var(--f-head); font-weight: 600; font-size: 1rem;
  color: var(--sky-text); margin-bottom: 12px;
}
.join-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.join-code {
  flex: 1 1 12rem; min-width: 0;
  display: block;
  background: var(--lemon);
  border: 2px dashed var(--yolk-dk);
  border-radius: 18px;
  padding: 14px 18px;
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.4rem);
  line-height: 1.15; letter-spacing: .08em;
  color: var(--navy);
  text-align: center;
  overflow-wrap: anywhere; word-break: break-all;
  user-select: all; -webkit-user-select: all;
  font-variant-numeric: tabular-nums;
}
.join-copy { flex: 0 0 auto; min-width: 112px; }
.join-copy .ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.join-copy.is-done { border-color: var(--croc); color: var(--croc-text); background: #EEF7E6; }
.join-copy-status:empty { display: none; }
.join-copy-status { margin-top: 10px; }
@media (max-width: 420px) {
  .join-code-row { flex-direction: column; align-items: stretch; }
  .join-code { flex-basis: auto; }
  .join-copy { width: 100%; }
}

.join-open { margin-top: 24px; }
.join-open-btn { width: 100%; max-width: 420px; font-size: 1.15rem; }
.join-open-btn .ic { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.join-note-warn { color: var(--ink); background: var(--lemon); border-radius: 12px; padding: 10px 14px; display: inline-block; }

.join-stores { margin-top: 36px; }
.join-stores-h { font-family: var(--f-head); font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: 12px; }
.join-stores .store-btn { min-height: 56px; }
.join-stores .store-btn.is-yours { border-color: var(--navy); box-shadow: 0 8px 18px -6px rgba(11,58,126,.28); }
@media (max-width: 420px) {
  .join-stores .store-row { flex-direction: column; }
  .join-stores .store-btn { justify-content: center; }
}

.join-steps { list-style: none; margin-top: 44px; display: grid; gap: 18px; border-top: var(--border-w) solid var(--line); padding-top: 32px; }
.join-steps li { display: flex; gap: 16px; align-items: flex-start; }
.join-steps .num {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-head); font-weight: 700; font-size: 1.05rem;
  background: var(--navy); color: #fff;
}
.join-steps li:nth-child(2) .num { background: var(--sky); }
.join-steps li:nth-child(3) .num { background: var(--yolk); color: var(--navy); }
.join-steps .h3 { margin: 6px 0 4px; }
.join-steps p { color: var(--muted); font-size: .96rem; }