/* WordPress build. Copied from the static Ascend site by
   wordpress-build/build_theme.py. The only change is in the header
   comment below, where the authoring machine's local paths were
   removed; every rule is byte-for-byte the static site's. */
/* ==========================================================================
   KODEIT ASCEND — 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 site, which inherited it from the KODEIT KG and
   KODEIT ICT sites.
   Ascend changes none of it: same four brand colours, same deep tones, same
   70px header, same 1420px measure, same radii, same Inter stack.

   Everything below the "ASCEND COMPONENTS" rule is new, and is built only
   from the primitives above — no new typeface, no new radius, no new
   elevation. Ascend adds exactly two families of colour, and both of them
   are product semantics rather than decoration:

     --gm-1..5   the five Growth Metric bands the platform actually reports
                 in (Beginning, Developing, Approaching, Proficient,
                 Advanced), so a band always looks the same everywhere
     --sev-*     the three severity levels the Learning Gaps report defines
                 by threshold (critical, high, moderate)

   Both are drawn from the existing brand accents wherever a brand accent
   already carries the right meaning. There is no dark dashboard chrome, no
   neon gradient and no invented analytics furniture: the platform
   screenshots carry the product, and the page around them stays quiet.

   See evidence/DESIGN_SYSTEM_AUDIT.md and qa/DESIGN_FAMILY_CONSISTENCY.md.
   ========================================================================== */

: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}
}
/* ==========================================================================
   ASCEND COMPONENTS
   New below this line. Built only from the primitives above.
   ========================================================================== */

/* ---------- Ascend product semantics -------------------------------------
   Two scales, both taken from what the platform actually reports. Nothing
   here is decorative: a Growth Metric band and a severity level look the
   same on every page because they mean the same thing on every page.      */
:root{
  /* the five Growth Metric bands, 100-350 */
  --gm-1:#C2410C;  /* Beginning                                            */
  --gm-2:#B45309;  /* Developing                                           */
  --gm-3:#856900;  /* Approaching — the existing --k-amber-deep            */
  --gm-4:#047A09;  /* Proficient  — the existing --k-green-deep            */
  --gm-5:#00719C;  /* Advanced    — the existing --k-cyan-deep             */
  /* the three severity levels the Learning Gaps report defines            */
  --sev-crit:#BC3500;   /* --k-orange-deep */
  --sev-warn:#856900;   /* --k-amber-deep  */
  --sev-note:#00719C;   /* --k-cyan-deep   */
  --sev-good:#047A09;   /* --k-green-deep  */
}

/* ---------- header: five nav groups need a little more room -------------- */
@media (max-width:1320px){
  .nav .navlink{padding:9px 10px;font-size:12.8px}
  .hdr-in{gap:12px}
}

/* ---------- inline icon safety net ---------------------------------------
   ico() emits a bare <svg viewBox="0 0 24 24"> with no width/height, so in
   any context that does not size it explicitly the browser falls back to the
   SVG default (300x150) and the glyph swallows its card. That happened in
   three places before it was caught. Components that want a different size
   set it on a class selector and win on specificity; this is only the floor. */
main svg{width:15px;height:15px;flex:none}

/* ---------- header: dropdown hover bridge --------------------------------
   The inherited .drop sits 9px below its trigger, and carries overflow:hidden
   so it cannot bridge the gap itself. Without a bridge the pointer leaves the
   <li> while travelling down to the panel, mouseleave fires, and the menu
   closes before a link can be clicked. This is generated content on the <li>
   itself, so the pointer never leaves it. It exists only while the menu is
   open and spans exactly the gap, so it intercepts nothing else. */
.nav>li.open:after{content:"";position:absolute;left:0;right:0;top:100%;height:11px}

/* ---------- numbered stage rail (the loop, the remedial plan, flows) ----- */
.stagerail{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(206px,1fr))}
.stage{position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:18px 16px 16px;display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.stage:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent,var(--k-cyan));opacity:.55}
a.stage:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
a.stage:hover:before{opacity:1}
.stage .sn{font-family:var(--ff-mono);font-size:11px;font-weight:650;letter-spacing:.06em;
  color:var(--ink-3);margin-bottom:9px}
