/* ==========================================================================
   SCHOLARIO — parent company website

   Design lineage: the five KODEIT product sites share one token set (see
   discovery/CHILD_SITE_DESIGN_AUDIT.md). Everything structural below is
   inherited from that system unchanged — wrap, header height, radii, section
   rhythm, shadows, card and button geometry, footer structure — so a visitor
   crossing between Scholario and a product site meets no visual seam.

   Two things change, and they are what make this the parent:
     1. the palette is Scholario's, read from the logo SVG
     2. the signature header gradient is re-coloured, not removed

   Typography is NOT one of them. The type system is APEX's, token for token
   (Inter 400/500/600/700 + a mono for technical strings), so Scholario reads
   as a sibling of the product sites rather than as an editorial magazine.
   Audited in evidence/APEX_TYPOGRAPHY_AUDIT.md.
   ========================================================================== */

:root{
  /* ---- Scholario brand, sampled from Scholario - logo.svg ---------------- */
  --s-indigo-deep:#2B0A80;
  --s-indigo:#351C96;
  --s-blue:#0057DA;
  --s-cyan:#079DFC;
  --s-orange:#FF641B;
  --s-amber:#FFCD35;

  --brand:var(--s-indigo);
  --brand-hover:#2B0A80;

  /* ---- neutrals — inherited from the family, unchanged ------------------ */
  --white:#FFFFFF;
  --bg-soft:#F7F8FA;
  --bg-soft-2:#FAFAFB;
  --ink:#1D2126;
  --ink-2:#5A6472;
  --ink-3:#68717F;      /* the family's corrected value: 4.93:1 on white */
  --line:#E8EAEF;
  --line-2:#D9DDE4;

  /* ---- the family signature device, in Scholario's blob order ----------- */
  --brand-line:linear-gradient(90deg,var(--s-amber) 0%,var(--s-orange) 33%,var(--s-indigo) 67%,var(--s-cyan) 100%);

  /* ---- elevation — inherited, 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;

  /* ---- product accents — derivation in PRODUCT_VISUAL_IDENTITY.json ----- */
  --p-kg:#FEDA00;             --p-kg-deep:#856900;             --p-kg-soft:rgba(254,218,0,.20);
  --p-ict:#01C3FF;            --p-ict-deep:#00719C;            --p-ict-soft:rgba(1,195,255,.11);
  --p-ss:#FF4A01;             --p-ss-deep:#BC3500;             --p-ss-soft:rgba(255,74,1,.10);
  --p-apex:#7353B6;           --p-apex-deep:#5B3E93;           --p-apex-soft:rgba(115,83,182,.12);
  --p-ascend:#0E9384;         --p-ascend-deep:#0B7268;         --p-ascend-soft:rgba(14,147,132,.11);

  --soft-brand:rgba(53,28,150,.07);
  --soft-amber:rgba(255,205,53,.20);

  /* Typography — identical to APEX (Z:/APEX/.../website/styles.css lines 82-83) */
  --ff:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ff-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* one display alias so components need no font-family of their own; it
     resolves to the same face as --ff, and nothing on this site sets a serif */
  --ff-display:var(--ff);

  --w-regular:400;
  --w-medium:500;
  --w-mid:550;
  --w-semibold:600;
  --w-bold:650;
}

/* per-product accent scope: set once on a wrapper, read by everything inside */
[data-p="kg"]            {--acc:var(--p-kg);     --acc-deep:var(--p-kg-deep);     --acc-soft:var(--p-kg-soft)}
[data-p="ict"]           {--acc:var(--p-ict);    --acc-deep:var(--p-ict-deep);    --acc-soft:var(--p-ict-soft)}
[data-p="social-science"]{--acc:var(--p-ss);     --acc-deep:var(--p-ss-deep);     --acc-soft:var(--p-ss-soft)}
[data-p="apex"]          {--acc:var(--p-apex);   --acc-deep:var(--p-apex-deep);   --acc-soft:var(--p-apex-soft)}
[data-p="ascend"]        {--acc:var(--p-ascend); --acc-deep:var(--p-ascend-deep); --acc-soft:var(--p-ascend-soft)}

