/* emobility.education: page layouts and lesson components on top of the styleguide
   (ecosystem-tokens.css + styleguide.css, both copied 1:1). Only tokens, no raw colours. */

/* ── text contrast: the styleguide faint tone (3.2:1) is below WCAG AA for the small
   labels this site uses, so text gets one step more ink (4.6:1 light, 5.1:1 dark) ─── */
:root{--color-faint:color-mix(in srgb,var(--neutral-600) 75%,var(--neutral-500))}
:root[data-theme="dark"]{--color-faint:color-mix(in srgb,var(--neutral-500) 75%,var(--neutral-600))}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--color-faint:color-mix(in srgb,var(--neutral-500) 75%,var(--neutral-600))}}

/* ── base: undo the styleguide demo-page defaults ─────────────────────── */
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{min-height:100svh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
main{flex:1}
[hidden]{display:none!important}
main h1,main h2,main h3{max-width:none;margin:0;text-align:left}
a{color:inherit}
::selection{background:var(--color-ink);color:var(--color-canvas)}
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;padding:10px 16px;border-radius:var(--radius-pill);background:var(--color-ink);color:var(--color-canvas);text-decoration:none}
.skip-link:focus{top:8px}
.button{gap:8px;font-size:var(--text-ui);font-weight:500}
.cta-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{margin-bottom:18px}

/* ── header (styleguide header, as on emobility.directory) ─────────────── */
.top.site-top{position:relative;top:auto;z-index:60;border-bottom:0}
.site-top>.wrap{display:flex;align-items:center;gap:28px}
.site-top .brand{font-size:17px;font-weight:600;letter-spacing:-.04em;text-decoration:none;color:var(--color-ink)}
.site-top .brand span{color:var(--color-muted);font-weight:400}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav .chapter-trigger{display:inline-flex;align-items:center;text-decoration:none;color:var(--color-ink);font-weight:500}
.site-nav .chapter-trigger:hover{color:var(--color-muted)}
.site-menu-toggle{display:none}
.site-nav button.chapter-trigger{border:0;background:transparent;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.site-nav .chapter-trigger.open{color:var(--color-muted)}
/* mega menu: Learning paths (as on emobility.directory) */
.site-mega{position:absolute;top:100%;left:0;right:0;height:0;overflow:hidden;visibility:hidden;background:var(--color-canvas);transition:height .34s cubic-bezier(.22,.8,.24,1),visibility 0s linear .34s}
.site-mega.open{visibility:visible;transition:height .34s cubic-bezier(.22,.8,.24,1),visibility 0s}
.site-mega__inner{padding:40px 0 48px;opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .3s cubic-bezier(.22,.8,.24,1)}
.site-mega.open .site-mega__inner{opacity:1;transform:none;transition-delay:.05s}
.mmc-layout{display:grid;grid-template-columns:280px 1fr;gap:48px}
.mmc-feature{padding-right:32px;border-right:1px solid var(--color-line)}
.mmc-kicker{display:block;margin-bottom:12px;color:var(--color-faint);font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.mmc-feature h3{margin:0 0 10px;font-size:var(--text-subheading);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.mmc-feature p{margin:0 0 20px;color:var(--color-muted);font-size:var(--text-sm);line-height:1.6}
.mmc-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.mmc-col-label{display:block;margin-bottom:10px;color:var(--color-faint);font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.mmc-col a+.mmc-col-label{margin-top:24px}
.mmc-col a{display:block;padding:6px 0;color:var(--color-ink);font-size:var(--text-ui);text-decoration:none}
.mmc-col a:hover,.mmc-col a[aria-current]{color:var(--color-muted)}
.mmc-col a:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px}
.site-drawer-stage .drawer{display:flex;flex-direction:column}
.site-drawer-stage .drawer-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.site-drawer-stage .drawer-section{margin:0 0 22px}
.site-drawer-stage .drawer-section h4{margin:0 0 8px;color:var(--color-muted);font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:1000px){.mmc-layout{grid-template-columns:220px 1fr;gap:32px}.mmc-feature{padding-right:24px}}
@media (prefers-reduced-motion:reduce){.site-mega,.site-mega__inner{transition:none!important}}
.site-search{position:absolute;top:100%;left:0;right:0;height:0;overflow:hidden;visibility:hidden;background:var(--color-canvas);transition:height .34s cubic-bezier(.22,.8,.24,1),visibility 0s linear .34s}
.site-search.open{visibility:visible;transition:height .34s cubic-bezier(.22,.8,.24,1),visibility 0s}
.site-search__inner{padding:24px 0 32px}
/* field and answers as one surface, the same as the Ask field in the home hero */
.site-search .search-surface{border-radius:24px;background:color-mix(in srgb,var(--color-surface) 75%,var(--color-canvas));box-shadow:0 0 0 1px var(--color-line);transition:box-shadow var(--motion-fast)}
.site-search .search-surface:focus-within{box-shadow:0 0 0 1px var(--color-line),0 0 0 3px color-mix(in srgb,var(--color-ink) 8%,transparent)}
.site-search .search-active-bar{padding:0}
.site-search .active-search-field,.site-search .active-search-field:focus-within{border:0;background:transparent!important;box-shadow:none}
.site-search input::-webkit-search-cancel-button,.site-search input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.site-search .search-results{max-height:min(56vh,520px);overflow:auto;margin:0 20px;padding:6px 0 14px;border-top:1px solid var(--color-line)}
.site-search .search-row,.hero-ask__results .search-row{padding:10px 8px;margin:0 -8px;text-decoration:none;color:inherit;border-radius:var(--radius-sm)}
.site-search .search-row .q b,.hero-ask__results .search-row .q b{font-weight:600}
.site-search .search-row .src,.hero-ask__results .search-row .src{color:var(--color-muted);font-size:var(--text-label);text-align:right}
.site-search .search-group,.hero-ask__results .search-group{padding:16px 0 6px}
.site-search .search-empty,.hero-ask__results .search-empty{padding:24px 0;color:var(--color-muted);font-size:var(--text-sm)}
body.chrome-blur main,body.chrome-blur .site-footer,body.chrome-blur .site-cookie-banner{filter:blur(6px);pointer-events:none}
main,.site-footer{transition:filter .25s ease}
.site-drawer-stage{position:fixed;inset:0;z-index:120;visibility:hidden;transition:visibility 0s linear .3s}
.site-drawer-stage.open{visibility:visible;transition:none}
.site-drawer-stage .drawer-backdrop{position:fixed;opacity:0;transition:opacity .25s ease}
.site-drawer-stage.open .drawer-backdrop{opacity:1}
.site-drawer-stage .drawer{position:fixed;transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.8,.24,1)}
.site-drawer-stage.open .drawer{transform:none}
.site-drawer-stage .drawer-head button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.site-drawer-stage .mobile-nav-list{margin-top:0}
@media (max-width:760px){
  .site-nav{display:none}
  .site-menu-toggle{display:grid}
}

/* ── footer: links · copyright · theme, as on the live placeholder ─────── */
.site-footer{margin-top:120px;padding:40px 0 32px;border-top:0}
.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;color:var(--color-muted);font-size:var(--text-label)}
.footer-bottom-links{display:flex;align-items:center;justify-self:start;gap:25px;flex-wrap:wrap}
.footer-bottom-links a{color:inherit;text-decoration:none}
.footer-bottom-links a,.footer-bottom-links .footer-button{padding-block:5px}
.footer-bottom .copy{justify-self:center;white-space:nowrap}
.footer-bottom a:hover,.footer-button:hover,.theme-toggle:hover{color:var(--color-ink)}
.footer-button,.theme-toggle{border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;padding:0}
.theme-toggle{justify-self:end;display:grid;place-items:center;width:40px;height:40px;border-radius:50%}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .sun-icon{display:none}
:root[data-theme="dark"] .theme-toggle .moon-icon{display:none}
:root[data-theme="dark"] .theme-toggle .sun-icon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .theme-toggle .moon-icon{display:none}:root:not([data-theme]) .theme-toggle .sun-icon{display:block}}
@media (max-width:620px){
  .footer-bottom{grid-template-columns:1fr auto;gap:12px}
  .footer-bottom-links{grid-column:1;grid-row:1;gap:14px}
  .theme-toggle{grid-column:2;grid-row:1}
  .footer-bottom .copy{grid-column:1/-1;grid-row:2;justify-self:start}
}

