/* ==========================================================================
   KODEIT APEX — Thinking Machines: AI for Young Minds
   Public product website.

   VISUAL SYSTEM: inherited from the KODEIT product-website family. The shared
   base below (tokens, typography, geometry, elevation, buttons, cards, chips,
   tabs, the hero colour wash, the brand rule, header, footer, modal, forms,
   tables, RTL and the responsive ladder) is taken byte-for-byte from the
   KODEIT Social Science website stylesheet, which inherited it in turn from
   the KODEIT Pre-K and KODEIT ICT stylesheets.
   Nothing in the base is re-tuned here. See evidence/DESIGN_SYSTEM_AUDIT.md
   and qa/DESIGN_FAMILY_CONSISTENCY.md.

   Everything below the "APEX COMPONENTS" rule is new, and is built only from
   the primitives above — no new colour, typeface, radius or shadow.

   Deliberately NOT an "AI website": the canvas stays white, the type stays
   dark, and there are no neon gradients, glowing brains, circuit wallpaper or
   particle fields. The AI character of the product comes from the real book
   covers, real book pages and real digital-activity screenshots the pages
   carry — those are dark and vivid, and they are the only dark surfaces on
   the site.
   ========================================================================== */

:root{
  /* ---- brand colours, sampled from the KODEIT logo (demo portal) ---- */
  --k-yellow:#FEDA00;
  --k-orange:#FF4A01;
  --k-green:#03A909;
  --k-cyan:#01C3FF;
  /* The four "deep" tones carry text on white and on the soft accent fills.
     KG darkens all four of them by one step so that every one of them clears
     WCAG 2.1 AA (4.5:1) as *small* text on its own soft fill — the ICT values
     sit at 3.79-4.45 there. Same hues, same role, measurably more readable;
     nothing else about them changes. Measured ratios are in
     qa/ICT_KG_DESIGN_CONSISTENCY.md. */
  --k-cyan-deep:#00719C;    /* ICT #0079A8 — 4.45 -> 4.98 on --soft-cyan   */
  --k-green-deep:#047A09;   /* ICT #04820A — 4.45 -> 4.93 on --soft-green  */
  --k-orange-deep:#BC3500;  /* ICT #C43800 — 4.47 -> 4.80 on --soft-orange
                               over a --bg-soft band, its worst case        */
  --k-amber-deep:#856900;   /* ICT #9A7A00 — 3.79 -> 4.87 on --soft-yellow */

  /* ---- neutrals ---- */
  --white:#FFFFFF;
  --bg-soft:#F7F8FA;
  --bg-soft-2:#FAFAFB;
  --ink:#1D2126;
  --ink-2:#5A6472;
  /* ICT confines --ink-3 to decorative text because it clears only 3.07:1.
     The KG pages put essential strings in it — book levels, ISBNs, table
     headers, rubric-scale labels, source notes — so it is darkened one step
     to clear AA on white, --bg-soft and --bg-soft-2 alike. Same cool-grey
     hue, same position in the ink -> ink-2 -> ink-3 hierarchy. */
  --ink-3:#68717F;          /* ICT #8B94A1 — 3.07 -> 4.93 on white         */
  --line:#E8EAEF;
  --line-2:#D9DDE4;

  /* ---- the signature device ---- */
  --brand-line:linear-gradient(90deg,var(--k-yellow) 0%,var(--k-orange) 34%,var(--k-green) 67%,var(--k-cyan) 100%);

  /* ---- elevation: neutral, restrained ---- */
  --shadow-sm:0 1px 2px rgba(20,26,38,.05);
  --shadow:0 2px 10px rgba(20,26,38,.06);
  --shadow-lg:0 10px 34px rgba(20,26,38,.10);

  --r-sm:10px; --r:14px; --r-lg:16px;
  --header-h:70px;
  --wrap:1420px;

  /* accent-at-alpha fills, for chips and icon tiles */
  --soft-cyan:rgba(1,195,255,.11);
  --soft-orange:rgba(255,74,1,.10);
  --soft-green:rgba(3,169,9,.10);
  --soft-yellow:rgba(254,218,0,.20);

  /* level stage colours map onto the brand accents:
     green = Level 1 exploration, cyan = Level 2 inquiry, orange = Level 3 readiness */
  --foundation:var(--k-green);
  --conceptual:var(--k-cyan);
  --advanced:var(--k-orange);

  --ff:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ff-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--ff);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{margin:0;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
h1{font-size:clamp(27px,3.6vw,44px);line-height:1.1;letter-spacing:-.032em}
h2{font-size:clamp(23px,2.4vw,29px);letter-spacing:-.028em}
h3{font-size:17.5px;letter-spacing:-.02em}
h4{font-size:15px;letter-spacing:-.015em;line-height:1.3}
.h4{font-size:15px;letter-spacing:-.015em;line-height:1.3}
.h5{font-size:14px}
p{margin:0;color:var(--ink-2)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit}
ul,ol{margin:0;padding:0;list-style:none}
strong,b{color:var(--ink);font-weight:600}
table{border-collapse:collapse}
::selection{background:rgba(1,195,255,.22)}
:focus-visible{outline:2px solid var(--k-cyan);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--white);color:var(--ink);
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:600;box-shadow:var(--shadow)}
.skip:focus,.skip:focus-visible{left:0}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:3px solid #fff}

/* ---------- primitives ---------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 34px}
.brandline{height:2.5px;background:var(--brand-line);opacity:.9}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.eyebrow.strong{color:var(--ink-2);font-weight:650;letter-spacing:.15em}
.lead{font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.mono{font-family:var(--ff-mono);font-size:.9em}
.sect{padding:74px 0}
.sect.tight{padding:52px 0}
.sect.pale{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sect.white{background:var(--white)}
.sect-head{max-width:70ch;margin-bottom:34px}
.sect-head p{margin-top:11px;font-size:15.5px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}

/* cards: white, 1px cool-grey border, accent rule revealed on hover */
.card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 18px 18px;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent,var(--k-cyan));opacity:0;transition:opacity .18s}
a.card:hover,.card.lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
a.card:hover:before,.card.lift:hover:before{opacity:1}
.card.flat{background:var(--bg-soft-2)}
.card.ruled:before{opacity:1;height:3px}
.card h3,.card h4,.card .h4{margin-bottom:7px}
.card p{font-size:13.5px;line-height:1.55}
a.card{display:block}
.acc-c{--accent:var(--k-cyan)}   .acc-o{--accent:var(--k-orange)}
.acc-g{--accent:var(--k-green)}  .acc-y{--accent:var(--k-yellow)}

.ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  flex:none;margin-bottom:11px}
.ic svg{width:17px;height:17px}
.ic.c{background:var(--soft-cyan);color:var(--k-cyan-deep)}
.ic.o{background:var(--soft-orange);color:var(--k-orange-deep)}
.ic.g{background:var(--soft-green);color:var(--k-green-deep)}
.ic.y{background:var(--soft-yellow);color:var(--k-amber-deep)}

/* chips / pills */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:550;
  color:var(--ink-2);background:var(--bg-soft);border:1px solid var(--line);
  padding:4px 10px;border-radius:99px;white-space:nowrap}
.chip.foundation{background:var(--soft-green);border-color:rgba(3,169,9,.28);color:var(--k-green-deep);font-weight:600}
.chip.conceptual{background:var(--soft-cyan);border-color:rgba(1,195,255,.32);color:var(--k-cyan-deep);font-weight:600}
.chip.advanced{background:var(--soft-orange);border-color:rgba(255,74,1,.26);color:var(--k-orange-deep);font-weight:600}
.chip.yellow{background:var(--soft-yellow);border-color:rgba(254,218,0,.55);color:var(--k-amber-deep);font-weight:600}
.chip.gray{background:var(--bg-soft);color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* buttons: dark ink primary, white bordered secondary */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  padding:0 22px;border-radius:11px;font-size:14.5px;font-weight:600;border:1px solid transparent;
  transition:transform .16s,box-shadow .16s,border-color .16s,background .16s;text-align:center}
.btn svg{width:16px;height:16px;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn-pri{background:var(--ink);color:#fff}
.btn-pri:hover{box-shadow:0 8px 22px rgba(20,26,38,.2)}
.btn-out{background:var(--white);color:var(--ink);border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.btn-out:hover{box-shadow:var(--shadow)}
/* the demo portal's "Open LMS" treatment: white, with a brand-rule left edge */
.btn-acc{position:relative;background:var(--white);color:var(--ink);border-color:var(--line-2);
  box-shadow:var(--shadow-sm);overflow:hidden;padding-left:26px}
.btn-acc:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-line)}
.btn-acc:hover{box-shadow:var(--shadow)}
.btn-acc.sm{padding-left:18px}
.btn-quiet,.btn-ghost-dark{background:transparent;color:var(--ink-2);border-color:var(--line);padding:0 18px}
.btn-quiet:hover,.btn-ghost-dark:hover{color:var(--ink);background:var(--bg-soft)}
.btn.sm{min-height:36px;padding:0 14px;font-size:13px;border-radius:9px;font-weight:550}
.btns{display:flex;flex-wrap:wrap;gap:11px}

.rule{height:1px;background:var(--line);border:0;margin:22px 0}
.kv{display:flex;flex-direction:column;gap:2px}
.kv b{font-size:24px;font-weight:650;color:var(--ink);letter-spacing:-.026em;line-height:1.15}
.kv span{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ticklist li{position:relative;padding-left:24px;margin-bottom:10px;font-size:14px;color:var(--ink-2);line-height:1.55}
.ticklist li:last-child{margin-bottom:0}
.ticklist li:before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--soft-green);box-shadow:inset 0 0 0 1px rgba(3,169,9,.32)}
.ticklist li:after{content:"";position:absolute;left:4.4px;top:10.2px;width:6px;height:3.2px;
  border-left:1.7px solid var(--k-green-deep);border-bottom:1.7px solid var(--k-green-deep);
  transform:rotate(-45deg)}
.deflist{display:grid;gap:13px}
.deflist>div{border-left:2px solid var(--line);padding-left:14px}
.deflist b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:2px}
.deflist span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.note{font-size:12px;color:var(--ink-3);line-height:1.55}
.note b{color:var(--ink-2);font-weight:600}
.tag{font-size:10.5px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- header ------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 34px;height:var(--header-h);
  display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:13px;padding:4px 0;flex:none}
.brand img{height:40px;width:auto;display:block}
.brand .bn{display:flex;flex-direction:column;line-height:1.15;
  border-left:1px solid var(--line-2);padding-left:13px}
.brand .bn b{font-size:14.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.brand .bn span{font-size:11px;font-weight:500;color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav>li{position:relative}
.nav .navlink{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border-radius:9px;
  font-size:13.5px;font-weight:550;color:var(--ink-2);cursor:pointer;white-space:nowrap;
  transition:background .16s,color .16s;position:relative}
.nav .navlink:hover{background:var(--bg-soft);color:var(--ink)}
.nav>li.on>.navlink{color:var(--ink);background:var(--bg-soft)}
.nav>li.on>.navlink:after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  border-radius:2px;background:var(--brand-line)}
.nav .navlink .car{width:9px;height:9px;opacity:.55;transition:transform .16s}
.nav>li.open .navlink .car{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 9px);left:0;min-width:266px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:8px;display:none;overflow:hidden}
.nav>li.open .drop{display:block}
.drop a{display:block;padding:9px 11px;border-radius:var(--r-sm);transition:background .14s}
.drop a:hover{background:var(--bg-soft-2)}
.drop a b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.008em}
.drop a span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.hdr-cta{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.burger{display:none;width:40px;height:40px;border-radius:9px;border:1px solid var(--line);
  align-items:center;justify-content:center;background:var(--white)}
.burger span{display:block;width:16px;height:1.6px;background:var(--ink);position:relative}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;width:16px;height:1.6px;background:var(--ink)}
.burger span:before{top:-5px}.burger span:after{top:5px}
.hdr-line{height:2.5px;background:var(--brand-line);opacity:.9}
.mobnav{display:none;border-top:1px solid var(--line);background:var(--white);
  max-height:calc(100vh - var(--header-h));overflow:auto;padding:12px 22px 26px}