/* ---------- reset ------------------------------------------------------- */
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* overflow-x:clip rather than hidden — a wide table inside its own
   overflow-x:auto scroller still propagated layout overflow to <html> with
   `hidden`, which let the whole page slide sideways at ~768px. `clip` contains
   it without making html/body a scroll container, so the sticky header keeps
   working. */
html{overflow-x:clip}
body{margin:0;font-family:var(--ff);font-size:15px;line-height:1.55;color:var(--ink);
  background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0;color:var(--ink-2)}
table{border-collapse:collapse;width:100%}

/* heading scale copied from APEX styles.css lines 98-104 */
h1,h2,h3,h4,h5{margin:0;font-weight:var(--w-bold);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,.h4{font-size:15px;letter-spacing:-.015em;line-height:1.3}
h5,.h5{font-size:14px}
.mono{font-family:var(--ff-mono);font-size:.9em}
strong,b{font-weight:650;color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-size:14px;font-weight:600}
.skip:focus{left:0}

:focus-visible{outline:2.5px solid var(--s-blue);outline-offset:2px;border-radius:4px}

/* ---------- layout ------------------------------------------------------ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 34px}
.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}
/* every page carries exactly one h1; outside the hero it takes h2's scale so
   the visual hierarchy is unchanged by the semantic fix */
.sect-head h1,.split h1{font-size:clamp(23px,2.4vw,29px);letter-spacing:-.028em;line-height:1.2}
.sect-head p{margin-top:11px;font-size:15.5px}
.sect-head.mid{margin-left:auto;margin-right:auto;text-align:center}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:18px}
.eyebrow:before{content:"";width:22px;height:2px;border-radius:2px;background:var(--brand-line)}
.eyebrow.plain:before{display:none}
.lede{font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}

.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))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.split.wide-l{grid-template-columns:1.25fr .75fr}
.split.rev>*:first-child{order:2}
.split.rev>*:last-child{order:1}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- cards ------------------------------------------------------- */
.card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow-sm);overflow:hidden}
.card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--acc,var(--brand));opacity:0}
.card.ruled:before{opacity:1}
.card.flat{background:var(--bg-soft-2);box-shadow:none}
.card h3,.card h4,.card .h4{margin-bottom:7px}
.card p{font-size:13.5px;line-height:1.55}
a.card{display:block;transition:box-shadow .16s,transform .16s,border-color .16s}
a.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--line-2)}

.ico{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--acc-soft,var(--soft-brand));margin-bottom:13px;flex:none}
.ico svg{width:19px;height:19px;stroke:var(--acc-deep,var(--brand));fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- chips ------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:550;
  padding:4px 10px;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-2);
  background:var(--white);white-space:nowrap}
.chip.acc{background:var(--acc-soft,var(--soft-brand));border-color:transparent;
  color:var(--acc-deep,var(--brand));font-weight:600}
.chip.gray{background:var(--bg-soft);color:var(--ink-2)}
.chip.dot:before{content:"";width:7px;height:7px;border-radius:99px;background:var(--acc,var(--brand));flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- buttons ----------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  padding:0 22px;border-radius:11px;border:1px solid transparent;font-size:14.5px;font-weight:var(--w-semibold);
  cursor:pointer;transition:box-shadow .16s,transform .16s,background .16s,color .16s;text-align:center}
.btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translateY(-1px)}
.btn-pri{background:var(--brand);color:#fff}
.btn-pri:hover{background:var(--brand-hover);box-shadow:0 8px 22px rgba(53,28,150,.26)}
.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);border-color:var(--ink-3)}
.btn-acc{position:relative;background:var(--white);color:var(--ink);border-color:var(--line-2);
  padding-left:26px;box-shadow:var(--shadow-sm)}