/* ── cookie banner (styleguide look, placeholder behaviour) ────────────── */
#notice-banner{display:block;z-index:95;transform:translateY(100%);transition:transform .34s cubic-bezier(.22,.8,.24,1)}
#notice-banner.is-in{transform:none}
#notice-banner .cookie-banner{padding:28px 0}
#notice-banner .cookie-copy h4{margin:0 0 10px}
#notice-banner .cookie-copy a{color:inherit;text-decoration:underline;text-underline-offset:3px}
#notice-banner .cookie-actions .button{background:color-mix(in srgb,var(--color-ink) 5%,transparent)}
#notice-banner .cookie-actions .button:hover{background:color-mix(in srgb,var(--color-ink) 9%,transparent)}
.consent-choice{display:flex;align-items:flex-start;gap:11px;margin-top:14px;color:var(--color-muted);font-size:var(--text-sm);line-height:1.55}
.consent-choice input{accent-color:var(--color-ink);margin-top:3px}
.consent-choice strong{color:var(--color-ink);font-weight:500}
@media (max-width:900px){#notice-banner .cookie-banner{flex-direction:column;align-items:flex-start;gap:20px;padding:24px 0}#notice-banner .cookie-actions{width:100%}#notice-banner .cookie-actions .button{flex:1}}

/* ── charging curve ────────────────────────────────────────────────────── */
.curve-plot{position:relative;height:230px;margin-top:4px}
.curve-bands{position:absolute;inset:0;pointer-events:none}
.curve-band{position:absolute;top:0;bottom:0;display:grid;align-content:start;gap:1px;padding:0 0 0 8px;border-left:1px dashed var(--color-line-strong)}
.curve-band:first-child{border-left:0;padding-left:0}
.curve-band b{color:var(--color-ink);font-size:12px;font-weight:600}
.curve-band small{color:var(--color-faint);font-size:11px;white-space:nowrap}
.curve-y{position:absolute;inset:0;pointer-events:none}
.curve-y span{position:absolute;right:0;transform:translateY(50%);padding:0 0 0 6px;background:var(--color-canvas);color:var(--color-faint);font-size:11px;font-variant-numeric:tabular-nums;line-height:1}
.curve-plot svg{display:block;width:100%;height:100%}
.curve-grid{fill:none;stroke:var(--color-line);stroke-width:1;vector-effect:non-scaling-stroke}
.curve-area{fill:color-mix(in srgb,var(--color-ink) 7%,transparent)}
.curve-line{fill:none;stroke:var(--color-ink);stroke-width:2;vector-effect:non-scaling-stroke}
.curve-marker{position:absolute;top:0;bottom:0;left:calc(var(--soc) * 1%);width:0;border-left:1px dashed var(--color-ink);pointer-events:none}
.curve-marker span{position:absolute;left:-7px;bottom:calc(var(--power) * 1% - 6px);width:13px;height:13px;border:3px solid var(--color-canvas);border-radius:50%;background:var(--color-ink);box-shadow:0 0 0 1px var(--color-ink)}
.curve-scale{display:flex;justify-content:space-between;margin-top:8px;color:var(--color-faint);font-size:var(--text-label);font-variant-numeric:tabular-nums}
.curve-control{display:flex;justify-content:space-between;margin:22px 0 8px;font-size:var(--text-sm);font-weight:500}
.curve-control output{font-variant-numeric:tabular-nums}
.curve-range{width:100%;margin:0;accent-color:var(--color-ink)}
.curve-readout{display:grid;grid-template-columns:auto auto 1fr;gap:12px 32px;align-items:baseline;margin-top:20px;padding-top:18px;border-top:1px solid var(--color-line)}
.curve-readout div{display:grid;gap:2px}
.curve-readout span{color:var(--color-faint);font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.curve-readout strong{font-size:22px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.curve-readout p{margin:0;color:var(--color-muted);font-size:var(--text-sm);line-height:1.6}
@media (max-width:620px){.curve-readout{grid-template-columns:1fr 1fr}.curve-readout p{grid-column:1/-1}.curve-band small{display:none}}

/* ── session timeline: line style separates the flows (styleguide 2.2) ── */

/* ── forms shared ──────────────────────────────────────────────────────── */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{min-height:1.4em;margin:10px 0 0;color:var(--color-muted);font-size:var(--text-sm)}
.form-note.error,[data-assess-error],[data-claim-error],[data-verify-error]{color:var(--color-danger)}
.field-hint{color:var(--color-faint);font-size:var(--text-label);line-height:1.5}
.choice{align-items:flex-start;color:var(--color-muted);font-size:var(--text-sm);line-height:1.55}
.choice input{flex:none;margin-top:1px}
.choice a{color:var(--color-ink)}
.text-link{text-decoration:none;font:inherit;font-size:var(--text-ui);padding:0}
.text-link.cta-arrow{display:inline-flex;align-items:center;gap:8px}
.wrap.narrow{width:min(760px,calc(100% - (2 * var(--page-gutter))))}

/* ── certificate page ──────────────────────────────────────────────────── */
.cert-lookup{max-width:680px;margin:0 auto}
.verify-row .input::placeholder{text-transform:none;letter-spacing:.04em}
.cert-howto{margin-top:56px}
.cert-howto p{margin:0 0 14px;color:var(--color-muted);font-size:var(--text-sm);line-height:1.7}
.cert-status{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;max-width:960px;margin:0 auto 28px;padding:4px 0 4px 18px;border-left:3px solid var(--color-ink);font-size:var(--text-sm);line-height:1.6;color:var(--color-muted)}
.cert-status strong{color:var(--color-ink);font-weight:600}
.cert-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px auto 0;max-width:960px}
.cert-footnote{max-width:600px;margin:16px auto 0;text-align:center;color:var(--color-faint);font-size:var(--text-label);line-height:1.6}
/* the certificate is a paper document in both themes, typeset in container units so it scales like a page */
.cert-sheet{--paper:var(--neutral-0);--ink:var(--neutral-900);--muted:var(--neutral-600);--faint:color-mix(in srgb,var(--neutral-600) 75%,var(--neutral-500));--rule:var(--neutral-200);
  container-type:inline-size;display:grid;max-width:960px;margin:0 auto;aspect-ratio:297/210;padding:0;background:var(--paper);color:var(--ink);box-shadow:0 1px 2px color-mix(in srgb,var(--neutral-950) 8%,transparent),0 18px 48px color-mix(in srgb,var(--neutral-950) 10%,transparent)}
/* the frame fills the sheet as its grid item and keeps its margin in cqw of the sheet: a container measured
   in its own cqw (or a percentage height under aspect-ratio) let Safari push the frame out of the paper */
.cert-frame{min-width:0;margin:2.2cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4cqw 6cqw;border:1px solid var(--ink);outline:1px solid var(--rule);outline-offset:-0.9cqw}
.cert-brand{display:inline-flex;align-items:center;font-size:2.4cqw;font-weight:600;letter-spacing:-.04em}
.cert-brand span{color:var(--muted);font-weight:400}
.cert-kicker{margin:4.2cqw 0 1.6cqw;padding-top:3cqw;border-top:1px solid var(--rule);width:24cqw;color:var(--muted);font-size:1.15cqw;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.cert-page main .cert-path{margin:0;font-size:4.6cqw;font-weight:400;letter-spacing:-.045em;line-height:1.05;text-align:center}
.cert-label{margin-top:4.4cqw;color:var(--faint);font-size:1.05cqw;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.cert-name{margin:1.2cqw 0 0;font-size:3.3cqw;font-weight:500;letter-spacing:-.03em;line-height:1.15}
.cert-text{max-width:56cqw;margin:1.6cqw 0 0;color:var(--muted);font-size:1.45cqw;line-height:1.6}
.cert-meta{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:3cqw;width:100%;margin-top:auto;padding-top:2.4cqw;border-top:1px solid var(--rule);text-align:left}
.cert-meta span{display:grid;gap:.5cqw;color:var(--faint);font-size:.95cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.cert-meta b{color:var(--ink);font-size:1.35cqw;font-weight:500;letter-spacing:0;text-transform:none;word-break:break-all}
.cert-meta span:last-child{text-align:right}
/* print: the certificate page prints the sheet alone on one landscape page (its @page rule sits in that page).
   Everything else is removed, not just hidden: hidden content still takes space, and a fixed sheet then
   repeats on every printed page */
@media print{
  html,body{background:#fff!important}
  body.cert-page .site-top,body.cert-page .site-footer,body.cert-page .site-drawer-stage,body.cert-page .skip-link,body.cert-page .cert-lookup,
  body.cert-page .cert-status,body.cert-page .cert-actions,body.cert-page .cert-footnote,body.cert-page .cert-manage,body.cert-page .fn-sheet,
  body.cert-page .site-cookie-banner,body.cert-page .copy-toast,#notice-banner{display:none!important}
  body.cert-page main,body.cert-page .cert-intro,body.cert-page .cert-intro>.wrap,body.cert-page .cert-view{margin:0!important;padding:0!important;max-width:none!important;width:auto}
  body.cert-page .cert-sheet{position:static;width:297mm;height:210mm;max-width:none;margin:0;aspect-ratio:auto;box-shadow:none;overflow:hidden;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ── range slider in the styleguide look (line track, ink thumb) ───────── */
.curve-range{-webkit-appearance:none;appearance:none;height:24px;background:transparent;cursor:pointer}
.curve-range::-webkit-slider-runnable-track{height:2px;background:linear-gradient(var(--color-ink),var(--color-ink)) 0/calc(var(--soc,42) * 1%) 100% no-repeat,var(--color-line-strong)}
.curve-range::-moz-range-track{height:2px;background:var(--color-line-strong)}
.curve-range::-moz-range-progress{height:2px;background:var(--color-ink)}
.curve-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-9px;border:3px solid var(--color-canvas);border-radius:50%;background:var(--color-ink);box-shadow:0 0 0 1px var(--color-ink);transition:transform var(--motion-fast)}
.curve-range::-moz-range-thumb{width:14px;height:14px;border:3px solid var(--color-canvas);border-radius:50%;background:var(--color-ink);box-shadow:0 0 0 1px var(--color-ink)}
.curve-range:hover::-webkit-slider-thumb,.curve-range:active::-webkit-slider-thumb{transform:scale(1.12)}
.curve-range:focus-visible{outline:none}
.curve-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--color-ink),0 0 0 5px color-mix(in srgb,var(--color-focus) 35%,transparent)}
.curve-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 1px var(--color-ink),0 0 0 5px color-mix(in srgb,var(--color-focus) 35%,transparent)}

/* ── certificate on small screens: portrait card instead of a shrunken A4 page (print stays A4 landscape) ── */
@media screen and (max-width:620px){
  .cert-sheet{aspect-ratio:auto;padding:8px}
  .cert-frame{margin:0;padding:36px 20px 24px;outline-offset:-5px}
  .cert-brand{font-size:15px}
    .cert-kicker{width:auto;margin:26px 0 10px;padding-top:18px;font-size:10px;letter-spacing:.14em}
  .cert-page main .cert-path{font-size:30px}
  .cert-label{margin-top:26px;font-size:10px}
  .cert-name{margin-top:6px;font-size:24px}
  .cert-text{max-width:none;margin-top:10px;font-size:13px}
  .cert-meta{grid-template-columns:1fr;gap:14px;margin-top:32px;padding-top:18px}
  .cert-meta span{gap:3px;font-size:10px}
  .cert-meta b{font-size:13px}
  .cert-meta span:last-child{text-align:left}
}

/* ── type scale and page blocks, matched to emobility.directory ─────────── */
main>section.block{padding:0;margin-top:120px}
main>section.block.tight-top{margin-top:40px}
main>section.block:last-child{margin-bottom:24px}
.page-intro{padding:64px 0 0}
.page-head h1{margin:0 0 14px;max-width:760px;font-size:48px;font-weight:500;line-height:1.05;letter-spacing:-.035em}
.page-head p{margin:0;max-width:600px;color:var(--color-muted);font-size:18px;line-height:1.6}
.ph-meta{margin:22px 0 0;color:var(--color-muted);font-size:var(--text-sm)}
.ph-meta [data-path-progress]{color:var(--color-ink);white-space:nowrap}
.cta-row{margin-top:26px}
.page-intro--center{text-align:center}
.page-intro--center .page-head h1,.page-intro--center .page-head p{margin-left:auto;margin-right:auto;text-align:center}
.page-intro--center .page-head p{text-wrap:balance}
@media (max-width:620px){.page-intro--center,.page-intro--center .page-head h1,.page-intro--center .page-head p{text-align:left;margin-left:0}}
.eyebrow{margin-bottom:14px;font-size:11px}
.state-note{color:var(--color-faint);font-weight:500;letter-spacing:0;text-transform:none}
.quiet{color:var(--color-faint)!important;font-size:var(--text-sm)!important}
.two-col{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:72px;align-items:start}
.col-head h2{margin:0 0 12px;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
.col-head h2 a{text-decoration:none}
.col-head h2 a:hover{color:var(--color-muted)}
.col-head p{margin:0 0 12px;color:var(--color-muted);font-size:var(--text-sm);line-height:1.7}
.col-head .button-row{margin-top:22px;gap:20px}
.center-head{max-width:800px;margin:0 auto 48px;text-align:center}
.center-head>p{max-width:560px;text-wrap:balance}
.center-head h2{margin:0;text-align:center;text-wrap:balance;font-size:40px;font-weight:500;line-height:1.1;letter-spacing:-.04em}
.center-head p{margin:14px auto 0;color:var(--color-muted);font-size:15px;line-height:1.7}
.text-link.cta-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.two-col{grid-template-columns:1fr;gap:28px}}
@media (max-width:620px){main>section.block{margin-top:80px}.page-head h1{font-size:36px}.center-head h2{font-size:30px;text-align:left}.center-head{text-align:left;margin-left:0}.center-link{text-align:left}}

.crumbs{display:flex;gap:10px;margin:0 0 32px;color:var(--color-faint);font-size:var(--text-sm)}
.crumbs a{color:var(--color-muted);text-decoration:none}
.crumbs a:hover{color:var(--color-ink)}

/* dot list for outcomes */
.outcomes h2{margin:0 0 20px;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.35;max-width:600px}
.dot-list{margin:0;padding:0;list-style:none;display:grid;gap:10px;max-width:600px}
.dot-list li{position:relative;padding-left:20px;color:var(--color-muted);font-size:var(--text-sm);line-height:1.7}
.dot-list li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--color-ink)}


/* inline field: input and button inside one filled pill (as the directory search) */
.verify-row{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid transparent;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-ink) 6%,transparent);transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.verify-row:focus-within{border-color:var(--color-line-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-ink) 6%,transparent)}
.verify-row .input{flex:1;min-width:0;height:46px;padding:0 18px;border:0;background:transparent;box-shadow:none}
.verify-row .input:focus{border:0;box-shadow:none}
.verify-row .button{flex:none;min-height:46px;padding:0 24px}
.verify-row{margin-top:32px}
.verify-row .input{font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:uppercase}
.verify-row .input::placeholder{text-transform:none}
:root[data-theme="dark"] .verify-row{background:var(--color-surface-soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .verify-row{background:var(--color-surface-soft)}}

/* ── home ──────────────────────────────────────────────────────────────── */
.home-hero{padding:144px 0 0;text-align:center}
.home-hero h1{max-width:720px;margin:0 auto 20px;font-size:56px;font-weight:500;line-height:1.1;letter-spacing:-.05em;text-align:center}
.home-lead{max-width:600px;margin:0 auto;color:var(--color-muted);font-size:18px;line-height:1.6}
.home-cta{justify-content:center;gap:22px;margin-top:36px}
/* hero ask: the header answers, directly on the home page (as the directory's hero search) */
.hero-ask{position:relative;max-width:680px;margin:36px auto 0;text-align:left;border-radius:29px;background:color-mix(in srgb,var(--color-surface) 75%,var(--color-canvas));box-shadow:0 0 0 1px var(--color-line);transition:border-radius .25s var(--ease-standard,ease),box-shadow var(--motion-fast)}
.hero-ask:focus-within{box-shadow:0 0 0 1px var(--color-line),0 0 0 3px color-mix(in srgb,var(--color-ink) 8%,transparent)}
.hero-ask.is-open{border-radius:24px}
.hero-ask__row{display:flex;align-items:center;gap:4px;padding:5px 5px 5px 20px}
.hero-ask__row svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--color-muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hero-ask__row input{flex:1;min-width:0;min-height:48px;padding:0 12px;border:0;outline:0;background:transparent;color:var(--color-ink);font:inherit;font-size:var(--text-body)}
.hero-ask__row input::placeholder{color:var(--color-muted)}
.hero-ask__row .button{flex:none;min-height:48px;min-width:96px;justify-content:center}
/* the answers unfold inside the same surface */
.hero-ask__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease-standard,ease)}
.hero-ask.is-open .hero-ask__panel{grid-template-rows:1fr}
.hero-ask__results{min-height:0;overflow:hidden;margin:0 20px;padding:0;border:0;max-height:none;background:none}
.hero-ask.is-open .hero-ask__results{padding:6px 0 14px;border-top:1px solid var(--color-line)}
.hero-ask:not(.is-open) .hero-ask__results{visibility:hidden}
.hero-ask__results .search-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.hero-ask__results .search-row:hover,.hero-ask__results .search-row.focused{background:color-mix(in srgb,var(--color-ink) 4%,transparent)}
.site-search .search-row,.hero-ask__results .search-row{transition:padding var(--motion-fast),background var(--motion-fast)}
.site-search .search-row:hover,.site-search .search-row.focused,.hero-ask__results .search-row:hover,.hero-ask__results .search-row.focused{padding-left:14px;padding-right:14px}
.hero-ask__results .search-group{color:var(--color-faint);font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
:root[data-theme="dark"] .hero-ask,:root[data-theme="dark"] .site-search .search-surface{background:var(--color-surface-soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .hero-ask,:root:not([data-theme]) .site-search .search-surface{background:var(--color-surface-soft)}}
.hero-try{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin:16px auto 0;max-width:680px;color:var(--color-muted);font-size:12px}
.hero-try button{padding:0;border:0;background:none;color:var(--color-ink);font:inherit;text-decoration:underline;text-decoration-color:var(--color-line-strong);text-underline-offset:3px;cursor:pointer}
.hero-try button:hover{text-decoration-color:var(--color-ink)}
@media (max-width:760px){.hero-ask,.hero-try{margin-left:0;justify-content:flex-start}}
.line-grid{position:relative;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:40px;margin:0;padding:0;list-style:none}
.line-grid--3{--cols:3}
.line-grid--4{--cols:4}
.line-grid::before{content:"";position:absolute;top:4px;left:0;right:0;height:1px;background:var(--color-line-strong)}
.line-grid>li{min-width:0}
.line-dot{position:relative;display:block;width:9px;height:9px;margin-bottom:24px;border-radius:50%;background:var(--color-ink)}
.line-label a.ol-stop{color:inherit;text-decoration:underline;text-decoration-color:var(--color-line-strong);text-underline-offset:3px}
.line-label a.ol-stop:hover{color:var(--color-ink);text-decoration-color:var(--color-ink)}
.line-label a.ol-stop.is-done{color:var(--color-ink)}
.path-close{max-width:760px;margin:72px auto 0;text-align:center;color:var(--color-muted);font-size:15px;line-height:1.7}
.path-close a{color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-line-strong);text-underline-offset:3px}
.path-close a:hover{text-decoration-color:var(--color-ink)}
.line-label{display:block;margin-bottom:6px;color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.line-grid h3{margin:0 0 6px;font-size:15px;font-weight:500;letter-spacing:-.01em}
.line-grid p{margin:0;text-wrap:pretty;color:var(--color-muted);font-size:14px;line-height:1.6}
.line-grid--center>li,.line-grid--center h3{text-align:center}
.line-grid--center .line-dot{margin-left:auto;margin-right:auto}
.line-grid--center::before{left:calc((100% - (var(--cols) - 1) * 40px) / (2 * var(--cols)));right:calc((100% - (var(--cols) - 1) * 40px) / (2 * var(--cols)))}
.line-grid--center p{max-width:260px;text-wrap:balance;margin-left:auto;margin-right:auto}
@media (max-width:760px){.line-grid--center>li,.line-grid--center h3{text-align:left}.line-grid--center .line-dot{margin-left:0}.line-grid--center::before{left:0;right:0}.line-grid--center p{margin-left:0}}
.center-head h2 a{text-decoration:none}
.center-head h2 a:hover{color:var(--color-muted)}
.home-faq{max-width:860px;margin:0 auto;border-top:0}
.home-faq summary{gap:24px;padding:22px 4px;font-size:var(--text-body);line-height:1.45}
.home-faq summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.home-faq p{max-width:720px;font-size:var(--text-md)}
@media (max-width:760px){
  .home-hero{padding:80px 0 0;text-align:left}
  .home-hero h1{font-size:38px;margin-left:0;text-align:left}
  .home-lead{margin-left:0}
  .home-cta{justify-content:flex-start}
  .line-grid{grid-template-columns:1fr 1fr;row-gap:44px}
  .line-grid::before{display:none}
  .line-grid>li{padding-top:20px;border-top:1px solid var(--color-line-strong)}
  .line-grid .line-dot{margin-top:-25px}
}
@media (max-width:480px){.line-grid{grid-template-columns:1fr}}

/* ── lesson: one calm reading column ───────────────────────────────────── */
.lesson-wrap .lesson{max-width:680px;margin:0 auto}
.lesson-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:32px 0 0;margin-bottom:56px}
.lt-path{color:var(--color-muted);font-size:13px;text-decoration:none}
.lt-path:hover{color:var(--color-ink)}
.lt-pos{color:var(--color-faint);font-size:var(--text-sm);font-variant-numeric:tabular-nums}
/* stop rail: vertical dots left of the reading column; number and title appear on hover */
.stop-rail{display:none}
@media (min-width:1100px){
  .lt-pos{display:none}
  /* far left, quiet while reading; full contrast and titles only when the pointer comes close */
  .stop-rail{display:block;position:fixed;z-index:40;top:50%;left:max(24px,calc(50% - 340px - 210px));padding:16px 200px 16px 16px;margin-left:-16px;transform:translateY(-50%);opacity:.38;transition:opacity var(--motion-fast)}
  .stop-rail:hover,.stop-rail:focus-within{opacity:1}
  .stop-rail ol{position:relative;display:grid;gap:14px;width:11px;margin:0;padding:0;list-style:none}
  .stop-rail ol::before{content:"";position:absolute;top:6px;bottom:6px;left:5px;width:1px;background:var(--color-line-strong)}
  .stop-rail li{padding:0!important}
  .stop-rail li::before{display:none}
  .sr-stop{position:relative;display:flex;align-items:center;width:11px;height:11px;text-decoration:none;color:var(--color-ink)}
  .sr-stop::after{content:"";position:absolute;inset:-6px -24px -6px -6px}
  .sr-dot{position:relative;z-index:1;flex:none;width:9px;height:9px;margin-left:1px;border:1px solid var(--color-line-strong);border-radius:50%;background:var(--color-canvas);transition:border-color var(--motion-fast),background var(--motion-fast)}
  .sr-stop.is-done .sr-dot{background:var(--color-ink);border-color:var(--color-ink)}
  .sr-stop[aria-current="page"] .sr-dot{width:11px;height:11px;margin-left:0;border:2px solid var(--color-ink)}
  .sr-label{position:absolute;left:24px;top:50%;display:flex;align-items:baseline;gap:10px;width:max-content;max-width:180px;padding:4px 0;transform:translate(-6px,-50%);opacity:0;pointer-events:none;color:var(--color-ink);font-size:13px;line-height:1.35;transition:opacity var(--motion-fast),transform var(--motion-fast)}
  .sr-label b{flex:none;color:var(--color-faint);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
  .sr-stop:hover .sr-label,.sr-stop:focus-visible .sr-label{opacity:1;transform:translate(0,-50%)}
  .sr-stop:hover .sr-dot{border-color:var(--color-ink)}
  .sr-stop:focus-visible{outline:none}
  .sr-stop:focus-visible .sr-dot{outline:2px solid var(--color-focus);outline-offset:3px}
}
.lesson-head h1{margin:0 0 14px;font-size:40px;font-weight:500;line-height:1.1;letter-spacing:-.035em}
.lesson-meta{margin:0;color:var(--color-muted);font-size:13px}
.done-note{color:var(--color-ink)}
/* the scene: the clock large on the left, the situation beside it, the question as a pull line */
.situation{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0 32px;margin:56px 0 0;padding:28px 0 0;border-top:1px solid var(--color-line)}
.sit-time{display:grid;align-content:start;gap:6px;padding-top:2px}
.sit-time time{color:var(--color-ink);font-size:34px;font-weight:400;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sit-time time small{color:var(--color-muted);font-size:20px;letter-spacing:-.02em}
.sit-time time i{margin-left:5px;color:var(--color-muted);font-size:13px;font-style:normal;font-weight:500;letter-spacing:.04em}
.sit-time span{color:var(--color-muted);font-size:13px;line-height:1.4}
.sit-time .sit-note{color:var(--color-faint)}
.sit-label{display:block;margin-bottom:12px;color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.situation p{margin:0 0 12px;color:var(--color-ink);font-size:18px;line-height:1.65}
.situation .sit-question{grid-column:2;margin:22px 0 0;font-size:23px;font-weight:500;line-height:1.35;letter-spacing:-.02em;text-wrap:balance}
.sit-question span{display:block;margin-bottom:8px;color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
/* guess first: a soft surface like the Ask field, with a reveal button */
.guess{margin:44px 0 0;border-radius:20px;background:color-mix(in srgb,var(--color-ink) 4%,transparent)}
.guess summary{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:center;padding:20px 24px;cursor:pointer;list-style:none}
.guess summary::-webkit-details-marker{display:none}
.guess-label{grid-column:1/-1;color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.guess-q{font-size:17px;font-weight:500;line-height:1.45;letter-spacing:-.01em}
.guess-toggle{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--color-line-strong);border-radius:var(--radius-pill);color:var(--color-ink);font-size:13px;font-weight:500;white-space:nowrap;transition:background var(--motion-fast),border-color var(--motion-fast)}
.guess-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--motion-fast)}
.guess summary:hover .guess-toggle{border-color:var(--color-ink)}
.guess[open] .guess-toggle svg{transform:rotate(180deg)}
.guess .gt-open,.guess[open] .gt-closed{display:none}
.guess[open] .gt-open{display:inline}
.guess p{margin:0 24px;padding:16px 0 22px;border-top:1px solid var(--color-line);color:var(--color-text-secondary);font-size:16px;line-height:1.7}
.guess summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:20px}
:root[data-theme="dark"] .guess{background:var(--color-surface-soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .guess{background:var(--color-surface-soft)}}
@media (max-width:620px){
  .situation{grid-template-columns:1fr;gap:18px}
  .sit-time{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .sit-time time{font-size:28px}
  .situation .sit-question{grid-column:1;font-size:20px}
  .guess summary{grid-template-columns:1fr;padding:18px 20px}
  .guess-toggle{justify-self:start}
  .guess p{margin:0 20px}
}
.prose{margin-top:52px}
.prose h2{margin:0 0 14px;font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.02em}
.prose p,.prose li{font-size:16px;line-height:1.75}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:10px}
.prose li{position:relative;padding-left:20px}
.prose li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--color-ink)}
.prose strong{font-weight:600}
.myth{margin:52px 0 0;padding:20px 0 0;border-top:1px solid var(--color-line)}
.note-label{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.myth p{margin:0;color:var(--color-muted);font-size:15px;line-height:1.75}
.myth .myth-claim{margin-bottom:8px;color:var(--color-ink);font-weight:500}
.key-takeaway.realworld{margin:36px 0 0;padding:2px 0 2px 18px;border-left:1px solid var(--color-ink)}
.key-takeaway.realworld span{margin-bottom:8px;font-size:11px}
.key-takeaway.realworld p{color:var(--color-ink);font-size:15px;line-height:1.75}
.stop-nav{display:grid;grid-template-columns:1fr 1fr;margin-top:72px}
.stop-nav a{display:grid;align-content:start;gap:8px;padding:24px 28px 26px 0;color:var(--color-ink);text-decoration:none}
.stop-nav .sn-next{padding:24px 0 26px 28px;justify-items:end;text-align:right}
.sn-meta{display:inline-flex;align-items:center;gap:8px;color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.sn-meta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--motion-fast)}
.stop-nav strong{font-size:17px;font-weight:500;line-height:1.35;letter-spacing:-.015em}
.stop-nav small{color:var(--color-muted);font-size:12px}
.stop-nav a:hover .sn-meta{color:var(--color-ink)}
.sn-prev:hover .sn-meta svg{transform:translateX(-3px)}
.sn-next:hover .sn-meta svg{transform:translateX(3px)}
.stop-nav a:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
@media (max-width:620px){
  .lesson-top{flex-direction:column;align-items:flex-start;margin-bottom:36px}
  .lesson-head h1{font-size:30px}
  .situation p{font-size:16px}
  .guess summary{grid-template-columns:1fr}
  .stop-nav{grid-template-columns:1fr}
  .stop-nav a{padding:20px 0}
  .stop-nav .sn-next{padding:20px 0;justify-items:start;text-align:left}
}

/* ── figures ───────────────────────────────────────────────────────────── */
.walk,.hub,.curve,.flowline{margin:56px 0 0;padding:22px 0 0;border-top:1px solid var(--color-line)}
.fig-head{display:grid;gap:4px;margin-bottom:22px}
.fig-head span{color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.fig-head strong{font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.35}
.fig-caption{margin:18px 0 0;color:var(--color-muted);font-size:13px;line-height:1.6}
.seg{position:relative;isolation:isolate;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:max-content;max-width:100%;margin:0 0 22px;padding:4px;border-radius:var(--radius-pill);background:var(--color-surface-soft)}
.seg::before{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--seg-count,2));border-radius:var(--radius-pill);background:var(--color-ink);content:"";transform:translateX(calc(var(--toggle-index,0) * 100%));transition:transform 320ms cubic-bezier(.22,1,.36,1)}
.seg button{position:relative;z-index:1;min-width:92px;min-height:36px;padding:6px 16px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-muted);font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color 240ms var(--ease-standard)}
.seg button[aria-selected="true"]{color:var(--color-canvas)}
.seg button[aria-selected="false"]:hover{color:var(--color-ink)}
.seg button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

