/* zachevan.com v2 system stylesheet: faces, base, layout primitives and components. Every value
   is a token from tokens.css. The direction is a single-column reading page, near monochrome,
   with one bounded dark panel per page. [LAW: SITE-PLAN.md section 8]
   [DAWN: 2026-09-03, v2 system stylesheet; review-by 2026-12-03] */

/* ---------- Faces. Self-hosted from the Google Fonts library with metric fallbacks. [LAW: SITE-PLAN.md section 8.2] ---------- */
@font-face {
  /* Archivo by Omnibus-Type, SIL OFL 1.1, assets/fonts/archivo.OFL.txt. Latin subset, weights 600 to 700. */
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold");
  font-style: normal;
  font-weight: 600 700;
  size-adjust: 101.74%;
  ascent-override: 86.30%;
  descent-override: 20.64%;
}
@font-face {
  /* Source Serif 4 by Adobe, SIL OFL 1.1, assets/fonts/source-serif-4.OFL.txt. Latin subset, weights 400 to 700. */
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia");
  font-style: normal;
  font-weight: 400 700;
  size-adjust: 98.28%;
  ascent-override: 105.41%;
  descent-override: 34.08%;
}
@font-face {
  /* IBM Plex Mono by IBM, SIL OFL 1.1, assets/fonts/ibm-plex-mono.OFL.txt. Numeral and currency subset, weight 500. */
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-numerals-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0024-0025, U+002C-003A, U+00A3, U+00A5, U+20AC;
}
@font-face {
  font-family: "IBM Plex Mono Fallback";
  src: local("Courier New");
  font-style: normal;
  font-weight: 500;
  size-adjust: 99.98%;
  ascent-override: 102.52%;
  descent-override: 27.50%;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground-paper); color: var(--text-body); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-block-size: 100dvh; display: flex; flex-direction: column; background: var(--ground-paper); color: var(--text-body); font: var(--type-body); text-rendering: optimizeLegibility; }
.site-main { flex: 1 0 auto; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: var(--focus-ring) solid var(--action-blue); outline-offset: var(--focus-offset); }
:where([id]) { scroll-margin-block-start: calc(var(--header-height) + var(--space-16)); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table, fieldset, legend { margin: 0; }
h1, h2, h3, h4 { color: var(--text-strong); text-wrap: balance; }
h1 { max-inline-size: var(--measure-h1); font: var(--type-h1); letter-spacing: var(--tracking-h1); }
h2 { max-inline-size: var(--measure-heading); font: var(--type-h2); letter-spacing: var(--tracking-h2); }
h3 { max-inline-size: var(--measure-supporting-heading); font: var(--type-h3); }
h4 { font: var(--type-name); }
p, li, dd { max-inline-size: var(--measure-prose); }
p, li, td, th { text-wrap: pretty; }
a { color: var(--action-blue); text-decoration-thickness: var(--border-hairline); text-underline-offset: 0.16em; transition: color var(--motion-state) var(--menu-motion-ease), text-decoration-thickness var(--motion-state) var(--menu-motion-ease); }
a:hover { color: var(--action-blue-hover); text-decoration-thickness: var(--border-emphasis); }
button, input, select, textarea, summary { font: inherit; }
img, svg { max-inline-size: 100%; block-size: auto; }
strong { color: var(--text-strong); }
code { font: var(--type-label); }
.list-plain { margin: 0; padding: 0; list-style: none; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; inset-block-start: var(--space-8); inset-inline-start: var(--space-16); z-index: 30; min-inline-size: var(--target-min); min-block-size: var(--target-min); padding: var(--space-12) var(--space-16); display: flex; align-items: center; background: var(--ground-surface); color: var(--action-blue); border-radius: var(--radius-container); outline: var(--border-emphasis) solid var(--action-blue); transform: translateY(-200%); }
.skip-link:focus, .skip-link:focus-visible { transform: translateY(0); }

/* ---------- Layout. One centred reading container and one paper ground, with a hairline between sections.
   This intentionally supersedes SITE-PLAN.md section 8.3 after the live taste read showed that the
   1312px alternating-band system made the pages look assembled rather than authored. ---------- */
.frame { inline-size: min(calc(100% - (var(--page-margin) * 2)), var(--content-max)); margin-inline: auto; }
.site-main .frame { max-inline-size: var(--reading-max); }
.band { padding-block: var(--pad-section); background: var(--ground-paper); }
.band--mist { background: var(--ground-paper); }
.site-main > :is(.band, .price-view) + :is(.band, .price-view) { border-block-start: var(--border-hairline) solid var(--ground-mist); }
.price-view > .band { border: 0; }
.band--hero { padding-block: var(--pad-hero-top) var(--pad-hero-bottom); }
.band--close { padding-block: var(--pad-close); }
.band__head { margin-block-end: var(--gap-heading); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
.band__actions { margin-block-start: var(--gap-action); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16) var(--space-24); }
.lede { max-inline-size: var(--measure-lede); font: var(--type-lede); }
.note { max-inline-size: var(--measure-note); color: var(--text-muted); font: var(--type-note); }
.prose { display: grid; gap: var(--gap-para); }
.prose > h2 { margin-block-start: var(--space-16); }
.prose > h3 { margin-block-start: var(--space-8); }
.prose > dt:not(:first-child) { margin-block-start: var(--space-16); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-48); }
.split > * { min-inline-size: 0; }
@media (max-width: 760px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); } }