.stage h3{font-size:16px;margin-bottom:6px}
.stage p{font-size:13px;line-height:1.55;flex:1}
.stage .more{margin-top:12px;font-size:12.5px;font-weight:600;color:var(--k-cyan-deep);
  display:inline-flex;align-items:center;gap:6px}
.stage .more svg{width:12px;height:12px}

/* ---------- Growth Metric scale ------------------------------------------ */
.gmscale{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.gmscale .bar{display:grid;grid-template-columns:repeat(5,1fr);height:12px}
.gmscale .bar i{display:block}
.gmscale .bar i:nth-child(1){background:var(--gm-1)}
.gmscale .bar i:nth-child(2){background:var(--gm-2)}
.gmscale .bar i:nth-child(3){background:var(--gm-3)}
.gmscale .bar i:nth-child(4){background:var(--gm-4)}
.gmscale .bar i:nth-child(5){background:var(--gm-5)}
.gmscale .labs{display:grid;grid-template-columns:repeat(5,1fr)}
.gmscale .labs div{padding:12px 10px 14px;border-right:1px solid var(--line);text-align:center}
.gmscale .labs div:last-child{border-right:0}
.gmscale .labs b{display:block;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.012em}
.gmscale .labs span{display:block;font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);margin-top:3px}

/* ---------- verdict / severity cards ------------------------------------- */
.verdicts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.verdict{border:1px solid var(--line);border-radius:var(--r);padding:18px 17px 17px;
  background:var(--white);border-top:3px solid var(--vc,var(--line-2))}
.verdict.crit{--vc:var(--sev-crit)} .verdict.warn{--vc:var(--sev-warn)}
.verdict.note{--vc:var(--sev-note)} .verdict.good{--vc:var(--sev-good)}
.verdict .vtop{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.verdict h3{font-size:15.5px}
.verdict .vrule{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:99px;padding:2px 9px}
.verdict p{font-size:13.5px;line-height:1.55}
.verdict .vact{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--vc)}

/* ---------- before / after: a score, and the diagnosis behind it --------- */
.split2{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:22px;align-items:stretch}
.panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  padding:24px 22px 22px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.panel.pale{background:var(--bg-soft-2)}
.panel .ptag{font-size:10.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px}
.bigscore{text-align:center;padding:26px 0 22px;margin:auto 0}
.bigscore b{display:block;font-size:clamp(46px,7vw,66px);font-weight:650;letter-spacing:-.04em;
  color:var(--ink-3);line-height:1}
.bigscore span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:10px}
.bigscore em{display:block;font-style:normal;font-size:13px;color:var(--ink-2);margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line);max-width:30ch;margin-left:auto;
  margin-right:auto;line-height:1.6}
.qa{display:grid;gap:0}
.qa .qrow{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line);align-items:start}
.qa .qrow:last-child{border-bottom:0;padding-bottom:0}
.qa .qq{font-size:12.5px;font-weight:650;letter-spacing:.02em;color:var(--ink-3);padding-top:1px}
.qa .qaa b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.014em;margin-bottom:3px}
.qa .qaa span{display:block;font-size:13px;color:var(--ink-2);line-height:1.55}

/* ---------- drill-down rail (group to learner) --------------------------- */
.drill{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.drill .dstep{flex:1 1 128px;min-width:0;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);padding:13px 13px 12px}
.drill .dstep b{display:block;font-size:12px;font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.drill .dstep span{display:block;font-size:12px;color:var(--ink-2);line-height:1.5}
.drill .dstep:nth-child(1),.drill .dstep:nth-child(2){border-top:2px solid var(--k-cyan)}
.drill .dstep:nth-child(3),.drill .dstep:nth-child(4){border-top:2px solid var(--k-green)}
.drill .dstep:nth-child(5){border-top:2px solid var(--k-yellow)}
.drill .dstep:nth-child(6),.drill .dstep:nth-child(7){border-top:2px solid var(--k-orange)}
.drill .dstep:nth-child(8){border-top:2px solid var(--ink)}

/* ---------- mode cards ---------------------------------------------------- */
.modecards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.modecard{position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 24px 24px;overflow:hidden;display:flex;
  flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}
.modecard:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--accent,var(--k-cyan))}
a.modecard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.modecard h3{font-size:19px;letter-spacing:-.022em;margin-bottom:4px}
.modecard .ms{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px}
.modecard .mlive{font-size:13.5px;line-height:1.6;color:var(--ink-2);padding:13px 15px;
  background:var(--bg-soft-2);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:15px}
