/* Hallmark · shape: Index-First (/), Long Document (guides, profiles, /request-shortlist) · genre: editorial · theme: Almanac (deal 1/3, seed independent-buyer-guide-compares-bb6b·6dd0079e·2026-11-10·r0) · redesign: full · copy: verbatim
 * hero: Banner (every route) · nav: edge-aligned bar, wordmark left, five links and the shortlist as the one filled control, firm rule under · footer: mast, the independence line over two link lists and a colophon row · imagery: none, the comparison table on the printed sheet is the picture · signature: the nine-company table set as a reference book sets it, on the pale sheet with a firm ink rule
 * axes: mid/grotesk-sans/chromatic-magenta · posture: restrained · contrast: pass · fold: pass · v2.0.0
 * sweep: Floor 0 FAIL · Reflex 5 waived (77, 78, 59, 79, 49b) · finish-review: subagent (opus), fix · 8 findings · 8 resolved · impeccable critique: subagent (opus), 27/40, items 1 to 9 fixed, 10 follow-up */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 · weakest: V, a guide site is a table and prose by nature; the home page breaks the head-then-block run with an ink band and two side-hung row lists */
/* Hallmark · waive 77 · Long Document shape, prose on a 65ch measure beside a dated left rail · the article scale asks for a 65ch reading measure on guides and profiles, so their body is narrower than ten columns */
/* Hallmark · waive 78 · Long Document shape, article h2 at about 36px under a 60px page head · the article type scale for guides and profiles sets section heads inline at the h2 step, not at the landing-page section size */
/* Hallmark · dropped https://cdn.tailwindcss.com, the Google Fonts stylesheet · every page now loads /assets/site.css and self-hosted faces, so the CDN runtime and the font request leave */
/* Hallmark · waive 59 · Long Document shape, the page head and the article part by 64px on guides and profiles · the head and the article are one document, the dated rail and the sheet carry the seam, so a landing-page section gap would split the answer from its evidence */
/* Hallmark · waive 79 · the 404 and the paused Sama profile hold a head and one line, the footer follows the page's own padding · a not-found page and a paused profile have nothing more to show, and filling the band would mean new copy */
/* Hallmark · waive 49b · a vendor name in the pinned company column of the comparison table, two lines at most at 320 · the pinned column is held to 7.5rem on phones so the row's facts stay in view, and a company name cannot shorten */
/* Hallmark · answered F1 · copy: verbatim, the fact-checked text keeps its straight apostrophes in "Independent buyer's guide" */
/* Hallmark · answered F25 · the comparison table scrolls sideways on phones as the brief asks, with the company column pinned so each row keeps its name */
/* Hallmark · answered F23 · the 404 page had no meta description before; adding one is new copy, left for the owner */
/* Hallmark · dismissed render · the disk render blocks file:// font loads; the served shots (127.0.0.1) load all five faces */
/* Hallmark · dismissed 25 · the ink band's lede is two sentences, legal from 28ch beside its list */
/* Hallmark · dismissed 74 · request-shortlist keeps the class string "mt-4 text-slate-400 leading-relaxed max-w-3xl" on its note because the shortlist Worker rewrites the page by matching it; no Tailwind runs */