/* ---------- Header. Sticky, paper ground, brand, five labels and one action. [LAW: MENU-DESIGN-LOCK.md section 2; NAVIGATION-LOCK.md section 5] ---------- */
.site-header { position: sticky; inset-block-start: 0; z-index: 10; block-size: var(--header-height); background: var(--ground-paper); border-block-end: var(--border-hairline) solid var(--ground-mist); }
.site-header__inner { position: relative; block-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.site-brand { flex: none; min-inline-size: var(--target-min); min-block-size: var(--target-min); display: inline-flex; align-items: center; color: var(--text-strong); font: var(--type-button); text-decoration: none; }
.site-brand:hover { color: var(--action-blue-hover); }
.site-nav { min-inline-size: 0; block-size: 100%; margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-8); }
.site-nav__desktop { display: block; block-size: 100%; }
.site-nav__mobile { display: none; }
.site-nav__actions { flex: none; display: flex; }
.site-action { flex: none; block-size: var(--target-min); padding-block: 0; white-space: nowrap; }

/* Desktop list. Each item is the positioned box for its panel, so the panel top computes to the
   header height plus 8px, viewport y 72px, and its start edge matches the trigger. */
.site-nav__list { block-size: 100%; display: flex; align-items: stretch; }
.site-nav__list > li { position: relative; max-inline-size: none; display: flex; align-items: center; }
.site-nav__list details { position: static; }
.site-nav__link, .site-nav__trigger { min-inline-size: var(--target-min); min-block-size: var(--target-min); padding-inline: var(--space-12); display: inline-flex; align-items: center; justify-content: center; gap: var(--px-6); color: var(--text-body); font: var(--type-menu-section); text-decoration: none; white-space: nowrap; border-radius: var(--radius-mark); transition: background-color var(--menu-motion-state) var(--menu-motion-ease), color var(--menu-motion-state) var(--menu-motion-ease); }
.site-nav__link:hover, .site-nav__trigger:hover { color: var(--action-blue-hover); }
.site-nav__link[aria-current="page"] { color: var(--action-blue-hover); font-weight: 700; }
.site-nav__trigger { cursor: pointer; list-style: none; }
.site-nav__trigger::-webkit-details-marker { display: none; }
.site-nav__trigger::after { content: ""; flex: none; inline-size: var(--menu-mark-size); block-size: var(--menu-mark-size); border-block-end: var(--border-emphasis) solid var(--action-blue); border-inline-end: var(--border-emphasis) solid var(--action-blue); transform: translateY(-3px) rotate(45deg); transition: transform var(--menu-motion-state) var(--menu-motion-ease); }
details[open] > .site-nav__trigger { background: var(--field-blue-soft); color: var(--text-strong); border-radius: var(--menu-panel-radius); }
details[open] > .site-nav__trigger::after { transform: translateY(3px) rotate(225deg); }
details[data-current-section="true"] > .site-nav__trigger { color: var(--action-blue-hover); font-weight: 700; }

/* Desktop panel. 336px, 12px inset, 8px radius, opaque surface, hairline, shadow from ground-dark. */
.menu-panel { position: absolute; inset-block-start: calc(var(--header-height) + var(--space-8)); inset-inline-start: var(--menu-panel-shift); z-index: 20; inline-size: var(--menu-panel-width); margin: 0; padding: var(--menu-panel-pad); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); background: var(--ground-surface); border: var(--border-hairline) solid var(--ground-mist); border-radius: var(--menu-panel-radius); box-shadow: var(--shadow-panel); }
.site-nav details:not([open]) > ul { display: none; }
.menu-panel > li { max-inline-size: none; }
.menu-row { min-block-size: var(--menu-row-height); padding: var(--px-10) var(--space-12); display: flex; align-items: center; color: var(--text-strong); font: var(--type-menu-row); text-decoration: none; white-space: nowrap; border-radius: var(--radius-mark); transition: background-color var(--menu-motion-state) var(--menu-motion-ease), color var(--menu-motion-state) var(--menu-motion-ease); }
.menu-row:hover { background: var(--field-blue-soft); color: var(--action-blue-hover); }
.menu-row:focus-visible { background: var(--field-blue-soft); outline: var(--focus-ring) solid var(--action-blue); outline-offset: var(--focus-offset); }
/* Current rows use action-blue-hover on the soft field: action-blue measures 4.32:1 there, below the 4.5 normal-text target, and the hover blue measures 5.85:1. The lock names action-blue; this is the one deviation from it, reported. [DAWN: 2026-09-04, current-row text colour for contrast; review-by 2026-12-04] */
.menu-row[aria-current="page"], .menu-row[data-current="true"] { background: var(--field-blue-soft); color: var(--action-blue-hover); text-decoration: underline; text-decoration-thickness: var(--border-emphasis); text-underline-offset: 0.16em; }
.menu-group { margin-block-start: var(--space-4); padding-block-start: var(--space-8); border-block-start: var(--border-hairline) solid var(--ground-mist); }
.menu-group__label { display: block; padding: var(--space-4) var(--space-12); color: var(--text-muted); font: var(--type-menu-group); letter-spacing: var(--tracking-group); text-transform: uppercase; }
.menu-group__list { display: grid; gap: var(--space-4); }
.menu-group__list > li { max-inline-size: none; }

/* Motion. Open animates opacity and an 8px rise over 220ms. Close reverses over 160ms while the
   shell script keeps the panel painted and inert, then removes open. Only an interaction adds
   data-opening, so an initial or restored open state never animates. [LAW: MENU-DESIGN-LOCK.md section 5] */