.modecard p{font-size:13.5px;line-height:1.6}
.modecard .mfoot{margin-top:auto;padding-top:16px;font-size:12.5px;font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;gap:7px}
.modecard .mfoot svg{width:13px;height:13px}

/* ---------- purpose strip -------------------------------------------------- */
.purposes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.purpose{border:1px solid var(--line);border-radius:var(--r);padding:17px 16px 16px;
  background:var(--white);border-left:3px solid var(--accent,var(--k-cyan))}
.purpose b{display:block;font-size:15px;font-weight:650;letter-spacing:-.016em;color:var(--ink)}
.purpose .pl{display:block;font-size:12.5px;color:var(--ink);font-weight:550;margin:5px 0 8px}
.purpose .pw{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:9px}
.purpose p{font-size:12.5px;line-height:1.55}

/* ---------- cause cards ---------------------------------------------------- */
.causes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cause{border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  padding:18px 16px 16px;border-top:3px solid var(--vc,var(--line-2));display:flex;flex-direction:column}
.cause.crit{--vc:var(--sev-crit)} .cause.warn{--vc:var(--sev-warn)}
.cause.note{--vc:var(--sev-note)} .cause.good{--vc:var(--sev-good)}
.cause h3{font-size:15px;margin-bottom:10px}
.cause dl{margin:0;display:grid;gap:9px;flex:1}
.cause dt{font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cause dd{margin:2px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.cause dd.strong{color:var(--ink);font-weight:550}
.cause .ctab{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--vc);font-weight:600}

/* ---------- role cards ------------------------------------------------------ */
.rolecards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.rolecard{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}
.rolecard:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--accent,var(--k-cyan))}
a.rolecard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.rolecard h3{font-size:17px;letter-spacing:-.02em;margin-bottom:3px}
.rolecard .who{font-size:11.5px;color:var(--ink-3);margin-bottom:15px;line-height:1.45}
.rolecard .rq{font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:4px}
.rolecard .rt{font-size:13.5px;line-height:1.55;color:var(--ink);font-weight:550;margin-bottom:13px}
.rolecard .ra{font-size:13px;line-height:1.55;color:var(--ink-2)}
.rolecard .mfoot{margin-top:auto;padding-top:16px;font-size:12.5px;font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;gap:7px}
.rolecard .mfoot svg{width:13px;height:13px}

/* ---------- AI pairs: what it does, and where the person stands ---------- */
.aipairs{display:grid;gap:14px}
.aipair{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.aipair .half{padding:18px 20px}
.aipair .half.l{background:var(--bg-soft-2)}
.aipair .half b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.014em;margin-bottom:5px}
.aipair .half span.t{display:block;font-size:13px;color:var(--ink-2);line-height:1.55}
.aipair .half .tag{margin-bottom:9px;display:block}
.aipair .mid{display:flex;align-items:center;justify-content:center;
  border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--white)}
.aipair .mid svg{width:15px;height:15px;color:var(--ink-3)}

/* ---------- question to report map ---------------------------------------- */
.qmap{display:grid;gap:12px}
.qcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white);
  transition:box-shadow .18s,border-color .18s;text-align:left;width:100%}
.qcard:hover{box-shadow:var(--shadow);border-color:var(--line-2)}
.qcard .qside{padding:17px 19px;background:var(--bg-soft-2);border-right:1px solid var(--line);
  display:flex;align-items:center}
.qcard .qside b{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.016em;line-height:1.4}
.qcard .rside{padding:17px 19px}
.qcard .rside .rn{display:flex;align-items:center;gap:9px;margin-bottom:5px;flex-wrap:wrap}
.qcard .rside .rn b{font-size:14px;font-weight:650;color:var(--ink)}
.qcard .rside p{font-size:13px;line-height:1.55}