.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-quiet{background:transparent;color:var(--ink-2);border-color:var(--line);padding:0 18px}
.btn-quiet:hover{color:var(--ink);background:var(--bg-soft)}
.btn-onDark{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}
.btn-onDark:hover{background:rgba(255,255,255,.24)}
.btn-light{background:#fff;color:var(--s-indigo-deep)}
.btn-light:hover{box-shadow:0 8px 22px rgba(0,0,0,.22)}
.btn.sm{min-height:36px;padding:0 14px;font-size:13px;border-radius:9px;font-weight:550}
.btn.sm.btn-acc{padding-left:18px}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
.btns{display:flex;flex-wrap:wrap;gap:11px}

.tlink{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--brand)}
.tlink svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.tlink:hover svg{transform:translateX(3px)}
.tlink.ext:hover svg{transform:translate(2px,-2px)}

/* ---------- header ------------------------------------------------------ */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.6) 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:8px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-left:14px}
.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:var(--w-mid);color:var(--ink-2);background:none;border:0;cursor:pointer;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 .car{width:9px;height:9px;opacity:.55;transition:transform .16s;stroke:currentColor;
  fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nav>li.open .car{transform:rotate(180deg)}
.drop{display:none;position:absolute;top:calc(100% + 7px);left:0;min-width:300px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:8px;z-index:70}
/* Invisible bridge so the cursor can cross the 7px visual gap without closing the menu */
.drop:before{content:"";position:absolute;left:0;right:0;top:-7px;height:7px}
.nav>li.open .drop{display:block}
.drop a{display:flex;gap:11px;align-items:flex-start;padding:9px 11px;border-radius:var(--r-sm)}
.drop a:hover{background:var(--bg-soft)}
.drop .dt{font-size:13.5px;font-weight:600;color:var(--ink);display:block}
.drop .dd{font-size:12px;color:var(--ink-3);display:block;margin-top:1px;line-height:1.4}
.drop .dbar{width:3px;border-radius:3px;background:var(--acc,var(--brand));flex:none;align-self:stretch}
.hdr-cta{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.hdr-line{height:2.5px;background:var(--brand-line);opacity:.9}

.burger{display:none;width:40px;height:40px;border:1px solid var(--line-2);background:var(--white);
  border-radius:var(--r-sm);cursor:pointer;position:relative}
.burger span,.burger span:before,.burger span:after{position:absolute;left:11px;width:16px;height:2px;
  background:var(--ink);border-radius:2px;transition:.18s}
.burger span{top:19px}
.burger span:before{content:"";top:-5px;left:0}
.burger span:after{content:"";top:5px;left:0}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span:before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:after{top:0;transform:rotate(-45deg)}

.mobnav{display:none;border-top:1px solid var(--line);background:var(--white);
  max-height:calc(100vh - var(--header-h));overflow-y:auto;padding:12px 20px 22px}
.mobnav.open{display:block}
.mobnav h3{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  margin:16px 0 6px;font-weight:650}
.mobnav a{display:block;padding:9px 0;font-size:15px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.mobnav a:hover{color:var(--ink)}
.mobnav .mob-cta{margin-top:18px;display:grid;gap:9px}

/* ---------- hero -------------------------------------------------------- */
.hero{position:relative;background:var(--white);overflow:hidden;padding:66px 0 0}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 88% -8%, rgba(7,157,252,.12), transparent 62%),
    radial-gradient(620px 380px at 4% 4%, rgba(255,205,53,.16), transparent 60%),
    radial-gradient(700px 460px at 62% 96%, rgba(53,28,150,.07), transparent 64%)}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center;
  padding-bottom:64px}
/* no hard character cap — Inter sets shorter than the old serif, so the line
   breaks are left to the column width and re-flow correctly at every width */
.hero h1{max-width:19ch}
/* APEX: .hero p.lead {margin:20px 0 0; max-width:58ch} at the shared 16.5px */
.hero .lede{margin-top:20px;max-width:58ch}
.hero .btns{margin-top:28px}
.hero-meta{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 26px}
.hero-meta div{display:flex;flex-direction:column}
.hero-meta b{font-size:20px;font-weight:var(--w-bold);color:var(--ink);line-height:1.15;letter-spacing:-.02em}
.hero-meta span{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em;margin-top:2px}

