/* Single source of truth for the small subset of design tokens that MUST
   read identically in popup.css (mini mode) and sidepanel.css (full panel)
   so switching between the two doesn't feel like a different product —
   see popup.css's own header comment for the full rationale. This used to
   be two hand-copied :root blocks, kept in sync only by a comment warning
   not to drift and a regression test (test/css-token-parity.test.js) that
   could catch a mismatch only after it was already written. Loading this
   one file from both popup.html and sidepanel.html (before their own
   popup.css/sidepanel.css) makes drift structurally impossible instead of
   just detectable — there is now only one place to ever edit these values.

   Not shared: font sizes (mini's much smaller type scale) and radii/glass/
   gradient/stat tokens (sidepanel-only, nothing in popup to drift from) —
   those stay in each file's own :root, right where they're used. */
:root {
  color-scheme: light;
  /* Spacing steps on a 4px grid, shared by the panel and the Mini popup:
     paddings, margins and gaps use these. 2px nudges and the in-between 6,
     10 and 14px of compact controls stay as written. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  /* DS-21: the in-between steps the panel uses, named (no new values). */
  --space-1h: 6px;
  --space-2h: 10px;
  --gutter: 14px;
  /* DS-18 (review r2 N-3): one radius scale for the panel and the Mini popup. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f2f1ee;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  /* #898781 (the original value, still used as-is in dark mode below)
     computes to ~3.4:1 against --page here — below WCAG AA's 4.5:1 floor
     for normal-size text, which is exactly what this token is used for
     (timestamps, meta labels) at 10-11px, well under the "large text"
     18pt exemption. Darkened to ~4.97:1, same hue direction, dark mode
     needs no change since #898781 already hits ~5.4:1 against near-black. */
  --text-muted: #6e6c66;
  --border: rgba(11, 11, 11, 0.10);
  /* UX-03 (WCAG 1.4.11): a form field's only edge. --border (1.24:1) is
     right for cards and dividers but left inputs, selects and the KV grid
     nearly invisible; this one is 3.1:1 on --surface, --surface-2 and --page. */
  --border-control: rgba(11, 11, 11, 0.45);
  --accent: #236bc2;
  --accent-fg: #ffffff;
  --accent-wash: rgba(35, 107, 194, 0.10);
  --status-critical: #d03b3b;
  --status-good: #0ca30c;
  /* BRAND-C: the fox glyph and the "Fox" of the wordmark (5.0:1 on --surface). */
  --brand-fox: #c2410c;
}

/* --accent-fg is overridden in dark mode: white on the bright #00b7ff is only
   ~2.3:1 (WCAG AA needs 4.5:1), so every primary button (Start Recording,
   Export, Send, Save) used near-dark text there instead — #04121f is ~8.3:1.
   Light mode keeps white on #236bc2 (~5.3:1). test/css-token-parity.test.js
   checks both ratios. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #020817;
    --surface: #07132d;
    --surface-2: #0a1838;
    --text-primary: #f8fafc;
    --text-secondary: #a9b7d0;
    --text-muted: #7d8ca8;
    --border: rgba(255, 255, 255, 0.10);
    --border-control: rgba(255, 255, 255, 0.35);
    --accent: #00b7ff;
    --accent-fg: #04121f;
    --accent-wash: rgba(0, 183, 255, 0.16);
    --status-critical: #ff3158;
    --status-good: #00e89a;
    --brand-fox: #fb923c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #020817;
  --surface: #07132d;
  --surface-2: #0a1838;
  --text-primary: #f8fafc;
  --text-secondary: #a9b7d0;
  --text-muted: #7d8ca8;
  --border: rgba(255, 255, 255, 0.10);
  --border-control: rgba(255, 255, 255, 0.35);
  --accent: #00b7ff;
  --accent-fg: #04121f;
  --accent-wash: rgba(0, 183, 255, 0.16);
  --status-critical: #ff3158;
  --status-good: #00e89a;
  --brand-fox: #fb923c;
}

/* RequestFox website. Loaded after tokens.css, which the build copies from
   the panel's own lib/shared-tokens.css: the site wears the product's
   palette, not a lookalike. Owner's pick (2026-11-01): concept A's hero (the
   real side panel docked beside a page) on top, concept C's body
   (question-led sections, an "On this page" rail, a facts sheet).
   System fonts only: nothing downloaded, nothing to shift when a font
   arrives, no third party. Logical properties throughout, so dir="rtl"
   works without a second sheet. The flag colours below are the panel's
   sidepanel.css values, copied so badges read exactly like the cards in
   the panel (test/site.test.js keeps them equal). */