/* walk-through: numbered rings on a hairline, direction arrows, protocol marks, a soft detail surface */
.ex-note{margin:0 0 20px;color:var(--color-muted);font-size:13px}
.ex-nodes{position:relative;margin:0;padding:0;list-style:none}
.ex-nodes li{padding:0!important}
.ex-nodes li::before{display:none}
.ex-node{width:100%;display:grid;gap:4px;justify-items:start;padding:0;border:0;background:transparent;color:var(--color-ink);font:inherit;text-align:left;cursor:pointer}
.ex-num{position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;margin-bottom:12px;border:1.2px solid var(--color-ink);border-radius:50%;background:var(--color-canvas);color:var(--color-ink);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;transition:background var(--motion-fast),color var(--motion-fast)}
.ex-text{display:grid;gap:2px}
.ex-text b{font-size:15px;font-weight:500;line-height:1.35;letter-spacing:-.01em}
.ex-text small{color:var(--color-muted);font-size:13px;line-height:1.4}
.ex-tag{display:inline-flex;margin-top:6px;padding:2px 8px;border:1px solid var(--color-line-strong);border-radius:var(--radius-pill);color:var(--color-muted);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ex-node:hover .ex-num{background:color-mix(in srgb,var(--color-ink) 8%,var(--color-canvas))}
.ex-node[aria-pressed="true"] .ex-num{background:var(--color-ink);color:var(--color-canvas)}
.ex-node[aria-pressed="true"] .ex-tag{border-color:var(--color-ink);color:var(--color-ink)}
.ex-node:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;border-radius:var(--radius-sm)}
.ex-detail{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 20px;align-items:start;margin-top:28px;padding:22px 24px;border-radius:20px;background:color-mix(in srgb,var(--color-ink) 4%,transparent)}
.ex-detail__num{color:var(--color-faint);font-size:34px;font-weight:400;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ex-detail span{display:block;margin-bottom:4px;color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ex-detail strong{display:block;margin-bottom:6px;font-size:17px;font-weight:500;letter-spacing:-.01em}
.ex-detail p{margin:0;color:var(--color-text-secondary);font-size:15px;line-height:1.7}
:root[data-theme="dark"] .ex-detail{background:var(--color-surface-soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .ex-detail{background:var(--color-surface-soft)}}
/* chain: a row of rings, the line between their centres, a small arrow on every link */
.walk--chain .ex-nodes{display:flex;gap:20px}
.walk--chain .ex-nodes::before{content:"";position:absolute;top:13px;left:13px;right:calc((100% - (var(--n) - 1) * 20px) / var(--n) - 13px);height:1px;background:var(--color-line-strong)}
.walk--chain .ex-nodes li{position:relative;flex:1;min-width:0}
.walk--chain .ex-nodes li:not(:last-child)::after{content:"";position:absolute;top:10px;left:calc(13px + (100% + 20px) / 2);width:6px;height:6px;border-top:1px solid var(--color-muted);border-right:1px solid var(--color-muted);transform:translateX(-50%) rotate(45deg)}
.walk--chain .ex-node,.walk--steps .ex-node{position:relative;z-index:1}
/* steps: the same rings down a vertical line, the detail beside them */
.walk--steps .ex-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start}
.walk--steps .ex-detail{margin-top:0;position:sticky;top:24px;grid-template-columns:1fr}
.walk--steps .ex-detail__num{margin-bottom:10px}
.walk--steps .ex-nodes li{position:relative}
.walk--steps .ex-nodes li:not(:last-child)::after{content:"";position:absolute;top:13px;left:13px;width:1px;height:calc(100% + 18px);background:var(--color-line-strong)}
.walk--steps .ex-nodes li+li{margin-top:18px}
.walk--steps .ex-node{grid-template-columns:26px minmax(0,1fr) auto;column-gap:16px;align-items:start}
.walk--steps .ex-num{margin:0}
.walk--steps .ex-text{padding-top:3px}
.walk--steps .ex-tag{margin:3px 0 0;justify-self:end}
@media (max-width:700px){
  .walk--chain .ex-nodes{flex-direction:column;gap:16px}
  .walk--chain .ex-nodes::before{display:none}
  .walk--chain .ex-nodes li:not(:last-child)::after{top:13px;left:13px;width:1px;height:calc(100% + 16px);border:0;background:var(--color-line-strong);transform:none}
  .walk--chain .ex-node{grid-template-columns:26px minmax(0,1fr);column-gap:16px;align-items:start}
  .walk--chain .ex-num{margin:0}
  .walk--chain .ex-text{padding-top:3px}
  .walk--chain .ex-tag{grid-column:2;margin:4px 0 0}
  .walk--steps .ex-body{grid-template-columns:1fr;gap:24px}
  .walk--steps .ex-detail{position:static}
  .walk--steps .ex-node{grid-template-columns:26px minmax(0,1fr)}
  .walk--steps .ex-tag{grid-column:2;justify-self:start;margin:4px 0 0}
  .ex-detail{grid-template-columns:1fr;padding:18px 20px}
  .ex-detail__num{font-size:26px;margin-bottom:8px}
}

/* hub: the roles around one session as a constellation (as the directory draws relationships) */
.hub-stage{position:relative;aspect-ratio:760/480;margin-top:8px}
.hub-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hc-field{fill:color-mix(in srgb,var(--color-ink) 9%,transparent)}
.hc-link{stroke:var(--color-line-strong);stroke-width:1;transition:stroke var(--motion-fast),stroke-width var(--motion-fast),opacity var(--motion-fast)}
.hc-node{fill:var(--color-canvas);stroke:var(--color-ink);stroke-width:1.4;transition:fill var(--motion-fast),opacity var(--motion-fast)}
.hc-halo{fill:none;stroke:var(--color-line);stroke-width:1;stroke-dasharray:2 3}
.hc-center{fill:var(--color-ink)}
.hub-center-label{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 30px));padding:2px 8px;background:var(--color-canvas);color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.hub-node{position:absolute;z-index:1;display:grid;gap:3px;width:max-content;max-width:170px;padding:4px 6px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-ink);font:inherit;text-align:left;cursor:pointer;transition:opacity var(--motion-fast)}
.hub-node.is-top{transform:translate(-50%,calc(-100% - 14px));justify-items:center;text-align:center}
.hub-node.is-bottom{transform:translate(-50%,14px);justify-items:center;text-align:center}
.hub-node.is-left{transform:translate(calc(-100% - 16px),-50%);justify-items:end;text-align:right}
.hub-node.is-right{transform:translate(16px,-50%)}
.hub-tag{color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.hub-node b{font-size:16px;font-weight:500;letter-spacing:-.01em}
.hub-node small{color:var(--color-muted);font-size:13px;line-height:1.4}
.hub-meta{display:none}
.hub-node:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
/* selection: the chosen role in ink, the others step back */
.hub.has-selection .hub-node:not([aria-pressed="true"]){opacity:.42}
.hub.has-selection .hc-link:not(.active),.hub.has-selection .hc-node:not(.active){opacity:.35}
.hc-link.active{stroke:var(--color-ink);stroke-width:1.6}
.hc-node.active{fill:var(--color-ink)}
.hub-detail{display:grid;gap:6px;min-height:84px;margin-top:20px;padding:16px 0 0 18px;border-left:1px solid var(--color-ink)}
.hub-detail strong{font-size:17px;font-weight:500;letter-spacing:-.01em}
.hub-detail p{margin:0;color:var(--color-text-secondary);font-size:15px;line-height:1.7}
.hub-detail p:empty{display:none}
@media (max-width:700px){
  .hub-stage{aspect-ratio:auto;display:grid;gap:2px;counter-reset:hub}
  .hub-svg,.hub-center-label{display:none}
  .hub-node{position:static;transform:none!important;width:100%;max-width:none;justify-items:start!important;text-align:left!important;padding:12px 0 12px 26px;border-top:1px solid var(--color-line);border-radius:0}
  .hub-node::before{content:"";position:absolute;left:0;top:18px;width:9px;height:9px;border:1.4px solid var(--color-ink);border-radius:50%}
  .hub-node{position:relative;left:auto!important;top:auto!important}
  .hub-node[aria-pressed="true"]::before{background:var(--color-ink)}
  .hub.has-selection .hub-node:not([aria-pressed="true"]){opacity:.6}
}

/* ── charts: the directory's chart language (grey ramps, printed values, source note) ── */
.edu-chart{margin:56px 0 0;padding:22px 0 0;border-top:1px solid var(--color-line)}
.edu-chart .chart-head{align-items:baseline;margin-bottom:20px}
.edu-chart .chart-head .chart-title{margin:0;font-size:17px;font-weight:500;letter-spacing:-.01em}
.edu-chart .chart-head span{font-size:11px;text-align:right}
.bar-meter{display:block;width:120px;height:6px;background:var(--color-line);flex:none}
.bar-meter i{display:block;height:100%;background:var(--color-ink)}
.site-stack-list{display:grid;padding-top:6px;gap:14px}
.site-stack-row{display:grid;grid-template-columns:minmax(70px,120px) 1fr;align-items:center;gap:16px;font-size:var(--text-sm)}
.site-stack-row>span{color:var(--color-muted)}
.site-stack{display:flex;height:22px}
.site-stack i{display:block;height:100%;border-right:1px solid var(--color-canvas)}
.site-stack i:last-child{border-right:0}
.s0{background:var(--chart-7)}.s1{background:var(--chart-5)}.s2{background:var(--chart-3)}.s3{background:var(--chart-1)}
.site-stack i.s0{background:var(--chart-7)}.site-stack i.s1{background:var(--chart-5)}.site-stack i.s2{background:var(--chart-3)}.site-stack i.s3{background:var(--chart-1)}
.stack-swatch{display:inline-block;width:10px;height:10px;margin-right:10px;vertical-align:-1px}
.stack-legend--single{display:grid;margin-top:20px;font-size:var(--text-sm)}
.stack-legend--single div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--color-line);color:var(--color-text-secondary)}
.stack-legend--single b{color:var(--color-ink);font-weight:500;font-variant-numeric:tabular-nums}
.dot-rows{border-top:1px solid var(--color-line)}
.dot-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid var(--color-line)}
.dot-row__label{display:block;font-size:16px}
.dot-row__sub{display:block;margin-top:3px;color:var(--color-muted);font-size:12px}
.dot-row__right{display:flex;align-items:center;gap:14px;flex:none}
.dot-row__value{min-width:44px;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.edu-columns{margin-bottom:30px}
.edu-columns .column b{font-size:11px}
.edu-columns .column span{font-size:11px}
@media (max-width:520px){.edu-chart .chart-head{flex-direction:column;gap:6px}.edu-chart .chart-head span{text-align:left}.edu-columns{gap:6px;padding:20px 0 0}.edu-columns .column b{font-size:9px;transform:translateX(-50%) rotate(-50deg);transform-origin:center;top:-26px}.bar-meter{width:72px}}

/* ── flowline: three flows on one linear time axis (stop 9) ─────────── */
.fl{display:grid}
.fl-lane{display:grid;grid-template-columns:130px minmax(0,1fr);gap:20px;border-top:1px solid var(--color-line)}
.fl-axis{border-top:1px solid var(--color-line-strong)}
.fl-label{padding:16px 0}
.fl-label b{display:block;font-size:14px;font-weight:500}
.fl-label small{display:block;margin-top:2px;color:var(--color-muted);font-size:12px}
.fl-track{position:relative;min-height:76px}
.fl-energy{min-height:112px}
.fl-energy svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:76px;overflow:visible}
.fl-area{fill:color-mix(in srgb,var(--color-ink) 7%,transparent)}
.fl-line{fill:none;stroke:var(--color-ink);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.fl-track em{position:absolute;color:var(--color-muted);font-size:11px;font-style:normal;white-space:nowrap}
.fl-peak{top:12px;transform:translateX(-50%);color:var(--color-ink)!important;font-weight:500}
.fl-low{top:50px;transform:translateX(-100%);padding-right:8px}
.fl-span{position:absolute;top:30px;height:1px;background:var(--color-ink)}
.fl-span.is-dotted{height:0;background:none;border-top:2px dotted var(--color-ink)}
.fl-dot{position:absolute;top:26px;width:9px;height:9px;margin-left:-4.5px;border:1px solid var(--color-ink);border-radius:50%;background:var(--color-canvas)}
.fl-dot.is-key{background:var(--color-ink)}
.fl-dot.is-small{top:28px;width:5px;height:5px;margin-left:-2.5px;border:0;background:var(--color-ink)}
.fl-dot.is-cdr{background:var(--color-ink)}
.fl-dot em{top:20px;left:0}
.fl-dot em.is-end{left:auto;right:0}
.fl-mid{top:46px;transform:translateX(-50%)}
.fl-ticks{min-height:30px}
.fl-ticks span{position:absolute;top:8px;transform:translateX(-50%);color:var(--color-faint);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fl-ticks span:first-child{transform:none}
.fl-ticks .is-later{color:var(--color-muted)}
@media (max-width:620px){
  .fl-lane{grid-template-columns:1fr;gap:0}
  .fl-label{padding:14px 0 0}
  .fl-axis .fl-label{display:none}
  .fl-ticks span:nth-child(2),.fl-ticks span:nth-child(3){display:none}
}

/* ── dot plot: one value per row on a shared 0 to 100% scale ─────────── */
.dplot{display:grid}
.dplot-row{display:grid;grid-template-columns:150px minmax(0,1fr) 48px;align-items:center;gap:16px;padding:10px 0;border-top:1px solid var(--color-line)}
.dplot-axis{border-top:1px solid var(--color-line-strong);padding:8px 0 0}
.dplot-label span{display:block;font-size:14px}
.dplot-label small{display:block;color:var(--color-muted);font-size:11px}
.dplot-track{position:relative;height:18px}
.dplot-track i{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--color-line)}
.dplot-stem{position:absolute;left:0;top:50%;height:1px;background:var(--color-line-strong)}
.dplot-dot{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--color-ink)}
.dplot-value{text-align:right;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.dplot-axis .dplot-track span{position:absolute;top:0;transform:translateX(-50%);color:var(--color-faint);font-size:10px;font-variant-numeric:tabular-nums}
.dplot-axis .dplot-track span:first-child{transform:none}
.dplot-axis .dplot-track span:last-child{transform:translateX(-100%)}
@media (max-width:520px){.dplot-row{grid-template-columns:96px minmax(0,1fr) 40px;gap:10px}}

/* ── Europe dot map: the directory's charging map as a static poster ──── */
.em-map svg{display:block;width:100%;height:auto}
.em-land{fill:color-mix(in srgb,var(--color-ink) 7%,transparent)}
.em-dot{fill:none;stroke:var(--color-ink);stroke-linecap:round}
.em-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:16px;color:var(--color-muted);font-size:12px}
.em-legend__title{width:100%;color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.em-legend span:not(.em-legend__title){display:inline-flex;align-items:center;gap:7px}
.em-legend svg{width:10px;height:10px;fill:var(--color-ink)}

/* ── compare: parties as dots on aligned hairlines ───────────────────── */
.compare{margin:56px 0 0;padding:22px 0 0;border-top:1px solid var(--color-line)}
.cmp-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:28px;padding:26px 0 28px;border-bottom:1px solid var(--color-line)}
.cmp-row:last-of-type{border-bottom:0}
/* the label reads level with the rail: dot centre and capital height share one line */
.cmp-label{margin-top:-6.5px}  /* measured: the capital height of the label centres on the rail of dots */
.cmp-label b{display:block;font-size:16px;font-weight:500;line-height:1.35;letter-spacing:-.01em}
.cmp-label small{display:block;margin-top:1.5px;color:var(--color-muted);font-size:13px;line-height:1.5}
.cmp-rail{position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:0 12px;margin:0;padding:0;list-style:none}
.cmp-rail::before{content:"";position:absolute;top:4px;left:4px;width:calc((100% + 12px) / var(--cols) * (var(--n) - 1));height:1px;background:var(--color-line-strong)}
.cmp-rail li{position:relative;display:grid;align-content:start;gap:2px;padding:0!important}
.cmp-rail li::before{display:none}
.cmp-rail i{position:relative;z-index:1;width:9px;height:9px;margin-bottom:10px;border:1px solid var(--color-ink);border-radius:50%;background:var(--color-canvas)}
.cmp-rail li:last-child i{background:var(--color-ink)}  /* where the row ends up */
.cmp-rail b{font-size:15px;font-weight:500;line-height:1.35;letter-spacing:-.005em;text-wrap:balance}
.cmp-rail small{max-width:190px;color:var(--color-muted);font-size:13px;line-height:1.5;text-wrap:pretty}
@media (max-width:620px){
  .cmp-row{grid-template-columns:1fr;gap:16px;padding:22px 0}
  .cmp-label{margin-top:0}
  .cmp-rail{grid-template-columns:1fr;gap:12px}
  .cmp-rail::before{display:none}
  .cmp-rail li:not(:last-child)::after{content:"";position:absolute;left:4px;top:10px;width:1px;height:calc(100% + 12px);background:var(--color-line-strong)}
  .cmp-rail li{grid-template-columns:9px minmax(0,1fr);column-gap:14px}
  .cmp-rail i{grid-row:1/3;margin:5px 0 0}
}