.site-nav details[open] > ul { opacity: 1; transform: translateY(0); transition: opacity var(--menu-motion-open) var(--menu-motion-ease), transform var(--menu-motion-open) var(--menu-motion-ease); }
@starting-style {
  .site-nav details[open][data-opening] > ul { opacity: 0; transform: translateY(calc(var(--menu-motion-offset) * -1)); }
}
.site-nav details[open][data-closing] > ul { opacity: 0; transform: translateY(calc(var(--menu-motion-offset) * -1)); transition-duration: var(--menu-motion-close), var(--menu-motion-close); }

/* Mobile sheet components. The rules are unconditional so the styleguide can render the sheet as
   a specimen at any width; the media block below only switches renderings and fixes the sheet
   below the header. [LAW: MENU-DESIGN-LOCK.md sections 3 and 4] */
.sheet-root { position: static; }
.sheet-toggle { min-inline-size: var(--target-min); min-block-size: var(--target-min); padding-inline: var(--space-8); display: inline-flex; align-items: center; gap: var(--px-6); cursor: pointer; list-style: none; color: var(--text-body); font: var(--type-link); border-radius: var(--radius-mark); transition: background-color var(--menu-motion-state) var(--menu-motion-ease), color var(--menu-motion-state) var(--menu-motion-ease); }
.sheet-toggle::-webkit-details-marker { display: none; }
.sheet-toggle__label { display: inline-block; }
.sheet-toggle__mark { position: relative; flex: none; inline-size: var(--menu-mark-box); block-size: var(--menu-mark-box); }
.sheet-toggle__mark::before, .sheet-toggle__mark::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; }
.sheet-toggle__mark::before { display: none; }
.sheet-toggle__mark::after { inline-size: var(--menu-mark-size); block-size: var(--menu-mark-size); border-block-end: var(--border-emphasis) solid var(--action-blue); border-inline-end: var(--border-emphasis) solid var(--action-blue); transform: translate(-50%, -75%) rotate(45deg); transition: transform var(--menu-motion-state) var(--menu-motion-ease); }
.sheet-root[open] > .sheet-toggle { background: var(--field-blue-soft); color: var(--text-strong); }
.sheet-root[open] > .sheet-toggle .sheet-toggle__mark::before, .sheet-root[open] > .sheet-toggle .sheet-toggle__mark::after { display: block; inline-size: var(--menu-mark-box); block-size: var(--border-emphasis); border: 0; background: var(--action-blue); }
.sheet-root[open] > .sheet-toggle .sheet-toggle__mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.sheet-root[open] > .sheet-toggle .sheet-toggle__mark::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sheet-scrim { display: none; }
.sheet { margin: 0; padding: var(--space-12) var(--px-20) var(--space-24); background: var(--ground-paper); border-block: var(--border-hairline) solid var(--ground-mist); box-shadow: var(--shadow-sheet); }
.sheet > li { max-inline-size: none; }
.sheet__section + .sheet__section { position: relative; }
.sheet__section + .sheet__section::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--space-12); border-block-start: var(--border-hairline) solid var(--ground-mist); }
.sheet__summary, .sheet__top-link { min-block-size: var(--menu-mobile-section-height); padding-inline: var(--space-12); display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); color: var(--text-strong); font: var(--type-menu-section); text-decoration: none; white-space: nowrap; border-radius: var(--radius-mark); cursor: pointer; list-style: none; transition: background-color var(--menu-motion-state) var(--menu-motion-ease), color var(--menu-motion-state) var(--menu-motion-ease); }
.sheet__summary::-webkit-details-marker { display: none; }
.sheet__summary::after, .sheet__group-summary::after { content: ""; flex: none; inline-size: var(--menu-mark-size); block-size: var(--menu-mark-size); border-block-end: var(--border-emphasis) solid var(--action-blue); border-inline-end: var(--border-emphasis) solid var(--action-blue); transform: translateY(-3px) rotate(45deg); transition: transform var(--menu-motion-state) var(--menu-motion-ease); }
details[open] > .sheet__summary::after, details[open] > .sheet__group-summary::after { transform: translateY(3px) rotate(225deg); }
details[open] > .sheet__summary { background: var(--field-blue-soft); color: var(--text-strong); }
details[data-current-section="true"] > .sheet__summary { text-decoration: underline; text-decoration-thickness: var(--border-emphasis); text-underline-offset: 0.16em; }
.sheet__link { min-block-size: var(--menu-mobile-row-height); padding-inline: var(--space-12); display: flex; align-items: center; color: var(--text-strong); font: var(--type-menu-row); text-decoration: none; white-space: nowrap; border-radius: var(--radius-mark); transition: background-color var(--menu-motion-state) var(--menu-motion-ease), color var(--menu-motion-state) var(--menu-motion-ease); }
.sheet__link:hover, .sheet__summary:hover, .sheet__top-link:hover { background: var(--field-blue-soft); color: var(--action-blue-hover); }
.sheet__link:focus-visible, .sheet__summary:focus-visible, .sheet__top-link:focus-visible, .sheet__group-summary:focus-visible { background: var(--field-blue-soft); }
.sheet__link[aria-current="page"], .sheet__link[data-current="true"], .sheet__top-link[aria-current="page"], .sheet__top-link[data-current="true"] { background: var(--field-blue-soft); color: var(--action-blue-hover); text-decoration: underline; text-decoration-thickness: var(--border-emphasis); text-underline-offset: 0.16em; }
.sheet__group-summary { min-block-size: var(--target-min); padding: var(--px-14) var(--space-12); display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); color: var(--text-muted); font: var(--type-menu-group); letter-spacing: var(--tracking-group); text-transform: uppercase; white-space: nowrap; border-radius: var(--radius-mark); cursor: pointer; list-style: none; }
.sheet__group-summary::-webkit-details-marker { display: none; }
.sheet__nested { padding-inline-start: var(--space-16); display: grid; }
.sheet__nested > li { max-inline-size: none; }
@media (max-width: 900px) {
  .site-nav__desktop { display: none; }
  .site-nav__mobile { display: block; }
  html:has(.sheet-root[open]), body:has(.sheet-root[open]) { overflow: hidden; }
  .sheet-root[open] > .sheet-scrim { position: fixed; inset: var(--header-height) 0 0; z-index: 19; display: block; opacity: 1; background: color-mix(in srgb, var(--ground-dark) 48%, transparent); transition: opacity var(--menu-motion-open) var(--menu-motion-ease); }
  @starting-style { .sheet-root[open][data-opening] > .sheet-scrim { opacity: 0; } }
  .sheet-root[open][data-closing] > .sheet-scrim { opacity: 0; transition-duration: var(--menu-motion-close); }
  .sheet { position: fixed; inset-block-start: var(--header-height); inset-inline-start: 0; z-index: 20; inline-size: 100%; max-block-size: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; }
  .site-nav .sheet-root[open] > .sheet { opacity: 1; transition: transform var(--menu-motion-open) var(--menu-motion-ease); }
  @starting-style { .site-nav .sheet-root[open][data-opening] > .sheet { opacity: 1; transform: translateY(calc(var(--menu-motion-offset) * -1)); } }
  .site-nav .sheet-root[open][data-closing] > .sheet { opacity: 1; transform: translateY(calc(var(--menu-motion-offset) * -1)); transition-duration: var(--menu-motion-close); }
}
@media (max-width: 760px) {
  .site-header__inner { inline-size: calc(100% - (var(--page-margin) * 2)); max-inline-size: none; }
  .site-brand { font-size: var(--px-14); }
  .site-nav { gap: var(--space-4); }
  .button.site-action { padding-inline: var(--space-8); }
  .sheet-toggle { font: 600 var(--px-14)/var(--px-20) var(--font-prose); }
}
@media (min-width: 377px) and (max-width: 414px) {
  .button.site-action { margin-inline-end: var(--px-1); }
}
@media (max-width: 414px) {
  /* The locked label stays; at 414px and below it is set one step smaller so brand, toggle and action share the frame without overflow. [DAWN: 2026-09-04, narrow header action size; review-by 2026-12-04] */
  .button.site-action { min-inline-size: 0; padding-inline: var(--space-4); font-size: var(--px-16); }
}
@media (max-width: 376px) {
  /* Brand and Menu share the first row; the action owns the second row at narrow widths. */
  .site-header__inner { padding-block: var(--space-8); display: grid; grid-template-columns: 1fr auto; grid-template-rows: var(--target-min) var(--target-min); align-items: center; align-content: center; gap: var(--space-4) var(--space-8); }
  .site-brand { grid-column: 1; grid-row: 1; }
  .site-nav { display: contents; }
  .site-nav__mobile { grid-column: 2; grid-row: 1; }
  .site-nav__actions { grid-column: 1 / -1; grid-row: 2; }
  .button.site-action { inline-size: 100%; }
}