/* ---------- diagnostic tab groups ------------------------------------------- */
.dgroup{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.dgroup+.dgroup{margin-top:14px}
.dgroup .dhd{display:flex;align-items:baseline;gap:14px;padding:15px 20px;
  background:var(--bg-soft-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.dgroup .dhd b{font-size:17px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.dgroup .dhd span{font-size:11.5px;color:var(--ink-3)}
.dgroup .dbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  background:var(--white);margin:0 -1px -1px 0}
.dgroup .dtab{background:var(--white);padding:15px 18px 16px;text-align:left;width:100%;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .14s;cursor:zoom-in}
button.dtab:hover{background:var(--bg-soft-2)}
.dgroup .dtab b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.012em;margin-bottom:4px}
.dgroup .dtab span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5}

/* ---------- framework grid --------------------------------------------------- */
.fwgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:14px}
.fw{border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 15px;background:var(--white)}
.fw .code{font-family:var(--ff-mono);font-size:11px;font-weight:600;color:var(--k-cyan-deep);
  background:var(--soft-cyan);border-radius:6px;padding:2px 7px;display:inline-block;margin-bottom:9px}
.fw b{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.012em;margin-bottom:4px}
.fw span{display:block;font-size:12.5px;color:var(--ink-2)}
.fw .reg{margin-top:9px;font-size:11px;color:var(--ink-3)}

/* ---------- hierarchy ladder -------------------------------------------------- */
.ladder{display:grid;gap:8px}
.ladder .lstep{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:start;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;background:var(--white)}
.ladder .lstep .ldot{width:26px;height:26px;border-radius:50%;background:var(--bg-soft);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-mono);font-size:11px;font-weight:650;color:var(--ink-3)}
.ladder .lstep b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:2px}
.ladder .lstep span{display:block;font-size:13px;color:var(--ink-2);line-height:1.55}
.ladder .lstep:nth-child(1),.ladder .lstep:nth-child(2){border-left:2px solid var(--k-cyan)}
.ladder .lstep:nth-child(3){border-left:2px solid var(--k-green)}
.ladder .lstep:nth-child(4){border-left:2px solid var(--k-yellow)}
.ladder .lstep:nth-child(5){border-left:2px solid var(--k-orange)}
.ladder .lstep:nth-child(6){border-left:2px solid var(--ink)}

/* ---------- story cards -------------------------------------------------------- */
.storygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(298px,1fr));gap:16px}
.story{display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  padding:20px 19px 18px;transition:transform .18s,box-shadow .18s,border-color .18s}
.story:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.story b{display:block;font-size:15.5px;font-weight:650;letter-spacing:-.018em;color:var(--ink);
  margin-bottom:8px;line-height:1.35}
.story p{font-size:13px;line-height:1.6}

/* ---------- screenshot frame with browser chrome ------------------------------- */
.appframe{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--white);box-shadow:var(--shadow)}
.appframe .abar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:var(--bg-soft-2);
  border-bottom:1px solid var(--line)}
.appframe .abar i{width:8px;height:8px;border-radius:50%;background:var(--line-2);display:block;flex:none}
.appframe .abar .aurl{margin-left:9px;font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);
  background:var(--white);border:1px solid var(--line);border-radius:99px;padding:2px 11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}
.appframe .ashot{display:block;width:100%;border:0;background:var(--bg-soft);cursor:zoom-in;padding:0;
  position:relative}
.appframe .ashot img{width:100%;height:auto;display:block}
.appframe .acap{padding:12px 15px;font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--line);
  background:var(--white);line-height:1.55}
.appframe .acap b{color:var(--ink);font-weight:600}
.appframe.tall .ashot{max-height:520px;overflow:hidden}
.appframe.tall .ashot:after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.96))}
.zoomhint{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;
  gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,.94);
  border:1px solid var(--line-2);border-radius:99px;padding:5px 11px;box-shadow:var(--shadow-sm);
  pointer-events:none}
.zoomhint svg{width:11px;height:11px}

/* ---------- screenshot gallery -------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:18px}
.gcardx{display:flex;flex-direction:column;text-align:left;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;width:100%;
  transition:transform .18s,box-shadow .18s,border-color .18s;cursor:zoom-in}
.gcardx:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.gcardx .gim{background:var(--bg-soft);border-bottom:1px solid var(--line);height:170px;
  overflow:hidden;position:relative}
.gcardx .gim img{width:100%;height:auto;display:block}
.gcardx .gim:after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;
  background:linear-gradient(to bottom,rgba(247,248,250,0),rgba(247,248,250,.9))}
.gcardx .gbd{padding:14px 15px 15px}
.gcardx .gbd b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px;
  letter-spacing:-.014em}
.gcardx .gbd span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5}

/* ---------- lightbox ------------------------------------------------------------ */
.lb{position:fixed;inset:0;z-index:140;background:rgba(16,20,27,.88);display:none;
  overflow:auto;padding:56px 18px 26px}