/* ── stop feedback (as in the directory) ────────── */
.page-feedback{margin:56px 0 0;padding:22px 0}
.pf-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 10px;color:var(--color-muted);font-size:14px}
.pf-row span{flex-basis:100%;text-align:center}
.pf-btn{width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--color-line-strong);border-radius:50%;background:transparent;color:var(--color-ink);cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
.pf-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pf-btn:hover{background:var(--color-surface-soft)}
.pf-btn[aria-pressed="true"]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-canvas)}
.pf-form{max-width:520px;margin:24px auto 0;display:grid;gap:18px;text-align:center}
.pf-form fieldset{margin:0;padding:0;border:0}
.pf-form legend{width:100%;margin-bottom:14px;font-size:var(--text-sm);font-weight:500;text-align:center}
.pf-reasons{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:fit-content;margin:0 auto;text-align:left;font-size:var(--text-sm)}
.pf-form .field{text-align:left}
.pf-form .button-row{justify-content:center}
.pf-thanks{margin:0;text-align:center;color:var(--color-muted);font-size:var(--text-sm)}
.pf-form textarea.input{height:auto;min-height:120px;padding:14px 20px;border-radius:var(--radius-md);line-height:1.6;resize:vertical}

/* ── ask: answers in the header search ──────────────────────────────── */
.ask-answer{display:grid;gap:8px;padding:6px 0 14px;border-bottom:1px solid var(--color-line)}
.ask-answer:last-child{border-bottom:0;padding-bottom:4px}
.ask-q{font-size:17px;font-weight:500;letter-spacing:-.01em}
.ask-answer p{max-width:720px;margin:0;color:var(--color-text-secondary);font-size:15px;line-height:1.65}
.ask-link .q{color:var(--color-ink);font-weight:500}
.search-row .q small{display:block;margin-top:2px;color:var(--color-muted);font-size:12px;line-height:1.5}
button.search-row{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 10px}
.ask-chip{padding:6px 12px;border:1px solid var(--color-line-strong);border-radius:var(--radius-pill);background:transparent;color:var(--color-ink);font:inherit;font-size:13px;cursor:pointer}
.ask-chip:hover{border-color:var(--color-ink)}
.search-empty .text-link{font-size:inherit}