/* the portfolio composition: four published covers + one platform crop.
   The container owns the geometry — three equal columns, two equal rows — and
   every tile fills its cell while its image is contained at its own native
   ratio inside. Nothing is stretched, and no image sets the grid's size. */
.compo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;aspect-ratio:3/2.28}
.compo-t{margin:0;position:relative;min-width:0;min-height:0;
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--white);box-shadow:var(--shadow-lg)}
.compo-t .media{position:absolute;inset:0;aspect-ratio:auto;background:transparent;--pad:15px}
.compo-t figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 12px 9px;
  font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(16,12,40,.86));z-index:2}
/* row 2: the APEX cover, then the Ascend crop across the remaining two cells */
.compo-t:nth-child(4){grid-column:1;grid-row:2}
.compo-t:nth-child(5){grid-column:2/4;grid-row:2}
/* keep the caption scrim clear of the foot of a contained cover */
.compo-t--cover .media{--pad:15px 15px 28px}
.compo-t--ui .media{--pad:14px 14px 26px}

/* ---------- product cards (home + products) ----------------------------- */
.pcard{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .18s,transform .18s}
.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
/* the card figure is a .media frame; only the card chrome lives here */
.pcard-fig{border-bottom:1px solid var(--line)}
.pcard-fig img{transition:transform .4s ease}
.pcard:hover .pcard-fig img{transform:scale(1.02)}
.pcard-body{padding:20px 21px 22px;display:flex;flex-direction:column;flex:1}
.pcard .cat{font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc-deep);margin-bottom:8px}
.pcard h3{font-size:18.5px;font-weight:var(--w-bold);letter-spacing:-.022em;margin-bottom:8px}
.pcard p{font-size:13.5px;line-height:1.55;margin-bottom:14px}
.pcard .pcard-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.pcard .pcard-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:9px;align-items:center}

/* ---------- portfolio map ----------------------------------------------- */
.pmap{display:grid;gap:16px}
.pstage{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);padding:22px 24px;box-shadow:var(--shadow-sm)}
.pstage-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:6px}
.pstage-head h3{font-size:17.5px;font-weight:var(--w-bold);letter-spacing:-.02em}
.pstage-head .rng{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3)}
.pstage>p{font-size:14px;max-width:82ch}
.pstage-items{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pstage-item{display:flex;align-items:center;gap:10px;padding:9px 15px 9px 12px;
  border:1px solid var(--line);border-radius:99px;background:var(--bg-soft-2);
  font-size:13.5px;font-weight:600;color:var(--ink);transition:.16s}
.pstage-item:hover{background:var(--white);box-shadow:var(--shadow);border-color:var(--line-2)}
.pstage-item:before{content:"";width:9px;height:9px;border-radius:99px;background:var(--acc);flex:none}
.pmap-arrow{display:grid;place-items:center;height:26px}
.pmap-arrow svg{width:18px;height:18px;stroke:var(--line-2);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- two sides --------------------------------------------------- */
.sides{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:stretch}
.side{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:var(--white);
  box-shadow:var(--shadow-sm)}
.side .q{font-size:17.5px;font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.02em;
  margin-bottom:9px}
.side h3{font-size:11.5px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);margin-bottom:13px}
.side p{font-size:14px}
.side-items{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sides-mid{display:grid;place-items:center;width:46px}
.sides-mid span{writing-mode:vertical-rl;font-size:11px;font-weight:650;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);padding:12px 0}
.sides-mid:before,.sides-mid:after{content:"";width:1px;flex:1;background:var(--line);min-height:20px}

/* ---------- capability matrix ------------------------------------------- */
/* position:relative makes each scroller its own containing block; without it
   the wide table leaked layout overflow past html/body and let the page slide
   sideways at ~768px. */
.mtx-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.mtx{min-width:760px;font-size:13.5px}
.mtx th,.mtx td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line)}
.mtx thead th{font-size:11.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);background:var(--bg-soft);position:sticky;top:0}
.mtx thead th:first-child{text-align:left}
.mtx th[scope="col"]:not(:first-child),.mtx td:not(:first-child){text-align:center;width:12%}
.mtx tbody th{font-weight:600;color:var(--ink);font-size:13.5px}
.mtx tbody tr:last-child th,.mtx tbody tr:last-child td{border-bottom:0}
.mtx tbody tr:hover td,.mtx tbody tr:hover th{background:var(--bg-soft-2)}
.mk{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:99px;
  font-size:11px;font-weight:700}