/* Faces are self-hosted (SIL Open Font License): Hanken Grotesk, Newsreader, IBM Plex Mono, latin subset. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/assets/fonts/hanken-grotesk-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/newsreader-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/newsreader-italic-latin-var.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.5rem, 4.6vw + 1rem, 5rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  /* the article scale: one h1, h2 per section, h3 inside a section, body 17px on a phone to 19px on a desktop */
  --text-body: clamp(1.0625rem, 0.3vw + 0.95rem, 1.1875rem);
  --text-article-h2: clamp(1.625rem, 1.2vw + 1.2rem, 2.375rem);
  --text-article-h3: clamp(1.25rem, 0.4vw + 1.1rem, 1.5rem);
  --text-note: clamp(1rem, 0.15vw + 0.95rem, 1.0625rem);
  --leading-body: 1.6; --measure: 56ch; --space-para: 0.9em; --space-h2: 2.4em; --space-h3: 1.8em;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 220ms;
  --color-error: oklch(41% 0.17 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --nav-height: 72px; --control-height: 48px; --control-height-s: 44px; --table-min: 900px; --company-col: 7.5rem; --facts-label: 13rem;
  --z-base: 1; --z-raised: 10; --z-sticky: 200;
  --color-paper: oklch(84% 0.012 245); --color-paper-2: oklch(81% 0.012 245); --color-paper-3: oklch(77% 0.012 245);
  --color-ink: oklch(16% 0.020 245); --color-ink-2: oklch(24% 0.018 245); --color-muted: oklch(38% 0.016 245);
  --color-rule: oklch(73% 0.013 240); --color-rule-2: oklch(32% 0.018 240);
  --color-accent: oklch(45% 0.180 350); --color-accent-2: oklch(37% 0.160 350); --color-accent-ink: oklch(97% 0.006 245); --color-focus: oklch(46% 0.190 350);
  --color-sheet: oklch(93.5% 0.008 245); --color-sheet-row: oklch(90.5% 0.009 245); --color-field: oklch(97.5% 0.005 245); --color-shade: oklch(16% 0.020 245 / 0.22);
  --color-on-ink: oklch(93.5% 0.008 245); --color-on-ink-2: oklch(82% 0.012 245); --color-rule-on-ink: oklch(34% 0.018 245); --color-focus-on-ink: oklch(93.5% 0.008 245);
  --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Newsreader", ui-serif, Georgia, serif;
  --font-outlier: "IBM Plex Mono", ui-monospace, monospace;
  --radius-card: 0; --radius-pill: 2px; --rule-hair: 1px; --rule-bar: 2px; --rule-ink: 2px; --shadow-card: none;
  --tracking-display: -0.02em; --tracking-hero: -0.03em; --display-weight: 600;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-xl); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); display: flex; flex-direction: column; min-height: 100dvh; }
main { flex: 1 0 auto; }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: var(--color-ink); text-decoration-line: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: text-decoration-thickness var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--color-accent-2); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 22ch; font-size: var(--text-display); letter-spacing: var(--tracking-hero); line-height: 1; }
h2 { max-width: 30ch; font-size: var(--text-section); }
h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
strong { font-weight: 500; color: var(--color-ink); }
em { font-style: italic; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-family: var(--font-outlier); font-feature-settings: "tnum" 1; }

/* skip link: hidden until it takes keyboard focus */
.skip-link { position: absolute; left: var(--space-md); top: var(--space-xs); z-index: var(--z-sticky); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-on-ink); font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); text-decoration: none; transform: translateY(-200%); }
.skip-link:focus-visible, .skip-link:focus { transform: none; outline: 2px solid var(--color-focus); outline-offset: 2px; }
main:focus { outline: none; }

/* ---------- nav ---------- */
.site-head { border-bottom: var(--rule-bar) solid var(--color-rule-2); background: var(--color-paper); }
.site-head__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-xl); row-gap: var(--space-xs); min-height: var(--nav-height); padding-block: var(--space-sm); }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--color-ink); text-decoration: none; white-space: nowrap; padding-block: var(--space-xs); }
.wordmark__tld { color: var(--color-muted); font-weight: 500; }
.wordmark:hover { color: var(--color-accent-2); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-lg); row-gap: var(--space-2xs); }
.site-nav a { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-ink-2); text-decoration-line: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--control-height-s); border-bottom: var(--rule-bar) solid transparent; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.site-nav a:hover { color: var(--color-ink); border-bottom-color: var(--color-rule-2); }
.site-nav a[aria-current] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.site-nav a.btn { border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent-ink); padding-inline: var(--space-md); }
.site-nav a.btn:hover { color: var(--color-accent-ink); border-color: var(--color-accent-2); }
.site-nav a.btn[aria-current] { box-shadow: inset 0 calc(-1 * var(--rule-ink) - 1px) 0 var(--color-accent-ink); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- page head (Banner on every route) ---------- */
.page-head { padding-block: var(--space-2xl) var(--space-2xl); }
.crumbs { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); margin-bottom: var(--space-md); }
.crumbs a { color: var(--color-ink-2); }
.byline { display: flex; flex-wrap: wrap; row-gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--color-muted); margin-bottom: var(--space-lg); }
.byline > span { padding-inline: var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule-2); }
.byline > span:first-child { padding-left: 0; border-left: 0; }
.page-head h1 { font-size: var(--text-display-s); }
.page-head--home { padding-block: var(--space-xl) var(--space-lg); }
.page-head--home h1 { font-size: var(--text-display-s); max-width: none; }
.page-head--home .answer { margin-top: var(--space-lg); }
.answer { margin-top: var(--space-xl); max-width: 64ch; border-top: var(--rule-ink) solid var(--color-ink); padding-top: var(--space-md); }
.answer p { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); }
.page-head__split { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--space-2xl); align-items: start; }
.context { margin-top: var(--space-lg); font-size: var(--text-note); line-height: var(--leading-body); color: var(--color-ink-2); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); }