.mobnav.on{display:block}
.mobnav .mgroup{font-size:10.5px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding:16px 0 6px}
.mobnav a{display:block;padding:10px 0;font-size:14.5px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.mobnav a:hover{color:var(--ink)}
.mobnav .btns{margin-top:20px}
.mobnav .btns .btn{flex:1}

/* ---------- hero: white, with blurred brand colour washes ---------------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--white)}
.hero-wash{position:absolute;inset:0;pointer-events:none}
.hero-wash i{position:absolute;display:block;border-radius:50%;filter:blur(56px)}
.hero-wash i.a{width:420px;height:420px;background:var(--k-cyan);right:-60px;top:-140px}
.hero-wash i.b{width:340px;height:340px;background:var(--k-yellow);right:210px;top:60px}
.hero-wash i.c{width:300px;height:300px;background:var(--k-orange);right:-30px;bottom:-150px}
.hero-wash i.d{width:300px;height:300px;background:var(--k-green);left:-100px;bottom:-140px}
/* Single-column heroes expose the whole wash, so it reads as a tint. The
   split (two-column) hero has content over the right-hand side, so it can
   carry the demo portal's full wash strength. */
.hero-wash i.a{opacity:.10} .hero-wash i.b{opacity:.09}
.hero-wash i.c{opacity:.08} .hero-wash i.d{opacity:.07}
.hero.split .hero-wash i.a{opacity:.24} .hero.split .hero-wash i.b{opacity:.20}
.hero.split .hero-wash i.c{opacity:.16} .hero.split .hero-wash i.d{opacity:.13}
.hero .wrap{position:relative;z-index:2;padding-top:60px;padding-bottom:64px}
.hero.slim .wrap{padding-top:44px;padding-bottom:46px}
.hero h1 .a1{color:var(--k-orange-deep)}
.hero h1 .a2{color:var(--k-cyan-deep)}
.hero p.lead{margin:20px 0 0;max-width:58ch}
.hero .btns{margin-top:30px}
.hero-cols{position:relative;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:46px;align-items:center}
.verified{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-3);
  border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:99px;
  padding:7px 14px;margin-bottom:20px;font-weight:550}
.verified img{height:20px;width:auto}
.hero-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.hero-pills .hp{background:var(--bg-soft);border:1px solid var(--line);padding:6px 13px;
  border-radius:99px;font-size:12.5px;font-weight:550;color:var(--ink-2)}
.hero-stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:30px;padding-top:24px;
  border-top:1px solid var(--line)}
.hero-stats .s b{display:block;font-size:26px;font-weight:650;color:var(--ink);
  letter-spacing:-.028em;line-height:1.15}
.hero-stats .s span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.heroshot{position:relative;background:rgba(255,255,255,.92);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:12px;box-shadow:0 14px 40px rgba(20,26,38,.10);
  backdrop-filter:blur(4px);overflow:hidden}
.heroshot:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand-line)}
.heroshot img{border-radius:10px;width:100%;border:1px solid var(--line)}
.heroshot .cap{padding:11px 4px 2px;font-size:11.5px;color:var(--ink-3)}
.hero-books{display:flex;gap:12px;justify-content:center;align-items:flex-end;margin-top:18px}
.hero-books img{width:31%;border-radius:8px;border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(20,26,38,.14)}
.hero-books img:nth-child(2){width:36%;margin-bottom:14px}
.hero-crumb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-3);
  margin-bottom:16px;flex-wrap:wrap}
.hero-crumb a{color:var(--ink-2)}
.hero-crumb a:hover{color:var(--k-cyan-deep)}
.hero-crumb .sep{opacity:.5}