/* ── footnotes and sources (same pattern as the directory) ────────────── */
.fn{line-height:0;margin-left:2px}
.fn button{position:relative;border:0;background:none;padding:0 1px;color:var(--color-muted);font:600 10px/1 var(--font-sans,inherit);cursor:pointer;vertical-align:super;transition:color var(--motion-fast)}
.fn button::after{content:"";position:absolute;inset:-9px -7px}
.fn button:hover,.fn button.is-on{color:var(--color-ink);text-decoration:underline;text-underline-offset:2px}
.term{display:inline;margin:0;padding:0;border:0;border-bottom:1px dotted var(--color-faint);background:none;color:inherit;font:inherit;line-height:inherit;cursor:help}
.term:hover,.term.is-on{border-bottom-color:var(--color-ink)}
.term-notes{display:none}
.fn-sheet__inner p b{font-weight:600}
.fn-sheet__inner p .text-link{white-space:nowrap}
.fn-sheet{position:fixed;left:0;right:0;bottom:0;z-index:190;background:var(--color-surface);border-top:1px solid var(--color-line);box-shadow:0 -12px 40px color-mix(in srgb,var(--neutral-950) 8%,transparent)}
.fn-sheet__inner{width:min(680px,calc(100% - 32px));margin:0 auto;padding:18px 0 22px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;font-size:var(--text-sm);line-height:1.6}
.fn-sheet__inner p{margin:0;color:var(--color-ink)}
.fn-sheet__n{color:var(--color-muted);font-weight:600}
.fn-sheet__close{border:0;background:none;color:var(--color-ink);font:inherit;font-weight:500;cursor:pointer}
.fn-sheet a{color:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.fn-notes{display:none}
@media print{.fn-notes{display:grid;gap:6px;margin:40px 0 0;padding:16px 0 0 18px;border-top:1px solid var(--color-line);color:var(--color-muted);font-size:10pt;line-height:1.5}.fn-notes a{color:inherit;text-decoration:none}.fn button{color:inherit}}

/* ── moments: the whole session on one dot rail (stop 9) ──────────────── */
.moments-list{position:relative;margin:24px 0 0;padding:0;list-style:none}
.moments-list li{position:relative;display:grid;grid-template-columns:84px 9px minmax(0,1fr);gap:0 16px;align-items:baseline;padding:0 0 22px}
.moments-list li:last-child{padding-bottom:0}
.moments-list li::before{display:none}
.moments-list li:not(:last-child)::after{content:"";position:absolute;top:10px;height:100%;left:calc(84px + 16px + 4px);width:1px;background:var(--color-line-strong)}
.moments-list time{text-align:right;color:var(--color-faint);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.moments-list i{position:relative;z-index:1;align-self:start;width:9px;height:9px;margin-top:6px;border:1px solid var(--color-ink);border-radius:50%;background:var(--color-canvas)}
.moments-list p{margin:0!important}
.moments-list small{display:block;margin-top:4px;color:var(--color-faint);font-size:12px}
.moments-list small a{color:inherit}
.moments-list small a:hover{color:var(--color-ink)}
.moments-close{margin-top:28px!important;padding-left:calc(84px + 16px + 9px + 16px);color:var(--color-ink);font-weight:500}
@media (max-width:520px){
  .moments-list li:not(:last-child)::after{left:4px;top:12px}
  .moments-list li{grid-template-columns:9px minmax(0,1fr);grid-template-rows:auto auto}
  .moments-list time{grid-column:2;text-align:left}
  .moments-list i{grid-column:1;grid-row:1;align-self:center;margin-top:0}
  .moments-list div{grid-column:2}
  .moments-close{padding-left:25px}
}

/* ── quiz: rows with a dot, line and icon instead of colour ────────────── */
.lesson-quiz{margin-top:72px;padding-top:24px;border-top:1px solid var(--color-line-strong);scroll-margin-top:24px}
.quiz-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:20px}
.lesson-quiz h2{margin:0 0 6px;font-size:22px;font-weight:500;letter-spacing:-.02em}
.quiz-dots{position:relative;display:flex;align-items:center;gap:14px;padding-bottom:6px}
.quiz-dots::before{content:"";position:absolute;left:5px;right:5px;top:calc(50% - 3px);height:1px;background:var(--color-line-strong)}
.qd{position:relative;z-index:1;width:11px;height:11px;padding:0;border:1.2px solid var(--color-line-strong);border-radius:50%;background:var(--color-canvas);cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast)}
.qd::after{content:"";position:absolute;inset:-7px}
.qd.is-done{background:var(--color-ink);border-color:var(--color-ink)}
.qd.is-current{border:2px solid var(--color-ink);width:13px;height:13px}
.qd:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
/* the question on a soft surface, as the detail panels and Guess first */
.quiz-stage{border-radius:20px;background:color-mix(in srgb,var(--color-ink) 4%,transparent)}
:root[data-theme="dark"] .quiz-stage{background:var(--color-surface-soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .quiz-stage{background:var(--color-surface-soft)}}
.lesson-quiz .quiz{display:none;margin:0;padding:26px 28px 24px;border:0;background:transparent}
.lesson-quiz .quiz.is-current{display:block}
.quiz-top{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.quiz-num{color:var(--color-faint);font-size:30px;font-weight:400;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.quiz-top span{color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.lesson-quiz .question,.assess-q .question{margin:0 0 16px;font-size:19px;font-weight:500;line-height:1.45;letter-spacing:-.015em}
.lesson-quiz .quiz-options,.assess-q .quiz-options{display:grid;gap:4px;margin:0}
.lesson-quiz .quiz-option,.assess-option{display:flex;align-items:flex-start;gap:14px;width:100%;padding:11px 14px;margin:0 -14px;width:calc(100% + 28px);border:0;border-radius:12px;background:transparent;color:var(--color-ink);font:inherit;font-size:15px;line-height:1.5;text-align:left;cursor:pointer;opacity:1;transition:background var(--motion-fast)}
.lesson-quiz .quiz-option:hover:not(:disabled),.assess-option:hover{background:color-mix(in srgb,var(--color-ink) 5%,transparent)}
.qo-mark{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border:1.2px solid var(--color-line-strong);border-radius:50%;background:var(--color-canvas);color:var(--color-ink);transition:border-color var(--motion-fast),background var(--motion-fast)}
.qo-mark svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lesson-quiz .quiz-option:hover:not(:disabled) .qo-mark,.assess-option:hover .qo-mark{border-color:var(--color-ink)}
.lesson-quiz .quiz-option:disabled{cursor:default;opacity:1}
.lesson-quiz .quiz.is-answered .quiz-option:not(.correct):not(.incorrect){color:var(--color-faint)}
.lesson-quiz .quiz-option.correct{font-weight:500;background:color-mix(in srgb,var(--color-ink) 6%,transparent)}
.lesson-quiz .quiz-option.correct .qo-mark{border-color:var(--color-ink);background:var(--color-ink);color:var(--color-canvas)}
.lesson-quiz .quiz-option.incorrect{color:var(--color-muted);text-decoration:line-through;text-decoration-color:var(--color-faint)}
.lesson-quiz .quiz-option.incorrect .qo-mark{border:1.2px dashed var(--color-ink);color:var(--color-ink)}
.lesson-quiz .quiz-option:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.lesson-quiz .quiz-feedback{margin:14px 0 0;padding:14px 0 0;border:0;border-top:1px solid var(--color-line);background:transparent;color:var(--color-text-secondary);font-size:15px;line-height:1.65}
.lesson-quiz .quiz-feedback b{color:var(--color-ink);font-weight:600}
.quiz-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.quiz-nav .button:disabled{opacity:.35;cursor:default}
@media (max-width:620px){
  .quiz-head{flex-direction:column;align-items:flex-start;gap:12px}
  .lesson-quiz .quiz{padding:22px 20px 20px}
  .lesson-quiz .quiz-option{padding:11px 10px;margin:0 -10px;width:calc(100% + 20px)}
  .quiz-nav{justify-content:stretch}.quiz-nav .button{flex:1;justify-content:center}
}
.quiz-result{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding:22px 0 0;border-top:1px solid var(--color-ink)}
.quiz-result[hidden]{display:none}
.quiz-result .note-label{margin-bottom:4px}
.quiz-result p{margin:0;font-size:15px;font-weight:500;line-height:1.5;max-width:420px}
.quiz-result .button-row{gap:10px}

/* ── final assessment: dot navigator, quiet questions ──────────────────── */
.assess-intro .page-head h1{font-size:40px}
/* the assessment on the same soft surface as the stop quizzes */
.assess-form{padding:26px 28px 24px;border-radius:20px;background:color-mix(in srgb,var(--color-ink) 4%,transparent)}
:root[data-theme="dark"] .assess-form{background:var(--color-surface-soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .assess-form{background:var(--color-surface-soft)}}
@media (max-width:620px){.assess-form{padding:22px 20px 20px}.assess-option{padding:11px 10px!important;margin:0 -10px!important;width:calc(100% + 20px)!important}}
.assess-gate{padding:22px 0 0;border-top:1px solid var(--color-line-strong)}
.assess-gate h2{margin:0 0 8px;font-size:22px;font-weight:500;letter-spacing:-.02em}
.assess-gate p{margin:0 0 20px;color:var(--color-muted);font-size:var(--text-sm);line-height:1.7}
.assess-gate .button-row{gap:22px}
.qnav{position:relative;display:flex;flex-wrap:nowrap;width:max-content;gap:14px;margin-bottom:26px;padding:4px 0}
.qnav::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:var(--color-line-strong)}
.qnav .qnav-btn{position:relative;z-index:1;width:11px;height:11px;padding:0;border:1px solid var(--color-line-strong);border-radius:50%;background:var(--color-canvas);cursor:pointer;transition:border-color var(--motion-fast),background var(--motion-fast)}
.qnav .qnav-btn::after{content:"";position:absolute;inset:-8px}
.qnav .qnav-btn:hover{border-color:var(--color-ink)}
.qnav .qnav-btn.is-answered{background:var(--color-ink);border-color:var(--color-ink)}
.qnav .qnav-btn.is-current{width:13px;height:13px;border:2px solid var(--color-ink)}
.qnav .qnav-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.assess-q{margin:0;padding:0;border:0;min-width:0}
.assess-q .quiz-top{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.assess-q .quiz-top>span{color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.assess-q .question{float:left;width:100%;padding:0}
.assess-q .question+*{clear:both}
.assess-option input{position:absolute;opacity:0;pointer-events:none}
.assess-option:has(input:checked){font-weight:500;background:color-mix(in srgb,var(--color-ink) 6%,transparent)}
/* a chosen answer reads as filled: an ink disc with a small canvas dot, like a selected radio button */
.assess-option:has(input:checked) .qo-mark{border-color:var(--color-ink);background:var(--color-ink);box-shadow:inset 0 0 0 6px var(--color-ink),inset 0 0 0 10px var(--color-canvas)}
.assess-option:has(input:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px}
.assess-actions{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--color-line)}
.assess-actions [data-prev] svg,.assess-actions [data-next] svg,[data-retake] svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.assess-count{flex:1;text-align:center;color:var(--color-faint);font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.button:disabled{opacity:.45;cursor:not-allowed}
.result-card{display:grid;grid-template-columns:24px 1fr;gap:14px;padding:22px 0 0;border-top:1px solid var(--color-ink)}
.result-card.is-fail{border-top-style:dashed}
.result-card h2{margin:0 0 6px;font-size:28px;font-weight:500;letter-spacing:-.03em}
.result-card p{margin:0;color:var(--color-muted);font-size:var(--text-sm);line-height:1.7}
.result-card .note-label{margin-bottom:4px}
.result-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.review-list{margin:20px 0 0 38px;padding:0;list-style:none;display:grid;gap:8px}
.review-list .cta-arrow svg,.cert-howto .cta-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-retake-row]{margin:24px 0 0 38px}
.claim-form{display:grid;gap:18px;margin-top:36px;padding-top:24px;border-top:1px solid var(--color-line)}
.claim-form h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.02em}
@media (max-width:620px){.assess-count{display:none}.assess-actions{justify-content:space-between}.qnav{gap:12px}}

/* ── stop bar on small screens: position and next ──────────────────────── */
.stop-bar{display:none}
@media (max-width:760px){
  .stop-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--color-canvas) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--color-line);transform:translateY(110%);transition:transform .28s cubic-bezier(.22,.8,.24,1)}
  .stop-bar.is-visible{transform:none}
  .stop-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .sb-pos{color:var(--color-muted);font-size:var(--text-sm);font-variant-numeric:tabular-nums}
  .sb-pos b{color:var(--color-ink);font-weight:600}
  .sb-next{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--radius-pill);background:var(--color-ink);color:var(--color-canvas);font-size:var(--text-sm);font-weight:500;text-decoration:none}
  .sb-next svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .lesson-page .site-footer{padding-bottom:88px}
}