/* the mark fills use each product's *deep* tone, not its bright accent: a white
   glyph on the bright cyan/orange/teal measures 2.05-3.80:1, on the deep tones
   it is 5.2-8.2:1. Same product identity, legible at 24px. */
.mk.full{background:var(--acc-deep);color:#fff}
.mk.partial{background:var(--acc-soft);color:var(--acc-deep);border:1.5px solid var(--acc-deep);font-size:15px;line-height:1}
.mk.none{color:var(--line-2)}
.mtx-note{font-size:12px;color:var(--ink-3);margin-top:4px;display:block;font-weight:400}
.legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font-size:12.5px;color:var(--ink-3)}
.legend span{display:inline-flex;align-items:center;gap:7px}

/* ---------- selector ---------------------------------------------------- */
.sel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  box-shadow:var(--shadow);overflow:hidden}
.sel-q{padding:24px 26px 0}
.sel-opts{display:grid;gap:10px;padding:18px 26px 26px}
.sel-opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 17px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-soft-2);cursor:pointer;
  font-size:14.5px;font-weight:600;color:var(--ink);transition:.16s}
.sel-opt:hover{background:var(--white);border-color:var(--line-2);box-shadow:var(--shadow)}
.sel-opt[aria-pressed="true"]{background:var(--white);border-color:var(--acc,var(--brand));
  box-shadow:0 0 0 3px var(--acc-soft,var(--soft-brand))}
.sel-opt .dot{width:11px;height:11px;border-radius:99px;background:var(--acc,var(--line-2));flex:none}
.sel-out{border-top:1px solid var(--line);background:var(--bg-soft);padding:26px}
.sel-out h3{font-size:19px;font-weight:var(--w-bold);letter-spacing:-.022em;margin-bottom:8px}
.sel-out p{font-size:14.5px;max-width:74ch}
.sel-out .btns{margin-top:18px}

/* ---------- CTA band ---------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:var(--s-indigo-deep);color:#fff}
.cta:before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(680px 400px at 84% 12%, rgba(7,157,252,.30), transparent 64%),
    radial-gradient(560px 340px at 10% 92%, rgba(255,100,27,.24), transparent 62%)}
.cta .wrap{position:relative;padding-top:62px;padding-bottom:62px}
.cta h2{color:#fff;max-width:20ch}
.cta p{color:rgba(255,255,255,.8);margin-top:12px;max-width:62ch;font-size:15.5px}
.cta .eyebrow{color:rgba(255,255,255,.72)}
.cta .btns{margin-top:26px}
.cta-line{height:2.5px;background:var(--brand-line)}

/* ---------- gallery / band ---------------------------------------------- */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shot{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--white);box-shadow:var(--shadow-sm);cursor:zoom-in;
  transition:box-shadow .16s,transform .16s;padding:0;text-align:left;width:100%;display:block}
.shot:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
/* the gallery figure is a .media frame; the class only needs to be a block */
.shot-fig{display:block}
.shot figcaption,.shot .cap{padding:12px 14px 14px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.shot .cap b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc-deep,var(--brand));margin-bottom:4px;font-weight:650}

/* ---------- product page ------------------------------------------------ */
.phero{position:relative;overflow:hidden;background:var(--bg-soft-2);
  border-bottom:1px solid var(--line);padding:52px 0 56px}