/* ---------- footer ------------------------------------------------------- */
.ftr{border-top:1px solid var(--line);background:var(--bg-soft-2)}
.ftr .wrap{padding-top:40px;padding-bottom:26px}
.ftr h2{font-size:11px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.ftr-cols{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:32px}
.ftr a{display:block;font-size:13.5px;padding:5px 0;color:var(--ink-2)}
.ftr a:hover{color:var(--ink)}
.ftr .fbrand img{height:52px;margin-bottom:14px}
.ftr .fbrand p{font-size:13px;color:var(--ink-2);max-width:36ch;line-height:1.6}
.ftr-seal{display:flex;align-items:center;gap:11px;margin-top:18px}
.ftr-seal img{height:48px;width:auto}
.ftr-seal span{font-size:11.5px;color:var(--ink-3);max-width:22ch;line-height:1.45}
.ftr-btm{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12px;color:var(--ink-3)}

/* ---------- model cards (Standard vs Modular) ---------------------------- */
.modelcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.modelcard{position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 24px 24px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.modelcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.modelcard:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand-line)}
.modelcard h3{font-size:22px;letter-spacing:-.026em;margin:7px 0 8px}
.modelcard .mm{font-size:10.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.modelcard .btns{margin-top:auto;padding-top:20px}
.timeline{margin:20px 0 6px}
.tl-row{display:flex;align-items:stretch;gap:4px;margin-bottom:8px}
.tl-lab{width:78px;flex:none;font-size:10.5px;font-weight:600;letter-spacing:.05em;
  color:var(--ink-3);display:flex;align-items:center;text-transform:uppercase}
.tl-bar{flex:1;display:flex;gap:3px;height:34px}
.tl-seg{flex:1;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;text-align:center;padding:0 5px;line-height:1.2}
.tl-seg.core{background:var(--soft-green);color:var(--k-green-deep);box-shadow:inset 0 0 0 1px rgba(3,169,9,.26)}
.tl-seg.corec{background:var(--soft-cyan);color:var(--k-cyan-deep);box-shadow:inset 0 0 0 1px rgba(1,195,255,.3)}
.tl-seg.el{background:var(--soft-orange);color:var(--k-orange-deep);box-shadow:inset 0 0 0 1px rgba(255,74,1,.24)}
.tl-seg.full{background:var(--bg-soft);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.tl-scale{display:flex;gap:3px;margin-left:82px;margin-top:2px}
.tl-scale span{flex:1;text-align:center;font-size:10px;color:var(--ink-3)}

/* ---------- grade journey ------------------------------------------------ */
.journey{overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.journey-track,.jstage{display:grid;grid-template-columns:repeat(12,minmax(126px,1fr));gap:10px;min-width:900px}
.jstage{margin-bottom:8px}
.jstage .js{border-radius:8px;height:26px;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.js.foundation{background:var(--soft-green);color:var(--k-green-deep)}
.js.conceptual{background:var(--soft-cyan);color:var(--k-cyan-deep)}
.js.advanced{background:var(--soft-orange);color:var(--k-orange-deep)}
.gcard{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:14px;overflow:hidden;min-height:148px;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.gcard:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:0;transition:opacity .18s}
.gcard.foundation:before{background:var(--k-green)}
.gcard.conceptual:before{background:var(--k-cyan)}
.gcard.advanced:before{background:var(--k-orange)}
.gcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.gcard:hover:before{opacity:1}
.gcard .gn{font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.gcard.foundation .gn{color:var(--k-green-deep)}
.gcard.conceptual .gn{color:var(--k-cyan-deep)}
.gcard.advanced .gn{color:var(--k-orange-deep)}
.gcard b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.28;
  letter-spacing:-.012em;margin-bottom:6px}
.gcard small{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.45;margin-top:auto}

/* ---------- feature grid ------------------------------------------------- */
.eco{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px}
.ecoi{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 18px 18px;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.ecoi:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent,var(--k-cyan));opacity:0;transition:opacity .18s}
.ecoi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.ecoi:hover:before{opacity:1}
.ecoi b{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:5px;letter-spacing:-.015em}
.ecoi span{font-size:13px;color:var(--ink-2);line-height:1.55}

/* ---------- metric band ------------------------------------------------- */
.metricband{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.metricband .m{background:var(--white);padding:20px 18px}
.metricband .m b{display:block;font-size:26px;font-weight:650;color:var(--ink);
  letter-spacing:-.028em;line-height:1.15}
.metricband .m span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px}

/* ---------- filters + explorer ------------------------------------------ */
.filters{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm);
  margin-bottom:26px}
.fgroup{display:flex;flex-direction:column;gap:7px;min-width:0}
.fgroup>label{font-size:10.5px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.fpills{display:flex;flex-wrap:wrap;gap:6px}
.fpill{border:1px solid var(--line);background:var(--white);border-radius:99px;padding:6px 13px;
  font-size:12.5px;font-weight:550;color:var(--ink-2);transition:border-color .16s,color .16s,box-shadow .16s}
.fpill:hover{border-color:var(--line-2);color:var(--ink)}
.fpill[aria-pressed="true"]{color:var(--ink);font-weight:600;border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.fpill[aria-pressed="true"]:after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--k-cyan);display:inline-block;margin-left:7px;vertical-align:middle}
.fcount{margin-left:auto;font-size:12.5px;color:var(--ink-3);padding-bottom:6px}
select,input[type=text],input[type=email],textarea{
  font-size:14px;color:var(--ink);background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;width:100%;min-height:44px;transition:border-color .16s,box-shadow .16s}
textarea{min-height:104px;resize:vertical}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--k-cyan);
  box-shadow:0 0 0 3px rgba(1,195,255,.14)}

/* ---------- elective cards ---------------------------------------------- */
.elgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px}
.elcard{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.elcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.elcard .cov{aspect-ratio:3/4;background:var(--bg-soft);overflow:hidden;border-bottom:1px solid var(--line)}
.elcard .cov img{width:100%;height:100%;object-fit:cover}
.elcard .bd{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.elcard .bd h3{font-size:16px;margin-bottom:6px}
.elcard .bd p{font-size:13px;margin-bottom:12px}
.elcard .bd .chips{margin-top:auto}
.elnum{display:block;font-size:10.5px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px}

/* ---------- book grid --------------------------------------------------- */
.bookgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:22px}
.book{display:flex;flex-direction:column;gap:8px}
.book .cov{aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--bg-soft);
  border:1px solid var(--line);box-shadow:0 8px 24px rgba(20,26,38,.10)}
.book .cov img{width:100%;height:100%;object-fit:cover}
.book b{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;letter-spacing:-.012em}
.book small{display:block;font-size:11.5px;color:var(--ink-3)}
.book .isbn{font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3)}

/* ---------- screenshot cards -------------------------------------------- */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(304px,1fr));gap:20px}
.shot{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:box-shadow .18s,border-color .18s}
.shot:hover{box-shadow:var(--shadow);border-color:var(--line-2)}
.shot .im{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.shot .im img{width:100%}
.shot .bd{padding:15px 16px 17px}
.shot .bd b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:4px;letter-spacing:-.014em}
.shot .bd span{font-size:13px;color:var(--ink-2);line-height:1.55}
.shotwide{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:center}
.shotwide.rev{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.frame{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--white);box-shadow:var(--shadow)}
.frame img{width:100%}
.frame .cap{padding:11px 14px;font-size:12px;color:var(--ink-3);border-top:1px solid var(--line);
  background:var(--bg-soft-2)}

/* ---------- accordion / tabs -------------------------------------------- */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.acc+.acc{margin-top:12px}
.acc>button{width:100%;display:flex;align-items:center;gap:14px;padding:15px 18px;text-align:left;
  transition:background .14s}
