/* =====================================================================================================
   assets/pg-academy.css · THE one Academy theme (reset Round 2, lane foundation, 3 Nov 2026).
   Every Academy page: /academy (catalogue), the course pages (with live workshops, On-Demand, free), the hubs (career tracks,
   training catalog, frameworks, skills coaching). Light mode: individuals buy (brief 2.2, 6b-D5). It replaces every
   reliance on assets/academy-dark.css (retired: a fixed full-page gradient, PB B3).
   Opt in:  <link rel="stylesheet" href="{{root}}assets/kit.css" />  then  <link rel="stylesheet" href="{{root}}assets/pg-academy.css" />
            <main id="main" class="ac" data-mode="light" data-m="kit">      (training catalog, corporate: data-mode="dark")
   API and exact markup: .research/reset/r2/foundation.md. Built ON the kit (kit.css/kit.js), the product UI
   (product-ui.css, device.css), the IP pieces (ip.css, assets/ip/**) and the certificates (assets/certificates/*.webp).
   Rules kept: tokens only (brand-tokens.css); magenta = the one .k-btn--decision + one insight per screen; one duo per
   surface; cards without borders; UI-tier motion with reduced-motion end states; nothing fixed at a bottom corner.
   Sections: 0 base · 1 badges · 2 catalogue (ClickUp templates) · 3 directory tiles (ClickUp features index) ·
   4 course page skeleton (ClickUp feature page) · 5 learning kit · 6 the credential · 7 ways to join · 8 RTL/print ·
   9 ds-shared (identical block in pg-os.css)
   ===================================================================================================== */

/* ---------- 0. page base (Academy pages link no legacy stylesheet; academy-dark.css, rivet.css and visuals.css go) ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body:has(> main.ac), body:has(main.ac){ margin:0; background:var(--white); color:var(--black); font:400 16px/1.6 var(--font-sans); -webkit-font-smoothing:antialiased; overflow-x:clip; }
body:has(main.ac[data-mode="dark"]){ background:var(--black); color:var(--white); }
main.ac{ display:block; overflow-x:clip; background:var(--ground); color:var(--ink);
  --ac-media:var(--ground-alt);                                  /* the sunk well behind course media */
  --ac-flag-bg:var(--gold-50);  --ac-flag-ink:var(--gold-700);  --ac-flag-dot:var(--gold);
  --ac-mast-bg:var(--purple-50); --ac-mast-ink:var(--purple);   --ac-mast-dot:var(--purple);
  --ac-free-bg:var(--green-50); --ac-free-ink:var(--green-700); --ac-free-dot:var(--green-500);
}
main.ac[data-mode="dark"], main.ac [data-mode="dark"]{
  --ac-media:var(--elev-1);
  --ac-flag-bg:var(--gold-950); --ac-flag-ink:var(--gold);      --ac-flag-dot:var(--gold);
  --ac-mast-bg:var(--purple-950); --ac-mast-ink:var(--purple-500); --ac-mast-dot:var(--purple-500);
  --ac-free-bg:var(--green-950); --ac-free-ink:var(--green);    --ac-free-dot:var(--green);
}
:where(main.ac) *, :where(main.ac) *::before, :where(main.ac) *::after{ box-sizing:border-box; }
:where(main.ac) :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote){ margin:0; }
:where(main.ac) :where(ul,ol){ padding:0; }
:where(main.ac) :where(a:not([class])){ color:inherit; }
:where(main.ac) :where(p a:not([class])){ color:var(--link-ink); text-underline-offset:3px; }
:where(main.ac) :where(button){ font:inherit; }
main.ac .k-head .t-section{ max-width:22ch; }
main.ac .k-head--wide .t-section{ max-width:28ch; }
.ac-meta{ font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.ac-ico{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- 1. badges: what kind of course it is, in words (colour is never the only signal) ---------- */
.ac-badge{ display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 10px 0 8px; border-radius:var(--ds-pill, 999px); white-space:nowrap;
  font:500 11px/1 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; background:var(--ground-alt); color:var(--ink-muted); }
.ac-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.ac-badge--flagship{ background:var(--ac-flag-bg); color:var(--ac-flag-ink); } .ac-badge--flagship::before{ background:var(--ac-flag-dot); box-shadow:0 0 0 1px var(--ac-flag-ink); }
.ac-badge--mastery{ background:var(--ac-mast-bg); color:var(--ac-mast-ink); }  .ac-badge--mastery::before{ background:var(--ac-mast-dot); }
.ac-badge--free{ background:var(--ac-free-bg); color:var(--ac-free-ink); }     .ac-badge--free::before{ background:var(--ac-free-dot); box-shadow:0 0 0 1px var(--ac-free-ink); }
.ac-badge--soon{ background:transparent; color:var(--ink-muted); box-shadow:inset 0 0 0 1px var(--hairline); }
.ac-badge--soon::before{ background:transparent; box-shadow:inset 0 0 0 1.5px currentColor; }
.ac-badge--plan{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--hairline); padding-inline:10px; }
.ac-badge--plan::before{ display:none; }
.ac-badges{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* ---------- 2. catalogue (/academy = clickup.com/templates): router, filter row, groups, rich preview cards ---------- */
/* 2a. hero: an Academy H1 of its own + the three ways in (ClickUp University IA) */
.ac-browse{ padding-block:clamp(32px, 4.4vw, 64px) clamp(32px, 4vw, 56px); }
.ac-browse__head{ display:grid; gap:18px; max-width:52rem; }
.ac-browse__head .t-hero{ max-width:17ch; }
.ac-router{ display:grid; gap:16px; margin-block-start:clamp(28px, 4vw, 48px); }
@media (min-width:900px){ .ac-router{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; } }
.ac-route{ display:grid; gap:14px; align-content:start; padding:clamp(18px, 2vw, 24px); border-radius:var(--radius-card); background:var(--card-surface); box-shadow:var(--card-lift); }
.ac-route__k{ display:flex; align-items:center; gap:10px; }
.ac-route__t{ font:600 18px/1.3 var(--font-sans); letter-spacing:-0.01em; }
.ac-route__list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
/* chip: a filter button (aria-pressed) or a link; 44px targets */
.ac-chip{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:0; border-radius:var(--ds-pill, 999px); cursor:pointer; text-decoration:none;
  background:var(--ground-alt); color:var(--ink); font:500 15px/1 var(--font-sans); box-shadow:inset 0 0 0 1px var(--hairline-soft);
  transition:background var(--dur-instant) var(--ease-standard), color var(--dur-instant) var(--ease-standard), box-shadow var(--dur-instant) var(--ease-standard); }
.ac-chip:hover{ box-shadow:inset 0 0 0 1px var(--ink-muted); }
.ac-chip[aria-pressed="true"], .ac-chip[aria-current]{ background:var(--ink); color:var(--ground); box-shadow:none; }
.ac-chip__n{ font:500 12px/1 var(--font-mono); font-variant-numeric:tabular-nums; opacity:.7; }
.ac-chip .ds-loc{ --ds-loc-w:34px; }
/* 2b. the sticky filter row (glass bar under the header, K14 ON list: a sticky subnav) */
.ac-filter{ position:sticky; top:var(--header-h); z-index:20; margin-block:0 clamp(24px, 3vw, 40px); }
.ac-filter__in{ display:flex; flex-wrap:wrap; align-items:center; gap:0 12px; min-height:68px; }
/* two chip rows (by move, by format; ruling 3 Nov 2026): side by side when the wrap has room, the format row drops to its own line when not */
.ac-filter__chips[data-ac-filter="kind"]{ flex:0 1 auto; }
.ac-filter__chips[data-ac-filter="kind"]::before{ content:""; flex:none; width:1px; align-self:stretch; background:var(--hairline); margin-inline-end:4px; }
@media (max-width:1023px){ .ac-filter__chips{ padding-block:8px; } .ac-filter__chips[data-ac-filter="kind"]::before{ display:none; } .ac-group{ scroll-margin-top:calc(var(--header-h) + 128px); } }
.ac-filter__chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-block:12px; flex:1 1 auto; scroll-padding-inline:16px; }
.ac-filter__chips::-webkit-scrollbar{ display:none; }
.ac-filter__chips .ac-chip{ flex:none; min-height:40px; font-size:14px; }
.ac-filter__n{ flex:none; font:500 12px/1.3 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); white-space:nowrap; }
.ac-filter__n b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
@media (max-width:767px){ .ac-filter__n{ display:none; } }
/* 2c. groups and the grid */
.ac-group{ display:grid; gap:clamp(20px, 2.4vw, 32px); scroll-margin-top:calc(var(--header-h) + 84px); }
.ac-group + .ac-group{ margin-block-start:clamp(56px, 7vw, 96px); }
.ac-group[hidden]{ display:none; }
/* one list, several grids (ruling 3 Nov 2026): a grid whose every card the filter hid leaves no gap */
.ac-group .ac-grid:not(:has(.ac-ccard:not([hidden]))){ display:none; }
.ac-group__head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px 32px; }
.ac-group__head .k-head{ max-width:44rem; margin:0; }
.ac-group__head .t-section{ font-size:var(--role-row, 28px); }
.ac-grid{ display:grid; gap:clamp(16px, 2vw, 24px); grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); list-style:none; margin:0; padding:0; }
.ac-grid--feature{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.ac-empty{ padding:40px; border-radius:var(--radius-card); background:var(--ground-alt); text-align:center; color:var(--ink-muted); }
.ac-empty[hidden]{ display:none; }
/* 2d. the rich preview card (a ClickUp template card): media well with the course player crop, the locator chip and the
   badge; body with kicker, title, outcome, meta; a peek of the first lessons slides over the media on hover or focus */
.ac-ccard{ position:relative; display:grid; grid-template-rows:auto 1fr; height:100%; border-radius:var(--radius-card); overflow:hidden; color:var(--ink); text-decoration:none;
  background:var(--card-surface); box-shadow:var(--card-lift); transition:box-shadow var(--dur-quick) var(--ease-standard), translate var(--dur-quick) var(--ease-standard); }
.ac-ccard[hidden]{ display:none; }
a.ac-ccard:hover, .ac-ccard:focus-within{ box-shadow:var(--card-lift-hover); translate:0 -2px; }
:not(:root)[data-mode="dark"] .ac-ccard{ box-shadow:inset 0 0 0 1px var(--elev-4); }
.ac-ccard__media{ position:relative; aspect-ratio:16 / 10; overflow:hidden; background-color:var(--ac-media); --ip-primary:var(--ds-ip); --ip-insight:var(--ds-ip); }
.ac-ccard__media::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 -1px 0 var(--hairline-soft); pointer-events:none; }
.ac-ccard__shot{ position:absolute; inset:14px 14px auto 14px; width:calc(100% - 28px); height:auto; border-radius:8px 8px 0 0; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 18px 40px -24px rgba(0,0,0,.45);
  transition:translate var(--dur-base) var(--ease-standard), scale var(--dur-base) var(--ease-standard); transform-origin:50% 0; }
