/* ==========================================================================
   Education site stylesheet. One file, no build step, system fonts only.
   1 Tokens   2 Base   3 Layout   4 Header   5 Footer   6 Controls   7 Cards and tiles
   8 Home   9 Listing pages   10 Article and prose   11 Widgets   12 Text pages   13 States   14 Print
   Documented in docs/FRONTEND.md.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light dark;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --maxw: 1200px;
  --gutter: 24px;
  --header-h: 68px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --bg: hsl(40 33% 97%);
  --bg-alt: hsl(40 28% 93%);
  --surface: #fff;
  --surface-2: hsl(40 30% 98.5%);
  --line: hsl(38 18% 85%);
  --line-strong: hsl(222 10% 50%);
  --ink: hsl(224 32% 12%);
  --ink-2: hsl(224 22% 22%);
  --muted: hsl(224 14% 35%);
  --brand: hsl(224 62% 34%);
  --brand-strong: hsl(224 66% 25%);
  --brand-soft: hsl(224 70% 96%);
  --brand-line: hsl(224 48% 84%);
  --on-brand: #fff;
  --focus: hsl(224 100% 42%);
  --focus-halo: #fff;
  --star: hsl(32 95% 38%);
  --hl: hsl(44 100% 80%);

  --ok: hsl(150 62% 22%);
  --ok-soft: hsl(150 45% 93%);
  --ok-line: hsl(150 35% 74%);
  --info: hsl(214 72% 27%);
  --info-soft: hsl(214 80% 95%);
  --info-line: hsl(214 55% 80%);
  --warn: hsl(28 90% 25%);
  --warn-soft: hsl(40 100% 92%);
  --warn-line: hsl(36 75% 68%);
  --bad: hsl(2 70% 35%);
  --bad-soft: hsl(2 80% 96%);
  --bad-line: hsl(2 55% 80%);
  --safe: hsl(190 75% 19%);
  --safe-soft: hsl(190 55% 93%);
  --safe-line: hsl(190 40% 74%);

  --code-bg: hsl(40 25% 92%);
  --cmd-bg: hsl(224 30% 13%);
  --cmd-ink: hsl(40 25% 93%);
  --header-bg: hsl(40 33% 97% / 0.92);
  --glow-1: hsl(224 95% 93%);
  --glow-2: hsl(32 100% 91%);
  --footer-bg: hsl(224 32% 12%);
  --footer-ink: hsl(40 18% 88%);
  --footer-mute: hsl(224 24% 78%);
  --footer-line: hsl(224 20% 25%);
  --cta-1: hsl(224 62% 30%);
  --cta-2: hsl(238 52% 22%);
  --mark-bg: var(--brand);
  --mark-fg: #fff;
  --skel-1: hsl(40 18% 89%);
  --skel-2: hsl(40 24% 95%);
  --shadow-sm: 0 1px 2px hsl(224 30% 20% / 0.07), 0 1px 1px hsl(224 30% 20% / 0.04);
  --shadow: 0 2px 4px hsl(224 30% 20% / 0.05), 0 10px 28px hsl(224 30% 20% / 0.09);
  --shadow-lg: 0 4px 8px hsl(224 30% 20% / 0.06), 0 22px 54px hsl(224 30% 20% / 0.16);

  --b-fix-bg: hsl(18 92% 93%);
  --b-fix-ink: hsl(16 80% 24%);
  --b-howto-bg: hsl(214 90% 94%);
  --b-howto-ink: hsl(218 72% 24%);
  --b-explainer-bg: hsl(268 80% 95%);
  --b-explainer-ink: hsl(268 56% 29%);
  --b-reference-bg: hsl(188 55% 91%);
  --b-reference-ink: hsl(190 78% 18%);

  /* Diagram tokens: read by the inline SVG diagrams in guides (with their own fallbacks) */
  --dg-bg: #ffffff;
  --dg-ink: #1b2236;
  --dg-muted: #596378;
  --dg-line: #7d889e;
  --dg-fill: #eef2f8;
  --dg-fill-2: #dde5f2;
  --dg-accent: #2a5db0;
  --dg-accent-soft: #dbe7fb;
  --dg-ok: #17743f;
  --dg-ok-soft: #d9f1e4;
  --dg-warn: #8f5500;
  --dg-warn-soft: #fdebcb;
  --dg-bad: #b3261e;
}

/* Dark: follows the system unless the visitor chose a theme (html[data-theme]). Values are repeated for the manual override. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: hsl(224 22% 9%);
    --bg-alt: hsl(224 22% 11.5%);
    --surface: hsl(224 20% 14%);
    --surface-2: hsl(224 18% 16.5%);
    --line: hsl(224 14% 24%);
    --line-strong: hsl(224 10% 56%);
    --ink: hsl(40 25% 95%);
    --ink-2: hsl(40 12% 86%);
    --muted: hsl(224 12% 73%);
    --brand: hsl(218 100% 80%);
    --brand-strong: hsl(218 100% 88%);
    --brand-soft: hsl(224 36% 19%);
    --brand-line: hsl(224 30% 30%);
    --on-brand: hsl(224 45% 11%);
    --focus: hsl(44 100% 62%);
    --focus-halo: hsl(224 22% 9%);
    --star: hsl(40 96% 58%);
    --hl: hsl(44 70% 30%);
    --ok: hsl(150 55% 70%);
    --ok-soft: hsl(150 30% 15%);
    --ok-line: hsl(150 25% 28%);
    --info: hsl(214 90% 80%);
    --info-soft: hsl(214 35% 17%);
    --info-line: hsl(214 30% 30%);
    --warn: hsl(38 95% 70%);
    --warn-soft: hsl(36 40% 15%);
    --warn-line: hsl(36 40% 30%);
    --bad: hsl(4 100% 80%);
    --bad-soft: hsl(2 35% 16%);
    --bad-line: hsl(2 30% 32%);
    --safe: hsl(188 60% 74%);
    --safe-soft: hsl(190 35% 15%);
    --safe-line: hsl(190 28% 28%);
    --code-bg: hsl(224 18% 19%);
    --cmd-bg: hsl(224 30% 6.5%);
    --header-bg: hsl(224 22% 9% / 0.92);
    --glow-1: hsl(224 50% 16%);
    --glow-2: hsl(30 40% 14%);
    --footer-bg: hsl(224 26% 6.5%);
    --cta-1: hsl(224 52% 26%);
    --cta-2: hsl(238 46% 18%);
    --mark-bg: hsl(218 100% 80%);
    --mark-fg: hsl(224 45% 11%);
    --skel-1: hsl(224 16% 18%);
    --skel-2: hsl(224 16% 23%);
    --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4);
    --shadow: 0 2px 4px hsl(0 0% 0% / 0.3), 0 10px 28px hsl(0 0% 0% / 0.4);
    --shadow-lg: 0 4px 8px hsl(0 0% 0% / 0.35), 0 22px 54px hsl(0 0% 0% / 0.55);
    --b-fix-bg: hsl(18 40% 18%);
    --b-fix-ink: hsl(20 100% 82%);
    --b-howto-bg: hsl(214 40% 19%);
    --b-howto-ink: hsl(214 100% 84%);
    --b-explainer-bg: hsl(268 32% 21%);
    --b-explainer-ink: hsl(268 100% 87%);
    --b-reference-bg: hsl(188 36% 16%);
    --b-reference-ink: hsl(188 70% 80%);
    --dg-bg: #151a26;
    --dg-ink: #eef1f7;
    --dg-muted: #a9b2c4;
    --dg-line: #66718a;
    --dg-fill: #1e2536;
    --dg-fill-2: #283149;
    --dg-accent: #7aa7ff;
    --dg-accent-soft: #23345a;
    --dg-ok: #5fd39a;
    --dg-ok-soft: #173a2b;
    --dg-warn: #ffb454;
    --dg-warn-soft: #3d2a10;
    --dg-bad: #ff8a80;
  }
}

:root[data-theme="dark"] {
  --bg: hsl(224 22% 9%);
  --bg-alt: hsl(224 22% 11.5%);
  --surface: hsl(224 20% 14%);
  --surface-2: hsl(224 18% 16.5%);
  --line: hsl(224 14% 24%);
  --line-strong: hsl(224 10% 56%);
  --ink: hsl(40 25% 95%);
  --ink-2: hsl(40 12% 86%);
  --muted: hsl(224 12% 73%);
  --brand: hsl(218 100% 80%);
  --brand-strong: hsl(218 100% 88%);
  --brand-soft: hsl(224 36% 19%);
  --brand-line: hsl(224 30% 30%);
  --on-brand: hsl(224 45% 11%);
  --focus: hsl(44 100% 62%);
  --focus-halo: hsl(224 22% 9%);
  --star: hsl(40 96% 58%);
  --hl: hsl(44 70% 30%);
  --ok: hsl(150 55% 70%);
  --ok-soft: hsl(150 30% 15%);
  --ok-line: hsl(150 25% 28%);
  --info: hsl(214 90% 80%);
  --info-soft: hsl(214 35% 17%);
  --info-line: hsl(214 30% 30%);
  --warn: hsl(38 95% 70%);
  --warn-soft: hsl(36 40% 15%);
  --warn-line: hsl(36 40% 30%);
  --bad: hsl(4 100% 80%);
  --bad-soft: hsl(2 35% 16%);
  --bad-line: hsl(2 30% 32%);
  --safe: hsl(188 60% 74%);
  --safe-soft: hsl(190 35% 15%);
  --safe-line: hsl(190 28% 28%);
  --code-bg: hsl(224 18% 19%);
  --cmd-bg: hsl(224 30% 6.5%);
  --header-bg: hsl(224 22% 9% / 0.92);
  --glow-1: hsl(224 50% 16%);
  --glow-2: hsl(30 40% 14%);
  --footer-bg: hsl(224 26% 6.5%);
  --cta-1: hsl(224 52% 26%);
  --cta-2: hsl(238 46% 18%);
  --mark-bg: hsl(218 100% 80%);
  --mark-fg: hsl(224 45% 11%);
  --skel-1: hsl(224 16% 18%);
  --skel-2: hsl(224 16% 23%);
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4);
  --shadow: 0 2px 4px hsl(0 0% 0% / 0.3), 0 10px 28px hsl(0 0% 0% / 0.4);
  --shadow-lg: 0 4px 8px hsl(0 0% 0% / 0.35), 0 22px 54px hsl(0 0% 0% / 0.55);
  --b-fix-bg: hsl(18 40% 18%);
  --b-fix-ink: hsl(20 100% 82%);
  --b-howto-bg: hsl(214 40% 19%);
  --b-howto-ink: hsl(214 100% 84%);
  --b-explainer-bg: hsl(268 32% 21%);
  --b-explainer-ink: hsl(268 100% 87%);
  --b-reference-bg: hsl(188 36% 16%);
  --b-reference-ink: hsl(188 70% 80%);
  --dg-bg: #151a26;
  --dg-ink: #eef1f7;
  --dg-muted: #a9b2c4;
  --dg-line: #66718a;
  --dg-fill: #1e2536;
  --dg-fill-2: #283149;
  --dg-accent: #7aa7ff;
  --dg-accent-soft: #23345a;
  --dg-ok: #5fd39a;
  --dg-ok-soft: #173a2b;
  --dg-warn: #ffb454;
  --dg-warn-soft: #3d2a10;
  --dg-bad: #ff8a80;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Category colours: .hue + .hNNN (hue bucketed to 5 degrees by the views). */