.lb.on{display:block}
.lb-in{max-width:1400px;margin:0 auto;background:var(--white);border-radius:var(--r-lg);overflow:hidden}
.lb-in img{width:100%;height:auto;display:block}
.lb-cap{padding:15px 20px 18px;background:var(--white);border-top:1px solid var(--line)}
.lb-cap b{display:block;font-size:15px;font-weight:650;color:var(--ink);margin-bottom:4px}
.lb-cap span{display:block;font-size:13px;color:var(--ink-2);line-height:1.55}
.lb-x{position:fixed;top:14px;right:16px;z-index:141;width:40px;height:40px;border-radius:10px;
  background:rgba(255,255,255,.95);border:1px solid var(--line-2);display:flex;align-items:center;
  justify-content:center;color:var(--ink)}
.lb-x:hover{background:#fff}
.lb-x svg{width:16px;height:16px}

/* ---------- fact band ------------------------------------------------------------ */
.factband{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.factband .f{background:var(--white);padding:19px 18px}
.factband .f b{display:block;font-size:25px;font-weight:650;color:var(--ink);
  letter-spacing:-.03em;line-height:1.1}
.factband .f span{display:block;font-size:11.5px;color:var(--ink-2);margin-top:6px;line-height:1.45}

/* ---------- exam cards ------------------------------------------------------------- */
.examcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.examcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  padding:24px 22px 22px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.examcard:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--accent,var(--k-cyan))}
.examcard h3{font-size:19px;letter-spacing:-.022em;margin-bottom:4px}
.examcard .off{font-size:12px;color:var(--ink-3);margin-bottom:16px;line-height:1.5}
.examcard dl{margin:0;display:grid;gap:12px;flex:1}
.examcard dt{font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.examcard dd{margin:3px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}

/* ---------- training tracks ---------------------------------------------------------- */
.tracks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.track{border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  padding:19px 18px 17px;border-top:3px solid var(--accent,var(--k-cyan))}
.track .tn{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.track .tn b{font-size:15.5px;font-weight:650;letter-spacing:-.018em;color:var(--ink)}
.track .tn span{font-family:var(--ff-mono);font-size:13px;font-weight:650;color:var(--ink-3)}
.track p{font-size:12.5px;line-height:1.55}

/* ---------- resource cards ------------------------------------------------------------ */
.rescards{display:grid;grid-template-columns:repeat(auto-fill,minmax(278px,1fr));gap:18px}
.rescard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s}
a.rescard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
/* the audience photograph */
.rescard .rimg{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;
  background:var(--bg-soft);border-bottom:1px solid var(--line)}
.rescard .rimg img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease}
a.rescard:hover .rimg img{transform:scale(1.03)}
.rescard .rbody{display:flex;flex-direction:column;flex:1;padding:18px 19px 17px}
.rescard h3{font-size:15.5px;margin-bottom:6px}
.rescard p{font-size:13px;line-height:1.55;flex:1;margin:0}
.rescard .rmeta{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* An inline icon inside .rmeta had no intrinsic size, so it rendered at the
   SVG default and swallowed the card. Every icon in this context is a small
   glyph beside a line of text. */
.rescard .rmeta svg{width:14px;height:14px;flex:none}
@supports not (aspect-ratio:3/2){
  .rescard .rimg{height:0;padding-bottom:66.67%}
  .rescard .rimg img{position:absolute;inset:0}
}

/* ---------- search --------------------------------------------------------------------- */
.searchbox{position:relative;max-width:560px}
.searchbox input{width:100%;height:48px;padding:0 16px 0 42px;border:1px solid var(--line-2);
  border-radius:12px;font-size:14.5px;color:var(--ink);background:var(--white);box-shadow:var(--shadow-sm)}
.searchbox input::placeholder{color:var(--ink-3)}
.searchbox .si{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--ink-3);pointer-events:none}
.sres{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  overflow:hidden;box-shadow:var(--shadow)}
.sres a{display:block;padding:12px 16px;border-bottom:1px solid var(--line)}
.sres a:last-child{border-bottom:0}
.sres a:hover{background:var(--bg-soft-2)}
.sres a b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:2px}
.sres a span{display:block;font-size:12.5px;color:var(--ink-2)}
.sres .none{padding:14px 16px;font-size:13.5px;color:var(--ink-2)}