/* ---------- Footer. Dark ground, identity and the curated columns in navigation.json. [LAW: SITE-PLAN.md section 3] ---------- */
.site-footer { margin-block-start: auto; padding-block: var(--space-72); background: var(--ground-dark); color: var(--text-inverse); border-block-start: var(--border-hairline) solid var(--link-inverse); font: var(--type-note); }
.site-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32) var(--space-24); }
.site-footer__identity { grid-column: 1 / -1; min-inline-size: 0; }
.site-footer__brand { min-block-size: var(--target-min); display: inline-flex; align-items: center; color: var(--text-inverse); font: var(--type-name); text-decoration: none; }
.site-footer__brand:hover { color: var(--link-inverse); }
.site-footer__line { max-inline-size: 32ch; margin-block-start: var(--space-8); color: var(--text-inverse-muted); }
.site-footer__group h2 { max-inline-size: none; margin-block-end: var(--space-8); color: var(--text-inverse); font: var(--type-button); letter-spacing: 0; }
.site-footer__links { display: grid; }
.site-footer__links > li { max-inline-size: none; }
.site-footer__links a { min-inline-size: var(--target-min); min-block-size: var(--px-32); display: inline-flex; align-items: center; color: var(--text-inverse-muted); line-height: var(--px-28); text-decoration: underline; }
.site-footer__links a:hover { color: var(--text-inverse); }
.site-footer__meta { margin-block-start: var(--space-48); color: var(--text-inverse-muted); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Actions. One closing button and plain underlined text links; the header action is restrained. ---------- */
.button { min-inline-size: var(--target-min); min-block-size: var(--target-min); padding: var(--space-12) var(--space-16); display: inline-flex; align-items: center; justify-content: center; background: var(--action-blue); color: var(--ground-surface); border: var(--border-hairline) solid transparent; border-radius: var(--radius-container); font: var(--type-button); text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--motion-state) var(--menu-motion-ease); }
.button:hover, .button:active { background: var(--action-blue-hover); color: var(--ground-surface); }
.site-action { background: transparent; color: var(--text-strong); border-color: var(--text-strong); }
.site-action:hover, .site-action:active { background: var(--text-strong); color: var(--ground-paper); }
.link-action { min-block-size: var(--target-min); display: inline-flex; align-items: center; color: var(--action-blue); font: var(--type-link); text-decoration: underline; }
.link-action:hover { color: var(--action-blue-hover); text-decoration-thickness: var(--border-emphasis); }