/* ── legal pages (from the live placeholder) ──────────────────────────── */
.legal-section{padding:56px 0 40px}
.wrap.legal{width:min(780px,calc(100% - var(--page-gutter) - var(--page-gutter)));margin-inline:auto}
.legal .crumb{margin:0 0 40px;color:var(--color-muted);font-size:var(--text-ui)}
.legal .crumb a{text-decoration:none}
.legal .crumb a:hover{color:var(--color-ink)}
.legal h1{margin:0 0 35px;font-size:var(--text-heading);font-weight:400;line-height:1.06;letter-spacing:-.05em}
.legal h2{margin:43px 0 12px;font-size:var(--text-subheading);font-weight:500;line-height:1.2;letter-spacing:-.04em}
.legal p,.legal li{margin:0 0 16px;color:var(--color-muted);font-size:var(--text-body);line-height:1.75}
.legal ul{padding-left:20px}
.legal p a{color:var(--color-ink)}
.legal code.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-label);padding:2px 5px}
.lang-toggle{position:relative;isolation:isolate;display:inline-flex;padding:4px;margin-bottom:42px;border-radius:var(--radius-pill);background:var(--color-surface-soft)}
.lang-toggle::before{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 2);border-radius:var(--radius-pill);background:var(--color-ink);content:"";transform:translateX(calc(var(--toggle-index,0) * 100%));transition:transform 320ms cubic-bezier(.22,1,.36,1)}
.lang-toggle button{position:relative;z-index:1;width:98px;min-height:36px;padding:6px 16px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-muted);font:inherit;font-size:var(--text-ui);font-weight:500;cursor:pointer}
.lang-toggle button.active{color:var(--color-canvas)}
.lang-toggle button:not(.active):hover{color:var(--color-ink)}
.lang-block{display:none}
.lang-block.active{display:block}
.lang-note,.legal .legal-updated{font-size:var(--text-label);color:var(--color-muted)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* ── all learning paths: numbered rows by group, as the directory lists ─── */
.pl-group+.pl-group{margin-top:80px}
.path-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--color-line-strong)}
.pl-row{display:grid;grid-template-columns:32px minmax(0,1fr) 132px;gap:20px;align-items:baseline;padding:20px 0 21px;border-bottom:1px solid var(--color-line);color:var(--color-ink);text-decoration:none}
.pl-main{display:block;transition:transform var(--motion-fast)}
.pl-row:hover .pl-main{transform:translateX(6px)}
.pl-row:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.pl-num{color:var(--color-faint);font-size:12px;font-variant-numeric:tabular-nums}
.pl-main b{display:block;font-size:17px;font-weight:500;line-height:1.35;letter-spacing:-.015em}
.pl-main small{display:block;max-width:560px;margin-top:5px;color:var(--color-muted);font-size:14px;line-height:1.6;text-wrap:pretty}
.pl-meta{display:grid;gap:4px;justify-items:end;text-align:right;color:var(--color-faint);font-size:12px;white-space:nowrap}
.pl-status{color:var(--color-muted)}
.pl-status:empty{display:none}
.em-credit{margin:8px 0 0;color:var(--color-faint);font-size:11px}
/* reading state from this browser: quiet text, a filled dot once a path is read in full */
[data-read-state].is-read,[data-read-state].is-cert{color:var(--color-ink)}
[data-read-state].is-read::before,[data-read-state].is-cert::before{content:"";display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;border-radius:50%;background:var(--color-ink)}