/* ---------- inputs (the KODEIT family form treatment) ----------------------------------- */
.field input,.field select,.field textarea{width:100%;min-height:44px;padding:11px 13px;
  border:1px solid var(--line-2);border-radius:10px;font-size:14px;color:var(--ink);
  background:var(--white);transition:border-color .16s,box-shadow .16s}
.field textarea{min-height:118px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--k-cyan);
  box-shadow:0 0 0 3px rgba(1,195,255,.16)}
.field select{appearance:none;background-repeat:no-repeat;background-position:right 13px center;
  background-size:14px;padding-right:38px}
.checkgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.checkgrid label{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;cursor:pointer;
  transition:border-color .14s,background .14s}
.checkgrid label:hover{background:var(--bg-soft-2);border-color:var(--line-2)}
.checkgrid input{width:15px;height:15px;min-height:0;flex:none;accent-color:var(--k-green-deep)}

/* ---------- misc -------------------------------------------------------------------------- */
.leadbox{border-left:3px solid var(--k-orange);padding:4px 0 4px 18px;margin:6px 0 0}
.leadbox p{font-size:16px;line-height:1.65;color:var(--ink)}
.quoteband{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-soft-2);
  padding:32px 34px;text-align:center}
.quoteband b{display:block;font-size:clamp(19px,2.4vw,26px);font-weight:650;letter-spacing:-.026em;
  color:var(--ink);max-width:34ch;margin:0 auto;line-height:1.3}
.quoteband span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:14px;max-width:60ch;
  margin-left:auto;margin-right:auto;line-height:1.6}
.crumb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-3);
  margin-bottom:16px;flex-wrap:wrap}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:var(--k-cyan-deep)}
.crumb .sep{opacity:.5}
.srcnote{margin-top:14px;font-size:11.5px;color:var(--ink-3);line-height:1.55}
.srcnote b{color:var(--ink-2);font-weight:600}
.twocol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}
.stickyside{position:sticky;top:calc(var(--header-h) + 20px)}

/* ---------- Ascend responsive --------------------------------------------------------------- */
@media (max-width:1180px){
  .modecards{grid-template-columns:minmax(0,1fr)}
  .purposes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .causes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rolecards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .examcards{grid-template-columns:minmax(0,1fr)}
  .tracks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .split2,.twocol{grid-template-columns:minmax(0,1fr);gap:20px}
  .qcard{grid-template-columns:minmax(0,1fr)}
  .qcard .qside{border-right:0;border-bottom:1px solid var(--line)}
  .aipair{grid-template-columns:minmax(0,1fr)}
  .aipair .mid{border-left:0;border-right:0;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);padding:7px 0}
  .aipair .mid svg{transform:rotate(90deg)}
  .stickyside{position:static}
  .gmscale .labs div{padding:10px 4px 12px}
  .gmscale .labs b{font-size:11px}
  .gmscale .labs span{font-size:9.5px}
}
@media (max-width:640px){
  .purposes,.causes,.rolecards,.tracks{grid-template-columns:minmax(0,1fr)}
  .checkgrid{grid-template-columns:minmax(0,1fr)}
  .qa .qrow{grid-template-columns:minmax(0,1fr);gap:5px}
  .drill .dstep{flex:1 1 100%}
  .gmscale .bar{height:9px}
  .gmscale .labs div{padding:9px 2px 10px}
  .gmscale .labs b{font-size:9.5px;letter-spacing:-.02em}
  .gmscale .labs span{font-size:8.5px}
  .appframe.tall .ashot{max-height:340px}
  .gcardx .gim{height:150px}
  .quoteband{padding:24px 20px}
  .lb{padding:52px 10px 16px}
  .panel{padding:20px 18px 18px}
  .factband{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  a.stage:hover,a.modecard:hover,a.rolecard:hover,.story:hover,.gcardx:hover,a.rescard:hover{transform:none}
}