/* ---------- Page header and hero. An answer page sets the H1 search phrase at H3 size and the H2 promise at H1 size. [LAW: SITE-PLAN.md section 8.2] ---------- */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
.page-head__query { max-inline-size: var(--measure-heading); color: var(--text-strong); font: var(--type-h3); letter-spacing: 0; }
.page-head__promise { max-inline-size: var(--measure-h1); font: var(--type-h1); letter-spacing: var(--tracking-h1); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); justify-items: start; }
.fit-title { max-inline-size: 1000px; }
.fit-criteria-lede { max-inline-size: 29ch; }
.nowrap { white-space: nowrap; }
.hero .button, .close .button { margin-block-start: var(--space-8); }

/* ---------- Question router. Four full-width rows, 44px targets at 320px. [LAW: SITE-PLAN.md section 4.1] ---------- */
.router { max-inline-size: var(--measure-rail); }
.router > li { max-inline-size: none; border-block-end: var(--border-hairline) solid var(--ground-mist); }
.router > li:first-child { border-block-start: var(--border-hairline) solid var(--ground-mist); }
.router__link { min-block-size: var(--px-64); padding-block: var(--space-16); display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); color: var(--text-strong); font: var(--type-name); text-decoration: none; transition: color var(--motion-state) var(--menu-motion-ease); }
.router__link::after { content: ""; flex: none; inline-size: var(--menu-mark-size); block-size: var(--menu-mark-size); border-block-start: var(--border-emphasis) solid var(--action-blue); border-inline-end: var(--border-emphasis) solid var(--action-blue); transform: rotate(45deg); }
.router__link:hover { color: var(--action-blue-hover); }

/* ---------- Offer ladder: one bounded dark panel, with route wrappers selecting the relevant rows. ---------- */
.price-band { padding-block: var(--pad-section); }
.price-panel { padding: var(--space-32); background: var(--ground-dark); color: var(--text-inverse); border-radius: var(--radius-container); }
.price-panel h2, .price-panel h3 { color: var(--text-inverse); }
.price-panel > h2 { margin-block-end: var(--space-24); }
.price-panel a { color: var(--link-inverse); }
.price-panel a:hover { color: var(--text-inverse); }
.price-table { inline-size: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: var(--space-16) 0; vertical-align: top; text-align: start; border-block-end: var(--border-hairline) solid var(--line-inverse); }
.price-table thead th { padding-block: 0 var(--space-12); color: var(--text-inverse); font: var(--type-menu-row); }
.price-table__group th { padding-block: var(--space-24) var(--space-8); color: var(--text-inverse-muted); font: var(--type-label); }
.price-table__cell--price { inline-size: 46%; padding-inline-start: var(--space-24); text-align: end; }
.price-table__name { display: block; color: var(--text-inverse); font: var(--type-name); }
.price-table__delivery { display: block; max-inline-size: var(--measure-prose); margin-block-start: var(--space-8); color: var(--text-inverse-muted); font: var(--type-note); }
.price-table__price { display: block; color: var(--text-inverse); font: var(--type-price); font-variant-numeric: tabular-nums; }
.price-table__price--bands { display: grid; gap: var(--space-4); }
.price-band__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12); align-items: baseline; }
.price-band__label { color: var(--text-inverse-muted); font: var(--type-note); font-weight: 400; }
.price-table__placeholder { inline-size: fit-content; padding: var(--space-8) var(--space-12); display: block; color: var(--text-inverse-muted); font: var(--type-label); outline: var(--border-hairline) dashed var(--text-inverse-muted); border-radius: var(--radius-mark); }
.price-table__row--marked > th, .price-table__row--marked > td { border-block-width: var(--border-emphasis); font-weight: 700; }
.price-table__cell-label { display: none; }
.price-panel__note { max-inline-size: var(--measure-note); margin-block-start: var(--space-24); color: var(--text-inverse-muted); }
.price-panel__actions { margin-block-start: var(--space-24); }
.price-view--diagnostic .price-table tbody tr:not([data-rung="paid-diagnostic"]),
.price-view--triage .price-table tbody tr:not([data-rung="triage"]) { display: none; }
.price-view--diagnostic .price-panel__note,
.price-view--triage .price-panel__note { display: none; }
.price-view__more { margin-block: calc(var(--space-48) * -1) var(--px-64); }
@media (min-width: 761px) and (max-width: 900px) {
  /* Keep the desktop price pairs visibly separated through the narrow two-column interval. */
  .price-table__cell--price { inline-size: 52%; }
}
@media (max-width: 760px) {
  .price-panel { padding: var(--space-24) var(--space-16); }
  .price-table, .price-table thead, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; }
  .price-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .price-table tbody tr { display: grid; grid-template-areas: "name" "price"; gap: var(--space-16); padding-block: var(--space-16); border-block-end: var(--border-hairline) solid var(--line-inverse); }
  .price-table th, .price-table td { padding: 0; border: 0; }
  .price-table tbody th { grid-area: name; }
  .price-table__cell--price { grid-area: price; inline-size: auto; }
  .price-table__cell-label { display: block; color: var(--text-inverse-muted); font: var(--type-label); }
  .price-table__cell--price { text-align: start; }
  .price-band__line { grid-template-columns: minmax(0, 1fr) auto; }
  .price-view__more { margin-block: calc(var(--space-32) * -1) var(--space-48); }
}