.phero:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--acc)}
.phero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center}
.phero .plogo{height:34px;width:auto;margin-bottom:18px}
.phero h1{font-size:clamp(28px,3.4vw,42px);max-width:17ch}
.phero .lede{margin-top:16px;max-width:56ch}
/* the product-page figure is a .media frame; only the chrome lives here */
.phero-fig{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-lg)}

/* the Scholario mark panel on /about */
.brand-panel{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--soft-brand), transparent 70%), var(--bg-soft);
  aspect-ratio:1/1;display:grid;place-items:center;padding:12%}
.brand-panel img{width:min(320px,78%);height:auto}
.pcat{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:650;
  letter-spacing:.13em;text-transform:uppercase;color:var(--acc-deep);margin-bottom:12px}
.pcat:before{content:"";width:22px;height:2px;border-radius:2px;background:var(--acc)}

.qa{display:grid;gap:18px}
.qa-item{border-left:3px solid var(--acc);padding-left:20px}
.qa-item h3{font-size:17.5px;font-weight:var(--w-bold);letter-spacing:-.02em;margin-bottom:6px}
.qa-item p{font-size:14.5px;max-width:80ch}

.flist{display:grid;gap:11px}
.flist li{display:flex;gap:11px;align-items:flex-start;font-size:14px}
.flist svg{width:17px;height:17px;flex:none;margin-top:3px;stroke:var(--acc-deep);fill:none;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:var(--white)}
.stat b{display:block;font-size:25px;font-weight:var(--w-bold);color:var(--ink);
  line-height:1.05;letter-spacing:-.03em}
.stat span{display:block;font-size:12px;color:var(--ink-3);margin-top:5px}

/* the external-website call-out at the foot of each product page */
.visit{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--white);box-shadow:var(--shadow);padding:28px 30px;
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.visit:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc)}
.visit h3{font-size:18px;font-weight:var(--w-bold);letter-spacing:-.022em;margin-bottom:5px}
.visit p{font-size:13.5px;max-width:62ch}
.visit .btns{flex:none}
.pending{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--ink-3);background:var(--bg-soft);border:1px dashed var(--line-2);
  padding:9px 15px;border-radius:99px}
.pending svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- comparison table -------------------------------------------- */
.cmp-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.cmp{min-width:940px;font-size:13.5px}
.cmp th,.cmp td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
.cmp thead th{background:var(--bg-soft);border-bottom:1px solid var(--line-2)}
.cmp thead th:first-child{width:170px}
.cmp thead .ch{display:flex;flex-direction:column;gap:6px}
.cmp thead .ch b{font-size:15px;font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.018em}
.cmp thead .ch i{font-style:normal;font-size:11px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acc-deep)}
.cmp thead th:not(:first-child){border-top:3px solid var(--acc)}
.cmp tbody th{font-weight:600;color:var(--ink);background:var(--bg-soft-2);font-size:13px}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp .muted{color:var(--ink-3)}

/* ---------- regions table ----------------------------------------------- */
.reg-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.reg{min-width:820px;font-size:13.5px}
.reg th,.reg td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
.reg thead th{font-size:11.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);background:var(--bg-soft)}
.reg tbody th{font-weight:600;color:var(--ink)}
.reg tbody th .dot{display:inline-block;width:9px;height:9px;border-radius:99px;
  background:var(--acc);margin-right:9px}
.reg tbody tr:last-child th,.reg tbody tr:last-child td{border-bottom:0}
.reg .dash{color:var(--line-2)}

/* ---------- forms ------------------------------------------------------- */
.form{display:grid;gap:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
.field .req{color:var(--s-orange)}
.field input,.field select,.field textarea{font:inherit;font-size:14.5px;padding:11px 13px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--white);color:var(--ink);
  width:100%}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--soft-brand)}