.hue {
  --acc: hsl(var(--h) 62% 36%);
  --acc-ink: hsl(var(--h) 62% 23%);
  --acc-soft: hsl(var(--h) 78% 95%);
  --acc-mid: hsl(var(--h) 62% 88%);
  --acc-line: hsl(var(--h) 40% 80%);
  --acc-solid: hsl(var(--h) 60% 30%);
  --acc-deep: hsl(var(--h) 42% 17%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hue {
    --acc: hsl(var(--h) 80% 70%);
    --acc-ink: hsl(var(--h) 90% 85%);
    --acc-soft: hsl(var(--h) 32% 16%);
    --acc-mid: hsl(var(--h) 32% 23%);
    --acc-line: hsl(var(--h) 26% 30%);
    --acc-solid: hsl(var(--h) 52% 31%);
    --acc-deep: hsl(var(--h) 38% 13%);
  }
}

:root[data-theme="dark"] .hue {
  --acc: hsl(var(--h) 80% 70%);
  --acc-ink: hsl(var(--h) 90% 85%);
  --acc-soft: hsl(var(--h) 32% 16%);
  --acc-mid: hsl(var(--h) 32% 23%);
  --acc-line: hsl(var(--h) 26% 30%);
  --acc-solid: hsl(var(--h) 52% 31%);
  --acc-deep: hsl(var(--h) 38% 13%);
}

.h0{--h:0}.h5{--h:5}.h10{--h:10}.h15{--h:15}.h20{--h:20}.h25{--h:25}.h30{--h:30}.h35{--h:35}.h40{--h:40}.h45{--h:45}.h50{--h:50}.h55{--h:55}
.h60{--h:60}.h65{--h:65}.h70{--h:70}.h75{--h:75}.h80{--h:80}.h85{--h:85}.h90{--h:90}.h95{--h:95}.h100{--h:100}.h105{--h:105}.h110{--h:110}.h115{--h:115}
.h120{--h:120}.h125{--h:125}.h130{--h:130}.h135{--h:135}.h140{--h:140}.h145{--h:145}.h150{--h:150}.h155{--h:155}.h160{--h:160}.h165{--h:165}.h170{--h:170}.h175{--h:175}
.h180{--h:180}.h185{--h:185}.h190{--h:190}.h195{--h:195}.h200{--h:200}.h205{--h:205}.h210{--h:210}.h215{--h:215}.h220{--h:220}.h225{--h:225}.h230{--h:230}.h235{--h:235}
.h240{--h:240}.h245{--h:245}.h250{--h:250}.h255{--h:255}.h260{--h:260}.h265{--h:265}.h270{--h:270}.h275{--h:275}.h280{--h:280}.h285{--h:285}.h290{--h:290}.h295{--h:295}
.h300{--h:300}.h305{--h:305}.h310{--h:310}.h315{--h:315}.h320{--h:320}.h325{--h:325}.h330{--h:330}.h335{--h:335}.h340{--h:340}.h345{--h:345}.h350{--h:350}.h355{--h:355}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html[data-text="2"] { font-size: 125%; }
html[data-text="3"] { font-size: 143.75%; }
@media (max-width: 480px) {
  html { font-size: 106.25%; --gutter: 16px; --header-h: 64px; }
  html[data-text="2"] { font-size: 118.75%; }
  html[data-text="3"] { font-size: 137.5%; }
}
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink-2); font: 1rem/1.65 var(--font-sans); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
main { display: block; flex: 1 0 auto; }
main:focus { outline: none; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--brand); text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
a:hover { color: var(--brand-strong); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); border-radius: 4px; }
::selection { background: var(--hl); color: var(--ink); }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; }
.i-rot90 { transform: rotate(90deg); }
.i-rot180 { transform: rotate(180deg); }
.i-rot270 { transform: rotate(270deg); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 200; padding: 12px 18px; border-radius: var(--r-sm); background: var(--brand); color: var(--on-brand); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* JavaScript-only and no-JavaScript-only parts */
html:not(.js) .js-only, html:not(.js) .settings, html:not(.js) .menu-btn, html:not(.js) .nav-toggle, html:not(.js) .filters, html:not(.js) .rate-form, html:not(.js) .rate-done, html:not(.js) [data-print], html:not(.js) .rv-skel, html:not(.js) .skel { display: none !important; }
html.js .nojs-only, html.js .rate-nojs { display: none !important; }

/* ---------- 3. Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.container--read { width: min(100% - 2 * var(--gutter), 46rem); }
.sec { padding: clamp(48px, 7vw, 92px) 0; }
.sec--tight { padding: clamp(28px, 4vw, 52px) 0; }
.sec--alt { background: var(--bg-alt); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; margin-bottom: clamp(24px, 3.2vw, 40px); }
.sec-head-text { max-width: 44rem; }
.sec-title { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.55rem); line-height: 1.12; }
.sec-title--sm { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.sec-lead { margin-top: 10px; color: var(--ink-2); font-size: 1.1rem; max-width: 40rem; }
.sec-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; }
.sec-more:hover { text-decoration: underline; }
.eyebrow { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.eyebrow--pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line); letter-spacing: 0.04em; text-transform: none; font-size: 0.9rem; font-weight: 700; }
.block-title { font-size: 1.45rem; margin: 2.2rem 0 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }

/* ---------- 4. Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.header-bar { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 38px; height: 38px; flex: none; }
.bm-bg { fill: var(--mark-bg); }
.bm-l { fill: var(--mark-fg); }
.bm-r { fill: var(--mark-fg); fill-opacity: 0.68; }
.brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 1.18rem; line-height: 1.12; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nav { margin-left: 8px; }
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 12px; color: var(--ink); font-weight: 650; text-decoration: none; }
.nav-link:hover { background: var(--brand-soft); color: var(--ink); }
.nav-link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--brand); border-radius: 12px 12px 4px 4px; }
.is-active > .nav-link { color: var(--brand); }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 44px; margin-left: -8px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
.nav-toggle:hover { background: var(--brand-soft); }
.nav-toggle .icon { width: 1.1rem; height: 1.1rem; transition: transform 0.18s; }
.nav-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; width: min(640px, calc(100vw - 2 * var(--gutter))); padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.has-menu--wide { position: static; }
.menu--topics { left: 50%; top: 100%; transform: translateX(-50%); margin-top: -2px; width: min(820px, calc(100vw - 2 * var(--gutter))); }
html.js .has-menu.is-open > .menu, html:not(.js) .has-menu:hover > .menu, html:not(.js) .has-menu:focus-within > .menu { display: block; }
.menu-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 4px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.menu-label { font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.menu-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; min-height: 36px; }
.menu-all:hover { text-decoration: underline; }
.menu-grid { display: grid; gap: 2px 14px; list-style: none; margin: 0; padding: 0; }
.menu-grid--topics { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(6, auto); }
.menu-grid--ver { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(7, auto); }
.menu-item { display: flex; align-items: flex-start; gap: 13px; padding: 9px 10px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.menu-item:hover { background: var(--acc-soft, var(--brand-soft)); color: var(--ink); }
.menu-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--acc-mid); color: var(--acc-ink); }
.menu-ic .icon { width: 1.4rem; height: 1.4rem; }
.menu-text { display: grid; gap: 1px; min-width: 0; }
.menu-title { font-weight: 700; line-height: 1.3; }
.menu-blurb { font-size: 0.875rem; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-item--ver { align-items: center; padding: 7px 10px; }
.menu-ver { display: grid; place-items: center; flex: none; min-width: 44px; height: 36px; padding: 0 8px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font: 800 0.95rem var(--font-sans); border: 1px solid var(--brand-line); }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: 700 1rem var(--font-sans); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--brand-soft); color: var(--ink); }
.icon-btn .icon { width: 1.45rem; height: 1.45rem; }
.icon-btn[aria-expanded="true"] { background: var(--brand-soft); }
.header-search { display: none; position: relative; align-items: center; }
.header-search > .icon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.hs-input { width: 244px; height: 46px; padding: 0 50px 0 42px; border: 2px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 1rem var(--font-sans); transition: width 0.2s; -webkit-appearance: none; appearance: none; }
.hs-input:focus { width: 300px; border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--focus), 0 0 0 5px var(--focus-halo); }
.hs-btn { position: absolute; right: 4px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand); cursor: pointer; }
.hs-btn:hover { background: var(--brand-strong); }
.menu-btn { display: none; padding: 0 14px 0 12px; border: 2px solid var(--line-strong); }
.menu-close-ic, .menu-btn[aria-expanded="true"] .menu-open-ic { display: none; }
.menu-btn[aria-expanded="true"] .menu-close-ic { display: inline-block; }
.settings { position: relative; }
.settings-panel { position: absolute; right: 0; top: calc(100% + 12px); z-index: 70; width: min(350px, calc(100vw - 2 * var(--gutter))); padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: grid; gap: 16px; }
.settings-title { font: 700 1.2rem var(--font-serif); color: var(--ink); }
.seg { margin: 0; padding: 0; border: 0; min-width: 0; }
.seg legend { padding: 0; margin-bottom: 8px; font-weight: 700; color: var(--ink); }
.seg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg-opt { position: relative; display: block; }
.seg-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; padding: 8px 4px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink); font-size: 0.9rem; font-weight: 650; text-align: center; }
.seg-face .icon { width: 1.3rem; height: 1.3rem; }
.seg-opt input:checked + .seg-face { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.seg-opt input:focus-visible + .seg-face { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }
.aa { font-family: var(--font-serif); font-weight: 700; line-height: 1; }
.aa1 { font-size: 1.05rem; } .aa2 { font-size: 1.35rem; } .aa3 { font-size: 1.7rem; }
.settings-reset { justify-self: start; }

@media (min-width: 1180px) {
  .header-search { display: flex; }
  .search-link { display: none; }
}

/* Search opens as a row under the header whenever the inline field does not fit */
@media (max-width: 1179.98px) {
  .header-search { position: absolute; left: 0; right: 0; top: 100%; padding: 12px var(--gutter); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .site-header.search-open .header-search { display: flex; }
  .header-search .hs-input { width: 100%; height: 50px; }
  .header-search .hs-input:focus { width: 100%; }
  .header-search > .icon { left: calc(var(--gutter) + 14px); }
  .hs-btn { right: calc(var(--gutter) + 4px); }
  html.js .site-header.search-open .search-link { background: var(--brand-soft); }
  .header-search .suggest { left: var(--gutter); right: var(--gutter); min-width: 0; }
}

@media (max-width: 1099.98px) {
  /* backdrop-filter would make the header the containing block of the fixed menu panel, so it is off here */
  .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-btn { display: inline-flex; }
  .nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 40; margin: 0; padding: 6px var(--gutter) 48px; overflow-y: auto; background: var(--bg); border-top: 1px solid var(--line); display: none; }
  html.js .site-header.nav-open .nav { display: block; }
  html:not(.js) .nav { position: static; display: block; padding: 0; overflow: visible; border: 0; background: none; flex-basis: 100%; order: 5; }
  html:not(.js) .header-bar { flex-wrap: wrap; padding-bottom: 8px; }
  html:not(.js) .nav-list { flex-direction: row; flex-wrap: wrap; }
  html:not(.js) .nav-item { border: 0; }
  html:not(.js) .nav-link { font-size: 1rem; padding: 8px 12px; }
  html:not(.js) .menu { display: none !important; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav-link { flex: 1; padding: 14px 6px; font-size: 1.15rem; border-radius: 8px; }
  .nav-link[aria-current="page"] { box-shadow: none; color: var(--brand); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .nav-toggle { width: 52px; height: 52px; margin: 0; }
  .menu, .menu--topics { position: static; transform: none; width: auto; margin: 0; padding: 4px 0 14px; border: 0; border-radius: 0; box-shadow: none; background: transparent; flex-basis: 100%; }
  .menu-grid--topics, .menu-grid--ver { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .menu-head { margin: 0 0 6px; }
}

@media (max-width: 600px) {
  .settings { position: static; }
  .settings-panel { position: fixed; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 8px); width: auto; max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 1.02rem; }
  .header-bar { gap: 4px; }
}
@media (max-width: 420px) {
  .menu-btn { padding: 0; width: 44px; }
  .menu-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
html.nav-lock { overflow: hidden; }

/* Search suggestions (header and hero) */
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 80; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); max-height: min(420px, 70vh); overflow-y: auto; }
.header-search .suggest { min-width: 340px; left: auto; right: 0; }
.suggest li { display: block; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--ink); line-height: 1.35; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--brand-soft); }
.suggest-title { display: block; font-weight: 650; }
.suggest-meta { display: block; font-size: 0.875rem; color: var(--muted); }
.suggest-all { border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 10px 10px; font-weight: 700; color: var(--brand); }