/* ---------- sections (home) ---------- */
.section { padding-block: var(--section-gap-s); }
.section--tight-top { padding-top: var(--space-lg); }
.section--tight-top .section-head { margin-bottom: var(--space-lg); }
.section + .section { padding-top: var(--space-2xl); }
.section + .band--ink, .band--ink + .section { padding-top: var(--section-gap-s); }
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-xl); }
.section-head h2 { font-size: var(--text-section); }
.side-hung { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap-columns); align-items: start; }
.side-hung > header { position: sticky; top: var(--space-xl); }
.side-hung > header h2 { max-width: 12ch; }
.side-hung > header p { margin-top: var(--space-md); font-size: var(--text-lead); line-height: 1.45; max-width: 30ch; }

/* the sheet: the printed page laid on the slate */
.sheet { background: var(--color-sheet); border-top: var(--rule-ink) solid var(--color-ink); }
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--color-muted) var(--color-sheet);
  background: linear-gradient(to left, var(--color-sheet) 30%, transparent) right center / var(--space-xl) 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, var(--color-shade), transparent) right center / var(--space-sm) 100% no-repeat scroll,
    var(--color-sheet); }
.table-scroll:focus-visible { outline-offset: 4px; }
table { border-collapse: collapse; width: 100%; }
table.cmp { min-width: var(--table-min); font-size: var(--text-note); line-height: 1.45; }
table.cmp th, table.cmp td { padding: var(--space-md) var(--space-md); text-align: left; vertical-align: top; }
table.cmp thead th { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); border-bottom: var(--rule-bar) solid var(--color-rule-2); padding-block: var(--space-md) var(--space-sm); white-space: nowrap; }
table.cmp tbody td { border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
table.cmp tbody tr:first-child td { border-top: 0; }
table.cmp tbody td:first-child { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); min-width: var(--company-col); }
table.cmp tbody td:last-child { color: var(--color-ink); }
table.cmp th:first-child, table.cmp td:first-child { position: sticky; left: 0; z-index: var(--z-raised); background: var(--color-sheet); padding-left: var(--space-lg); }
table.cmp th:last-child, table.cmp td:last-child { padding-right: var(--space-lg); }
.source-note { margin-top: var(--space-lg); max-width: 75ch; font-size: var(--text-note); line-height: var(--leading-body); color: var(--color-ink-2); }

.cta { margin-top: var(--space-xl); }
.prose > .cta { margin-top: var(--space-xl); }

/* how to choose: the five checks as ruled rows */
.checks { max-width: 44rem; list-style: none; padding: 0; counter-reset: check; border-top: var(--rule-bar) solid var(--color-rule-2); }
.checks li { counter-increment: check; position: relative; padding: var(--space-lg) 0 var(--space-lg) var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-body); line-height: var(--leading-body); }
.checks li::before { content: counter(check); position: absolute; left: 0; top: var(--space-lg); font-family: var(--font-outlier); font-feature-settings: "tnum" 1; font-weight: 500; font-size: var(--text-lg); color: var(--color-accent); line-height: 1.3; }
.checks li strong { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.checks-intro { font-size: var(--text-body); margin-bottom: var(--space-lg); }

/* the ink band: what most rankings get wrong */
.band--ink { background: var(--color-ink); color: var(--color-on-ink-2); }
.band--ink h2, .band--ink strong { color: var(--color-on-ink); }
.band--ink a { color: var(--color-on-ink); }
.band--ink :focus-visible { outline-color: var(--color-focus-on-ink); }
.band--ink p, .band--ink li { font-size: var(--text-body); line-height: var(--leading-body); }
.band--ink .side-hung > header p { font-size: var(--text-lead); color: var(--color-on-ink-2); }
.rules { max-width: 44rem; list-style: none; padding: 0; border-top: var(--rule-bar) solid var(--color-on-ink-2); }
.rules li { padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule-on-ink); color: var(--color-on-ink); }
.band--ink .closing { margin-top: var(--space-xl); max-width: 60ch; }