.field .hint{font-size:12px;color:var(--ink-3)}
.field .err{font-size:12.5px;color:#B42318;font-weight:600}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#B42318}
.formnote{font-size:13px;color:var(--ink-3);background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:14px 16px}
.formok{border:1px solid var(--line);border-left:3px solid var(--brand);background:var(--bg-soft-2);
  border-radius:var(--r);padding:20px 22px}
.formok h3{font-size:17.5px;font-weight:var(--w-bold);letter-spacing:-.02em;margin-bottom:7px}

/* ---------- footer ------------------------------------------------------ */
.ftr{border-top:1px solid var(--line);background:var(--bg-soft-2)}
.ftr .wrap{padding-top:44px;padding-bottom:28px}
.ftr h2{font-family:var(--ff);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.7fr 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)}
.fbrand img{height:46px;width:auto;margin-bottom:14px}
.fbrand p{font-size:13.5px;max-width:42ch}
.fbrand .fpub{margin-top:12px;font-size:12.5px;color:var(--ink-3)}
.ftr-sites{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.ftr-sites .row{display:flex;flex-wrap:wrap;gap:10px}
.ftr-sites a,.ftr-sites .off{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  padding:8px 14px;border:1px solid var(--line);border-radius:99px;background:var(--white)}
.ftr-sites a:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.ftr-sites .off{color:var(--ink-3);border-style:dashed;background:transparent}
.ftr-sites svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.ftr-base{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between;align-items:baseline}
.ftr-base p{font-size:12.5px;color:var(--ink-3)}
.ftr-base .fnote{max-width:64ch}

/* ---------- lightbox ---------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:120;background:rgba(14,11,30,.9);display:grid;place-items:center;
  padding:40px 24px}
/* a display value on the element would otherwise beat the hidden attribute */
[hidden]{display:none!important}
.lb-fig{margin:0;max-width:min(1200px,94vw);max-height:90vh;display:flex;flex-direction:column;gap:12px}
.lb-fig img{max-width:100%;max-height:calc(90vh - 52px);object-fit:contain;border-radius:var(--r);
  background:#fff}
.lb-fig figcaption{color:rgba(255,255,255,.86);font-size:13.5px;text-align:center}
.lb-x{position:absolute;top:18px;right:22px;width:42px;height:42px;border-radius:99px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;font-size:24px;
  line-height:1;cursor:pointer}
.lb-x:hover{background:rgba(255,255,255,.2)}
body.lb-open{overflow:hidden}

/* ---------- breadcrumb + misc ------------------------------------------- */
.crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12.5px;color:var(--ink-3);
  padding:14px 0 0}
.crumb a:hover{color:var(--ink)}
.crumb span{opacity:.5}
.note{font-size:13px;color:var(--ink-3);background:var(--bg-soft);border-left:3px solid var(--line-2);
  padding:13px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0}
.hide-md{display:inline-flex}
.only-mob{display:none}

/* ---------- responsive -------------------------------------------------- */
@media (max-width:1200px){
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{grid-template-columns:repeat(2,1fr)}
  .ftr-cols{grid-template-columns:1.4fr repeat(2,minmax(0,1fr));row-gap:30px}
}
@media (max-width:1024px){
  .nav{display:none}
  .burger{display:block}
  .hide-md{display:none}
  .hero-grid,.split,.phero-grid{grid-template-columns:1fr;gap:38px}
  /* stacked: a figure that spans the full column would draw a book cover ~660px
     tall — larger than the source supports and out of proportion on a tablet */
  .phero-fig{max-width:520px;margin-inline:auto;width:100%}
  /* stacked: always read text before image, whatever the desktop order was */
  .split.rev>*:first-child,.split.rev>*:last-child{order:0}
  .hero{padding-top:46px}
  .hero-grid{padding-bottom:48px}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sides{grid-template-columns:1fr;gap:16px}
  .sides-mid{width:auto;height:44px;flex-direction:row}
  .sides-mid span{writing-mode:horizontal-tb;padding:0 14px}
  .sides-mid:before,.sides-mid:after{width:auto;height:1px;flex:1;min-height:0}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .wrap,.hdr-in{padding:0 20px}
  .sect{padding:54px 0}
  .sect.tight{padding:40px 0}
  .g2,.g3,.g4,.g5,.band{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .hero .lede{font-size:16px}
  .hero-meta{gap:14px 20px}
  /* two covers per row, the platform crop full width beneath them */
  .compo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compo-t:nth-child(4){grid-column:2;grid-row:2}
  .compo-t:nth-child(5){grid-column:1/3;grid-row:3}
  .visit{flex-direction:column;align-items:flex-start}
  .ftr-cols{grid-template-columns:1fr;gap:26px}
  .ftr-base{flex-direction:column}
  .only-mob{display:block}
  .stats{grid-template-columns:1fr 1fr}
  .cta .wrap{padding-top:48px;padding-bottom:48px}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr}
  .btn{width:100%}
  .btns{flex-direction:column;align-items:stretch}
  .hero .btns .btn,.cta .btns .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
  .btn:hover,.pcard:hover,a.card:hover,.shot:hover{transform:none}
  .pcard:hover .pcard-fig img{transform:none}
}

@media print{
  .hdr,.ftr,.cta,.burger,.mobnav{display:none}
  body{color:#000}
}

/* a block heading used inside split columns and panels — APEX h3 metrics */
.blk-h{font-size:17.5px;font-weight:var(--w-bold);letter-spacing:-.02em;margin-bottom:14px}

/* ==========================================================================
   MEDIA SYSTEM
   One vocabulary for every image on the site, keyed to what the image IS.
   Nothing is ever stretched: each class pairs a frame with the right
   object-fit, so a portrait cover is never squashed into a landscape card and
   a landscape screen is never cropped to a portrait slot.
     --cover  published book cover  -> contained, shown as a book on a soft ground
     --ui     platform screenshot   -> contained, nothing cropped away
     --page   book interior page    -> cover-cropped from the top (the opening reads)
     --wide   landscape photo/frame -> cover-cropped from the centre

   Every image is absolutely positioned inside its frame rather than sized with
   percentages. A percentage height does not resolve against a frame whose own
   height comes from a stretched grid item, which silently let contained covers
   compute a box taller than their tile. inset always resolves.
   ========================================================================== */
.media{position:relative;overflow:hidden;background:var(--bg-soft);display:block;
  --pad:16px;padding:var(--pad);box-sizing:border-box}
/* The frame carries the padding and the image fills its content box, so both
   axes are definite. Two things this deliberately avoids:
     - absolute positioning with insets: an img is a REPLACED element, so
       width:auto resolves to its intrinsic width and the insets are ignored;
     - aspect-ratio from the width/height attributes: neutralised, or it would
       size the box instead of the frame doing it.
   The artwork's own proportions are then preserved by object-fit alone. */
.media img{width:100%;height:100%;max-width:100%;aspect-ratio:auto;display:block}

/* book covers: contained, never cropped, on a soft accent-tinted ground.
   drop-shadow follows the painted artwork, so the shadow hugs the cover and
   not the letterboxed element box. */
.media--cover{aspect-ratio:4/3;--pad:20px;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--acc-soft,var(--soft-brand)), transparent 70%),
    var(--bg-soft)}
.media--cover img{object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(20,26,38,.24)) drop-shadow(0 2px 4px rgba(20,26,38,.12))}

/* platform UI: contained so no control, axis or figure is cropped off */
.media--ui{aspect-ratio:4/3;--pad:14px;background:var(--bg-soft)}
.media--ui img{object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(20,26,38,.16)) drop-shadow(0 1px 3px rgba(20,26,38,.10))}

/* book interior pages: portrait frame, cropped from the top so the page opens */
.media--page{aspect-ratio:3/4;--pad:0}
.media--page img{object-fit:cover;object-position:top center}

/* landscape frames (video stills, wide activity screens) */
.media--wide{aspect-ratio:16/10;--pad:0}
.media--wide img{object-fit:cover;object-position:center}

/* the accent hairline every media frame carries, matching the card system */
.media--rule:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--acc,var(--brand));z-index:1}

/* a block heading used inside split columns and panels — APEX h3 metrics */
.blk-h{font-size:17.5px;font-weight:var(--w-bold);letter-spacing:-.02em;margin-bottom:14px}