/* ---------- 5. Footer ---------- */
.site-footer { margin-top: auto; padding-top: clamp(40px, 6vw, 72px); background: var(--footer-bg); color: var(--footer-ink); }
.site-footer a { color: var(--footer-ink); text-decoration-color: hsl(224 20% 45%); }
.site-footer a:hover { color: #fff; text-decoration-color: currentColor; }
.site-footer :focus-visible { outline-color: hsl(44 100% 62%); box-shadow: 0 0 0 5px hsl(224 32% 12%); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px clamp(24px, 4vw, 56px); padding-bottom: 36px; }
.footer-col { min-width: 0; }
.footer-col--multi { display: grid; gap: 28px; align-content: start; }
.brand--footer { color: #fff; }
.brand--footer:hover { color: #fff; }
.brand--footer .bm-bg { fill: hsl(218 100% 80%); }
.brand--footer .bm-l, .brand--footer .bm-r { fill: hsl(224 45% 11%); }
.footer-blurb { margin-top: 16px; max-width: 28rem; color: var(--footer-mute); }
.footer-mail { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 600; }
.footer-title { margin-bottom: 14px; font: 800 0.8125rem var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--footer-mute); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer-links a { display: inline-block; padding: 8px 0; text-decoration: none; }
.footer-mail a { display: inline-block; padding: 8px 0; }
@media (pointer: coarse) { .footer-links a { padding: 12px 0; } }
.footer-links a:hover { text-decoration: underline; }
.footer-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; padding: 22px 0; border-top: 1px solid var(--footer-line); }
.footer-notes p { display: flex; align-items: flex-start; gap: 12px; color: var(--footer-ink); }
.footer-notes .icon { margin-top: 0.2em; color: hsl(44 100% 70%); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 18px 0 28px; border-top: 1px solid var(--footer-line); color: var(--footer-mute); font-size: 0.95rem; }
.to-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; }
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-notes { grid-template-columns: 1fr; }
  .footer-links--cols { columns: 2; }
}