/* ── home: where the reader left off ───────────── */
.home-resume{margin:22px 0 0;color:var(--color-muted);font-size:var(--text-sm);text-align:center}
@media (max-width:620px){.home-resume{text-align:left}}
.home-resume a{color:var(--color-ink);text-underline-offset:3px;text-decoration-color:var(--color-line-strong)}
@media (max-width:620px){
  .pl-group+.pl-group{margin-top:56px}
  .pl-row{grid-template-columns:28px minmax(0,1fr);gap:4px 12px}
  .pl-meta{grid-column:2;display:flex;gap:12px;margin-top:8px;text-align:left}
}

/* ── a path in preparation: acts with their planned stops ─ */
.crumbs--center{justify-content:center}
.ph-status{color:var(--color-ink);white-space:nowrap}
.ph-meta a{color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-line-strong);text-underline-offset:3px}
.ph-meta a:hover{text-decoration-color:var(--color-ink)}
.act-stops{margin:20px 0 0;padding:0;list-style:none;border-top:1px solid var(--color-line)}
.act-stops li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px;padding:11px 0 12px;border-bottom:1px solid var(--color-line);color:var(--color-ink);font-size:14px;line-height:1.5;text-wrap:pretty}
.act-stops span{color:var(--color-faint);font-size:12px;font-variant-numeric:tabular-nums;line-height:1.75}
.path-nav{margin-top:0;border-top:1px solid var(--color-line)}
@media (max-width:900px){
  .act-grid{grid-template-columns:1fr;row-gap:48px;max-width:560px}
  .act-grid::before{display:none}
  .act-grid>li{padding-top:20px;border-top:1px solid var(--color-line-strong)}
  .act-grid .line-dot{margin-top:-25px}
}
@media (max-width:620px){.crumbs--center{justify-content:flex-start}}

/* ── generic figures (any path): line plot, stacked shares, strip, matrix, key figures ─ */
.lplot{position:relative;padding:4px 0 0}
.lplot-area-wrap{position:relative;height:230px;margin-right:56px}
.lplot svg{display:block;width:100%;height:100%;overflow:visible}
.lplot-grid{fill:none;stroke:var(--color-line);stroke-width:1;vector-effect:non-scaling-stroke}
.lplot-area{fill:color-mix(in srgb,var(--color-ink) 7%,transparent)}
.lplot-line{fill:none;stroke:var(--color-ink);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round}
.lplot-line.is-soft{stroke:var(--color-muted);stroke-width:1.5}
.lplot-line.is-dashed{stroke-width:1.5;stroke-dasharray:6 5}
.lplot-line.is-rule{stroke:var(--color-ink);stroke-width:1;stroke-dasharray:3 4}
.lplot-y{position:absolute;top:0;bottom:0;left:100%;width:56px;pointer-events:none}
.lplot-y span{position:absolute;left:10px;transform:translateY(50%);color:var(--color-faint);font-size:11px;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.lplot-x{position:relative;height:16px;margin:8px 56px 0 0;color:var(--color-faint);font-size:var(--text-label);font-variant-numeric:tabular-nums}
.lplot-x span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.lplot-x span.is-start{transform:none}
.lplot-x span.is-end{transform:translateX(-100%)}
.lplot-label{position:absolute;transform:translate(-50%,-8px);padding:0 4px;background:var(--color-canvas);color:var(--color-ink);font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;pointer-events:none}
.lplot-label.is-below{transform:translate(-50%,calc(100% + 8px))}
.lplot-label.is-end{transform:translate(-100%,-8px)}
.lplot-label.is-below.is-end{transform:translate(-100%,calc(100% + 8px))}
.lplot-mark{position:absolute;width:0;height:0;pointer-events:none}
.lplot-mark i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border:2px solid var(--color-canvas);border-radius:50%;background:var(--color-ink);box-shadow:0 0 0 1px var(--color-ink)}
.lplot-mark.is-ring i{background:var(--color-canvas)}
.lplot-mark b{position:absolute;left:0;bottom:12px;transform:translateX(-50%);padding:0 4px;background:var(--color-canvas);font-size:12px;font-weight:500;line-height:1.25;white-space:nowrap}
.lplot-mark.is-below b{bottom:auto;top:12px}
.lplot-mark.is-end b{transform:translateX(-100%)}
.lplot-mark.is-left b{transform:translateX(-100%);left:-10px;bottom:-7px}
.lplot-mark.is-right b{transform:none;left:10px;bottom:-7px}
@media (max-width:620px){.lplot-area-wrap{height:200px;margin-right:44px}.lplot-y{width:44px}.lplot-y span{left:6px;font-size:10px}.lplot-x{margin-right:44px}.lplot-label,.lplot-mark b{font-size:11px}}

