/* ==========================================================================
   KODEIT KG — the design system.

   VISUAL SYSTEM: inherited wholesale from the KODEIT ICT & Computer Science
   website, which was itself lifted from the KODEIT ICT Demo Portal. Tokens,
   typography, geometry, elevation, buttons, cards, chips, tabs, the hero
   colour wash, the brand rule, the header and the footer are byte-for-byte the
   same, so the two sites read as one product family.

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

   The interface stays executive-quality. The colour and play come from the real
   KG artwork the pages carry, not from the chrome.

   Every CSS rule below is byte-identical to the static KG site's styles.css.
   Only this leading comment differs: the original names local development
   paths, which must not ship in a public theme.

   Do not add WordPress rules here. Put those in wordpress.css, which is
   enqueued after this file.
   ========================================================================== */

: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)}
.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}
}

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

/* ---------- header: seven nav groups, not six ---------------------------- */
/* The ICT header carries six nav groups; KG needs seven (Curriculum,
   Subject-Based, Explore, Learning, For teachers, Approach, Resources). Same
   header height, same components, same order of shedding — only the widths at
   which the optional parts drop out move up. Verified no horizontal overflow
   at 1600 / 1440 / 1366 / 1280 / 1180 / 1024 / 768 / 390 / 320. */
.nav .navlink{padding:9px 11px;font-size:13px}
@media (max-width:1400px){ .brand .bn{display:none} }
@media (max-width:1220px){ .hdr-cta .btn-out{display:none} }

/* ---------- level journey: three stages, not twelve grades --------------- */
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lvl{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.lvl:before{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.lvl.foundation:before{background:var(--k-green)}
.lvl.conceptual:before{background:var(--k-cyan)}
.lvl.advanced:before{background:var(--k-orange)}
a.lvl:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.lvl .bd{padding:24px 22px 22px;display:flex;flex-direction:column;flex:1}
.lvl .ln{font-size:10.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px}
.lvl.foundation .ln{color:var(--k-green-deep)}
.lvl.conceptual .ln{color:var(--k-cyan-deep)}
.lvl.advanced .ln{color:var(--k-orange-deep)}
.lvl h3{font-size:19px;letter-spacing:-.024em;margin-bottom:6px}
.lvl .age{font-size:12.5px;color:var(--ink-3);font-weight:550;margin-bottom:12px}
.lvl p{font-size:13.5px;line-height:1.55;margin-bottom:14px}
.lvl .chips{margin-top:auto;padding-top:6px}
.lvl .spines{display:flex;gap:7px;padding:0 22px 20px}
.lvl .spines img{width:calc(33.333% - 5px);border-radius:6px;border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(20,26,38,.10)}

/* ---------- spiral progression rail -------------------------------------- */
.spiral{display:grid;grid-template-columns:196px repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spiral>div{background:var(--white);padding:13px 15px;font-size:13px;color:var(--ink-2);line-height:1.5}
.spiral>.sh{background:var(--bg-soft-2);font-size:10.5px;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center}
.spiral>.dm{background:var(--bg-soft-2);display:flex;align-items:center;gap:10px}
.spiral>.dm b{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.012em;line-height:1.3}
.spiral .ic{margin-bottom:0;width:30px;height:30px;border-radius:9px}
.spiral .ic svg{width:15px;height:15px}

/* ---------- PLAY framework ----------------------------------------------- */
.playgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.playcard{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px 20px;overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.playcard:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
.playcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.playcard .pl{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.playcard .pl .lt{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:19px;font-weight:700;letter-spacing:-.02em;flex:none}
.playcard h3{font-size:18px;letter-spacing:-.024em}
.playcard .strap{font-size:12.5px;color:var(--ink-3);font-style:italic;margin-bottom:14px;line-height:1.45}
.playcard ol{counter-reset:pstep;display:grid;gap:9px;margin-bottom:14px}
.playcard ol li{counter-increment:pstep;position:relative;padding-left:24px;font-size:13px;
  color:var(--ink-2);line-height:1.5}
.playcard ol li:before{content:counter(pstep);position:absolute;left:0;top:1px;width:16px;height:16px;
  border-radius:50%;background:var(--bg-soft);border:1px solid var(--line);font-size:9.5px;
  font-weight:650;color:var(--ink-3);display:flex;align-items:center;justify-content:center}
.playcard .whyh{font-size:10.5px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin:auto 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.playcard .why li{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-bottom:6px;
  padding-left:13px;position:relative}
.playcard .why li:before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--accent);opacity:.6}
.pa-y{--accent:var(--k-yellow)} .pa-o{--accent:var(--k-orange)}
.pa-g{--accent:var(--k-green)}  .pa-c{--accent:var(--k-cyan)}
.pa-y .lt{background:var(--soft-yellow);color:var(--k-amber-deep)}
.pa-o .lt{background:var(--soft-orange);color:var(--k-orange-deep)}
.pa-g .lt{background:var(--soft-green);color:var(--k-green-deep)}
.pa-c .lt{background:var(--soft-cyan);color:var(--k-cyan-deep)}

/* ---------- nine-step lesson flow ---------------------------------------- */
.flowrail{display:grid;gap:12px}
.flowstep{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  transition:box-shadow .18s,border-color .18s}
.flowstep:hover{box-shadow:var(--shadow);border-color:var(--line-2)}
.flowstep .fn{width:38px;height:38px;border-radius:11px;background:var(--bg-soft);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:650;color:var(--ink-2);letter-spacing:-.01em}
.flowstep h3,.flowstep h4{font-size:15.5px;letter-spacing:-.016em;margin-bottom:3px}
.flowstep .sub{font-size:12px;color:var(--ink-3);font-weight:550;margin-bottom:8px}
.flowstep p{font-size:13.5px;line-height:1.55}
.flowstep .how{margin-top:10px;display:grid;gap:5px}
.flowstep .how li{font-size:12.5px;color:var(--ink-2);padding-left:14px;position:relative;line-height:1.5}
.flowstep .how li:before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--k-cyan);opacity:.5}
.flowstep .eg{margin-top:10px;font-size:12.5px;color:var(--ink-2);background:var(--bg-soft-2);
  border-left:2px solid var(--line-2);padding:9px 12px;border-radius:0 var(--r-sm) var(--r-sm) 0;line-height:1.55}
.flowstep .eg b{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:3px;font-weight:650}

/* ---------- book explorer ------------------------------------------------ */
.bkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:24px}
.bk{display:flex;flex-direction:column;gap:9px;text-align:left;background:none;padding:0;
  border:0;width:100%}
.bk .cov{position:relative;aspect-ratio:612/792;border-radius:10px;overflow:hidden;
  background:var(--bg-soft);border:1px solid var(--line);box-shadow:0 8px 24px rgba(20,26,38,.10);
  transition:transform .18s,box-shadow .18s}
.bk:hover .cov{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,26,38,.17)}
.bk .cov img{width:100%;height:100%;object-fit:cover}
.bk .kd{position:absolute;left:8px;top:8px;font-size:9.5px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(255,255,255,.94);border:1px solid var(--line);
  color:var(--ink-2);padding:3px 8px;border-radius:99px;backdrop-filter:blur(3px)}