/* ---------- 6. Buttons and form controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 22px; border: 2px solid transparent; border-radius: 14px; background: var(--surface); color: var(--ink); font: 700 1rem/1.2 var(--font-sans); text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-strong); color: var(--on-brand); }
.btn--secondary { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.btn--secondary:hover { background: var(--brand-soft); color: var(--brand-strong); }
.btn--ghost { background: transparent; color: var(--brand); border-color: transparent; }
.btn--ghost:hover { background: var(--brand-soft); }
.btn--light { background: #fff; color: hsl(224 50% 18%); }
.btn--light:hover { background: hsl(40 40% 94%); color: hsl(224 50% 14%); }
.btn--outline-light { background: transparent; color: #fff; border-color: hsl(0 0% 100% / 0.7); }
.btn--outline-light:hover { background: hsl(0 0% 100% / 0.14); color: #fff; }
.btn--lg { min-height: 56px; padding: 12px 28px; font-size: 1.08rem; }
.btn--sm { min-height: 44px; padding: 8px 16px; font-size: 0.95rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.2em; height: 1.2em; }

.field { display: grid; gap: 6px; }
.field-label { font-weight: 700; color: var(--ink); }
.req, .optional { font-weight: 500; color: var(--muted); font-size: 0.9em; }
.field-hint { margin: 0; color: var(--muted); font-size: 0.95rem; }
.field-error { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--bad); font-weight: 650; font-size: 0.95rem; }
.field-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.25em; height: 1.25em; margin-top: 0.1em; border-radius: 50%; background: var(--bad); color: var(--surface); font-size: 0.8em; font-weight: 800; }
.input, .select, .textarea, .hs-input { font: 1rem/1.4 var(--font-sans); }
.input, .select, .textarea { width: 100%; min-height: 50px; padding: 10px 14px; border: 2px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); -webkit-appearance: none; appearance: none; }
.select { padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; cursor: pointer; }
.textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.input::placeholder, .textarea::placeholder, .hs-input::placeholder { color: var(--muted); opacity: 1; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus), 0 0 0 5px var(--focus-halo); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--bad); background-color: var(--bad-soft); }
.field--check .check-row { display: flex; gap: 14px; align-items: flex-start; }
.check { flex: none; width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--brand); cursor: pointer; }
.check-label { cursor: pointer; }
.field-counter { margin-top: -6px; text-align: right; color: var(--muted); font-size: 0.9rem; }

.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 18px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 650 0.975rem/1.2 var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
a.chip:hover, button.chip:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.chip--current { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.chip--current:hover { background: var(--brand-strong); color: var(--on-brand); }
.chip--ghost { border-style: dashed; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: 999px; font: 750 0.8125rem/1.35 var(--font-sans); letter-spacing: 0.02em; background: var(--bg-alt); color: var(--ink-2); white-space: nowrap; }
.badge .icon { width: 1.05em; height: 1.05em; }
.badge--fix { background: var(--b-fix-bg); color: var(--b-fix-ink); }
.badge--howto { background: var(--b-howto-bg); color: var(--b-howto-ink); }
.badge--explainer { background: var(--b-explainer-bg); color: var(--b-explainer-ink); }
.badge--reference { background: var(--b-reference-bg); color: var(--b-reference-ink); }
.pill { padding: 3px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font-size: 0.9rem; font-weight: 650; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.status { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font: 750 0.8125rem/1.4 var(--font-sans); }
.status--ok { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-line); }
.status--ended { background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line); }

.alert { padding: 16px 18px; border: 1px solid var(--bad-line); border-left-width: 6px; border-radius: var(--r); background: var(--bad-soft); color: var(--ink); }
.alert:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.alert-title { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--bad); margin-bottom: 4px; }
.alert-list { margin: 8px 0 0; padding-left: 1.2rem; }
.alert-list a { font-weight: 650; }
.alert--info { border-color: var(--info-line); background: var(--info-soft); }
.alert--info .alert-title { color: var(--info); }
.alert + * { margin-top: 16px; }

/* ---------- 7. Cards and tiles ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--acc-line, var(--brand-line)); }
.card-media { aspect-ratio: 16 / 9; background: var(--acc-soft, var(--bg-alt)); overflow: hidden; }
.card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 18px 20px 20px; }
.card-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.card-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 650; color: var(--acc-ink, var(--muted)); text-decoration: none; }
.card-cat .icon { width: 1.1em; height: 1.1em; }
.card-title { font-size: 1.22rem; line-height: 1.28; }
.card-link { color: var(--ink); text-decoration: none; }
.card-link:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-link:focus-visible { outline: none; box-shadow: none; }
.card-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); border-radius: var(--r-lg); }
.card-sum { color: var(--ink-2); font-size: 0.975rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-plat { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--muted); min-width: 0; }
.card-plat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.card-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.9rem; color: var(--muted); font-weight: 550; }
.meta-i { display: inline-flex; align-items: center; gap: 6px; }
/* Large cards (Windows version hubs) stack the full 16:9 article art above the text, so the focal icon is never cropped. */
.card--lg .card-body { padding: 22px 26px 24px; gap: 12px; }
.card--lg .card-title { font-size: 1.35rem; }
.card--lg .card-sum { -webkit-line-clamp: 4; font-size: 1.02rem; }
.card-grid--lg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.sec-lead + .card-grid, .sec-lead + .empty { margin-top: 24px; }
.sec-title + .pn, .sec-title + .chips { margin-top: 20px; }
.pn + .chips { margin-top: 22px; }
.sec-lead + .vgrid, .sec-title--sm + .filters, .sec-title--sm + .card-grid, .sec-title--sm + .vgrid { margin-top: 24px; }
.card--plain .card-body { padding-top: 22px; }

.rel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.rel { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: border-color 0.15s, box-shadow 0.15s; }
.rel:hover { border-color: var(--acc-line); box-shadow: var(--shadow-sm); }
.rel-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--acc-mid); color: var(--acc-ink); }
.rel-body { display: grid; gap: 3px; min-width: 0; }
.rel-title { font-weight: 700; line-height: 1.35; }
.rel-meta { font-size: 0.875rem; color: var(--muted); }

.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.topic { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px 20px 18px; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--acc, var(--brand)); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.topic:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--acc-line); border-top-color: var(--acc); color: inherit; }
.topic-top { display: flex; justify-content: space-between; align-items: flex-start; }
.topic-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--acc-mid); color: var(--acc-ink); }
.topic-ic .icon { width: 1.75rem; height: 1.75rem; }
.topic-num { font: 700 0.95rem var(--font-serif); letter-spacing: 0.06em; color: var(--muted); }
.topic-title { margin-top: 4px; font: 700 1.25rem/1.25 var(--font-serif); color: var(--ink); }
.topic-blurb { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.topic-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--acc-ink, var(--brand)); }
.topic-foot .icon { transition: transform 0.18s; }
.topic:focus-visible { outline-offset: 3px; }
.topic:hover .topic-foot .icon { transform: translateX(4px); }
.topic--all { border-style: dashed; border-top-style: dashed; border-top-width: 1px; background: transparent; box-shadow: none; --acc: var(--brand); --acc-mid: var(--brand-soft); --acc-ink: var(--brand); --acc-line: var(--brand-line); }

.vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.vtile { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.vtile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-line); color: inherit; }
.vtile:focus-visible { outline-offset: 3px; }
.vtile-media { display: block; aspect-ratio: 8 / 5; background: var(--bg-alt); overflow: hidden; }
.vtile-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vtile-body { display: grid; gap: 5px; padding: 14px 16px 16px; }
.vtile-title { font: 700 1.08rem/1.25 var(--font-serif); color: var(--ink); }
.vtile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.vtile-year { font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vtile-count { font-size: 0.9rem; color: var(--muted); }
.vgrid-cta { grid-column: span 2; }
.vcta { display: flex; flex-direction: column; justify-content: center; gap: 10px; height: 100%; min-height: 180px; padding: 26px; border-radius: var(--r-lg); background: linear-gradient(140deg, var(--cta-1), var(--cta-2)); color: #fff; text-decoration: none; transition: transform 0.18s, box-shadow 0.18s; }
.vcta:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: #fff; }
.vcta-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: hsl(0 0% 100% / 0.16); }
.vcta-ic .icon { width: 1.6rem; height: 1.6rem; }
.vcta-title { font: 700 1.35rem/1.25 var(--font-serif); }
.vcta-text { color: hsl(224 60% 90%); font-size: 0.975rem; }
.vcta-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.vgrid--cat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vgrid--cat .vgrid-cta { display: none; }

/* ---------- 8. Home ---------- */
.hero { position: relative; padding: clamp(28px, 5vw, 64px) 0 clamp(44px, 6.5vw, 88px); background: radial-gradient(900px 440px at 88% -8%, var(--glow-1), transparent 62%), radial-gradient(760px 420px at -6% 108%, var(--glow-2), transparent 62%), var(--bg); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.hero-title { margin: 18px 0 16px; font-size: clamp(2.45rem, 1.3rem + 4.2vw, 4.4rem); line-height: 1.04; letter-spacing: -0.025em; }
.hero-title-2 { display: block; color: var(--brand); }
.hero-lead { max-width: 34rem; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.55; color: var(--ink-2); }
.hero .search-box { margin-top: 28px; }
.search-box { position: relative; }
.search-box-label { display: block; margin-bottom: 8px; font-weight: 750; color: var(--ink); }
.search-box-row { display: flex; gap: 10px; align-items: stretch; }
.search-box-field { position: relative; flex: 1; min-width: 0; }
.search-box-field > .icon { position: absolute; left: 16px; top: 50%; width: 1.4rem; height: 1.4rem; margin-top: -0.7rem; color: var(--muted); pointer-events: none; }
.search-box-input { height: 100%; min-height: 58px; padding-left: 50px; font-size: 1.1rem; border-radius: 16px; box-shadow: var(--shadow-sm); }
.search-box-row .btn { border-radius: 16px; }
.search-box .suggest { top: calc(100% - 2px); }
.search-box--page .search-box-label { margin-bottom: 8px; }
.hero-popular { margin-top: 22px; }
.hero-popular-label { margin-bottom: 10px; font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 16px 0; list-style: none; margin: 34px 0 0; padding: 0; }
.hero-facts li { display: flex; flex-direction: column; gap: 2px; padding: 0 28px; border-left: 2px solid var(--line); }
.hero-facts li:first-child { padding-left: 0; border-left: 0; }
.hero-facts strong { font: 700 clamp(1.7rem, 1.4rem + 1vw, 2.3rem)/1 var(--font-serif); color: var(--ink); }
.hero-facts span { color: var(--muted); font-size: 0.95rem; font-weight: 550; }
.hero-art img { display: block; width: 100%; max-width: 560px; margin-inline: auto; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.hero-title-2::after { content: ""; display: block; width: 4.2rem; height: 6px; margin-top: 14px; border-radius: 4px; background: var(--hl); }

.safe-banner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: var(--r-xl); background: radial-gradient(520px 260px at 100% 0, hsl(var(--h) 55% 30% / 0.55), transparent 70%), var(--acc-deep); color: hsl(var(--h) 30% 94%); }
.safe-banner .eyebrow { color: hsl(var(--h) 80% 86%); }
.safe-banner .sec-title { color: #fff; }
.safe-ic { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 18px; border-radius: 18px; background: hsl(var(--h) 60% 85%); color: hsl(var(--h) 70% 20%); }
.safe-ic .icon { width: 2rem; height: 2rem; }
.safe-lead { margin-top: 14px; max-width: 36rem; font-size: 1.1rem; color: hsl(var(--h) 30% 92%); }
.safe-actions { margin-top: 26px; }
.safe-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.safe-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); background: hsl(0 0% 100% / 0.1); border: 1px solid hsl(0 0% 100% / 0.18); color: #fff; text-decoration: none; transition: background-color 0.15s, transform 0.15s; }
.safe-link:hover { background: hsl(0 0% 100% / 0.18); color: #fff; transform: translateX(3px); }
.safe-link:focus-visible { outline-color: hsl(44 100% 66%); box-shadow: none; }
.safe-link-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: hsl(150 50% 80%); color: hsl(150 70% 16%); }
.safe-link-text { display: grid; flex: 1; gap: 2px; }
.safe-link-title { font-weight: 700; line-height: 1.3; }
.safe-link-meta { font-size: 0.875rem; color: hsl(var(--h) 30% 85%); }
.safe-banner .btn--light { color: hsl(var(--h) 60% 18%); }

.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.trust-item { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.trust-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line); }
.trust-ic .icon { width: 1.6rem; height: 1.6rem; }
.trust-title { margin-bottom: 8px; font-size: 1.2rem; }
.trust-item p { color: var(--ink-2); font-size: 0.975rem; }
.trust-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.sec--cta { padding-top: 0; }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(30px, 5vw, 60px); border-radius: var(--r-xl); background: radial-gradient(520px 280px at 0 0, hsl(238 70% 45% / 0.55), transparent 70%), linear-gradient(135deg, var(--cta-1), var(--cta-2)); color: #fff; }
.cta-title { color: #fff; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); }
.cta-lead { margin-top: 10px; max-width: 34rem; font-size: 1.1rem; color: hsl(224 60% 92%); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta :focus-visible, .vcta:focus-visible { outline-color: hsl(44 100% 66%); box-shadow: none; }

/* ---------- 9. Listing pages ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.crumbs li { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs li + li::before { content: "\203A"; content: "\203A" / ""; margin: 0 0.6em; color: var(--muted); font-size: 1.15em; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 650; }
.page-head { padding: 18px 0 clamp(22px, 3.5vw, 40px); background: linear-gradient(180deg, var(--brand-soft), var(--bg)); border-bottom: 1px solid var(--line); }
.page-title { margin-top: 14px; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); line-height: 1.1; }
.page-lead { margin-top: 12px; max-width: 42rem; font-size: 1.18rem; color: var(--ink-2); }
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 18px; color: var(--muted); font-weight: 550; }
.banner { padding: 18px 0 clamp(26px, 4vw, 48px); background: linear-gradient(180deg, var(--acc-soft), var(--bg)); border-bottom: 1px solid var(--line); }
.banner-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(22px, 4vw, 56px); align-items: center; margin-top: 18px; }
.banner-ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 18px; background: var(--acc-solid); color: #fff; box-shadow: var(--shadow-sm); }
.banner-ic .icon { width: 2.1rem; height: 2.1rem; }
.banner-title { font-size: clamp(2.05rem, 1.4rem + 2.8vw, 3.4rem); line-height: 1.08; margin: 0 0 12px; }
.banner-lead { max-width: 36rem; font-size: 1.18rem; color: var(--ink-2); }
.banner-count { margin-top: 16px; font-weight: 750; color: var(--acc-ink); }
.banner-art img { display: block; width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow); }
.banner--group .banner-art img { max-width: 520px; margin-left: auto; }
.facts { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 20px 0 0; }
.fact dt { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.fact dd { margin: 2px 0 0; font-weight: 650; color: var(--ink); max-width: 22rem; }
.notice { display: flex; gap: 16px; padding: 18px 20px; margin-bottom: 28px; border: 1px solid var(--warn-line); border-left-width: 6px; border-radius: var(--r); background: var(--warn-soft); color: var(--ink); }
.notice-ic { flex: none; color: var(--warn); }
.notice-ic .icon { width: 1.6rem; height: 1.6rem; }
.notice-title { font-weight: 800; color: var(--warn); margin-bottom: 4px; }
.notice--info { border-color: var(--info-line); background: var(--info-soft); }
.notice--info .notice-ic, .notice--info .notice-title { color: var(--info); }

.filters { margin-bottom: 20px; }
.filters--chips { padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.filters-chips { display: grid; gap: 14px; }
.chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.chip-group-label { flex: 0 0 9.5rem; margin: 0; font-weight: 750; color: var(--ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filters-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 14px; }
.filters--chips .filters-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.filters-count { margin: 0; font-weight: 700; color: var(--ink); }
.filters--form { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.filters-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.25fr 1fr; gap: 16px; }
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 20px 0 4px; }
.jump-label { font-weight: 750; color: var(--ink); }
.jump .chip { min-height: 40px; padding: 4px 14px; font-size: 0.9rem; }
.gsec { margin-top: clamp(28px, 4vw, 48px); scroll-margin-top: calc(var(--header-h) + 12px); }
.gsec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 3px solid var(--acc-line); }
.gsec-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--acc-mid); color: var(--acc-ink); }
.gsec-title { font-size: 1.55rem; min-width: 0; overflow-wrap: anywhere; }
.gsec-title a { color: inherit; text-decoration: none; }
.gsec-title a:hover { text-decoration: underline; }
.gsec-count { margin-left: auto; white-space: nowrap; flex: none; color: var(--muted); font-weight: 650; }
.gi-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; list-style: none; margin: 16px 0 0; padding: 0; }
.gi { position: relative; display: grid; gap: 6px; padding: 12px 16px 12px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--acc, var(--brand)); border-radius: 12px; transition: border-color 0.15s, box-shadow 0.15s; }
.gi:hover { box-shadow: var(--shadow-sm); border-color: var(--acc-line, var(--brand-line)); border-left-color: var(--acc, var(--brand)); }
.gi-title { font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.gi-title::after { border-radius: 12px; }
.gi-title:focus-visible::after { border-radius: 12px; }
.gi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.9rem; color: var(--muted); font-weight: 550; }
.gi-plat, .gi-cat { color: var(--muted); }
.gi-cat { font-weight: 700; color: var(--ink-2); }
.csec { margin-top: clamp(26px, 4vw, 44px); }
.csec:first-child { margin-top: 0; }
.csec-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 18px; padding-bottom: 10px; font-size: 1.55rem; border-bottom: 3px solid var(--acc-line); }
.csec-count { font: 650 0.95rem var(--font-sans); color: var(--muted); }

/* ---------- 10. Article and prose ---------- */
.article-head { padding: 18px 0 clamp(26px, 4vw, 48px); background: linear-gradient(180deg, var(--acc-soft), var(--bg)); border-bottom: 1px solid var(--line); }
.article-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(22px, 4vw, 60px); align-items: center; margin-top: 18px; }
.article-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.card-cat--plain { padding-left: 14px; border-left: 2px solid var(--acc-line); }
.article-title { margin: 14px 0 14px; font-size: clamp(1.95rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.1; }
.article-sum { max-width: 40rem; font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 18px 0 0; padding: 0; color: var(--ink-2); font-weight: 550; }
.article-meta li { display: inline-flex; align-items: center; gap: 8px; }
.article-meta .icon { color: var(--acc); }
.applies { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.applies-label { font-weight: 750; font-size: 0.95rem; color: var(--ink); }
.article-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
.article-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.rate-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }
.article-head-art img { display: block; width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(28px, 5vw, 72px); align-items: start; padding-block: clamp(28px, 5vw, 56px); }
.article-main { min-width: 0; max-width: 40rem; }
.article-aside { position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; }
.toc-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.toc-box > summary { position: relative; list-style: none; padding: 14px 18px; cursor: pointer; font: 750 1.02rem var(--font-sans); color: var(--ink); }
.toc-box > summary::-webkit-details-marker { display: none; }
.toc-box > summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 0.55em; height: 0.55em; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform 0.2s; }
.toc-box[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.toc-title { padding: 14px 18px 0; font-weight: 750; color: var(--ink); }
.toc-list { list-style: none; margin: 0; padding: 0 10px 12px; font-size: 0.95rem; }
.toc-list a { display: block; padding: 7px 10px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; color: var(--ink-2); text-decoration: none; line-height: 1.4; }
.toc-list a:hover { background: var(--bg-alt); color: var(--ink); }
.toc-list a[aria-current="true"] { border-left-color: var(--acc, var(--brand)); background: var(--acc-soft, var(--brand-soft)); color: var(--ink); font-weight: 650; }
.toc-l3 a { padding-left: 26px; font-size: 0.9rem; }

.prose { font-size: 1.0625rem; line-height: 1.72; color: var(--ink-2); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.4em; padding-top: 0.7em; border-top: 1px solid var(--line); font-size: 1.8rem; line-height: 1.2; }
.prose > h2:first-child, .prose > .lead + h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 2em; font-size: 1.38rem; line-height: 1.25; }
.prose h4 { margin-top: 1.6em; font: 750 1.1rem var(--font-sans); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.8em; }
.prose h2, .prose h3, .prose h4 { scroll-margin-top: calc(var(--header-h) + 16px); }
.prose .lead { font-size: 1.28rem; line-height: 1.55; color: var(--ink); }
.prose strong { color: var(--ink); }
.prose a { text-decoration: underline; }
.prose ul, .prose ol:not(.steps) { padding-left: 1.5em; }
.prose li + li { margin-top: 0.45em; }
.prose li > ul, .prose li > ol { margin-top: 0.5em; }
.prose blockquote { margin-inline: 0; padding: 0.4em 1.2em; border-left: 5px solid var(--acc-line, var(--line-strong)); background: var(--bg-alt); border-radius: 0 var(--r) var(--r) 0; color: var(--ink); }
.prose dl { display: grid; gap: 0.6em; }
.prose dt { font-weight: 750; color: var(--ink); }
.prose dd { margin: 0 0 0.4em; }
.prose abbr[title] { text-decoration-style: dotted; }
.prose sup, .prose sub { font-size: 0.75em; }
.prose code { padding: 0.12em 0.4em; border: 1px solid var(--line); border-radius: 6px; background: var(--code-bg); color: var(--ink); font: 0.88em var(--font-mono); overflow-wrap: anywhere; }
.prose kbd { display: inline-block; padding: 0.05em 0.5em; border: 1px solid var(--line-strong); border-bottom-width: 3px; border-radius: 7px; background: var(--surface); color: var(--ink); font: 650 0.86em var(--font-mono); line-height: 1.35; white-space: nowrap; }
.cmd-wrap { position: relative; }
.prose pre { margin-top: 1.1em; padding: 16px 18px; overflow-x: auto; border-radius: var(--r); background: var(--cmd-bg); color: var(--cmd-ink); font: 0.92rem/1.55 var(--font-mono); tab-size: 4; }
.prose pre.cmd { padding-right: 96px; }
.prose pre code, .prose pre.cmd code { padding: 0; border: 0; background: none; color: inherit; font: inherit; overflow-wrap: normal; }
.copy-btn { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; border: 1.5px solid hsl(224 20% 40%); border-radius: 10px; background: hsl(224 24% 20%); color: hsl(40 25% 94%); font: 700 0.875rem var(--font-sans); cursor: pointer; }
.copy-btn:hover { background: hsl(224 24% 28%); }
.copy-btn:focus-visible { outline-color: hsl(44 100% 66%); box-shadow: none; }
.copy-btn.is-copied { background: hsl(150 50% 22%); border-color: hsl(150 40% 50%); }
.prose ol.steps { list-style: none; padding: 0; margin-top: 1.3em; }
.prose ol.steps > li { position: relative; margin: 0; padding: 0 0 1.5rem 3.9rem; }
.prose ol.steps > li::before { content: counter(list-item); position: absolute; left: 0; top: -0.1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--acc-solid, var(--brand)); color: #fff; font: 800 1.3rem/2.6rem var(--font-sans); text-align: center; box-shadow: 0 0 0 5px var(--bg); }
.prose ol.steps > li::after { content: ""; position: absolute; left: 1.3rem; top: 2.7rem; bottom: 0.15rem; width: 2px; background: var(--line); }
.prose ol.steps > li:last-child { padding-bottom: 0; }
.prose ol.steps > li:last-child::after { display: none; }
.prose ol.steps > li > * + * { margin-top: 0.8em; }
.prose ol.steps > li > p:first-child, .prose ol.steps > li { font-size: 1.0625rem; }
@media (max-width: 480px) {
  .prose ol.steps > li { padding-left: 3.2rem; }
  .prose ol.steps > li::before { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; line-height: 2.2rem; }
  .prose ol.steps > li::after { left: 1.1rem; top: 2.3rem; }
}
.callout { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; margin-top: 1.5em; padding: 16px 20px 16px 16px; border: 1px solid var(--c-line); border-left: 6px solid var(--c-ink); border-radius: var(--r); background: var(--c-bg); color: var(--ink); --c-bg: var(--info-soft); --c-line: var(--info-line); --c-ink: var(--info); }
.callout .callout-icon { grid-row: 1 / span 6; width: 1.7rem; height: 1.7rem; margin-top: 2px; color: var(--c-ink); }
.callout .callout-title { grid-column: 2; margin: 0; font-weight: 800; color: var(--c-ink); }
.callout > :not(.callout-icon):not(.callout-title) { grid-column: 2; margin: 0; }
.callout.tip { --c-bg: var(--ok-soft); --c-line: var(--ok-line); --c-ink: var(--ok); }
.callout.warn { --c-bg: var(--warn-soft); --c-line: var(--warn-line); --c-ink: var(--warn); }
.callout.stop { --c-bg: var(--bad-soft); --c-line: var(--bad-line); --c-ink: var(--bad); }
.callout.safe { --c-bg: var(--safe-soft); --c-line: var(--safe-line); --c-ink: var(--safe); }
/* Menu paths flow inline with the sentence and wrap between steps (never inside a stretched pill). */
.menu-path { display: inline; padding: 0.12em 0.5em; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-alt); color: var(--ink); font-size: 0.94em; font-weight: 650; line-height: 1.9; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mp-step { overflow-wrap: anywhere; }
.mp-sep { display: inline-block; margin: 0 0.1em; }
.mp-sep .icon { width: 0.95em; height: 0.95em; color: var(--muted); vertical-align: -0.15em; }
.table-wrap { overflow-x: auto; margin-top: 1.5em; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(to right, var(--surface) 30%, transparent) 0 0 / 28px 100% no-repeat local, linear-gradient(to left, var(--surface) 30%, transparent) 100% 0 / 28px 100% no-repeat local, linear-gradient(to right, color-mix(in srgb, var(--ink) 28%, transparent), transparent) 0 0 / 12px 100% no-repeat scroll, linear-gradient(to left, color-mix(in srgb, var(--ink) 28%, transparent), transparent) 100% 0 / 12px 100% no-repeat scroll, var(--surface); }
.prose table:not(:has(th:nth-child(3))) { min-width: 0; }
.table-wrap:focus-visible { outline-offset: 0; }
.prose table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.prose caption { padding: 14px 16px 10px; text-align: left; font-weight: 800; color: var(--ink); caption-side: top; }
/* On a phone a wide table scrolls sideways; keep its title in view while it does. */
@media (max-width: 700px) { .prose caption { position: sticky; left: 0; box-sizing: border-box; width: calc(100vw - 2 * var(--gutter) - 2px); } }
.prose th, .prose td { padding: 11px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose thead th { background: var(--bg-alt); color: var(--ink); font-size: 0.95rem; font-weight: 750; }
.prose tbody th { font-weight: 700; color: var(--ink); }
.prose tbody tr:nth-child(even) > * { background: var(--surface-2); }
.prose details { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.prose details + details { margin-top: 10px; }
.prose summary { position: relative; list-style: none; padding: 15px 52px 15px 18px; cursor: pointer; font-weight: 700; color: var(--ink); }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 0.6em; height: 0.6em; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform 0.2s; }
.prose details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.prose details[open] > summary { border-bottom: 1px solid var(--line); }
.prose details > :not(summary) { margin: 0; padding: 14px 18px 4px; }
.prose details > :last-child { padding-bottom: 16px; }
.prose figure.diagram { margin: 1.8em 0; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--dg-bg); color: var(--dg-ink); overflow: hidden; }
.prose figure.diagram > svg { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.prose figure.diagram .dg-legend { max-width: 38rem; margin: 14px auto 0; padding-left: 1.5rem; font-size: 1rem; line-height: 1.5; }
.prose figure.diagram .dg-legend li + li { margin-top: 4px; }
.prose figure.diagram details.diagram-text ol, .prose figure.diagram details.diagram-text ul { margin: 0.5em 0 0.25em; padding-left: 1.4rem; }
.prose figure.diagram details.diagram-text p { margin: 0.5em 0; }
.prose figure.diagram figcaption { margin-top: 10px; text-align: center; color: var(--dg-muted); font-size: 0.95rem; }
.prose .diagram-text { margin-top: 10px; border: 0; border-top: 1px dashed var(--line); border-radius: 0; background: transparent; }
.prose .diagram-text > summary { padding: 10px 28px 6px 2px; font-size: 0.95rem; color: var(--muted); }
.prose .diagram-text > summary::after { right: 6px; }
.prose .diagram-text[open] > summary { border-bottom: 0; }
.prose .diagram-text > :not(summary) { padding: 4px 4px 8px 24px; }

.block-title { color: var(--ink); }
.sources { margin-top: 3rem; }
.sources .block-title, .related .block-title, .more-policies .block-title { margin-top: 0; }
.sources-note { margin: -4px 0 14px; color: var(--muted); }
.source-list li { max-width: 100%; }
.source-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.source-list a { max-width: 100%; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 650; text-decoration: none; }
.source-list a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.related { margin-top: 3rem; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 3rem; }
.pn-link { display: grid; gap: 4px; padding: 18px 22px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; }
.pn-link:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); color: var(--ink); }
.pn-link--next { text-align: right; }
.pn-dir { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand); }
.pn-link--next .pn-dir { justify-self: end; }
.pn-title { font: 700 1.1rem/1.3 var(--font-serif); }
.help { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-top: 3rem; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--brand-line); border-radius: var(--r-xl); background: var(--brand-soft); }
.help-main { display: flex; gap: 18px; align-items: flex-start; }
.help-ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.help-ic .icon { width: 1.7rem; height: 1.7rem; }
.help-title { margin-bottom: 8px; font-size: 1.5rem; }
.help-actions { margin-top: 16px; }
.help-safe { padding: 18px 20px; border: 1px solid var(--safe-line); border-radius: var(--r); background: var(--safe-soft); color: var(--ink); }
.help-safe-title { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-weight: 800; color: var(--safe); }
.help-safe p + p { margin-top: 10px; }
.help-safe a { font-weight: 700; }