/* ---------- Cards. Tool cards, three across, surface ground, hairline, 8px radius. ---------- */
.card-grid { display: grid; grid-template-columns: minmax(0, var(--measure-rail)); gap: var(--space-16); }
.card-grid > li { max-inline-size: none; }
.card { block-size: 100%; padding: var(--space-24); display: grid; gap: var(--space-12); align-content: start; background: var(--ground-surface); border: var(--border-hairline) solid var(--ground-mist); border-radius: var(--radius-container); }
.card h3 { max-inline-size: none; }
.card__link { color: inherit; text-decoration: none; }
.card__link:hover { color: var(--action-blue-hover); text-decoration: underline; text-decoration-thickness: var(--border-emphasis); }

/* ---------- Tables. Plain data tables scroll inside their wrapper and never widen the page. ---------- */
.table-wrap { inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.table { inline-size: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--space-12) var(--space-16) var(--space-12) 0; border-block-end: var(--border-hairline) solid var(--ground-mist); text-align: start; vertical-align: top; }
.table th { color: var(--text-strong); font: var(--type-label); }
.table thead th { color: var(--text-muted); }
.table tbody th { font: var(--type-body); font-weight: 600; }
.table__num { text-align: end; font-variant-numeric: tabular-nums; }
.comparison-table { table-layout: fixed; }
.comparison-table th, .comparison-table td { inline-size: 50%; border-block-end-color: var(--ground-mist); }
.comparison-table thead th { color: var(--text-strong); font: var(--type-body); font-weight: 700; }
@media (max-width: 760px) {
  .comparison-table, .comparison-table thead, .comparison-table tbody, .comparison-table tr, .comparison-table td { display: block; }
  .comparison-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .comparison-table tbody tr { padding-block: var(--space-16); border-block-end: var(--border-hairline) solid var(--ground-mist); }
  .comparison-table td { padding: var(--space-8) 0; border: 0; }
  .comparison-table td::before { margin-block-end: var(--space-4); display: block; color: var(--text-strong); font: var(--type-body); font-weight: 700; }
  .comparison-table td:first-child::before { content: "What you can check"; }
  .comparison-table td:nth-child(2)::before { content: "This read"; }
}

/* ---------- Proof block. A footed before-and-after pair with its mechanism sentence. Figures are static text. [LAW: SITE-PLAN.md section 8.5] ---------- */
.proof { max-inline-size: var(--measure-heading); padding: var(--space-24); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); background: var(--ground-surface); border: var(--border-hairline) solid var(--ground-mist); border-radius: var(--radius-container); }
.proof__figures { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-48); }
.proof__figure { min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.proof__term { color: var(--text-gold); font: var(--type-label); }
.proof__value { min-inline-size: 0; min-block-size: var(--px-34); overflow-wrap: anywhere; color: var(--mark-gold); font: var(--type-figure); font-variant-numeric: tabular-nums; }
.proof__value:empty::before { content: "\2014"; color: var(--text-muted); }
.proof__value--negative { color: var(--signal-watermelon); }
.proof__value--complete { color: var(--mark-grass); }
.proof__signal { margin-inline-start: var(--space-8); padding: var(--space-4) var(--space-8); display: inline-block; color: var(--signal-watermelon-inverse); background: var(--ground-dark); border-radius: var(--radius-mark); font: var(--type-label); vertical-align: middle; }
.proof__value--complete .proof__signal { color: var(--ground-surface); background: var(--semantic-good); }
.proof__mechanism { color: var(--text-body); }
.proof__mechanism[data-state="incomplete"] { color: var(--semantic-warning); }
.proof__foot { color: var(--text-muted); font: var(--type-note); }

/* ---------- Process steps. Ordered, each step names its output; the number is the numeral label role. ---------- */
.steps { counter-reset: step; }
.steps > li { counter-increment: step; max-inline-size: var(--measure-prose); padding-block: var(--space-24); display: grid; grid-template-columns: var(--px-40) minmax(0, 1fr); gap: var(--space-16); border-block-end: var(--border-hairline) solid var(--ground-mist); }
.method-fields { margin-block-start: var(--px-64); }
.steps > li::before { content: counter(step) "."; color: var(--text-strong); font: var(--type-h3); text-align: end; }
.steps h3 { margin-block-end: var(--space-8); }
@media (max-width: 480px) {
  .steps > li { grid-template-columns: var(--px-28) minmax(0, 1fr); gap: var(--space-12); }
  .steps > li::before { font-size: var(--px-20); line-height: var(--px-28); }
}

/* ---------- FAQ. Plain headings and paragraphs, no accordion. [LAW: SITE-PLAN.md section 8.4] ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
.faq h3 { max-inline-size: var(--measure-supporting-heading); margin-block-end: var(--space-8); }

/* ---------- Exclusions, related links, closing ask. ---------- */
:is(.content-list, .exclusions) { max-inline-size: var(--measure-prose); display: grid; }
:is(.content-list, .exclusions) > li { max-inline-size: none; padding-block: var(--space-12); border-block-end: var(--border-hairline) solid var(--ground-mist); }
:is(.content-list, .exclusions) > li:first-child { border-block-start: var(--border-hairline) solid var(--ground-mist); }
.related { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-32); }
.related > li { max-inline-size: none; }
.close { display: grid; gap: var(--space-24); justify-items: start; }
.close p { max-inline-size: var(--measure-lede); font: var(--type-lede); }