.acc>button:hover{background:var(--bg-soft-2)}
.acc>button .an{flex:none;font-size:10.5px;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.acc>button .at{flex:1;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.014em}
.acc>button .ax{flex:none;width:11px;height:11px;color:var(--ink-3);transition:transform .2s}
.acc.open>button .ax{transform:rotate(180deg)}
.acc.open>button{background:var(--bg-soft-2)}
.acc .body{display:none;padding:4px 18px 20px;border-top:1px solid var(--line)}
.acc.open .body{display:block}
.tabs{display:inline-flex;padding:4px;background:var(--bg-soft);border-radius:11px;
  border:1px solid var(--line);gap:3px;margin-bottom:24px;max-width:100%;overflow-x:auto}
.tabs button{padding:8px 15px;border-radius:8px;font-size:13.5px;font-weight:550;color:var(--ink-2);
  white-space:nowrap;transition:background .14s,color .14s,box-shadow .14s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--white);color:var(--ink);font-weight:600;
  box-shadow:var(--shadow-sm)}

/* ---------- lesson list ------------------------------------------------- */
.lessons{display:grid;gap:9px}
.lrow{display:flex;gap:14px;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--white)}
.lrow:hover{background:var(--bg-soft-2)}
.lrow .ln{flex:none;width:28px;padding-top:2px;font-size:11px;font-weight:650;color:var(--ink-3)}
.lrow .lb{min-width:0}
.lrow .lb b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px;letter-spacing:-.012em}
.lrow .lb p{font-size:13px;margin-bottom:6px;line-height:1.55}
.lrow .lb .meta{font-size:11.5px;color:var(--ink-3)}
.catbar{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.catbar .cb{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:99px;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-2)}

/* ---------- table ------------------------------------------------------- */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);max-width:100%}
table{width:100%;font-size:13.5px;min-width:min(620px,100%)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  background:var(--bg-soft-2);position:sticky;top:0}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--bg-soft-2)}
td b{color:var(--ink);font-weight:600}

/* ---------- CTA band: light panel with the brand rule ------------------- */
.ctaband{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);box-shadow:var(--shadow);padding:38px 38px 40px}
.ctaband:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand-line)}
.ctaband .wash{position:absolute;inset:0;pointer-events:none}
.ctaband .wash i{position:absolute;display:block;border-radius:50%;filter:blur(52px);opacity:.16}
.ctaband .wash i.a{width:300px;height:300px;background:var(--k-cyan);right:-40px;top:-120px}
.ctaband .wash i.b{width:260px;height:260px;background:var(--k-yellow);right:190px;bottom:-150px;opacity:.14}
.ctaband>.inner{position:relative;z-index:2}
.ctaband h2{max-width:26ch}
.ctaband p{margin:12px 0 24px;max-width:58ch;font-size:15.5px}

/* ---------- placeholders ------------------------------------------------ */
.asset-placeholder{position:relative;background:
    repeating-linear-gradient(135deg,var(--bg-soft),var(--bg-soft) 11px,#EDEFF3 11px,#EDEFF3 22px);
  border:1px dashed var(--line-2);border-radius:var(--r);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:22px;text-align:center;min-height:150px}
.asset-placeholder .ph-t{font-size:10.5px;font-weight:650;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.asset-placeholder .ph-n{font-family:var(--ff-mono);font-size:11px;color:var(--ink-2);word-break:break-all}

/* ---------- modal ------------------------------------------------------- */
.mbk{position:fixed;inset:0;z-index:120;background:rgba(23,28,36,.40);display:none;
  padding:64px 20px 24px;overflow-y:auto}
.mbk.on{display:block}
.modal{width:100%;max-width:1000px;margin:0 auto;background:var(--white);border:1px solid var(--line);
  border-radius:18px;box-shadow:0 28px 80px rgba(15,20,30,.30);overflow:hidden}
.modal:before{content:"";display:block;height:3px;background:var(--brand-line)}
.modal-hd{padding:24px 30px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;gap:18px}
.modal-hd h2{flex:1;font-size:24px;letter-spacing:-.026em}
.modal-hd .x{margin-left:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);color:var(--ink-2);
  background:var(--white)}
.modal-hd .x:hover{border-color:var(--line-2);color:var(--ink);box-shadow:var(--shadow-sm)}
.modal-hd .x svg{width:14px;height:14px}
.modal-bd{padding:24px 30px 28px}

/* ---------- forms ------------------------------------------------------- */
.formcard{position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 26px 28px;box-shadow:var(--shadow-sm);overflow:hidden}
.formcard:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand-line);z-index:1}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.f1{grid-template-columns:minmax(0,1fr)}
.field label{display:block;font-size:10.5px;font-weight:650;letter-spacing:.08em;
  color:var(--ink-2);margin-bottom:6px;text-transform:uppercase}
.field .req{color:var(--k-orange-deep)}
.formnote{background:var(--soft-yellow);border:1px solid rgba(254,218,0,.55);border-radius:var(--r-sm);
  padding:12px 14px;font-size:13px;color:var(--k-amber-deep);margin-bottom:20px;line-height:1.55}
.formok{background:var(--soft-green);border:1px solid rgba(3,169,9,.32);border-radius:var(--r-sm);
  padding:14px 16px;font-size:14px;color:var(--k-green-deep);line-height:1.6}

/* ---------- RTL (Arabic edition blocks) --------------------------------- */
[dir="rtl"]{text-align:right}
[dir="rtl"] .ticklist li{padding-left:0;padding-right:24px}
[dir="rtl"] .ticklist li:before{left:auto;right:0}
[dir="rtl"] .ticklist li:after{left:auto;right:4.4px}
[dir="rtl"] .deflist>div{border-left:0;border-right:2px solid var(--line);padding-left:0;padding-right:14px}
.ar{font-size:1.16em;line-height:1.85}