:root {
  --status-serious: #ec835a;
  --status-warning: #fab219;
  --text-good: #126f12;
  --text-warning: #8a5300;
  --text-serious: #a8461a;
  --text-critical: #b42828;
  /* S-1 (WCAG 1.4.3): accent text on the accent wash was 4.41:1 in light;
     the panel's own light link blue (A11Y-41) reads 6.7:1 there. */
  --link: #1a5296;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --rule: rgba(11, 11, 11, 0.12);
  --ink-soft: rgba(11, 11, 11, 0.04);
  --shadow-lg: 0 1px 2px rgba(11, 11, 11, 0.06), 0 24px 60px -24px rgba(11, 11, 11, 0.24);
  --code-bg: #0b1220;
  --wrap: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --status-serious: #ff8a00;
    --status-warning: #ffb020;
    --text-good: #00e89a;
    --text-warning: #ffb020;
    --text-serious: #ff8a00;
    --text-critical: #ff6d88;
    --link: var(--accent);
    --rule: rgba(255, 255, 255, 0.12);
    --ink-soft: rgba(255, 255, 255, 0.05);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 80px -30px rgba(0, 0, 0, 0.85);
    --code-bg: #010510;
  }
}
:root[data-theme="dark"] {
  --status-serious: #ff8a00;
  --status-warning: #ffb020;
  --text-good: #00e89a;
  --text-warning: #ffb020;
  --text-serious: #ff8a00;
  --text-critical: #ff6d88;
  --link: var(--accent);
  --rule: rgba(255, 255, 255, 0.12);
  --ink-soft: rgba(255, 255, 255, 0.05);
  --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 80px -30px rgba(0, 0, 0, 0.85);
  --code-bg: #010510;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; line-height: 1.12; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--link); text-underline-offset: 3px; }
code, kbd, pre { font-family: var(--mono); }
code { padding: 1px 6px; border-radius: 5px; background: var(--ink-soft); font-size: 0.88em; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 50; padding: 10px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-fg); font-weight: 600; text-decoration: none; }
.skip:focus-visible { top: 12px; }

/* Header: brand, four links, one button. On a phone the links get their own row. */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); }
.header-row { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text-primary); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none; }
.brand svg { width: 26px; height: 26px; flex: none; color: var(--brand-fox); }
.brand .fox { color: var(--brand-fox); }
.site-nav { display: flex; gap: 2px; margin-inline-start: auto; }
.site-nav a { padding: 8px 12px; border-radius: 8px; color: var(--text-secondary); font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--text-primary); background: var(--ink-soft); }
.header-cta { min-height: 38px; padding: 0 14px; font-size: 0.875rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; font-weight: 600; font-size: 0.9375rem; line-height: 1.2; text-decoration: none; touch-action: manipulation; transition: transform 120ms ease, background-color 160ms ease; }
.btn:active { transform: scale(0.97); }
.btn-lg { min-height: 50px; padding: 0 22px; font-size: 1rem; border-radius: 12px; }
.btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(11, 11, 11, 0.18); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text-primary)); }
.btn-ghost { background: var(--surface); color: var(--text-primary); border-color: var(--border-control); }
.btn-ghost:hover { background: var(--surface-2); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; padding: 0.1em 0.5em; border: 1px solid var(--border-control); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); font-size: 0.82em; font-weight: 600; line-height: 1.5; white-space: nowrap; }

/* A badge as the panel draws it: the same words, the same colours. */
.badge { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border: 1px solid currentColor; border-radius: 6px; font: 700 0.6875rem/1 var(--mono); letter-spacing: 0.04em; white-space: nowrap; }
.badge.critical { color: var(--text-critical); background: color-mix(in srgb, var(--status-critical) 10%, transparent); }
.badge.warning { color: var(--text-warning); background: color-mix(in srgb, var(--status-warning) 12%, transparent); }
.badge.serious { color: var(--text-serious); background: color-mix(in srgb, var(--status-serious) 10%, transparent); }
.badge.info { color: var(--link); background: var(--accent-wash); }

/* A real panel screenshot, cut by its frame: a fixed height, so no layout shift. */
.shot { position: relative; overflow: hidden; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); }
.shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border); pointer-events: none; }
.shot img { width: 100%; height: auto; }
.shot.h-sm { height: 360px; }
.shot.h-md { height: 460px; }
.shot.h-lg { height: 600px; }
.shot.from-40 img { transform: translateY(-40%); }
.fig { max-width: 380px; margin: 28px 0 0; }
.fig figcaption { margin-top: 10px; color: var(--text-muted); font-size: 0.8125rem; }