/* ---------- Forms. Label above a single underline, required in words, error in text, icon and border. [LAW: SITE-PLAN.md section 8.4] ---------- */
.form { max-inline-size: var(--measure-prose); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-group); }
.form-status { max-inline-size: var(--measure-prose); margin-block-end: var(--space-24); padding: var(--space-16); background: var(--field-blue-soft); color: var(--text-strong); border: var(--border-hairline) solid var(--action-blue); border-radius: var(--radius-container); }
.form-status[data-state="received"] { background: var(--field-grass-soft); color: var(--text-strong); border-color: var(--semantic-good); }
.form-status[data-state="invalid"] { color: var(--semantic-critical); border-color: var(--semantic-critical); }
.form__group { min-inline-size: 0; padding: 0; border: 0; display: grid; gap: var(--space-16); }
.form__group > legend { padding: 0; margin-block-end: var(--space-8); color: var(--text-strong); font: var(--type-h3); }
.field { min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
[data-statement] { padding: var(--space-12); border-radius: var(--radius-container); transition: background-color var(--motion-state) var(--menu-motion-ease); }
[data-statement][data-complete="true"] { background: var(--field-grass-soft); }
.field__label { color: var(--text-strong); font: var(--type-field-label); }
.field__required { color: var(--text-muted); font: var(--type-label); }
.field__help { color: var(--text-muted); font: var(--type-note); }
.field__control { inline-size: 100%; min-block-size: var(--target-min); padding: var(--space-8) var(--space-12); appearance: none; background: var(--ground-surface); color: var(--text-body); border: 0; border-block-end: var(--border-hairline) solid var(--text-muted); border-radius: 0; font: var(--type-body); }
.field__control:focus-visible { border-block-end-color: var(--action-blue); }
.field__control[aria-invalid="true"] { border-block-end: var(--border-emphasis) solid var(--semantic-critical); }
textarea.field__control { block-size: 132px; min-block-size: 132px; resize: vertical; }

/* Same-ground neighbors use a marked compact handoff instead of an empty section-sized hole. */
.band--hero + .price-band, .band[data-block="how-i-work"] + .band--close { padding-block-start: var(--space-32); }
select.field__control { padding-inline-end: var(--space-32); cursor: pointer; }
.field:has(> select.field__control) { position: relative; }
.field:has(> select.field__control)::after { content: ""; position: absolute; inset-inline-end: var(--space-12); inset-block-end: var(--space-16); inline-size: var(--px-8); block-size: var(--px-8); border-inline-end: var(--border-emphasis) solid var(--action-blue); border-block-end: var(--border-emphasis) solid var(--action-blue); transform: rotate(45deg); pointer-events: none; }
.field__error { display: flex; align-items: flex-start; gap: var(--space-8); color: var(--semantic-critical); font: var(--type-note); font-weight: 600; }
.field__error-mark { flex: none; inline-size: var(--px-20); block-size: var(--px-20); display: inline-grid; place-items: center; color: var(--ground-surface); background: var(--semantic-critical); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); font: var(--type-label); }
.choice-list { display: grid; }
.choice-list > li { max-inline-size: none; }
.choice { min-block-size: var(--target-min); padding-block: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-12); color: var(--text-body); cursor: pointer; }
.choice input { flex: none; inline-size: var(--px-20); block-size: var(--px-20); margin: var(--space-4) 0 0; accent-color: var(--action-blue); }
.choice__required-tail { white-space: nowrap; }
.split > aside { order: -1; }
.fit-intro { margin-block-end: var(--space-16); }
.fit-price { max-inline-size: var(--measure-prose); padding-block: var(--space-16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-8) var(--space-24); border-block: var(--border-hairline) solid var(--ground-mist); }
.scope-list { margin: 0; padding: 0; display: grid; gap: var(--space-8); list-style: none; }
.scope-list > li { max-inline-size: none; }
.form__submit { display: grid; gap: var(--space-16); justify-items: start; }
.form-privacy { max-inline-size: var(--measure-prose); margin-block-start: var(--gap-subordinate); }

/* ---------- Copy slots. Markup stays available to owner tooling; unfilled public slots are hidden. [LAW: SITE-PLAN.md section 5] ---------- */
.slot { display: block; max-inline-size: var(--measure-prose); padding: var(--space-8) var(--space-12); color: var(--text-muted); font: var(--type-label); letter-spacing: 0; text-transform: none; outline: var(--border-hairline) dashed var(--text-muted); outline-offset: 0; border-radius: var(--radius-mark); }
.slot[hidden], .slot--unfilled { display: none; }
.slot__name { font-weight: 700; }
.slot--inverse { color: var(--text-inverse-muted); outline-color: var(--text-inverse-muted); }
h1.slot { font: var(--type-h1); letter-spacing: var(--tracking-h1); }
h2.slot { font: var(--type-h2); letter-spacing: var(--tracking-h2); }
h3.slot { font: var(--type-h3); }
.page-head__promise.slot { font: var(--type-h1); letter-spacing: var(--tracking-h1); }
:is(h1, h2, h3).slot .slot__name { margin-block-end: var(--space-4); display: block; font: var(--type-label); letter-spacing: 0; }
.price-table__delivery.slot--inverse { max-inline-size: var(--measure-prose); padding: 0; outline: 0; border-radius: 0; font: var(--type-note); }
.price-panel__note.slot--inverse { max-inline-size: var(--measure-note); padding: 0; outline: 0; border-radius: 0; font: var(--type-note); }