/* ---------- responsive -------------------------------------------------- */
@media (max-width:1180px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr-cols{grid-template-columns:1.4fr repeat(2,minmax(0,1fr))}
  /* free header width for the full nav: drop the secondary CTA, then the wordmark */
  .hdr-cta .btn-out{display:none}
  .brand .bn{display:none}
  .nav .navlink{padding:9px 11px;font-size:13px}
  .hdr-in{gap:14px}
}
@media (max-width:980px){
  .nav{display:none}
  .burger{display:flex}
  .hero-cols{grid-template-columns:minmax(0,1fr);gap:30px}
  .shotwide,.shotwide.rev{grid-template-columns:minmax(0,1fr)}
  .modelcards{grid-template-columns:minmax(0,1fr)}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wrap,.hdr-in{padding:0 22px}
  .sect{padding:54px 0}
  .ctaband{padding:30px 26px 32px}
  .modal{max-width:640px}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .g2,.g3,.g4,.g6{grid-template-columns:minmax(0,1fr)}
  .ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .frow{grid-template-columns:minmax(0,1fr)}
  .wrap,.hdr-in{padding:0 16px}
  .hero .wrap{padding-top:40px;padding-bottom:46px}
  .hero-stats{gap:22px}
  .hero-stats .s b{font-size:22px}
  .sect{padding:44px 0}
  .metricband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bookgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .elgrid{grid-template-columns:minmax(0,1fr)}
  .mbk{padding:16px 12px}
  .modal-hd,.modal-bd{padding:20px}
  .filters{padding:14px}
  .ctaband{padding:24px 20px 26px}
  .modelcard{padding:22px 20px 20px}
  .tl-lab{width:58px;font-size:9.5px}
  .tl-scale{margin-left:62px}
  table{min-width:520px}
  .hero .btns .btn,.ctaband .btns .btn{width:100%}
}
@media (max-width:420px){
  .hdr-in{gap:10px}
  .hdr-cta{gap:7px}
  .hdr-cta .btn.sm{padding:0 12px;font-size:12.5px}
  .wrap,.hdr-in{padding:0 14px}
}
@media print{
  .hdr,.hdr-line,.mobnav,.ftr,.btns,.ctaband,.hero-wash{display:none}
  .hero{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  a.card:hover,.card.lift:hover,.ecoi:hover,.gcard:hover,.elcard:hover,.modelcard:hover,.btn:hover{transform:none}
}


/* ==========================================================================
   APEX COMPONENTS
   Built only from the primitives above. No new colour, typeface or radius.
   ========================================================================== */

/* ---------- header: six nav groups --------------------------------------- */
.nav>li>a,.nav>li>button{font-size:14px}
@media (max-width:1240px){.hdr-cta .btn-out{display:none}}

/* ---------- hero ---------------------------------------------------------- */
.hero-ai{position:relative;overflow:hidden;padding:60px 0 22px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:52px;align-items:center}
.hero-copy h1{max-width:15ch}
.hero-copy .lead{margin-top:18px;font-size:17px;max-width:56ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.hero-note{margin-top:20px;font-size:13.5px;color:var(--ink-3);max-width:54ch}

/* the hero composition: one real book cover + real product screens */
.hero-comp{position:relative;display:grid;grid-template-columns:1.06fr 1fr;gap:14px;
  align-items:start}
.hero-comp .hc-book{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid var(--line-2);background:var(--white)}
.hero-comp .hc-book img{width:100%;height:auto}
.hero-side{display:grid;gap:14px}
.hc-shot{border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);
  background:var(--white);box-shadow:var(--shadow);position:relative}
.hc-shot img{width:100%;height:auto;display:block}
.hc-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 11px 8px;
  font-size:11px;font-weight:600;color:#fff;letter-spacing:.01em;
  background:linear-gradient(180deg,rgba(16,20,28,0) 0%,rgba(16,20,28,.82) 62%)}

/* ---------- metric strip -------------------------------------------------- */
.mstrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.mstrip>div{padding:18px 16px;border-right:1px solid var(--line)}
.mstrip>div:last-child{border-right:0}
.mstrip b{display:block;font-size:25px;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.mstrip span{display:block;margin-top:5px;font-size:12.5px;color:var(--ink-2);line-height:1.35}

/* ---------- the spiral / journey rail ------------------------------------- */
.spiral{display:grid;gap:14px}
.sp-cyc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.sp-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:15px 18px;
  background:var(--bg-soft);border-bottom:1px solid var(--line)}
.sp-hd b{font-size:15px}
.sp-hd .sp-ed{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--white);border:1px solid var(--line-2);
  color:var(--ink-2)}
.sp-hd .sp-gr{font-size:13px;color:var(--ink-2)}
.sp-hd p{flex:1 1 100%;font-size:13.5px;margin-top:2px}
.sp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-steps.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-step{padding:16px 18px 18px;border-right:1px solid var(--line);display:block;
  transition:background .16s}
.sp-step:last-child{border-right:0}
a.sp-step:hover{background:var(--bg-soft-2)}
.sp-step .sp-g{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3)}
.sp-step h4{margin:6px 0 6px;font-size:14.5px}
.sp-step .sp-arc{font-size:12px;color:var(--k-cyan-deep);font-weight:600}
.sp-step p{margin-top:7px;font-size:12.5px;line-height:1.45}