/* questions */
.faq { border-top: var(--rule-bar) solid var(--color-rule-2); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) var(--space-xl); align-items: baseline; column-gap: var(--space-md); padding-block: var(--space-lg); font-family: var(--font-display); font-weight: 500; font-size: var(--text-title); line-height: 1.25; letter-spacing: -0.01em; color: var(--color-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-outlier); font-weight: 400; color: var(--color-accent); justify-self: end; transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-accent-2); }
.faq details p { padding-bottom: var(--space-lg); padding-right: var(--space-xl); font-size: var(--text-body); line-height: var(--leading-body); max-width: var(--measure); }

/* the document grid: dates and crumbs in a left rail, the article on nine columns */
.doc { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--gap-columns); align-items: start; }
.doc__main { grid-column: 2; min-width: 0; }
.doc__rail { grid-column: 1; position: sticky; top: var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-xs); }
.doc__rail .byline { flex-direction: column; margin-bottom: 0; }
.doc__rail .byline > span { padding: var(--space-xs) 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.doc__rail .crumbs { margin-bottom: var(--space-lg); }

/* ---------- the article scale (guides and profiles) ---------- */
.article { padding-bottom: var(--section-gap-s); }
.prose { max-width: var(--measure); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink-2); }
.prose > * + * { margin-top: var(--space-para); }
.prose h2 { font-size: var(--text-article-h2); line-height: 1.12; max-width: 28ch; margin-top: var(--space-h2); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-article-h3); line-height: 1.25; margin-top: var(--space-h3); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-md); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-xs); }
.prose li::marker { color: var(--color-accent); }
.prose strong { color: var(--color-ink); }
.prose .sources { list-style: none; padding-left: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.prose .sources li { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-note); line-height: 1.5; color: var(--color-ink-2); }
.prose .sources li + li { margin-top: 0; }

/* a profile's fact table: label and value, restacked on a phone */
.facts-sheet { max-width: 72rem; margin-bottom: var(--space-2xl); }
table.facts { font-size: var(--text-note); line-height: 1.5; }
table.facts th { width: var(--facts-label); text-align: left; vertical-align: top; font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-md) var(--space-lg); }
table.facts td { vertical-align: top; padding: var(--space-md) var(--space-lg) var(--space-md) 0; color: var(--color-ink-2); max-width: var(--measure); }
table.facts tr + tr th, table.facts tr + tr td { border-top: var(--rule-hair) solid var(--color-rule); }
table.facts tr:first-child td { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); }

/* ---------- the shortlist form ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--space-2xl); align-items: start; }
.form-intro .answer { max-width: none; }
.form-intro p.max-w-3xl { margin-top: var(--space-lg); font-size: var(--text-note); line-height: var(--leading-body); color: var(--color-ink-2); max-width: 60ch; }
.form-intro .font-mono { font-family: var(--font-body); font-weight: 500; color: var(--color-ink); }
.form-intro p[role="status"], .form-intro p[role="alert"] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--color-ink); padding-top: var(--space-sm); border-top: var(--rule-bar) solid var(--color-success); }
.form-intro p[role="alert"] { color: var(--color-error); border-top-color: var(--color-error); }
.request-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg) var(--space-lg); padding: var(--space-xl); margin-top: calc(var(--space-2xl) + var(--space-xs)); }
.request-form label { display: grid; row-gap: var(--space-xs); font-size: var(--text-sm); font-weight: 500; line-height: 1.35; color: var(--color-ink); }
.request-form .wide { grid-column: 1 / -1; }
.request-form input, .request-form select, .request-form textarea { width: 100%; min-height: var(--control-height); padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-field); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.request-form textarea { resize: vertical; line-height: 1.5; }
.request-form ::placeholder { color: var(--color-muted); font-style: italic; opacity: 1; }
.request-form .req { margin-left: var(--space-2xs); font-weight: 400; font-style: italic; color: var(--color-muted); }
.request-form input:hover, .request-form select:hover, .request-form textarea:hover { border-color: var(--color-ink); }
.request-form input:focus-visible, .request-form select:focus-visible, .request-form textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-ink); }
.request-form input:disabled, .request-form select:disabled, .request-form textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.request-form input:user-invalid, .request-form textarea:user-invalid { border-color: var(--color-error); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.form-actions p { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); max-width: 46ch; flex: 1 1 22ch; }

/* ---------- a short page (404, a paused profile) ---------- */
.short-page { padding-block: var(--space-3xl) var(--space-2xl); }
.short-page h1 { font-size: var(--text-display); }
.short-page p.note { margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.5; max-width: 52ch; color: var(--color-ink-2); }