.bk b{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;letter-spacing:-.012em}
.bk small{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.4}
.bk .isbn{font-family:var(--ff-mono);font-size:10px;color:var(--ink-3)}

/* A book-detail table inside the modal is only two narrow columns, so it does
   not need the global 520/620px table floor — that would make it scroll inside
   an already-narrow dialog on a phone. */
.modal .tblwrap{border-radius:var(--r-sm)}
.modal .tblwrap table{min-width:0}
.modal .tblwrap td{padding:9px 12px}

/* ---------- theme / subject explorer cards ------------------------------- */
.thgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
.thcard{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:left;padding:0;
  width:100%;transition:transform .18s,box-shadow .18s,border-color .18s}
.thcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.thcard .im{aspect-ratio:612/792;background:var(--bg-soft);border-bottom:1px solid var(--line);
  overflow:hidden;max-height:260px}
.thcard .im img{width:100%;height:100%;object-fit:cover;object-position:top center}
.thcard .bd{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.thcard .bn{font-size:10.5px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px}
.thcard h3{font-size:16px;letter-spacing:-.018em;margin-bottom:6px}
.thcard p{font-size:13px;line-height:1.55;margin-bottom:12px}
.thcard .chips{margin-top:auto}

/* ---------- unit / lesson tree ------------------------------------------- */
.unit{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden}
.unit+.unit{margin-top:12px}
.unit .uh{display:flex;align-items:baseline;gap:12px;padding:14px 18px;background:var(--bg-soft-2);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.unit .uh .un{font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.unit .uh b{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.014em}
.unit .uh .cnt{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.unit .why{padding:12px 18px 0;font-size:13px;color:var(--ink-2);line-height:1.55}
.unit ol{padding:12px 18px 16px;display:grid;gap:7px;counter-reset:les}
.unit ol li{counter-increment:les;position:relative;padding-left:30px;font-size:13.5px;
  color:var(--ink-2);line-height:1.5}
.unit ol li:before{content:"L" counter(les);position:absolute;left:0;top:1px;font-size:10px;
  font-weight:650;color:var(--ink-3);font-family:var(--ff-mono)}

/* ---------- sample-page gallery + lightbox ------------------------------- */
.samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:20px}
.sample{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-align:left;padding:0;width:100%;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.sample:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.sample .im{position:relative;background:var(--bg-soft);border-bottom:1px solid var(--line);
  aspect-ratio:612/792;max-height:340px;overflow:hidden}
.sample .im img{width:100%;height:100%;object-fit:cover;object-position:top center}
.sample .zoom{position:absolute;right:9px;bottom:9px;width:30px;height:30px;border-radius:9px;
  background:rgba(255,255,255,.94);border:1px solid var(--line-2);display:flex;align-items:center;
  justify-content:center;color:var(--ink-2);backdrop-filter:blur(3px)}
.sample .zoom svg{width:14px;height:14px}
.sample .bd{padding:15px 16px 17px}
.sample .bd b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:5px;
  letter-spacing:-.014em}
.sample .bd span{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.lb{position:fixed;inset:0;z-index:130;background:rgba(23,28,36,.62);display:none;
  padding:40px 24px;overflow-y:auto}
.lb.on{display:block}
.lb-in{max-width:820px;margin:0 auto;background:var(--white);border-radius:16px;overflow:hidden;
  box-shadow:0 28px 80px rgba(15,20,30,.4)}
.lb-in:before{content:"";display:block;height:3px;background:var(--brand-line)}
.lb-in img{width:100%;display:block}
.lb-cap{padding:16px 22px 20px;border-top:1px solid var(--line);background:var(--bg-soft-2)}
.lb-cap b{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:5px}
.lb-cap span{font-size:13px;color:var(--ink-2);line-height:1.55}
.lb-x{position:fixed;right:22px;top:22px;width:38px;height:38px;border-radius:10px;
  background:var(--white);border:1px solid var(--line-2);display:flex;align-items:center;
  justify-content:center;color:var(--ink);box-shadow:var(--shadow)}
.lb-x svg{width:15px;height:15px}

/* ---------- digital learning tiles --------------------------------------- */
.vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:20px}
.vid{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  text-align:left;padding:0;display:flex;flex-direction:column;width:100%;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.vid:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.vid .im{position:relative;aspect-ratio:16/9;background:var(--bg-soft);overflow:hidden;
  border-bottom:1px solid var(--line)}
.vid .im img{width:100%;height:100%;object-fit:cover}
.vid .pbadge{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.94);border:1px solid var(--line);color:var(--ink-2);
  padding:4px 9px;border-radius:99px;backdrop-filter:blur(3px)}
.vid .pbadge svg{width:10px;height:10px}
.vid .bd{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.vid .bd b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:4px;
  letter-spacing:-.014em}
.vid .bd span{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.vid .bd .chips{margin-top:12px}

/* ---------- variant compare table ---------------------------------------- */
.vcmp td:first-child{font-weight:600;color:var(--ink);width:26%}
.vcmp .same{color:var(--k-green-deep);font-weight:600}

/* ---------- resource cards ----------------------------------------------- */
.rescard{position:relative;display:flex;gap:16px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:18px;overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.rescard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.rescard .cv{flex:none;width:86px}
.rescard .cv img{width:100%;border-radius:7px;border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(20,26,38,.12)}
.rescard .bd{min-width:0;display:flex;flex-direction:column}
.rescard .bd h3,.rescard .bd h4{font-size:14.5px;margin-bottom:5px}
.rescard .bd p{font-size:12.5px;line-height:1.5;margin-bottom:10px}
.rescard .bd .btns{margin-top:auto}

/* ---------- teacher pillars ---------------------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.pillar{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 20px 20px;overflow:hidden}
.pillar:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent,var(--k-cyan))}
.pillar h3,.pillar h4{font-size:15px;margin-bottom:6px}
.pillar p{font-size:13px;line-height:1.55}
.pillar ul{margin-top:10px;display:grid;gap:5px}
.pillar ul li{font-size:12.5px;color:var(--ink-2);padding-left:13px;position:relative;line-height:1.5}
.pillar ul li:before{content:"";position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;
  background:var(--accent,var(--k-cyan));opacity:.6}

/* ---------- hero book fan ------------------------------------------------ */
.fan{display:flex;justify-content:center;align-items:flex-end;margin-top:18px;padding:0 6px}
.fan img{width:23%;border-radius:8px;border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(20,26,38,.16);background:var(--white)}
.fan img:nth-child(1){transform:rotate(-7deg) translateY(10px);z-index:1}
.fan img:nth-child(2){transform:rotate(-3deg) translateY(2px);z-index:2;margin-left:-3%}
.fan img:nth-child(3){transform:rotate(3deg) translateY(2px);z-index:2;margin-left:-3%}
.fan img:nth-child(4){transform:rotate(7deg) translateY(10px);z-index:1;margin-left:-3%}

/* ---------- search ------------------------------------------------------- */
.srch{position:relative;max-width:440px}
.srch input{padding-left:38px}
.srch>svg{position:absolute;left:13px;top:22px;transform:translateY(-50%);width:15px;height:15px;
  color:var(--ink-3);pointer-events:none}
.srch-res{margin-top:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  box-shadow:var(--shadow-lg);max-height:340px;overflow-y:auto;padding:6px}
.srch-res a{display:block;padding:9px 11px;border-radius:var(--r-sm)}
.srch-res a:hover,.srch-res a:focus-visible{background:var(--bg-soft-2)}
.srch-res b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.srch-res span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.srch-empty{padding:14px;font-size:13px;color:var(--ink-3)}

/* ---------- misc --------------------------------------------------------- */
.twocol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}
.stack{display:grid;gap:14px}
.figure{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white);
  box-shadow:var(--shadow)}
.figure img{width:100%;display:block}
.figure .cap{padding:12px 15px;font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--line);
  background:var(--bg-soft-2);line-height:1.55}
.figure .cap b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px;font-size:13px}
.aside{background:var(--bg-soft-2);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.aside h3,.aside h4{font-size:13.5px;margin-bottom:8px}
.aside p{font-size:13px;line-height:1.6}
.evid{font-size:11.5px;color:var(--ink-3);line-height:1.55;margin-top:10px}
.evid b{color:var(--ink-2);font-weight:600}

/* ---------- KG responsive ------------------------------------------------ */
@media (max-width:1180px){
  .playgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  /* .hero-cols collapses to one column here, which exposes the whole wash.
     The ICT stylesheet's own rationale: a single-column hero drops to the
     lower opacities. Apply that to the split hero too once it has stacked. */
  .hero.split .hero-wash i.a{opacity:.10} .hero.split .hero-wash i.b{opacity:.09}
  .hero.split .hero-wash i.c{opacity:.08} .hero.split .hero-wash i.d{opacity:.07}
  .levels{grid-template-columns:minmax(0,1fr)}
  .twocol{grid-template-columns:minmax(0,1fr);gap:26px}
  .spiral{grid-template-columns:150px repeat(3,minmax(0,1fr))}
  .spiral>div{padding:11px 12px;font-size:12.5px}
  .spiral>.dm{flex-direction:column;align-items:flex-start;gap:7px}
}
@media (max-width:640px){
  .playgrid{grid-template-columns:minmax(0,1fr)}
  .bkgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .thgrid,.samples,.vidgrid,.pillars{grid-template-columns:minmax(0,1fr)}
  .flowstep{grid-template-columns:minmax(0,1fr);gap:11px}
  .spiral{display:block;border:0;background:none;border-radius:0}
  .spiral>.sh{display:none}
  .spiral>.dm{border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;margin-top:14px;
    background:var(--bg-soft-2);flex-direction:row;align-items:center}
  .spiral>div.sl{border:1px solid var(--line);border-top:0;padding:11px 14px}
  .spiral>div.sl:before{content:attr(data-lvl);display:block;font-size:9.5px;
    font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
  .spiral>div.sl.last{border-radius:0 0 var(--r) var(--r)}
  .rescard{flex-direction:column}
  .rescard .cv{width:110px}
  .lb{padding:16px 12px}
  .lb-x{right:12px;top:12px}
  .fan img{width:26%}
  .unit .uh .cnt{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .bk:hover .cov,.thcard:hover,.sample:hover,.vid:hover,.playcard:hover,a.lvl:hover,.rescard:hover{transform:none}
}
@media print{
  .lb,.srch,.sample .zoom{display:none}
}