a.ac-ccard:hover .ac-ccard__shot{ translate:0 -4px; scale:1.015; }
/* media variants: the certificate on Prestige (credential-led cards, or no player crop yet), a phone, a figure on the grid */
.ac-ccard__media--cert{ display:grid; place-items:center; background:var(--duo-prestige); }
.ac-ccard__media--cert img{ position:static; width:72%; height:auto; aspect-ratio:1600 / 1131; rotate:-2deg; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.35), 0 18px 36px -14px rgba(0,0,0,.75);
  transition:rotate var(--dur-base) var(--ease-standard); }
a.ac-ccard:hover .ac-ccard__media--cert img{ rotate:0deg; }
/* the course's lit stretch on the mark, big, on the grid: the fallback when no course-player crop exists yet; every
   career-track course lights different rooms, so a row of these cards still reads as different products */
.ac-ccard__media--loc{ display:grid; place-items:center; padding:28px 24px 44px; }
.ac-ccard__media--loc .ds-loc{ --ds-loc-w:min(100%, 300px); }
.ac-ccard__rooms{ position:absolute; z-index:2; inset-inline-start:12px; bottom:12px; font:500 11px/1.2 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink); }
.ac-ccard__media--phone{ display:grid; justify-items:center; align-items:start; padding-top:18px; }
.ac-ccard__media--phone .k-phone{ --k-phone-w:180px; }
.ac-ccard__media--fig{ display:grid; place-items:center; padding:20px; }
.ac-ccard__media--fig > :is(img, svg){ width:min(100%, 320px); height:auto; }
/* paste IP figures INLINE (assets/ip/figures/*.svg without xmlns) so their magenta maps to --ip-primary at rest; as an <img> the authored magenta shows */
.ac-ccard__badges{ position:absolute; z-index:2; inset-inline-start:12px; top:12px; display:flex; gap:6px; }
.ac-ccard__badges .ac-badge{ box-shadow:0 1px 2px rgba(0,0,0,.08); }
.ac-ccard__badges .ac-badge--soon{ background:var(--card-surface); }
.ac-ccard__loc{ position:absolute; z-index:2; inset-inline-start:12px; bottom:12px; }
.ac-ccard__body{ display:grid; grid-template-rows:auto auto 1fr auto; gap:8px; padding:18px 20px 20px; }
.ac-ccard__k{ font:500 var(--fs-meta, 12px)/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.ac-ccard__t{ font:600 var(--role-card, 22px)/1.25 var(--font-sans); letter-spacing:-0.01em; text-wrap:balance; }
.ac-ccard__p{ font:400 15px/1.5 var(--font-sans); color:var(--ink-muted); text-wrap:pretty; }
.ac-ccard__meta{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; padding-top:12px; box-shadow:inset 0 1px 0 var(--hairline-soft); font:500 13px/1.4 var(--font-sans); color:var(--ink); }
.ac-ccard__meta > *{ display:inline-flex; align-items:center; gap:6px; }
.ac-ccard__meta .ac-ico{ width:16px; height:16px; color:var(--ink-muted); }
.ac-ccard__price{ font:500 14px/1.2 var(--font-mono); font-variant-numeric:tabular-nums; }
/* the peek: the first lessons, over the media (hover/focus on pointer devices; hidden on touch, the body says enough) */
.ac-ccard__peek{ position:absolute; z-index:3; inset-inline:10px; top:10px; display:grid; gap:10px; padding:14px 16px; border-radius:10px; background:var(--glass-solid, var(--card-surface));
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 16px 32px -18px rgba(0,0,0,.45); opacity:0; translate:0 8px; pointer-events:none;
  transition:opacity var(--dur-quick) var(--ease-standard), translate var(--dur-quick) var(--ease-standard); }
.ac-ccard__peek ol{ display:grid; gap:6px; list-style:none; counter-reset:acpk; }
.ac-ccard__peek li{ counter-increment:acpk; display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px; font:500 13px/1.35 var(--font-sans); }
.ac-ccard__peek li::before{ content:counter(acpk, decimal-leading-zero); font:500 11px/1.6 var(--font-mono); color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.ac-ccard__go{ display:inline-flex; align-items:center; gap:6px; font:600 13px/1 var(--font-sans); color:var(--ink); }
@media (hover:hover) and (pointer:fine){ a.ac-ccard:is(:hover, :focus-visible) .ac-ccard__peek{ opacity:1; translate:0 0; } }
@media (hover:none){ .ac-ccard__peek{ display:none; } }
/* the wide feature card (a course with live workshops leading the list): media beside the body on desktop */
@media (min-width:1024px){
  .ac-ccard--wide{ grid-column:span 2; grid-template-rows:none; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); }
  .ac-ccard--wide .ac-ccard__media{ aspect-ratio:auto; min-height:340px; }
  .ac-ccard--wide .ac-ccard__shot{ inset:28px 0 0 28px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:cover; object-position:0 0; border-radius:8px 0 0 0; }
  [dir="rtl"] .ac-ccard--wide .ac-ccard__shot{ inset:28px 28px 0 0; border-radius:0 8px 0 0; object-position:100% 0; }
  .ac-ccard--wide .ac-ccard__body{ padding:28px; align-content:center; }
  .ac-ccard--wide .ac-ccard__t{ font-size:var(--role-row, 28px); }
}

/* ---------- 3. directory tiles (hubs = clickup.com/features index): each tile carries its registered RIVET figure ---------- */
.ac-dir{ display:grid; gap:clamp(14px, 1.6vw, 20px); grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); list-style:none; margin:0; padding:0; }
.ac-dir__h{ grid-column:1 / -1; display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-block:clamp(24px, 3vw, 40px) 0; }
.ac-dir__h:first-child{ margin-top:0; }
.ac-tile{ position:relative; display:grid; grid-template-rows:auto 1fr; height:100%; border-radius:var(--radius-card); overflow:hidden; text-decoration:none; color:var(--ink);
  background:var(--card-surface); box-shadow:var(--card-lift); transition:box-shadow var(--dur-quick) var(--ease-standard), translate var(--dur-quick) var(--ease-standard); }