/* Home hero (concept A): centred promise, then the panel docked beside an outlined page. */
.hero { padding: 84px 0 72px; border-bottom: 1px solid var(--rule); background: radial-gradient(60% 50% at 50% 0%, var(--accent-wash), transparent 70%), var(--page); }
.hero-copy { max-width: 900px; text-align: center; }
.eyebrow { display: inline-block; margin-bottom: 20px; padding: 4px 12px; border-radius: 999px; background: var(--accent-wash); color: var(--link); font-size: 0.8125rem; font-weight: 600; }
.hero h1 { font-size: clamp(2.375rem, 1.3rem + 4.2vw, 4.25rem); font-weight: 750; letter-spacing: -0.035em; }
.hero .lede { max-width: 640px; margin: 22px auto 0; color: var(--text-secondary); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; }
.hero .cta { justify-content: center; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: 0.875rem; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--status-good); }
.stage { max-width: 1040px; margin: 56px auto 0; }
.browser { overflow: hidden; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border); }
.browser-bar { display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.dots { display: inline-flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--text-muted) 40%, transparent); }
.address { flex: 0 1 420px; margin-inline: auto; padding: 4px 14px; overflow: hidden; border-radius: 8px; background: var(--surface); color: var(--text-muted); font-size: 0.8125rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.browser-body { display: grid; grid-template-columns: minmax(0, 0.8fr) 380px; justify-content: space-between; height: 640px; }
.page-sketch { display: flex; flex-direction: column; gap: 18px; padding: 36px 40px; }
.sk { border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
.sk-nav { height: 14px; width: 100%; border-radius: 4px; }
.sk-title { width: 46%; height: 30px; }
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sk-card { aspect-ratio: 4 / 3; }
.sk-line { width: 80%; height: 14px; }
.sk-line.short { width: 52%; }
.sk-button { width: 160px; height: 42px; margin-top: auto; border-radius: 10px; }
.panel-shot { height: 640px; border-radius: 0; box-shadow: none; border-inline-start: 1px solid var(--border); }
.stage figcaption { margin-top: 14px; color: var(--text-muted); font-size: 0.8125rem; text-align: center; }

/* Inner page hero (concept C): breadcrumb, the question or name, a direct answer. */
.page-hero { padding: 44px 0 56px; border-bottom: 1px solid var(--rule); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; color: var(--text-muted); font-size: 0.875rem; }
.crumbs li + li::before { content: "/"; margin-inline-end: 6px; }
.crumbs a { display: inline-block; padding-block: 2px; color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-hero h1 { max-width: 820px; font-size: clamp(2.125rem, 1.3rem + 3vw, 3.5rem); font-weight: 750; letter-spacing: -0.03em; line-height: 1.06; }
.answer { max-width: 66ch; margin-top: 24px; padding-inline-start: 18px; border-inline-start: 3px solid var(--brand-fox); color: var(--text-secondary); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; }
.answer strong { color: var(--text-primary); }
.byline { margin-top: 18px; color: var(--text-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.page-hero .fig { margin: 0; }

/* Body (concept C): an "On this page" rail and question-led sections. */
.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px; padding: 64px 0 32px; }
.toc { position: sticky; top: 96px; align-self: start; }
.toc-title { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.toc ol { margin: 12px 0 0; padding: 0; list-style: none; border-inline-start: 1px solid var(--rule); }
.toc a { display: block; margin-inline-start: -1px; padding: 6px 0 6px 14px; border-inline-start: 2px solid transparent; color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.4; text-decoration: none; }
.toc a:hover { color: var(--text-primary); border-inline-start-color: var(--brand-fox); }
.content { min-width: 0; max-width: 740px; }
.block { padding: 0 0 56px; scroll-margin-top: 96px; }
.block + .block { padding-top: 56px; border-top: 1px solid var(--rule); }
.block h2 { font-family: var(--serif); font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.125rem); font-weight: 600; letter-spacing: -0.015em; }
.block h3 { margin-top: 28px; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.block > p, .block > ul:not([class]), .block > ol:not([class]) { margin-top: 16px; color: var(--text-secondary); }
.block > p:first-of-type { color: var(--text-primary); }
.block li + li { margin-top: 6px; }
.flag-list { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.flag-list li { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--text-secondary); }
.flag-list .badge { flex: none; min-width: 150px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.chips li { margin: 0; padding: 4px 12px; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.9375rem; }
.fit { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; border-top: 2px solid var(--text-primary); }
.fit > div { padding: 18px 20px 0 0; }
.fit > div + div { padding-inline-start: 20px; border-inline-start: 1px solid var(--rule); }
.fit h3 { margin: 0; font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; }
.fit p { margin-top: 8px; color: var(--text-secondary); font-size: 0.9375rem; }
.spec { margin: 24px 0 0; border-top: 2px solid var(--text-primary); }
.spec div { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.spec dt { font-weight: 600; }
.spec dd { margin: 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.cards li { position: relative; margin: 0; padding: 20px 22px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
.cards li:hover { border-color: var(--border-control); }
.cards a { color: var(--text-primary); font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; text-decoration: none; }
.cards a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cards p { margin-top: 6px; color: var(--text-secondary); font-size: 0.9375rem; }

/* Steps a guide asks you to follow (its HowTo markup is made from them). */
.howto { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: step; }
.howto li { position: relative; margin: 0; padding: 0 0 22px 52px; counter-increment: step; }
.howto li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-wash); color: var(--link); font-weight: 700; font-variant-numeric: tabular-nums; }
.howto h3 { margin: 4px 0 0; font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; }
.howto p { margin-top: 6px; color: var(--text-secondary); }

/* Comparison table: facts only, each one sourced. Scrolls sideways on a phone. */
.table-wrap { margin-top: 24px; overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; }
table.cmp { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.cmp th, .cmp td { padding: 12px 14px; border-bottom: 1px solid var(--rule); text-align: start; vertical-align: top; }
.cmp thead th { background: var(--surface-2); font-size: 0.8125rem; letter-spacing: 0.02em; }
.cmp tbody th { width: 28%; font-weight: 600; }
.cmp td { color: var(--text-secondary); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.sources { margin: 16px 0 0; padding-inline-start: 20px; color: var(--text-muted); font-size: 0.875rem; }
.sources li { margin-top: 4px; overflow-wrap: anywhere; }
.note { margin-top: 20px; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); color: var(--text-secondary); font-size: 0.9375rem; }
pre.cmd { margin: 18px 0 0; padding: 16px 18px; overflow-x: auto; border-radius: 12px; background: var(--code-bg); color: #e2e8f0; font-size: 0.875rem; line-height: 1.7; }
pre.cmd code { padding: 0; background: none; font-size: inherit; }

.qa { border-bottom: 1px solid var(--rule); }
.qa:first-of-type { margin-top: 20px; border-top: 2px solid var(--text-primary); }
.qa summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; content: "+" / ""; flex: none; color: var(--brand-fox); font-family: var(--sans); font-size: 1.375rem; font-weight: 400; line-height: 1; }
.qa[open] summary::after { content: "–"; content: "–" / ""; }
.qa p { padding: 0 0 18px; color: var(--text-secondary); }

/* Changelog releases, written from CHANGELOG.md by the build. */
.release + .release { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--rule); }
.release h2 { font-family: var(--serif); font-size: 2rem; font-weight: 600; }
.release h2 time { margin-inline-start: 10px; color: var(--text-muted); font-family: var(--sans); font-size: 1rem; font-weight: 500; }
.release h3 { margin-top: 28px; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.release ul { margin: 12px 0 0; padding-inline-start: 20px; color: var(--text-secondary); content-visibility: auto; contain-intrinsic-size: auto 320px; }
.release li { margin-top: 8px; }
.release p { margin-top: 12px; color: var(--text-secondary); }

.final { padding: 88px 0; border-top: 1px solid var(--rule); background: var(--surface-2); text-align: center; }
.final h2 { max-width: 760px; margin-inline: auto; font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); font-weight: 750; letter-spacing: -0.03em; }
.final p { max-width: 560px; margin: 14px auto 0; color: var(--text-secondary); }
.final .cta { justify-content: center; }

.site-footer { padding: 56px 0 40px; border-top: 1px solid var(--rule); color: var(--text-secondary); font-size: 0.9375rem; }
.foot-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.foot-cols p { max-width: 280px; margin-top: 12px; color: var(--text-muted); font-size: 0.875rem; }
.foot-cols h2 { color: var(--text-primary); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.foot-cols ul { margin: 12px 0 0; padding: 0; list-style: none; }
.foot-cols li { margin-top: 6px; }
.foot-cols a { color: var(--text-secondary); text-decoration: none; }
.foot-cols a:hover { color: var(--text-primary); text-decoration: underline; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--text-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.not-found { padding: 120px 0; text-align: center; }
.not-found h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); letter-spacing: -0.03em; }
.not-found p { max-width: 560px; margin: 16px auto 0; color: var(--text-secondary); }
.not-found .cta { justify-content: center; }

@media (max-width: 1000px) {
  .page-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .layout { grid-template-columns: 1fr; gap: 0; padding-top: 48px; }
  .toc { display: none; }
  .fit { grid-template-columns: 1fr; }
  .fit > div + div { margin-top: 18px; padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--rule); }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
  .foot-cols > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body { font-size: 1rem; }
  .header-row { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-top: 10px; }
  .header-cta { margin-inline-start: auto; }
  .site-nav { order: 3; width: 100%; margin: 6px 0 0; padding-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
  .site-nav a { padding: 8px 10px; }
  .hero { padding: 44px 0 56px; }
  .browser { max-width: 400px; margin-inline: auto; }
  .browser-body { grid-template-columns: 1fr; height: 520px; }
  .page-sketch { display: none; }
  .panel-shot { height: 520px; }
  .cta .btn { flex: 1 1 100%; }
  .page-hero { padding: 28px 0 44px; }
  .spec div { grid-template-columns: 1fr; gap: 2px; }
  .flag-list li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}