/* ---------- 11. Widgets: ratings, reviews, contact ---------- */
.rating-slot { display: inline-flex; }
.rating { display: inline-flex; align-items: center; gap: 4px 8px; color: var(--ink); line-height: 1; }
.rating .stars { display: inline-flex; gap: 1px; color: var(--star); }
.rating .stars .icon { width: 1rem; height: 1rem; vertical-align: 0; }
.rating-num { font-weight: 800; font-size: 0.95rem; }
.rating-count { font-size: 0.875rem; color: var(--muted); font-weight: 550; }
.rating--summary .stars .icon { width: 1.4rem; height: 1.4rem; }
.rating--summary .rating-num { font-size: 1.15rem; }
.rating--summary .rating-count { font-size: 0.95rem; }
.rating--summary .rating-count::before { content: "("; }
.rating--summary .rating-count::after { content: ")"; }

.rate { margin-top: 3rem; padding: clamp(22px, 3.2vw, 34px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.rate-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 24px; margin-bottom: 18px; }
.rate-title { font-size: 1.55rem; }
.rate-agg { display: grid; gap: 6px; justify-items: end; text-align: right; }
.rate-agg .rating--summary { justify-content: flex-end; }
.rate-agg-text { color: var(--ink-2); font-weight: 600; }
.rate-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.rate-legend { padding: 0; margin-bottom: 12px; color: var(--muted); }
.rate-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rate-opt { position: relative; }
.rate-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.rate-label { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 108px; padding: 14px 6px 12px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, transform 0.15s; }
.rate-star { display: grid; place-items: center; color: var(--star); }
.rate-star .icon { width: 2.1rem; height: 2.1rem; vertical-align: 0; }
.rate-on { display: none; }
.rate-opt.is-lit .rate-on { display: inline-block; }
.rate-opt.is-lit .rate-off { display: none; }
.rate-num { font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.rate-word { font-size: 0.875rem; line-height: 1.25; color: var(--muted); font-weight: 600; }
.rate-input:checked + .rate-label { border-color: var(--brand); background: var(--brand-soft); }
.rate-input:hover + .rate-label { border-color: var(--brand-line); }
.rate-input:focus-visible + .rate-label { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }
.rate-choice { margin-top: 12px; min-height: 1.65em; font-weight: 700; color: var(--ink); }
.rate-more { display: grid; gap: 8px; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.rate-actions { margin-top: 6px; }
.rate-status { margin-top: 12px; min-height: 1.2em; font-weight: 650; color: var(--ink-2); }
.rate-status.is-error { color: var(--bad); }
.rate-done { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--r); background: var(--ok-soft); border: 1px solid var(--ok-line); }
.rate-done-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ok); color: var(--surface); }
.rate-thanks { margin-bottom: 12px; color: var(--ink); }
.rate-unavail, .rate-nojs { display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; color: var(--muted); font-size: 0.975rem; }
.rate-unavail .icon, .rate-nojs .icon { margin-top: 0.2em; }
.rate-dist { display: grid; gap: 4px; margin-top: 4px; width: min(280px, 100%); }
.rate-dist-row { display: grid; grid-template-columns: 1.4rem 1fr 2rem; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--muted); }
.rate-dist-bar { height: 8px; border-radius: 4px; background: var(--bg-alt); overflow: hidden; }
.rate-dist-bar > span { display: block; height: 100%; background: var(--star); border-radius: 4px; }