a.ac-tile:hover, a.ac-tile:focus-visible{ box-shadow:var(--card-lift-hover); translate:0 -2px; }
:not(:root)[data-mode="dark"] .ac-tile{ box-shadow:inset 0 0 0 1px var(--elev-4); }
.ac-tile__fig{ position:relative; display:grid; place-items:center; aspect-ratio:4 / 3; padding:18px; background-color:var(--ac-media); --ip-primary:var(--ds-ip); --ip-insight:var(--ds-ip); }
.ac-tile__fig > :is(img, svg, picture){ width:100%; max-width:var(--ac-fig-max, 220px); max-height:100%; height:auto; object-fit:contain; display:block; }
.ac-tile__fig > svg{ width:var(--ac-fig-svg, 72px); height:var(--ac-fig-svg, 72px); }
/* a registered book figure (assets/figures/fig-*-750.webp) fills its well edge to edge, as authored */
.ac-tile__fig--full{ padding:0; } .ac-tile__fig--full > :is(img, picture){ max-width:none; width:100%; height:100%; object-fit:cover; }
a.ac-tile:is(:hover, :focus-visible) .ac-tile__fig{ --ip-insight:var(--magenta); }
/* a row that carries a book render (dark paper) puts every well on the dark ground, so one row reads as one family (ds-audit U9, review P1-3) */
.ac-dir--books .ac-tile__fig{ background-color:var(--black); --ds-ip:var(--cyan); --ac-media:var(--black); color:#fff; }
.ac-dir--books .ac-tile__fig > img:not([src*="/figures/fig-"]){ filter:invert(1) hue-rotate(180deg); }
/* a paper figure (assets/figures/A-*.svg) fills its well (review P2-2) */
.ah-tile--paper .ac-tile__fig > img{ max-width:92%; }   /* the figure's own magenta element: the insight, on the read */
.ac-tile__body{ display:grid; grid-template-rows:auto 1fr auto; gap:6px; padding:16px 18px 18px; }
.ac-tile__t{ font:600 17px/1.3 var(--font-sans); letter-spacing:-0.005em; }
.ac-tile__p{ font:400 14px/1.5 var(--font-sans); color:var(--ink-muted); }
.ac-tile__go{ margin-top:6px; font:500 12px/1.3 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
a.ac-tile:hover .ac-tile__go{ color:var(--ink); }
.ac-tile--wide{ grid-column:span 2; }
@media (max-width:599px){
  .ac-tile--wide{ grid-column:auto; }
  .ac-tile{ grid-template-rows:none; grid-template-columns:104px minmax(0,1fr); }
  .ac-tile__fig{ aspect-ratio:auto; height:100%; min-height:104px; padding:12px; }
  .ac-tile__body{ padding:14px 16px; }
}

/* ---------- 4. course page skeleton (every course = the ClickUp feature page used by /plans/pro and /plans/max) ---------- */
/* 4a. outcome hero: copy on a third + the course card with the price and Apply in the first screen; the product scene beside */
.ac-hero{ padding-block:clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px); }
.ac-hero__grid{ display:grid; gap:clamp(32px, 5vw, 72px); align-items:center; }
@media (min-width:1024px){ .ac-hero__grid{ grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); } }
.ac-hero__copy{ display:grid; gap:18px; align-content:start; }
.ac-hero__copy .t-hero{ max-width:16ch; text-wrap:balance; }
.ac-hero__copy .t-lead{ max-width:34rem; }
.ac-hero__art{ position:relative; min-width:0; }
.ac-hero__art > .k-desk{ margin:0; }
.ac-hero__loc{ position:absolute; z-index:3; inset-inline-start:clamp(-8px, -1vw, 0px); top:-14px; }
.ac-hero__cert{ position:absolute; z-index:4; inset-inline-end:0; bottom:-4px; width:min(240px, 42%); rotate:3deg; }
[dir="rtl"] .ac-hero__cert{ rotate:-3deg; }
.ac-hero__cert img{ display:block; width:100%; height:auto; aspect-ratio:1600 / 1131; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.2), 0 24px 48px -18px rgba(10,6,40,.55); }
@media (max-width:767px){ .ac-hero{ padding-block:20px 40px; } .ac-hero__cert{ width:44%; bottom:-20px; } .ac-hero__loc{ top:-10px; } }
/* the island's read and caption wrap clear of the certificate thumb, so the "Now you know" line stays readable (review P2-6) */
@media (min-width:601px){ .ac-hero__art:has(> .ac-hero__cert) :is(.ipk__read, .ipk__cap){ padding-inline-end:min(240px, 36%); } }
/* phones: the full certificate as a card under the scene, not a tilted sticker (review P2-7) */
@media (max-width:600px){ .ac-hero__cert{ position:static; width:100%; rotate:0deg; margin-top:16px; } [dir="rtl"] .ac-hero__cert{ rotate:0deg; } }
/* the course card: price, the facts, the one action. On phones it is the first screen after the H1 and lead. */
.ac-buy{ display:grid; gap:16px; padding:clamp(18px, 2vw, 24px); border-radius:var(--radius-card); background:var(--card-surface); box-shadow:var(--card-lift); max-width:34rem; }
:not(:root)[data-mode="dark"] .ac-buy{ box-shadow:inset 0 0 0 1px var(--elev-4); }
.ac-buy__top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 16px; }
.ac-buy__price{ font:500 clamp(26px, 2.6vw, 32px)/1 var(--font-mono); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.ac-buy__price--free{ font-family:var(--font-sans); font-weight:600; letter-spacing:-0.01em; }
.ac-buy__t{ font:400 14px/1.4 var(--font-sans); color:var(--ink-muted); }
.ac-buy .k-acts{ gap:12px 20px; }
.ac-buy .k-qa{ margin:0; }
.ac-buy .qa-list details.qa > summary.qa__q{ font-size:15px; }
/* facts: a definition row (Format · Live · Language · Credential · Included in), Mono labels, Sans values */
.ac-facts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 20px; margin:0; padding:14px 0 0; box-shadow:inset 0 1px 0 var(--hairline-soft); }
@media (min-width:560px){ .ac-facts{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.ac-facts > div{ display:grid; gap:3px; min-width:0; }
.ac-facts dt{ font:500 11px/1.3 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.ac-facts dd{ margin:0; font:500 14px/1.4 var(--font-sans); color:var(--ink); }
/* 4b. section furniture for course pages */
.ac-two{ display:grid; gap:clamp(32px, 5vw, 80px); align-items:center; }
@media (min-width:1024px){ .ac-two{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); } .ac-two--flip > :first-child{ order:2; } .ac-two--even{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.ac-two > *{ min-width:0; }
.ac-copy{ display:grid; gap:16px; align-content:start; }
.ac-copy .k-qa{ margin-block-start:12px; }
.ac-scene{ position:relative; border-radius:var(--radius-base); padding:clamp(16px, 3vw, 40px); background-color:var(--ground-alt); overflow:hidden; }
.ac-scene > .k-status{ position:absolute; inset-inline-start:16px; bottom:16px; z-index:3; }
/* 4c. the locator chapter: where the course sits on the mark + what each lit room asks of you */
.ac-where{ display:grid; gap:clamp(24px, 4vw, 56px); align-items:center; }
@media (min-width:1024px){ .ac-where{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); } }
.ac-where__fig{ padding:clamp(20px, 3vw, 40px); border-radius:var(--radius-base); }
.ac-where__fig .ds-loc{ --ds-loc-w:100%; max-width:640px; margin-inline:auto; }
.ac-rooms{ display:grid; gap:4px; list-style:none; counter-reset:acr; }
.ac-room{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; padding:14px 0; box-shadow:inset 0 -1px 0 var(--hairline-soft); }
.ac-room .k-tag{ grid-row:span 2; align-self:start; margin-top:2px; }
.ac-room b{ font:600 17px/1.3 var(--font-sans); }
.ac-room span{ font:400 15px/1.5 var(--font-sans); color:var(--ink-muted); }
.ac-room--off{ opacity:.45; }
/* 4d. who it's for: use cases by move, each a card with the from -> to */
.ac-cases{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ac-case{ display:grid; gap:10px; align-content:start; padding:22px; }
.ac-case__move{ font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.ac-case__t{ font:600 18px/1.3 var(--font-sans); }
.ac-case p{ color:var(--ink-muted); font-size:15px; }
/* the applybar id slot carries the course's certificate thumbnail instead of a membership chip */
.ac-barcert{ display:block; flex:none; width:44px; height:auto; aspect-ratio:1600 / 1131; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.25); }
@media (max-width:420px){ .ac-barcert{ display:none; } }

/* ---------- 5. learning kit (ds-audit U5: LessonCard, ModuleCard, ProgressRing, CheckpointCard on v1.2 tokens) ---------- */
/* module tour: <div class="ac-outline"> <details class="ac-module" open> <summary>…</summary> <ol class="ac-lessons">…</ol> </details> … </div> */
.ac-outline{ display:grid; gap:12px; }
.ac-outline--split{ align-items:start; }
@media (min-width:1024px){ .ac-outline--split{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(32px, 4vw, 64px); }
  .ac-outline__aside{ position:sticky; top:calc(var(--header-h) + 88px); } }
.ac-outline__list{ display:grid; gap:12px; }
.ac-module{ border-radius:var(--radius-card); background:var(--card-surface); box-shadow:var(--card-lift); }
:not(:root)[data-mode="dark"] .ac-module{ box-shadow:none; }
.ac-module > summary{ list-style:none; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 16px; align-items:center; padding:18px 20px; cursor:pointer; border-radius:inherit; }
.ac-module > summary::-webkit-details-marker{ display:none; }
.ac-module > summary:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.ac-module__n{ display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--ground-alt); font:500 13px/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.ac-module__t{ font:600 17px/1.3 var(--font-sans); }
.ac-module__m{ grid-column:2; font:500 12px/1.4 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); }
.ac-module__chev{ grid-row:1 / span 2; grid-column:3; width:20px; height:20px; color:var(--ink-muted); transition:rotate var(--dur-quick) var(--ease-standard); }
.ac-module[open] .ac-module__chev{ rotate:180deg; }
.ac-module__bar{ grid-column:2 / -1; height:4px; border-radius:2px; background:var(--ds-ring-track); overflow:hidden; margin-top:6px; }
.ac-module__bar i{ display:block; height:100%; width:var(--v, 0%); background:var(--ui-primary); border-radius:inherit; }
.ac-lessons{ display:grid; list-style:none; margin:0; padding:0 20px 14px; }
.ac-module__go{ margin:0; padding:2px 20px 18px; }
.ac-lesson{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:12px 0; box-shadow:inset 0 1px 0 var(--hairline-soft); }
.ac-lesson__n{ font:500 12px/1 var(--font-mono); color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.ac-lesson__t{ font:500 15px/1.4 var(--font-sans); }
.ac-lesson__m{ font:500 12px/1.3 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); white-space:nowrap; }
.ac-lesson__s{ grid-column:2 / -1; display:inline-flex; align-items:center; gap:6px; font:500 12px/1.3 var(--font-sans); color:var(--ink-muted); }
.ac-lesson__s .ac-ico{ width:14px; height:14px; }
.ac-lesson--done .ac-lesson__s{ color:var(--success-text); }
.ac-lesson--active{ box-shadow:inset 0 1px 0 var(--hairline-soft), inset 3px 0 0 var(--ui-primary); padding-inline-start:10px; margin-inline-start:-10px; }
[dir="rtl"] .ac-lesson--active{ box-shadow:inset 0 1px 0 var(--hairline-soft), inset -3px 0 0 var(--ui-primary); }
.ac-lesson--locked :is(.ac-lesson__t, .ac-lesson__m){ color:var(--ink-muted); }
.ac-lesson--workshop .ac-lesson__n{ color:var(--role-human-text); }
/* checkpoint (E4): pick an answer, Check, the reveal says right or not in words + icon, never colour alone */
.ac-check{ display:grid; gap:14px; padding:clamp(18px, 2vw, 24px); border-radius:var(--radius-card); background:var(--card-surface); box-shadow:var(--card-lift); }
.ac-check__k{ display:inline-flex; align-self:start; justify-self:start; }
.ac-check__q{ font:600 18px/1.35 var(--font-sans); }
.ac-check__opts{ display:grid; gap:8px; border:0; margin:0; padding:0; }
.ac-check__opt{ display:flex; align-items:center; gap:12px; min-height:48px; padding:0 14px; border-radius:var(--radius-button); box-shadow:inset 0 0 0 1px var(--hairline); cursor:pointer; font:500 15px/1.3 var(--font-sans); }
.ac-check__opt:has(input:checked){ box-shadow:inset 0 0 0 2px var(--ui-primary); }
.ac-check__opt input{ accent-color:var(--ui-primary); width:18px; height:18px; margin:0; }
.ac-check__opt.is-right{ box-shadow:inset 0 0 0 2px var(--success-text); }
.ac-check__opt.is-wrong{ box-shadow:inset 0 0 0 2px var(--danger-text); }
.ac-check__out{ display:flex; gap:8px; align-items:flex-start; font:500 15px/1.45 var(--font-sans); }
.ac-check__out[data-state="right"]{ color:var(--success-text); } .ac-check__out[data-state="wrong"]{ color:var(--danger-text); }
.ac-check__out:empty{ display:none; }

/* ---------- 6. the credential: the FULL certificate (rendered image of the real page), on the Prestige stage ---------- */
/* <div class="ac-cred"> <div class="ac-copy">…</div> <figure class="ac-certstage k-duo k-duo--prestige"> <a class="ac-cert" …><img …></a> … </figure> </div> */
.ac-cred{ display:grid; gap:clamp(32px, 5vw, 72px); align-items:center; }
@media (min-width:1024px){ .ac-cred{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); } }
.ac-cred__list{ display:grid; gap:10px; list-style:none; }
.ac-cred__list li{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:baseline; font:400 16px/1.5 var(--font-sans); }
.ac-cred__list li::before{ content:""; width:14px; height:8px; border-inline-start:2px solid var(--ink); border-bottom:2px solid var(--ink); rotate:-45deg; translate:2px -2px; }
[dir="rtl"] .ac-cred__list li::before{ rotate:45deg; }
.ac-certstage{ position:relative; margin:0; display:grid; place-items:center; gap:18px; padding:clamp(28px, 5vw, 64px) clamp(16px, 4vw, 56px) clamp(20px, 3vw, 36px);
  border-radius:var(--radius-base); --duo-aim:12deg; --duo-hold:34%; }   /* black anchor under the caption at the foot, gold behind the paper */
.ac-cert{ position:relative; display:block; width:100%; max-width:720px; rotate:-1.2deg; color:inherit; text-decoration:none;
  transition:rotate var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-standard); }
[dir="rtl"] .ac-cert{ rotate:1.2deg; }
.ac-cert img{ display:block; width:100%; height:auto; aspect-ratio:1600 / 1131; border-radius:3px; background:var(--white);
  box-shadow:0 1px 2px rgba(0,0,0,.35), 0 40px 80px -36px rgba(0,0,0,.85); }
a.ac-cert:is(:hover, :focus-visible){ rotate:0deg; translate:0 -3px; }
a.ac-cert:focus-visible{ outline:3px solid var(--focus-ring-on-duo, #fff); outline-offset:6px; }
.ac-certstage__cap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px; color:var(--on-duo-ink, #fff); font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; }
.ac-certstage__cap a{ color:inherit; text-underline-offset:3px; }
/* a real holder beside the credential (assets/certified-members.js / the course page's grads data only) */
.ac-holder{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 14px; align-items:center; padding:14px 16px; border-radius:var(--radius-card); background:var(--ground-alt); max-width:26rem; }
.ac-holder img{ grid-row:span 2; width:48px; height:48px; border-radius:50%; object-fit:cover; }
.ac-holder b{ font:600 15px/1.3 var(--font-sans); }
.ac-holder span{ font:500 12px/1.4 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); }
/* the live page instead of the image (a holder link with ?name=&issued=): the certificate template is fluid (cqw) and
   fills an iframe drawn at its own 1123:794 aspect exactly, so no scaling script is needed */
.ac-certframe{ position:relative; display:block; width:100%; aspect-ratio:1123 / 794; overflow:hidden; border-radius:3px; background:var(--white);
  box-shadow:0 1px 2px rgba(0,0,0,.35), 0 40px 80px -36px rgba(0,0,0,.85); }
.ac-certframe iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }

/* ---------- 7. ways to join: membership routes and the standalone price, no monthly figure ---------- */
.ac-ways{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ac-way{ display:grid; grid-template-rows:auto auto 1fr auto; gap:10px; padding:22px; color:var(--ink); text-decoration:none; }
.ac-way__k{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ac-way__t{ font:600 20px/1.25 var(--font-sans); letter-spacing:-0.01em; }
.ac-way__p{ font:400 15px/1.5 var(--font-sans); color:var(--ink-muted); }
.ac-way__price{ font:500 18px/1.2 var(--font-mono); font-variant-numeric:tabular-nums; }
.ac-way__price small{ font:400 13px/1.3 var(--font-sans); color:var(--ink-muted); margin-inline-start:6px; }
/* a card that sells one course on its own: the buy link on its own line, the membership note under it */
.ac-way__p > .k-link:first-child{ display:flex; inline-size:fit-content; margin-block-end:6px; font-weight:600; color:var(--ink); }
.ac-way__price + .ac-way__p{ font-size:14px; }
.ac-way--lead{ box-shadow:inset 0 0 0 2px var(--ink), var(--card-lift); }

/* ---------- 8. RTL, print ---------- */
[dir="rtl"] .ac-ccard__shot{ transform-origin:50% 0; }
@media print{ .ac-filter, .ac-ccard__peek{ display:none !important; } .ac-ccard, .ac-tile, .ac-module{ box-shadow:none; break-inside:avoid; } }
@media (prefers-reduced-motion:reduce){
  .ac-ccard, .ac-ccard__shot, .ac-ccard__peek, .ac-tile, .ac-cert, .ac-module__chev, .ac-ccard__media--cert img{ transition:none; }
  a.ac-ccard:hover, a.ac-tile:hover{ translate:none; } a.ac-ccard:hover .ac-ccard__shot{ translate:none; scale:none; }
}

/* ---------- 9. ds-shared ---------- */
/* ==== ds-shared:begin · the design-system uplift (ds-audit U1-U9, ADOPT/ADAPT moves) · IDENTICAL in assets/pg-academy.css
   and assets/pg-os.css. Source: .research/reset/r2/ds-shared.css; inject with python3 -I .research/reset/r2/ds_inject.py.
   Mode-neutral: every colour is a mode token (resolved by main[data-mode]) or an --ip-* token, so one block serves the
   light Academy and the dark RIVET OS group. Geometry is never redrawn: marks come from assets/ip/** renders; the
   RivetShape glyphs below are the authored paths with only the viewBox cropped to their bounds (data URIs).
   Kit lane: lift this block into kit.css when convenient (request in r2/foundation.md). ==== */

:where(main.ac, main.os){
  --ds-pill:999px;
  --ds-press:.97;
  --ds-skel-base:color-mix(in srgb, var(--silver) 35%, var(--white));
  --ds-skel-hi:var(--ghost-white);
  --ds-ring-track:color-mix(in srgb, var(--ink) 10%, transparent);
  --ds-ip:var(--purple);                 /* IP strokes: purple on light, cyan on dark (ip.css --ip-primary) */
  --ds-ip-soft:color-mix(in srgb, var(--purple) 10%, transparent);
  --ds-level-at:var(--ui-primary);       /* the current agent level: product primary; magenta only as the screen's insight */
  --ds-dots:color-mix(in srgb, var(--purple) 16%, transparent);
}
:where(main.ac, main.os):where([data-mode="dark"]), :where(main.ac, main.os) :where([data-mode="dark"]){
  --ds-skel-base:var(--elev-2);
  --ds-skel-hi:var(--elev-4);
  --ds-ip:var(--cyan);
  --ds-ip-soft:color-mix(in srgb, var(--cyan) 10%, transparent);
  --ds-dots:color-mix(in srgb, var(--white) 14%, transparent);
}
:where(main.ac, main.os):where([data-mode="light"]), :where(main.ac, main.os) :where([data-mode="light"]){
  --ds-skel-base:color-mix(in srgb, var(--silver) 35%, var(--white));
  --ds-skel-hi:var(--ghost-white);
  --ds-ip:var(--purple);
  --ds-ip-soft:color-mix(in srgb, var(--purple) 10%, transparent);
  --ds-dots:color-mix(in srgb, var(--purple) 16%, transparent);
}
:where(main.ac, main.os) .k-btn:active{ scale:var(--ds-press); }   /* M4 press, dur-instant via the kit transition */

/* ---- U1 · an IP mark in front of an eyebrow (ModelMark, agent level, the authored mark icon), mono, 20px ---- */
.ds-eyemark{ display:inline-flex; align-items:center; gap:10px; }
.ds-eyemark__i{ flex:none; display:inline-grid; place-items:center; width:20px; height:20px; color:var(--ds-ip); }
.ds-eyemark__i :is(svg, img){ width:20px; height:20px; display:block; overflow:visible; --ip-primary:currentColor; --ip-insight:currentColor; }

/* ---- U3 · the eight ModelMarks as one row (assets/ip/models/*.svg pasted inline, without xmlns) ----
   Mono at rest (every mark's own magenta element on --ip-primary); the one being read (hover, focus, .is-on,
   aria-pressed/aria-current) takes magenta: the screen's one insight. 4 x 2 on desktop, 2 x 4 on phones. */
.ds-models{ --ip-primary:var(--ds-ip); --ip-insight:var(--ds-ip); display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); margin:0; padding:0; list-style:none; }
@media (min-width:768px){ .ds-models{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; } }
.ds-models--row{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (min-width:1024px){ .ds-models--row{ grid-template-columns:repeat(8, minmax(0,1fr)); } }
.ds-models > li{ display:grid; }
.ds-model{ position:relative; width:100%; display:grid; grid-template-columns:40px minmax(0,1fr); gap:4px 14px; align-items:center; min-height:76px; padding:14px 16px;
  border-radius:var(--radius-card); background:var(--card-surface); box-shadow:var(--card-lift); color:var(--ink); text-align:start; font:inherit;
  border:0; text-decoration:none; cursor:default; transition:box-shadow var(--dur-instant) var(--ease-standard), translate var(--dur-instant) var(--ease-standard); }
:is(a, button).ds-model{ cursor:pointer; }
.ds-model svg{ grid-row:span 2; width:40px; height:40px; display:block; overflow:visible; }
.ds-model__n{ font:600 15px/1.25 var(--font-sans); letter-spacing:-0.005em; }
.ds-model__j{ font:400 13px/1.35 var(--font-sans); color:var(--ink-muted); }
.ds-models--row .ds-model{ grid-template-columns:1fr; justify-items:start; gap:10px; min-height:0; padding:16px; }
.ds-models--row .ds-model svg{ grid-row:auto; }
.ds-model:is(:hover, :focus-visible, .is-on, [aria-pressed="true"], [aria-current]){ --ip-insight:var(--magenta); }
:is(a, button).ds-model:hover{ box-shadow:var(--card-lift-hover); translate:0 -2px; }
:not(:root)[data-mode="dark"] .ds-model{ box-shadow:none; }
:not(:root)[data-mode="dark"] .k-sec--alt .ds-model{ background:var(--elev-2); }
.ds-models--quiet .ds-model{ background:none; box-shadow:none; padding-inline:0; }

/* ---- agent level mark (presets C1/C2 geometry: five arcs over a base line, lit up to the level; dashed = not built)
   Paste the snippet from r2/foundation.md 6; recolour only. Levels: Manual, Assisted, Orchestrated, Agentic, Autonomous ---- */
.ds-level{ display:inline-grid; grid-template-columns:auto minmax(0,1fr); justify-content:start; justify-self:start; align-items:center; gap:12px; color:var(--ink); }
.ds-level svg{ width:var(--ds-level-w, 56px); height:auto; overflow:visible; display:block; }
.ds-level__base{ stroke:var(--ink-muted); stroke-width:.7; opacity:.5; }
.ds-level__arc{ fill:none; stroke:var(--ink-muted); stroke-width:1.1; stroke-linecap:round; opacity:.22; }
.ds-level__arc.is-lit{ stroke:currentColor; opacity:1; }
.ds-level__arc.is-at{ stroke:var(--ds-level-at); stroke-width:1.3; opacity:1; }
.ds-level--insight .ds-level__arc.is-at{ stroke:var(--magenta); }
.ds-level--planned .ds-level__arc{ stroke-dasharray:1.6 1.6; }
.ds-level--planned .ds-level__arc.is-lit{ stroke:var(--ink-muted); }
.ds-level__dot{ fill:currentColor; }
.ds-level--planned .ds-level__dot{ fill:var(--ink-muted); }
.ds-level__t{ display:grid; gap:2px; }
.ds-level__t b{ font:600 15px/1.2 var(--font-sans); }
.ds-level__t small{ font:500 11px/1.3 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }

/* ---- U4 · RivetShape glyphs as the structural layer (founder glyphs; token colours only; never magenta, never over
   photos or data; aria-hidden). One shape per section at most. ---- */
.ds-shape{ display:inline-block; flex:none; background:currentColor; -webkit-mask:var(--ds-shape) center / contain no-repeat; mask:var(--ds-shape) center / contain no-repeat;
  height:var(--ds-shape-h, 48px); aspect-ratio:var(--ds-shape-r, 1); }
.ds-shape--divider{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='149.3 542.6 1367.1 656.2'%3E%3Cpath d='M149.34,823.36h468.46s17.83,0,17.83,0h17.43c73.63-4.48,131.94-65.61,131.94-140.37v-134.35c.04-3.07.02-5.14,0-6.04,99.19,0,275.45,0,374.9,0h.52s355.99,0,355.99,0v375.39h-468.46s-17.83,0-17.83,0h-17.43c-73.63,4.48-131.94,65.61-131.94,140.37v134.35c-.04,3.07-.02,5.14,0,6.04-99.19,0-275.45,0-374.9,0h-.52s-355.99,0-355.99,0v-375.39h0Z'/%3E%3C/svg%3E"); --ds-shape-r:2.0834; }
.ds-shape--ribbon{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='149.5 460.1 1316.3 766.8'%3E%3Cpath d='M1294.14,911.17h171.64v-180.73h-242.51c-35.45-2.16-63.52-31.59-63.52-67.58v-64.68c-.02-1.48,0-2.47,0-2.91h-352.13s0,0,0,0h-242.51c-35.45-2.16-63.52-31.59-63.52-67.58v-64.68c-.02-1.48,0-2.47,0-2.91H149.46v180.73h242.51c35.45,2.16,63.52,31.59,63.52,67.58v64.68c.01,1.28.01,2.2,0,2.7H149.46v180.73h242.51c35.45,2.16,63.52,31.59,63.52,67.58v64.68c.02,1.48,0,2.47,0,2.91h352.13s0,0,0,0h242.51c35.45,2.16,63.52,31.59,63.52,67.58v64.68c.02,1.48,0,2.47,0,2.91h352.13v-180.73h-242.51c-35.45-2.16-63.52-31.59-63.52-67.58v-64.68c-.01-1.28-.01-2.2,0-2.7h134.4ZM979.26,910.96h-171.64s0,0,0,0h-242.51c-35.45-2.16-63.52-31.59-63.52-67.58v-64.68c-.01-1.28-.01-2.2,0-2.7h306.03s0,0,0,0h242.51c35.45,2.16,63.52,31.59,63.52,67.58v64.68c.01,1.28.01,2.2,0,2.7h-134.4Z'/%3E%3C/svg%3E"); --ds-shape-r:1.7166; }
.ds-shape--ribbon-2{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='106.4 462.2 1402.4 816.9'%3E%3Cpath d='M1325.96,942.8h182.87v-192.55h-258.37c-37.77-2.3-67.68-33.66-67.68-72v-68.91c-.02-1.57,0-2.64,0-3.1h-375.16s0,0,0,0h-258.37c-37.77-2.3-67.68-33.66-67.68-72v-68.91c-.02-1.57,0-2.64,0-3.1H106.41v192.54h258.37c37.77,2.3,67.68,33.66,67.68,72v68.91c.02,1.36.01,2.3,0,2.84H106.41v192.55h258.37c37.77,2.3,67.68,33.66,67.68,72v68.91c.02,1.57,0,2.64,0,3.1h375.16s0,0,0,0h258.37c37.77,2.3,67.68,33.66,67.68,72v68.91c.02,1.57,0,2.63,0,3.1h375.16v-192.55h-258.37c-37.77-2.3-67.68-33.66-67.68-72v-68.91c-.02-1.36-.01-2.3,0-2.84h143.18Z'/%3E%3C/svg%3E"); --ds-shape-r:1.7167; }
.ds-shape--frame{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='338.8 128.4 977.4 1484.5'%3E%3Cpath d='M1311.67,601.87h-100.06c-55.68,0-101.21-43.43-104.55-98.27V128.43h0s-279.59,0-279.59,0h-279.59v375.17c-3.34,54.84-48.87,98.27-104.55,98.27h-100.06c-2.29.03-3.83.01-4.5,0v537.6c.67-.01,2.21-.02,4.5,0h100.06c55.68,0,101.21,43.43,104.55,98.27v375.17h0s279.59,0,279.59,0h279.59v-375.17c3.34-54.84,48.87-98.27,104.55-98.27h100.06c2.29-.03,3.83-.01,4.5,0v-537.6c-.67.01-2.21.02-4.5,0ZM827.47,1347.39l-477.86-476.71,477.86-476.71,477.86,476.71-477.86,476.71Z'/%3E%3C/svg%3E"); --ds-shape-r:0.6584; }
.ds-shape--ascend{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='494.0 325.9 627.3 970.7'%3E%3Cpath d='M1016.7,823.23h-104.56v-138.45c-3.34-54.84-48.87-98.27-104.55-98.27h-104.5v-162.3c-3.34-54.84-48.87-98.27-104.55-98.27h-104.56v473.44h209.05v260.57h209.11v236.72h209.11v-375.17c-3.34-54.84-48.87-98.27-104.55-98.27Z'/%3E%3C/svg%3E"); --ds-shape-r:0.6462; }
.ds-shape--origin{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='563.3 466.9 488.7 753.1'%3E%3Cpath d='M563.27,954.47v265.53h279.59v-375.17c3.34-54.84,48.87-98.27,104.55-98.27h100.06c2.29-.03,3.83-.01,4.5,0v-279.62l-488.7,487.53Z'/%3E%3C/svg%3E"); --ds-shape-r:0.6489; }
.ds-shape--banner{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='370.6 203.7 874.1 1333.9'%3E%3Cpath d='M994.62,203.7h0v335.51c-2.99,49.04-43.7,87.88-93.5,87.88h-89.48c-2.04.02-3.42.01-4.02,0h0s-250.03-.01-250.03-.01h0v335.51c-2.99,49.04-43.7,87.88-93.5,87.88h-89.48c-2.04.02-3.42.01-4.02,0v487.18h250.03v-335.51c2.99-49.04,43.7-87.88,93.5-87.88h89.48c2.04-.02,3.42-.01,4.02,0h0s250.03.01,250.03.01h0v-335.51c2.99-49.04,43.7-87.88,93.5-87.88h89.48c2.04-.02,3.42-.01,4.02,0V203.7h-250.03Z'/%3E%3C/svg%3E"); --ds-shape-r:0.6553; }
.ds-shape--mass{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='461.2 148.9 692.8 1443.5'%3E%3Cpath d='M1150.84,484.52h-70.93c-39.47,0-71.74-30.79-74.11-69.66V148.92h0s-198.19,0-198.19,0h-198.19v265.94c-2.37,38.87-34.64,69.66-74.11,69.66h-70.93c-1.62.02-2.71,0-3.19,0v772.3c.48,0,1.57-.02,3.19,0h70.93c39.47,0,71.74,30.79,74.11,69.66v265.94h0s198.19,0,198.19,0h198.19v-265.94c2.37-38.87,34.64-69.66,74.11-69.66h70.93c1.62-.02,2.71,0,3.19,0V484.52c-.48,0-1.57.02-3.19,0Z'/%3E%3C/svg%3E"); --ds-shape-r:0.4799; }
.ds-shape--needle{ --ds-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='461.2 148.9 692.8 1443.5'%3E%3Cpath d='M1150.84,484.52h-70.93c-39.47,0-71.74-30.79-74.11-69.66V148.92h0s-198.19,0-198.19,0h-198.19v265.94c-2.37,38.87-34.64,69.66-74.11,69.66h-70.93c-1.62.02-2.71,0-3.19,0v772.3c.48,0,1.57-.02,3.19,0h70.93c39.47,0,71.74,30.79,74.11,69.66v265.94h0s198.19,0,198.19,0h198.19v-265.94c2.37-38.87,34.64-69.66,74.11-69.66h70.93c1.62-.02,2.71,0,3.19,0V484.52c-.48,0-1.57.02-3.19,0ZM955.85,870.67v265.94c-2.37,38.87-34.64,69.66-74.11,69.66h-70.93c-1.62.02-2.71,0-3.19,0-.48,0-1.57.02-3.19,0h-70.93c-39.47,0-71.74-30.79-74.11-69.66v-265.94h0v-265.94c2.37-38.87,34.64-69.66,74.11-69.66h70.93c1.62-.02,2.71,0,3.19,0,.48,0,1.57-.02,3.19,0h70.93c39.47,0,71.74,30.79,74.11,69.66v265.94h0Z'/%3E%3C/svg%3E"); --ds-shape-r:0.4799; }
/* ascend climbs toward the inline end (directional glyphs mirror, BRAND) */
:dir(ltr) .ds-shape--ascend, [dir="ltr"] .ds-shape--ascend{ scale:-1 1; }
/* chapter divider: a hairline with the divider glyph at its centre, between the chapters of a long page */
.ds-divider{ display:flex; align-items:center; gap:20px; color:var(--hairline); margin-block:clamp(8px, 2vw, 24px); }
.ds-divider::before, .ds-divider::after{ content:""; flex:1; height:1px; background:currentColor; }
.ds-divider .ds-shape{ --ds-shape-h:22px; color:var(--ink-muted); opacity:.55; }
/* section index on a ribbon: 01 · 02 … on K8 tabs, K9 rails, chapter heads */
.ds-index{ position:relative; display:inline-grid; place-items:center; width:64px; height:38px; flex:none; }
.ds-index .ds-shape{ position:absolute; inset:0; margin:auto; --ds-shape-h:38px; color:var(--ink); opacity:.1; }
.ds-index__n{ position:relative; font:500 13px/1 var(--font-mono); letter-spacing:.04em; font-variant-numeric:tabular-nums; color:var(--ink); }
/* portrait in the frame window (K2 quote card, the founder letter): the glyph in --role-human, the photo inside its diamond */
.ds-frame{ position:relative; display:block; width:var(--ds-frame-w, 220px); aspect-ratio:0.6584; color:var(--role-human); }
.ds-frame > .ds-shape{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.ds-frame > img{ position:absolute; left:6%; width:88%; top:calc(50% - 44% * 0.6584); height:auto; aspect-ratio:1; object-fit:cover;
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background:var(--ground-alt); }
/* steps that climb (Starting out -> Stepping up -> Leading) */
.ds-climb{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px 28px; align-items:center; }
.ds-climb > .ds-shape{ --ds-shape-h:clamp(96px, 12vw, 160px); color:var(--role-structure); opacity:.9; }

/* ---- U9 / K13 · figure island: the engineering grid, the figure, a hand note, the earned read, "Now you know" ----
   <figure class="ds-island"> <div class="ds-island__canvas k-blueprint">figure</div> <p class="ds-hand">…</p>
   <figcaption class="ds-island__cap"><b>Now you know</b> …</figcaption> </figure> */
.ds-island{ position:relative; display:grid; gap:0; margin:0; border-radius:var(--radius-base); overflow:hidden; background:var(--card-surface); box-shadow:var(--card-lift); }
:not(:root)[data-mode="dark"] .ds-island{ background:var(--elev-1); box-shadow:inset 0 0 0 1px var(--elev-4); }
.ds-island__canvas{ position:relative; display:grid; place-items:center; padding:clamp(24px, 4vw, 56px) clamp(16px, 3vw, 48px); min-height:240px; }
.ds-island__canvas > :is(img, svg, picture){ display:block; width:100%; max-width:var(--ds-fig-max, 880px); height:auto; }
.ds-island--dots .ds-island__canvas, .ds-dots{ background-image:radial-gradient(circle at 1px 1px, var(--ds-dots) 1px, transparent 1.5px); background-size:var(--blueprint-size, 32px) var(--blueprint-size, 32px); }
.ds-island__body{ display:grid; gap:14px; padding:clamp(18px, 2.4vw, 28px) clamp(18px, 3vw, 36px) clamp(20px, 2.6vw, 32px); box-shadow:inset 0 1px 0 var(--hairline-soft); }
.ds-island__cap{ font:400 15px/1.55 var(--font-sans); color:var(--ink-muted); max-width:62ch; }
.ds-island__cap b{ display:block; margin-bottom:4px; font:500 11px/1.3 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink); }
/* the earned read on a static figure: one line that appears on hover, focus or tap of the island */
.ds-island__read{ position:absolute; inset-inline:16px; bottom:16px; margin:0; padding:10px 14px; border-radius:var(--radius-button); background:var(--scrim-strong); color:var(--white);
  font:500 14px/1.4 var(--font-sans); opacity:0; translate:0 6px; transition:opacity var(--dur-quick) var(--ease-standard), translate var(--dur-quick) var(--ease-standard); pointer-events:none; }
.ds-island:is(:hover, :focus-within) .ds-island__read{ opacity:1; translate:0 0; }
@media (hover:none){ .ds-island__read{ position:static; margin:0 16px 16px; opacity:1; translate:none; } }
/* one Square Peg hand note per island (hand-ink: purple on light, gold on dark), aria-hidden, same words in the caption */
.ds-hand{ font:400 24px/1.05 var(--font-hand); color:var(--hand-ink); margin:0; }
.ds-island .ds-hand{ position:absolute; inset-inline-start:var(--x, auto); top:var(--y, auto); inset-inline-end:var(--xe, auto); bottom:var(--yb, auto); max-width:16ch; rotate:-3deg; pointer-events:none; }
:lang(ar) .ds-hand{ font-family:"Aref Ruqaa", var(--font-hand); font-size:22px; }
@media (max-width:767px){ .ds-hand{ font-size:20px; } .ds-island .ds-hand{ display:none; } }
/* chips that read one part of a figure (aria-pressed), and the read they write */
.ds-reads{ display:flex; flex-wrap:wrap; gap:8px; }
.ds-read{ min-height:44px; padding:0 16px; border:0; border-radius:var(--ds-pill); background:var(--ground-alt); color:var(--ink); font:500 14px/1 var(--font-sans); cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--hairline-soft); transition:background var(--dur-instant) var(--ease-standard), color var(--dur-instant) var(--ease-standard); }
.ds-read:hover{ box-shadow:inset 0 0 0 1px var(--ink-muted); }
.ds-read[aria-pressed="true"]{ background:var(--ink); color:var(--ground); box-shadow:none; }

/* ---- D6 · insight callout (counts as the screen's one insight: the magenta dot) ---- */
.ds-callout{ display:grid; grid-template-columns:12px minmax(0,1fr); gap:6px 12px; align-items:baseline; margin:0; }
.ds-callout::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--magenta); translate:0 1px; }
.ds-callout__s{ font:600 17px/1.4 var(--font-sans); color:var(--ink); }
.ds-callout__e{ grid-column:2; font:500 12px/1.4 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); font-variant-numeric:tabular-nums; }

/* ---- U2 · course locator (assets/ip/locators/<course>[-names|-dark].svg), 0 magenta ---- */
.ds-loc{ display:block; width:var(--ds-loc-w, 160px); height:auto; aspect-ratio:906 / 462; }
.ds-loc--s{ --ds-loc-w:96px; } .ds-loc--l{ --ds-loc-w:min(100%, 440px); }
.ds-locchip{ display:inline-flex; align-items:center; gap:10px; padding:6px 12px 6px 8px; border-radius:var(--ds-pill); background:var(--glass-tint, var(--card-surface));
  -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter); box-shadow:var(--glass-rim, 0 0 0 1px var(--hairline-soft)); font:500 11px/1.2 var(--font-mono);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink); }
.ds-locchip .ds-loc{ --ds-loc-w:72px; }
.ds-locchip b{ font-weight:600; }

/* ---- E3 / D2 · progress ring: <svg class="ds-ring" viewBox="0 0 40 40" style="--v:67"><circle class="t" …/><circle class="v" …/></svg>
   circles: cx=20 cy=20 r=16 pathLength=100. Fills once in view where scroll timelines exist; the end state otherwise. ---- */
.ds-ring{ width:var(--ds-ring-w, 44px); height:var(--ds-ring-w, 44px); rotate:-90deg; display:block; flex:none; }
.ds-ring circle{ fill:none; stroke-width:4; }
.ds-ring .t{ stroke:var(--ds-ring-track); }
.ds-ring .v{ stroke:var(--ds-ring-ink, var(--ui-primary)); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--v, 0)); }
.ds-ring--outcome .v{ --ds-ring-ink:var(--zone-expansion); }
/* line draw-on for figures and sparklines: add pathLength="1" to the path */
.ds-draw{ stroke-dasharray:1; stroke-dashoffset:0; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .ds-ring .v{ animation:ds-ring linear both; animation-timeline:view(); animation-range:entry 0% entry 100%; }
    .ds-draw{ animation:ds-draw linear both; animation-timeline:view(); animation-range:entry 0% entry 100%; }
  }
}
@keyframes ds-ring{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:calc(100 - var(--v, 0)); } }
@keyframes ds-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* ---- D7 · skeleton while something fetches; static under reduced motion ---- */
.ds-skel{ display:block; min-height:1em; border-radius:6px; background:var(--ds-skel-base); }
@media (prefers-reduced-motion:no-preference){ .ds-skel{ animation:ds-skel 1.2s var(--ease-standard) infinite alternate; } }
@keyframes ds-skel{ from{ background:var(--ds-skel-base); } to{ background:var(--ds-skel-hi); } }
/* ==== ds-shared:end ==== */