.stk{display:grid;gap:10px}
.stk-row{display:grid;grid-template-columns:120px minmax(0,1fr) 44px;align-items:center;gap:14px;font-size:var(--text-sm)}
.stk-label{color:var(--color-muted);line-height:1.3}
.stk-label small{display:block;color:var(--color-faint);font-size:11px}
.stk-row b{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.stk-bar{display:flex;height:16px}
.stk-bar i{display:block;height:100%;border-right:1px solid var(--color-canvas)}
.stk-bar i:last-child{border-right:0}
.stk-row.is-total{margin-bottom:8px;padding-bottom:16px;border-bottom:1px solid var(--color-line)}
.stk-row.is-total .stk-label{color:var(--color-ink);font-weight:500}
.stk-row.is-total .stk-bar{height:22px}
.stk-head{color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.stk-head span:last-child{text-align:right}
.stk-legend{margin-top:26px}
.stk-legend-title{margin:0 0 8px;color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:520px){.stk-row{grid-template-columns:86px minmax(0,1fr) 38px;gap:10px}}

.strip{position:relative;padding-top:4px}
.strip-marks{position:relative;height:22px}
.strip-mark{position:absolute;bottom:0;top:0}
.strip-mark b{position:absolute;bottom:4px;left:0;transform:translateX(-50%);font-size:12px;font-weight:500;white-space:nowrap}
.strip-mark::after{content:"";position:absolute;left:0;top:22px;height:var(--strip-h,120px);border-left:1px dashed var(--color-ink)}
.strip-mark.is-left b{transform:translateX(-100%);padding-right:6px}
.strip-mark.is-right b{transform:none;padding-left:6px}
.strip-dots{position:relative;margin-top:10px;border-bottom:1px solid var(--color-line-strong)}
.strip-dots i{position:absolute;width:9px;height:9px;margin:0 0 3px -4.5px;border-radius:50%;background:var(--color-ink)}
.strip-axis{position:relative;height:16px;margin-top:8px;color:var(--color-faint);font-size:var(--text-label);font-variant-numeric:tabular-nums}
.strip-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.strip-axis span:first-child{transform:none}
.strip-axis span:last-child{transform:translateX(-100%)}
.strip-ends{position:relative;height:18px;margin-top:4px;color:var(--color-muted);font-size:12px}
.strip-end{position:absolute;top:0;white-space:nowrap}
.strip-end.is-low{transform:translateX(-4px)}
.strip-end.is-high{transform:translateX(calc(-100% + 4px))}

.mtx{margin:56px 0 0;padding:22px 0 0;border-top:1px solid var(--color-line)}
.mtx-scroll{overflow-x:auto}
.mtx table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.mtx thead td{border-bottom:1px solid var(--color-line-strong)}
.mtx thead th{padding:0 6px 10px;color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.06em;text-align:center;text-transform:uppercase;border-bottom:1px solid var(--color-line-strong);white-space:nowrap}
.mtx tbody th{padding:14px 16px 14px 0;text-align:left;font-weight:400;vertical-align:middle}
.mtx tbody th b{display:block;font-size:15px;font-weight:500}
.mtx tbody th small{display:block;margin-top:2px;color:var(--color-muted);font-size:12px;line-height:1.4}
.mtx tbody td{padding:14px 6px;text-align:center;vertical-align:middle}
.mtx tbody tr{border-bottom:1px solid var(--color-line)}
.mtx-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--color-ink);vertical-align:middle}
.mtx-no{display:inline-block;width:12px;height:1px;background:var(--color-line-strong);vertical-align:middle}
.mtx td small{color:var(--color-muted);font-size:12px;white-space:nowrap}
@media (max-width:620px){.mtx thead th{font-size:10.5px;letter-spacing:.02em;padding:0 2px 10px}.mtx tbody th{padding-right:6px;min-width:0}.mtx tbody th b{font-size:13px;line-height:1.3}.mtx tbody th small{display:none}.mtx tbody td{padding:12px 2px}.mtx td small{font-size:11px}}

.kf{margin:56px 0 0;padding:22px 0 0;border-top:1px solid var(--color-line)}
.kf-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:28px}
.kf-item{display:grid;align-content:start;gap:6px;padding-top:14px;border-top:1px solid var(--color-line-strong)}
.kf-item>span{color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.kf-item strong{font-size:34px;font-weight:500;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.kf-item strong small{margin-left:4px;color:var(--color-muted);font-size:15px;font-weight:500;letter-spacing:0}
.kf-item p{margin:0;color:var(--color-muted);font-size:13px;line-height:1.55;text-wrap:pretty}
@media (max-width:720px){.kf-grid{grid-template-columns:1fr 1fr;row-gap:28px}.kf-item strong{font-size:30px}}
.stk.is-single .stk-row.is-total{margin:0;padding:0;border:0}
.stk.is-single .stk-row{grid-template-columns:120px minmax(0,1fr) 44px}
@media (max-width:520px){.stk.is-single .stk-row{grid-template-columns:minmax(0,1fr) 44px;row-gap:8px}.stk.is-single .stk-label{grid-column:1/-1}}
.lplot-unit{display:block;margin:0 0 10px;color:var(--color-faint);font-size:11px;text-align:right;white-space:nowrap}
.stk-row.no-value{grid-template-columns:120px minmax(0,1fr)}
.stk-legend.is-table div{display:grid;grid-template-columns:minmax(0,1fr) repeat(var(--cols),112px);gap:12px}
.stk-legend.is-table b{text-align:right}
.stk-legend .stk-thead{border-top:0;color:var(--color-faint);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.stk-legend .stk-thead b{font-weight:600;color:var(--color-faint)}
@media (max-width:520px){.stk-row.no-value{grid-template-columns:86px minmax(0,1fr)}.stk-legend.is-table div{grid-template-columns:minmax(0,1fr) repeat(var(--cols),64px)}}

/* ── glossary: A to Z on hairlines, one page per term ─────────────────── */
.gl-letters{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:880px;margin:32px auto 0}
.gl-letters a,.gl-letters span{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:var(--radius-pill);font-size:13px;font-variant-numeric:tabular-nums}
.gl-letters a{color:var(--color-ink);text-decoration:none;transition:background var(--motion-fast)}
.gl-letters a:hover{background:var(--color-surface-hover)}
.gl-letters a:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}
.gl-letters span{color:var(--color-faint);opacity:.55}
.gl-index .wrap{max-width:980px}
.gl-group{display:grid;grid-template-columns:72px minmax(0,1fr);gap:32px;scroll-margin-top:96px}
.gl-group+.gl-group{margin-top:48px}
.gl-group h2{margin:0;padding-top:17px;font-size:28px;font-weight:500;line-height:1;letter-spacing:-.03em}
.gl-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--color-line-strong)}
.gl-row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:28px;align-items:baseline;padding:17px 0 18px;border-bottom:1px solid var(--color-line);color:var(--color-ink);text-decoration:none}
.gl-row b{font-size:16px;font-weight:500;letter-spacing:-.01em;transition:transform var(--motion-fast)}
.gl-row span{color:var(--color-muted);font-size:14px;line-height:1.6;text-wrap:pretty}
.gl-row:hover b{transform:translateX(4px)}
.gl-row b{display:inline-block}
.gl-row:focus-visible,.gl-stop:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.gl-def{margin:0;max-width:640px;color:var(--color-text-secondary);font-size:20px;line-height:1.55;letter-spacing:-.01em;text-wrap:pretty}
.gl-sec{margin-top:56px}
.gl-sec h2{margin:0 0 14px;color:var(--color-faint);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.gl-sec .gl-row{grid-template-columns:minmax(0,170px) minmax(0,1fr)}
.gl-stop{display:grid;gap:5px;padding:18px 0 19px;border-top:1px solid var(--color-line-strong);border-bottom:1px solid var(--color-line);color:var(--color-ink);text-decoration:none}
.gl-stop__meta{color:var(--color-faint);font-size:12px}
.gl-stop b{font-size:17px;font-weight:500;line-height:1.35;letter-spacing:-.015em;transition:transform var(--motion-fast)}
.gl-stop:hover b{transform:translateX(4px)}
.gl-stop small{color:var(--color-muted);font-size:14px;line-height:1.6;text-wrap:pretty}
.gl-stops{margin:0;padding:0;list-style:none}
.gl-stops li+li .gl-stop{border-top:0}
.gl-excerpt{margin:24px 0 0;padding:2px 0 2px 20px;border-left:1px solid var(--color-ink)}
.gl-excerpt p{margin:0 0 10px;font-size:16px;line-height:1.75}
.gl-excerpt figcaption{font-size:13px}
@media (max-width:640px){
  .gl-group{grid-template-columns:1fr;gap:12px}
  .gl-group h2{padding-top:0;font-size:22px}
  .gl-row,.gl-sec .gl-row{grid-template-columns:1fr;gap:4px}
}
@media (max-width:760px){.gl-letters{justify-content:flex-start;margin-left:-6px}}
.gl-more{margin:14px 0 0;color:var(--color-muted);font-size:13px}
.quiz-feedback:focus{outline:none}

/* ── section links: a quiet icon after the heading, visible on hover or focus ── */
.prose h2 .h-link{display:inline-grid;place-items:center;width:28px;height:28px;margin:-4px 0 -4px 6px;border-radius:var(--radius-pill);color:var(--color-faint);vertical-align:middle;opacity:0;transition:opacity var(--motion-fast),color var(--motion-fast),background var(--motion-fast)}
.prose h2 .h-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.prose h2:hover .h-link,.prose h2 .h-link:focus-visible{opacity:1}
.prose h2 .h-link:hover{color:var(--color-ink);background:var(--color-surface-hover)}
.prose h2 .h-link:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}
@media (hover:none){.prose h2 .h-link{opacity:.7}}
.copy-toast{position:fixed;left:50%;bottom:28px;z-index:200;padding:10px 16px;border-radius:var(--radius-pill);background:var(--color-ink);color:var(--color-canvas);font-size:13px;transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.copy-toast.is-on{opacity:1;transform:translate(-50%,0)}
.stop-related{margin-top:64px}

/* ── reference: glossary and questions joined by a switch; question rows ── */
.ref-switch{margin:28px 0 0}
.lang-toggle a{position:relative;z-index:1;display:inline-grid;place-items:center;width:112px;min-height:36px;padding:6px 16px;border-radius:var(--radius-pill);color:var(--color-muted);font-size:var(--text-ui);font-weight:500;text-decoration:none}
.lang-toggle a.active{color:var(--color-canvas)}
.lang-toggle a:not(.active):hover{color:var(--color-ink)}
.lang-toggle a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.gl-letters{margin-top:24px}
.qa-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--color-line-strong)}
.qa-row{display:grid;gap:5px;padding:17px 0 18px;border-bottom:1px solid var(--color-line);color:var(--color-ink);text-decoration:none}
.qa-row b{display:inline-block;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.01em;transition:transform var(--motion-fast)}
.qa-row:hover b{transform:translateX(4px)}
.qa-row small{max-width:640px;color:var(--color-muted);font-size:14px;line-height:1.6;text-wrap:pretty}
.qa-row:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.gl-excerpt ul,.gl-excerpt ol{display:grid;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.gl-excerpt li{font-size:16px;line-height:1.7}

/* ── print: reading pages without chrome, figures kept whole ── */
@media print{
  @page{margin:16mm 16mm 18mm}
  body:not(.cert-page) .site-top,body:not(.cert-page) .site-footer,.skip-link,.stop-rail,.stop-bar,.page-feedback,.stop-nav,.fn-sheet,.site-cookie-banner,.cookie-banner,.h-link,.lesson-quiz,.stop-related,.lesson-top{display:none!important}
  body:not(.cert-page){background:#fff!important;color:#000;font-size:10.5pt}
  .lesson-wrap .lesson{max-width:none}
  .walk,.hub,.edu-chart,.compare,.mtx,.kf,.curve,.flowline,.situation,.myth,.realworld,.guess,.cmp-row,.moments-list li{break-inside:avoid}
  .prose p,.prose li,.situation p{font-size:10.5pt;line-height:1.55}
  .sit-question{font-size:13pt}
  .prose,.compare,.edu-chart{margin-top:28px}
  h2,h3{break-after:avoid}
  a{color:inherit;text-decoration:none}
  .guess summary .guess-toggle{display:none}
}
.em-credit .text-link{font-size:inherit}
.gl-excerpt .text-link{font-size:inherit}

/* ── certificate: private management, only with the holder's key ── */
.cert-manage{max-width:560px;margin:56px auto 0;padding-top:24px;border-top:1px solid var(--color-line);text-align:center}
.cert-manage h2{margin:6px 0 10px;font-size:19px;font-weight:500;letter-spacing:-.015em}
.cert-manage p{margin:0;color:var(--color-muted);font-size:14px;line-height:1.65}
.cert-manage .button-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.cert-confirm{margin-top:18px;padding:16px 18px;border:1px solid var(--color-line-strong);border-radius:var(--radius-md,12px)}
.cert-confirm p{color:var(--color-ink)}
.cert-manage .form-note{margin-top:12px;word-break:break-all}