/* ---------- concept threads table ---------------------------------------- */
.thrwrap{overflow-x:auto}
.thr{width:100%;font-size:13.5px;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--white);min-width:720px}
.thr th,.thr td{padding:13px 15px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.thr th:last-child,.thr td:last-child{border-right:0}
.thr tr:last-child td{border-bottom:0}
.thr thead th{background:var(--bg-soft);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.thr tbody th{background:var(--bg-soft-2);font-weight:650;color:var(--ink);width:180px;
  font-size:13.5px}
.thr td{color:var(--ink-2)}
.thr .thr-ico{display:inline-flex;align-items:center;gap:8px}

/* ---------- concept -> experience -> reflection --------------------------- */
.c2e{display:grid;gap:18px}
.c2e-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.c2e-txt{padding:22px 24px;display:flex;flex-direction:column;justify-content:center}
.c2e-txt .sp-g{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3)}
.c2e-txt h3{margin:7px 0 12px}
.c2e-step{display:flex;gap:11px;padding:9px 0;border-top:1px solid var(--line)}
.c2e-step:first-of-type{border-top:0}
.c2e-step b{flex:0 0 86px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.c2e-step span{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.c2e-shot{border-left:1px solid var(--line);background:var(--bg-soft-2);position:relative;
  display:block;overflow:hidden}
.c2e-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.c2e-row.flip .c2e-shot{border-left:0;border-right:1px solid var(--line);order:-1}

/* ---------- activity gallery --------------------------------------------- */
.agrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.acard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-align:left;width:100%;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.acard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.acard .ash{background:var(--bg-soft);border-bottom:1px solid var(--line);aspect-ratio:16/10;
  overflow:hidden}
.acard .ash img{width:100%;height:100%;object-fit:cover;object-position:top center}
.acard .abd{padding:14px 15px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.acard .ameta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.acard h4{font-size:14.5px;line-height:1.3}
.acard p{font-size:12.5px;line-height:1.45}
.tagset{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:9px}
.tg{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);
  background:var(--white)}
.tg.c{background:var(--soft-cyan);border-color:transparent;color:var(--k-cyan-deep)}
.tg.g{background:var(--soft-green);border-color:transparent;color:var(--k-green-deep)}
.tg.o{background:var(--soft-orange);border-color:transparent;color:var(--k-orange-deep)}
.tg.y{background:var(--soft-yellow);border-color:transparent;color:var(--k-amber-deep)}

/* ---------- filter bar ---------------------------------------------------- */
.fbar{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;padding:16px 18px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);margin-bottom:24px}
.fgrp{display:flex;flex-direction:column;gap:7px}
.fgrp>span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--white);color:var(--ink-2);transition:.15s}
.fchip:hover{border-color:var(--ink-3);color:var(--ink)}
.fchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.fcount{margin-left:auto;font-size:13px;color:var(--ink-2);padding-bottom:7px}

/* ---------- book library -------------------------------------------------- */
.bgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;align-items:start}
.btile{display:block;text-align:left;width:100%;background:none;padding:0}
.btile .bcov{display:block;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line-2);
  box-shadow:var(--shadow);background:var(--bg-soft);aspect-ratio:1/1.435;
  transition:transform .18s,box-shadow .18s}
.btile:hover .bcov{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.btile .bcov img{width:100%;height:100%;object-fit:cover}
.btile .bmeta{display:block;padding:11px 2px 0}
.btile .bg-g{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.btile h4{margin-top:4px;font-size:14px;line-height:1.3}
.btile .bset{display:block;margin-top:6px;font-size:12px;color:var(--ink-2)}

/* ---------- page (sample) gallery ---------------------------------------- */
/* Sample tiles are <button>s. Without an intrinsic frame height, some engines
   size the button from the caption only and clip the page image to a thin strip.
   Mirror .btile/.acard: reserve an A4-ish frame and cover from the top. */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start}
.ptile{display:flex;flex-direction:column;align-items:stretch;text-align:left;width:100%;
  background:none;padding:0;overflow:visible;height:auto}
.ptile .pfr{display:block;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg-soft);box-shadow:var(--shadow-sm);aspect-ratio:1/1.414;
  transition:transform .18s,box-shadow .18s}
.ptile:hover .pfr{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.ptile .pfr img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ptile .pcap,.ptile figcaption{padding:10px 2px 0;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.ptile .pcap b,.ptile figcaption b{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}

/* ---------- grade explorer ------------------------------------------------ */
.grail{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.gpill{display:block;padding:13px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);transition:.16s}
.gpill:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.gpill .gp-g{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.gpill h4{margin-top:5px;font-size:13px;line-height:1.3}
.gpill .gp-e{margin-top:6px;font-size:11px;font-weight:600;color:var(--k-cyan-deep)}

.gcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.gcard{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:18px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.gcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.gcard .gc-cov{border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line-2);
  align-self:start;box-shadow:var(--shadow-sm)}
.gcard .gc-cov img{width:100%;height:auto;display:block}
.gcard .gc-g{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.gcard h3{margin:5px 0 8px;font-size:16px}
.gcard p{font-size:13px;line-height:1.5}
.gc-facts{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}

/* ---------- grade detail -------------------------------------------------- */
.ghead{display:grid;grid-template-columns:200px minmax(0,1fr);gap:34px;align-items:start}
.ghead .gh-cov{border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg)}
.ghead .gh-cov img{width:100%;height:auto;display:block}
.gh-big{margin-top:16px;padding:15px 17px;border-left:2.5px solid var(--k-cyan);
  background:var(--bg-soft);border-radius:0 var(--r-sm) var(--r-sm) 0}
.gh-big b{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.gh-big p{font-size:15px;color:var(--ink);line-height:1.5}
.twocol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
.lz{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lz li{display:flex;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);
  font-size:13.5px;align-items:baseline}
.lz li:last-child{border-bottom:0}
.lz li:nth-child(odd){background:var(--bg-soft-2)}
.lz .lz-n{flex:0 0 26px;font-size:11px;font-weight:700;color:var(--ink-3);
  font-family:var(--ff-mono)}
.lz .lz-t{color:var(--ink)}
.lz .lz-m{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.bullets li{position:relative;padding:6px 0 6px 20px;font-size:13.5px;color:var(--ink-2);
  line-height:1.5}
.bullets li:before{content:"";position:absolute;left:2px;top:13px;width:5px;height:5px;
  border-radius:50%;background:var(--k-cyan)}
.bullets.g li:before{background:var(--k-green)}
.bullets.o li:before{background:var(--k-orange)}

/* ---------- responsible AI ladder ---------------------------------------- */
.rai{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--white)}
.rai-row{display:grid;grid-template-columns:96px 220px minmax(0,1fr);gap:0;
  border-bottom:1px solid var(--line);align-items:stretch}
.rai-row:last-child{border-bottom:0}
.rai-row:nth-child(odd){background:var(--bg-soft-2)}
.rai-g{padding:14px 16px;font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);border-right:1px solid var(--line);
  display:flex;align-items:center}
.rai-t{padding:14px 16px;font-size:13.5px;font-weight:650;color:var(--ink);
  border-right:1px solid var(--line);display:flex;align-items:center}
.rai-d{padding:14px 18px;font-size:13.5px;color:var(--ink-2);line-height:1.5;
  display:flex;align-items:center}

/* ---------- teacher pillars ---------------------------------------------- */
.pill4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pil{padding:20px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.pil .ptt{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;margin-bottom:13px}
.pil h4{font-size:14.5px;margin-bottom:9px}
.pil li{position:relative;padding:5px 0 5px 17px;font-size:12.5px;color:var(--ink-2);
  line-height:1.45}
.pil li:before{content:"";position:absolute;left:1px;top:12px;width:4px;height:4px;
  border-radius:50%;background:var(--ink-3)}

/* ---------- lesson flow rail --------------------------------------------- */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.flow>div{padding:22px 20px;border-right:1px solid var(--line);position:relative}
.flow>div:last-child{border-right:0}
.flow>div:before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;
  background:var(--accent,var(--k-cyan))}
.flow b{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink)}
.flow .fmin{display:block;margin:5px 0 9px;font-size:11.5px;color:var(--ink-3);
  font-family:var(--ff-mono)}
.flow p{font-size:13px;line-height:1.5}

/* ---------- standards ----------------------------------------------------- */
.fwgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fw{padding:17px 17px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white)}
.fw b{font-size:14.5px;display:block}
.fw .fwn{float:right;font-size:12px;color:var(--ink-3);font-family:var(--ff-mono)}
.fw p{margin-top:7px;font-size:12.5px;line-height:1.45}
.stdwrap{overflow-x:auto}
.stdtab{width:100%;font-size:13px;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--white);min-width:640px}
.stdtab th,.stdtab td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
.stdtab thead th{background:var(--bg-soft);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2)}
.stdtab tbody tr:last-child td{border-bottom:0}
.stdtab td.mono{font-family:var(--ff-mono);font-size:12px;color:var(--ink-2);white-space:nowrap}