.rv-layout { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.rv-summary { display: grid; gap: 16px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.rv-big { font: 700 4.2rem/1 var(--font-serif); color: var(--ink); }
.rv-stars { display: flex; gap: 2px; margin: 6px 0; color: var(--star); }
.rv-stars .icon { width: 1.7rem; height: 1.7rem; vertical-align: 0; }
.rv-count { color: var(--ink-2); font-weight: 600; }
.rv-attrib { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 650; font-size: 0.95rem; }
.rv-attrib::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--star); }
.rv-actions { display: grid; gap: 10px; }
.rv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.rv-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.rv-head { display: flex; align-items: center; gap: 12px; }
.rv-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--brand-soft); object-fit: cover; }
.rv-name { font-weight: 750; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.rv-name:hover { text-decoration: underline; }
.rv-time { display: block; font-size: 0.875rem; color: var(--muted); }
.rv-card .rv-stars { margin: 0; }
.rv-card .rv-stars .icon { width: 1.1rem; height: 1.1rem; }
.rv-text { color: var(--ink-2); font-size: 0.975rem; line-height: 1.6; overflow-wrap: anywhere; }
.rv-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rv-more { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--brand); font: 700 0.95rem var(--font-sans); text-decoration: underline; cursor: pointer; }
.rv-note { margin-top: 18px; color: var(--muted); font-size: 0.9rem; }
.rv-card--skel, .rv-score--skel { gap: 12px; }
.rv-score--skel { display: grid; }
.skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--skel-1) 25%, var(--skel-2) 37%, var(--skel-1) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.skel-line { height: 14px; }
.skel-big { width: 140px; height: 64px; }
.skel-avatar { width: 46px; height: 46px; border-radius: 50%; }
.skel-w40 { width: 40%; } .skel-w60 { width: 60%; } .skel-w80 { width: 80%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.rv-layout--solo { grid-template-columns: minmax(0, 1fr); }
.rv-who { display: grid; min-width: 0; }
.rv-avatar--blank { display: block; }
.results-more { margin-top: 18px; }
.empty-try { margin: 10px 0 0; color: var(--ink-2); }
.empty-try a { font-weight: 700; }

/* ---------- 12. Text pages, contact, search ---------- */
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(28px, 5vw, 72px); align-items: start; }
.page-layout--solo { grid-template-columns: minmax(0, 1fr); }
.page-main { min-width: 0; max-width: 40rem; }
.page-aside { position: sticky; top: calc(var(--header-h) + 20px); }
.prose--page > h2:first-child, .prose--page > .lead + h2 { border-top: 0; padding-top: 0; }
.policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.policy-card { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.policy-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-line); color: inherit; }
.policy-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line); }
.policy-ic .icon { width: 1.5rem; height: 1.5rem; }
.policy-title { font: 700 1.25rem/1.25 var(--font-serif); color: var(--ink); }
.policy-sum { color: var(--ink-2); font-size: 0.975rem; }
.policy-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.policy-foot .icon { color: var(--brand); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.form-card { padding: clamp(22px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow); }
.form { display: grid; gap: 22px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-status { margin: 0; min-height: 1.4em; font-weight: 650; color: var(--ink-2); }
.form.is-busy { opacity: 0.8; }
.form-success { display: grid; justify-items: start; gap: 14px; padding: 8px 0; }
.form-success:focus { outline: none; }
.form-success-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: var(--surface); }
.form-success-ic .icon { width: 2rem; height: 2rem; }
.form-success-title { font-size: 2rem; }
.form-success-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.contact-aside { display: grid; gap: 16px; }
.aside-card { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.aside-card--safe { border-color: var(--safe-line); background: var(--safe-soft); }
.aside-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 700 1.22rem var(--font-serif); }
.aside-card--safe .aside-title { color: var(--safe); }
.aside-card p + p { margin-top: 10px; }
.aside-card a { font-weight: 700; }
.email-link { font-size: 1.1rem; overflow-wrap: anywhere; }
.tick-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tick-list li { position: relative; padding-left: 30px; }
.tick-list li::before { content: ""; position: absolute; left: 4px; top: 0.5em; width: 0.7em; height: 0.4em; border-left: 3px solid var(--ok); border-bottom: 3px solid var(--ok); transform: rotate(-45deg); }
.prose--aside { font-size: 1rem; line-height: 1.6; }
.prose--aside .lead { font-size: 1.1rem; line-height: 1.55; color: var(--ink); }
.prose--aside h2 { margin-top: 1.5em; padding-top: 1.1em; font-size: 1.3rem; }
.prose--aside h2:first-of-type { margin-top: 1.1em; }
.prose--aside .callout { margin: 1em 0; }
.prose--aside > * + * { margin-top: 0.8em; }
.results { display: grid; gap: 14px; list-style: none; margin: 22px 0 0; padding: 0; }
.result { position: relative; display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-left: 5px solid var(--acc, var(--brand)); border-radius: var(--r); background: var(--surface); transition: box-shadow 0.15s, border-color 0.15s; }
.result:hover { box-shadow: var(--shadow-sm); border-color: var(--acc-line, var(--brand-line)); border-left-color: var(--acc, var(--brand)); }
.result-title { font: 700 1.2rem/1.3 var(--font-serif); }
.result-title a { color: var(--ink); text-decoration: none; }
.result-title a::after { content: ""; position: absolute; inset: 0; }
.result-title a:hover { text-decoration: underline; }
.result-title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r); }
.result-sum { color: var(--ink-2); }
.result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.9rem; color: var(--muted); font-weight: 550; }
.result mark { background: var(--hl); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.search-status { min-height: 1.65em; margin-top: 18px; font-weight: 700; color: var(--ink); }
.search-start { margin-top: 12px; }
.search-skel { display: grid; gap: 14px; margin-top: 22px; }
.mini-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.mini-topic { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--line); border-left: 5px solid var(--acc); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 650; text-decoration: none; }
.mini-topic:hover { background: var(--acc-soft); border-color: var(--acc-line); border-left-color: var(--acc); color: var(--ink); }
.mini-topic-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--acc-mid); color: var(--acc-ink); }
.nf { padding: clamp(40px, 8vw, 96px) 0 clamp(48px, 8vw, 96px); background: radial-gradient(700px 360px at 80% 0, var(--glow-1), transparent 65%), var(--bg); }
.nf-code { font: 700 clamp(5rem, 4rem + 8vw, 9rem)/1 var(--font-serif); color: var(--brand-line); letter-spacing: -0.04em; }
.nf .search-box { margin-top: 28px; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.empty { display: grid; justify-items: center; gap: 10px; padding: clamp(28px, 5vw, 56px) 20px; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); text-align: center; }
.empty-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.empty-ic .icon { width: 1.8rem; height: 1.8rem; }
.empty-title { font: 700 1.4rem var(--font-serif); color: var(--ink); }
.empty-text { max-width: 30rem; color: var(--ink-2); }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vgrid, .vgrid--cat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vgrid-cta { grid-column: span 1; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--q { grid-column: 1 / -1; }
  .policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1060px) {
  .article-layout, .page-layout { grid-template-columns: minmax(0, 1fr); }
  .article-aside, .page-aside { position: static; order: -1; max-height: none; }
  .article-main, .page-main { max-width: none; }
}
@media (max-width: 960px) {
  .hero-grid, .banner-grid, .article-head-grid, .safe-banner, .contact-grid, .rv-layout, .help { grid-template-columns: minmax(0, 1fr); }
  .hero-art img { max-width: 440px; }
  .banner--group .banner-art img { margin-left: 0; max-width: 440px; }
  .article-head-art img { max-width: 480px; }
  .rv-summary { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .gi-list { grid-template-columns: minmax(0, 1fr); }
  .rel-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .vgrid, .vgrid--cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vgrid-cta { grid-column: span 2; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .policy-grid { grid-template-columns: minmax(0, 1fr); }
  .pn { grid-template-columns: minmax(0, 1fr); }
  .pn-link--next { text-align: left; }
  .pn-link--next .pn-dir { justify-self: start; }
  .rate-agg { justify-items: start; text-align: left; }
  .hero-facts li { padding: 0 18px; }
}
@media (max-width: 600px) {
  .rate-options { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .rate-label { min-height: 96px; padding: 10px 2px; }
  .rate-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rate-star .icon { width: 1.8rem; height: 1.8rem; }
  .filters-grid { grid-template-columns: minmax(0, 1fr); }
  .chip-group-label { flex-basis: 100%; }
  .search-box-row { flex-wrap: wrap; }
  .search-box-row .btn { flex: 1 1 100%; }
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .mini-topics { grid-template-columns: minmax(0, 1fr); }
  .safe-banner, .cta { border-radius: var(--r-lg); }
}
@media (max-width: 520px) {
  .topic-grid { grid-template-columns: minmax(0, 1fr); }
  .vgrid, .vgrid--cat { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vgrid-cta { grid-column: span 1; }
  .vtile { flex-direction: row; align-items: stretch; }
  .vtile-media { flex: 0 0 40%; aspect-ratio: 8 / 5; align-self: center; margin: 10px 0 10px 10px; border-radius: 10px; }
  .vtile-body { align-content: center; }
  .hero-facts { gap: 18px 0; }
  .hero-facts li { padding: 0 16px; }
  .hero-facts strong { font-size: 1.5rem; }
  .menu-grid { gap: 0; }
}

/* Back to top button (added by site.js on long pages) */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 2px solid var(--brand); border-radius: 50%; background: var(--surface); color: var(--brand); box-shadow: var(--shadow); cursor: pointer; }
.fab:hover { background: var(--brand); color: var(--on-brand); }
.fab .icon { width: 1.5rem; height: 1.5rem; }

/* ---------- 13. Forced colours, motion ---------- */
@media (forced-colors: active) {
  .card, .topic, .vtile, .rel, .gi, .result, .policy-card, .btn, .chip, .input, .select, .textarea, .toc-box, .rate-label, .seg-face { border: 1px solid CanvasText; }
  .btn--primary { border-color: ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
  .icon { forced-color-adjust: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .skel { animation: none; background: var(--skel-1); }
  .card:hover, .topic:hover, .vtile:hover, .vcta:hover, .policy-card:hover, .safe-link:hover { transform: none; }
}

/* ---------- 14. Print ---------- */
@media print {
  :root { --bg: #fff; --bg-alt: #fff; --surface: #fff; --ink: #000; --ink-2: #000; --muted: #333; --line: #bbb; }
  html { font-size: 100%; }
  body { display: block; background: #fff; color: #000; font-size: 11.5pt; line-height: 1.5; }
  .site-header, .site-footer, .skip-link, .crumbs, .article-aside, .page-aside, .rate, .help, .pn, .related, .filters, .jump, .copy-btn, [data-print], .search-box, .menu, .settings, .article-head-art, .banner-art, .hero-art, .reviews, .to-top, .cta, .safe-banner, .rate-link, .rating-slot, .nf-actions { display: none !important; }
  .article-head, .page-head, .banner { background: none; border: 0; padding: 0 0 8pt; }
  .container, .container--read { width: 100%; max-width: none; margin: 0; }
  .article-layout, .page-layout { display: block; padding: 0; }
  .article-main, .page-main { max-width: none; }
  .prose { font-size: 11.5pt; }
  .prose h2 { break-after: avoid; border-top: 1px solid #999; }
  .prose h3, .prose h4 { break-after: avoid; }
  .callout, figure.diagram, .table-wrap, .prose details, .prose ol.steps > li, pre { break-inside: avoid; }
  .callout { border: 1px solid #666; border-left-width: 5px; background: #fff !important; }
  .prose ol.steps > li::before { background: #fff; color: #000; border: 2px solid #000; box-shadow: none; }
  .prose ol.steps > li::after { background: #999; }
  .prose pre { background: #fff; color: #000; border: 1px solid #666; white-space: pre-wrap; }
  .table-wrap { overflow: visible; }
  .prose table { min-width: 0; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; color: #333; }
  .prose details > :not(summary), details.diagram-text > * { display: block !important; }
  .prose details::details-content { content-visibility: visible; display: block; }
  .prose summary::after { display: none; }
  .prose figure.diagram { border: 1px solid #999; }
  a { color: #000; }
  .card, .rel { box-shadow: none; }
}