/* ---------- Styleguide specimens. ---------- */
.spec { display: grid; gap: var(--space-24); }
.spec + .spec { margin-block-start: var(--gap-subordinate); }
.spec > h3 { max-inline-size: none; }
.specimen { padding: var(--space-24); background: var(--ground-mist); border-radius: var(--radius-container); overflow-x: auto; }
.specimen--paper { background: var(--ground-paper); border: var(--border-hairline) solid var(--ground-mist); }
.specimen details { position: relative; }
.specimen .menu-panel { position: static; inline-size: min(var(--menu-panel-width), 100%); }
.specimen .sheet { position: static; inline-size: 100%; max-inline-size: 393px; }
.specimen .site-nav__trigger, .specimen .sheet-toggle { display: inline-flex; }
.type-list { display: grid; gap: var(--space-24); }
.type-list > div { display: grid; gap: var(--space-8); }
.type-list dt { color: var(--text-muted); font: var(--type-label); }
.type-list dd { max-inline-size: var(--measure-prose); }
.type-list dd.type-h1, .type-list dd.type-h2 { max-inline-size: var(--measure-h1); }
.type-h1 { color: var(--text-strong); font: var(--type-h1); letter-spacing: var(--tracking-h1); }
.type-h2 { color: var(--text-strong); font: var(--type-h2); letter-spacing: var(--tracking-h2); }
.type-h3 { color: var(--text-strong); font: var(--type-h3); }
.type-lede { font: var(--type-lede); }
.type-body { font: var(--type-body); }
.type-label { font: var(--type-label); }
.type-button { font: var(--type-button); }
.type-numeral-label { font: var(--type-numeral-label); }
.type-link { font: var(--type-link); }
.type-name { color: var(--text-strong); font: var(--type-name); }
.type-price { color: var(--text-strong); font: var(--type-price); font-variant-numeric: tabular-nums; }
.type-figure { color: var(--text-strong); font: var(--type-figure); font-variant-numeric: tabular-nums; }
.type-note { font: var(--type-note); }
.type-menu-group { color: var(--text-muted); font: var(--type-menu-group); letter-spacing: var(--tracking-group); text-transform: uppercase; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-16); }
.swatches > li { max-inline-size: none; display: grid; gap: var(--space-8); }
.swatch__chip { block-size: var(--px-56); border: var(--border-hairline) solid var(--text-muted); border-radius: var(--radius-mark); background: var(--swatch); }
.swatch__name { color: var(--text-strong); font: var(--type-label); overflow-wrap: anywhere; }
.swatch__value { color: var(--text-muted); font: var(--type-label); }
.swatches--dark { padding: var(--space-16); background: var(--ground-dark); border-radius: var(--radius-container); }
.swatches--dark .swatch__name { color: var(--text-inverse); }
.swatches--dark .swatch__value { color: var(--text-inverse-muted); }
.swatches--dark .swatch__chip { border-color: var(--text-inverse-muted); }
@media (min-width: 1200px) {
  .swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .swatches:not(.swatches--dark) > li:last-child { grid-column: span 2; }
  .swatches--dark { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.space-list { display: grid; gap: var(--space-8); }
.space-list > li { max-inline-size: none; display: grid; grid-template-columns: var(--px-72) minmax(0, 1fr); align-items: center; gap: var(--space-16); }
.space-bar { block-size: var(--px-12); background: var(--action-blue); border-radius: var(--radius-mark); }
.token-list { display: grid; gap: var(--space-8); }
.token-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-16); padding-block: var(--space-8); border-block-end: var(--border-hairline) solid var(--ground-mist); }
.token-list dt { font: var(--type-label); color: var(--text-strong); }
.token-list dd { color: var(--text-muted); font: var(--type-label); }

/* ---------- Forced colours keep every boundary and state. [LAW: MENU-DESIGN-LOCK.md section 6 check 8] ---------- */
@media (forced-colors: active) {
  :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline-color: Highlight; }
  .site-nav__trigger::after, .sheet__summary::after, .sheet__group-summary::after, .sheet-toggle__mark::after, .router__link::after, .link-action::after, .price-table__mark::before { border-color: CanvasText; }
  .link-action::before, .sheet-root[open] > .sheet-toggle .sheet-toggle__mark::before, .sheet-root[open] > .sheet-toggle .sheet-toggle__mark::after { background: CanvasText; }
  .menu-panel, .sheet, .card, .proof { border-color: CanvasText; }
  .button { border-color: ButtonText; }
}

/* ---------- Marked slots inside a data table. Added by lane w1-2a-home-launch. A slot id is a long
   unbroken token, so at 390 the min-content width of two slot cells pushed the comparison table past
   the viewport and clipped its second column inside .table-wrap. Breaking anywhere restores both
   columns at every width, and has no effect once real copy replaces the ids. Same construction as
   .proof__value. [DAWN: 2026-09-04, slot ids in table cells; review-by 2026-12-04] ---------- */
.table .slot { overflow-wrap: anywhere; }