/* ---------- ecosystem ----------------------------------------------------- */
.eco{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ecoi{padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  transition:transform .18s,box-shadow .18s}
.ecoi:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ecoi .ptt{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:9px;margin-bottom:12px}
.ecoi h4{font-size:14px;margin-bottom:6px}
.ecoi p{font-size:12.5px;line-height:1.45}
.ecoi .ecn{margin-top:9px;font-size:12px;font-weight:650;color:var(--ink)}

/* ---------- resource cards ------------------------------------------------ */
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rcard{padding:20px 19px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);display:flex;flex-direction:column;gap:9px}
.rcard h4{font-size:14.5px}
.rcard p{font-size:13px;line-height:1.5}
.rcard .ract{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:8px}

/* ---------- statement band ------------------------------------------------ */
.stmt{padding:46px 0}
.stmt blockquote{max-width:74ch;margin:0 auto;text-align:center;font-size:clamp(19px,2.2vw,25px);
  line-height:1.42;letter-spacing:-.022em;font-weight:600;color:var(--ink)}
.stmt cite{display:block;margin-top:16px;font-style:normal;font-size:12.5px;color:var(--ink-3)}

/* ---------- lightbox extras ---------------------------------------------- */
.lb-note{margin-top:7px;font-size:12px;color:rgba(255,255,255,.72);line-height:1.5}

/* ---------- search -------------------------------------------------------- */
.csearch{position:relative;max-width:640px}
.csearch input{width:100%;padding:13px 16px 13px 42px;font-size:14.5px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--white);color:var(--ink)}
.csearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.sres{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  max-height:430px;overflow-y:auto;background:var(--white);box-shadow:var(--shadow)}
.sres a{display:block;padding:11px 15px;border-bottom:1px solid var(--line)}
.sres a:last-child{border-bottom:0}
.sres a:hover{background:var(--bg-soft)}
.sres a b{display:block;font-size:13.5px;font-weight:600}
.sres a span{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-3)}
.sres .none{padding:15px;font-size:13.5px;color:var(--ink-2)}

/* ---------- source note --------------------------------------------------- */
.srcnote{margin-top:14px;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.srcnote code{font-family:var(--ff-mono);font-size:11px}

/* ---------- APEX responsive ----------------------------------------------- */
@media (max-width:1180px){
  .bgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grail{grid-template-columns:repeat(5,minmax(0,1fr))}
  .mstrip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mstrip>div:nth-child(3n){border-right:0}
  .mstrip>div:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .fwgrid,.eco,.pill4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-copy h1{max-width:none}
  .ghead{grid-template-columns:150px minmax(0,1fr);gap:24px}
  .agrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .twocol{grid-template-columns:1fr;gap:26px}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow>div:nth-child(2n){border-right:0}
  .flow>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .c2e-row{grid-template-columns:1fr}
  .c2e-shot{border-left:0;border-top:1px solid var(--line);min-height:240px}
  .c2e-row.flip .c2e-shot{order:0;border-right:0}
}
@media (max-width:820px){
  .gcards{grid-template-columns:1fr}
  .bgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grail{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sp-steps,.sp-steps.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-step:nth-child(2n){border-right:0}
  .rai-row{grid-template-columns:84px minmax(0,1fr)}
  .rai-d{grid-column:1/-1;border-top:1px solid var(--line)}
  .rai-t{border-right:0}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .hero-ai{padding:34px 0 10px}
  .hero-comp{grid-template-columns:1fr}
  .hero-side{grid-template-columns:1fr 1fr}
  .hero-side .hc-shot:last-child{display:none}
  .mstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mstrip>div:nth-child(2n){border-right:0}
  .mstrip>div{border-bottom:1px solid var(--line)}
  .agrid,.rgrid,.fwgrid,.eco,.pill4{grid-template-columns:1fr}
  .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ghead{grid-template-columns:1fr}
  .ghead .gh-cov{max-width:190px}
  .flow{grid-template-columns:1fr}
  .flow>div{border-right:0;border-bottom:1px solid var(--line)}
  .flow>div:last-child{border-bottom:0}
  .sp-steps,.sp-steps.two{grid-template-columns:1fr}
  .sp-step{border-right:0;border-bottom:1px solid var(--line)}
  .sp-step:last-child{border-bottom:0}
  .pgrid{grid-template-columns:1fr}
  .fbar{gap:14px}
  .fcount{margin-left:0;flex:1 1 100%;padding-bottom:0}
}