/* ---------- footer ---------- */
.site-foot { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); margin-top: auto; }
.site-foot__mast { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); column-gap: var(--gap-columns); row-gap: var(--space-xl); padding-block: var(--space-2xl); }
.site-foot .wordmark { display: inline-block; font-size: var(--text-xl); padding-block: 0; }
.site-foot__line { margin-top: var(--space-md); font-size: var(--text-note); line-height: var(--leading-body); color: var(--color-ink-2); max-width: 48ch; }
.site-foot__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); margin-bottom: var(--space-xs); }
.site-foot ul { list-style: none; padding: 0; }
.site-foot li a { display: inline-flex; align-items: center; min-height: var(--control-height-s); font-size: var(--text-note); color: var(--color-ink-2); text-decoration-color: var(--color-rule-2); }
.site-foot li a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.site-foot__colophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-xl); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.site-foot__colophon > p:first-child { display: flex; flex-wrap: wrap; row-gap: var(--space-2xs); }
.site-foot__colophon > p > span + span { padding-left: var(--space-sm); margin-left: var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule-2); }

/* ---------- widths ---------- */
@media (max-width: 60rem) {
  :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; }
  .page-head__split, .section-head, .side-hung, .form-layout, .doc { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .doc__main, .doc__rail { grid-column: auto; }
  .doc__rail { position: static; margin-top: var(--space-xl); padding-top: 0; }
  .doc .page-head { padding-top: var(--space-md); }
  .doc__rail .byline { flex-direction: row; }
  .doc__rail .byline > span { padding: 0 var(--space-sm); border-top: 0; border-left: var(--rule-hair) solid var(--color-rule-2); }
  .doc__rail .byline > span:first-child { padding-left: 0; border-left: 0; }
  .doc__rail .crumbs { margin-bottom: var(--space-md); }
  .side-hung > header { position: static; margin-bottom: var(--space-lg); }
  .side-hung > header h2 { max-width: 20ch; }
  .request-form { margin-top: var(--space-lg); }
  .site-foot__mast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-foot__mast > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; --nav-height: 64px; }
  .site-head__bar { padding-block: var(--space-sm); }
  .site-nav { width: 100%; column-gap: var(--space-md); flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .site-nav a.btn { position: sticky; right: 0; flex-shrink: 0; margin-left: auto; }
  .site-nav a.btn::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: var(--space-xl); background: linear-gradient(to right, transparent, var(--color-paper) 70%); pointer-events: none; }
  :root { --table-min: 720px; }
  table.cmp th:first-child, table.cmp td:first-child { box-shadow: inset calc(-1 * var(--rule-hair)) 0 0 var(--color-rule-2), var(--space-xs) 0 var(--space-xs) calc(-1 * var(--space-2xs)) var(--color-shade); }
  .page-head { padding-block: var(--space-xl); }
  .answer { margin-top: var(--space-lg); }
  .request-form { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg) var(--space-md); }
  table.cmp th:first-child, table.cmp td:first-child { padding-left: var(--space-md); }
  table.facts, table.facts tbody, table.facts tr, table.facts th, table.facts td { display: block; width: auto; }
  table.facts th { padding: var(--space-md) var(--space-md) var(--space-2xs); }
  table.facts td { padding: 0 var(--space-md) var(--space-md); }
  table.facts tr + tr th { border-top: var(--rule-hair) solid var(--color-rule); }
  table.facts tr + tr td { border-top: 0; }
  .checks li { padding-left: var(--space-xl); }
  .faq details p { padding-right: 0; }
  .site-foot__mast { grid-template-columns: minmax(0, 1fr); }
  .site-foot .wordmark { font-size: var(--text-lg); white-space: normal; overflow-wrap: break-word; }
  .byline, .doc__rail .byline, .site-foot__colophon > p:first-child { flex-direction: column; row-gap: var(--space-3xs); }
  .byline > span, .doc__rail .byline > span, .doc__rail .byline > span:first-child, .site-foot__colophon > p > span + span { padding: 0; margin: 0; border: 0; }
}
@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; }
  .btn:active { transform: none; }
}