*, *::before, *::after { box-sizing: border-box; }
:root {
  color-scheme: dark;
  /* The grey ramp below is the site's, copied value-for-value from
     brand-system.css - which docs.css already matches exactly. It used to be a
     near-neutral ramp of its own (hue 261-264 at chroma 0.008-0.015 against the
     site's hue 266-268 at 0.022-0.028), and because this page links neither
     design-system.css nor brand-system.css there was nothing to correct it: the
     verification page rendered a measurably less blue dark than every other
     public page, `--bg` oklch(0.168 0.008 264) beside everyone else's
     oklch(0.170 0.026 260). Aligned 2026-08-28. Lightness is untouched except
     where the shared value is lighter (--muted 0.668 -> 0.672), so no text pair
     lost contrast; only chroma and hue moved. Kept as literals rather than
     var() references on purpose - this sheet is self-sufficient by design, and
     test/paletteConsistency holds these values to the shared ramp. */
  --bg: oklch(0.170 0.026 260);
  --bg-deep: oklch(0.124 0.028 260);
  --surface: oklch(0.242 0.030 260);
  --surface-2: oklch(0.200 0.028 260);
  --fg: oklch(0.982 0.005 259);
  --body: oklch(0.856 0.014 259);
  --muted: oklch(0.688 0.022 259);
  --border: oklch(0.322 0.030 260);
  --border-2: oklch(0.400 0.032 259);
  --accent: oklch(0.720 0.148 252);
  --accent-fill: oklch(0.558 0.198 258);
  --accent-hi: oklch(0.665 0.170 255);
  --accent-ink: oklch(0.985 0.006 252);
  --font-display: Geist, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: Geist, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
/* The nav plane matches the rest of the site: 94% of --bg-deep over a 16px blur,
   copied from the unified rule in brand-system.css. This page cannot simply link
   that sheet - measured, adding brand-system.css here changes 133 of 187 elements
   - so the two declarations that make the nav read the same are mirrored instead.
   Height already agrees at 68px. */
.site-nav { position: sticky; top: 0; z-index: 20; height: 68px; border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--bg-deep) 94%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.nav-inner { width: min(1200px, calc(100% - 48px)); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 32px; }
.brand { width: 158px; height: 40px; display: flex; align-items: center; flex: 0 0 auto; }
.brand img { width: 100%; height: 100%; display: block; object-fit: contain; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.nav-links a:hover { color: var(--fg); }
.nav-actions { display: flex; gap: 8px; }
.button { min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-2); border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; }
.button.primary { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--accent-ink); }
.button.primary:hover { background: var(--accent-hi); }
.button.secondary { color: var(--fg); }
main { overflow: clip; }
.verification-hero, .protocol, .verification-close { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.verification-hero { min-height: 520px; padding: 112px 0 92px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--border); }
.eyebrow { margin: 0 0 18px; color: var(--accent); font: 600 11px/1 var(--font-mono); }
h1, h2, h3 { margin: 0; color: var(--fg); font-family: var(--font-display); letter-spacing: 0; }
/* Display tier: the hero headline (clamp 48-88px, 48px narrow) and the two
   protocol heads (clamp 34-54px). Instrument Serif carried both for one day
   (2026-08-27 to 2026-08-28); they are Geist at 600 now, which is also what the
   `h1, h2, h3` rule above hands every smaller heading, so the tier is drawn by
   size and tracking instead of by family. -.038em and -.034em replace the -.015em
   the serif wanted: the tracking has to close as the size grows, not open. No
   `!important` is needed anywhere on this page - verification.html links only
   verification.css, shared-footer.css and polish.css, so nothing outranks this
   sheet - but the tracking must be restated because the rule above pins it to 0.
   The hero rule stays scoped to `.verification-hero h1` rather than a bare `h1`:
   a bare carrier is how a display size reaches whatever heading the page grows
   next. */
.verification-hero h1 { max-width: 800px; font: 600 clamp(48px, 7vw, 88px)/1.02 var(--font-display); letter-spacing: -.038em; }
.lede { max-width: 720px; margin: 28px 0 0; color: var(--body); font-size: 18px; line-height: 1.65; }
.hero-actions, .verification-close > div { margin-top: 32px; display: flex; align-items: center; gap: 24px; }
.text-action { color: var(--fg); font-size: 14px; font-weight: 600; text-decoration: none; }
.text-action span { display: inline-block; margin-left: 7px; color: var(--accent); }
.protocol { padding: 96px 0; display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.5fr); gap: 80px; }
.protocol-heading { position: sticky; top: 110px; align-self: start; }
.protocol-heading h2, .verification-close h2 { font: 600 clamp(34px, 4vw, 54px)/1.05 var(--font-display); letter-spacing: -.034em; }
.protocol-heading > p:last-child, .verification-close > p { margin: 20px 0 0; color: var(--muted); line-height: 1.65; }
.test-list { border-top: 1px solid var(--border); }
.test-list article { padding: 40px 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 22px; border-bottom: 1px solid var(--border); }
.test-number { color: var(--accent); font: 600 12px/1 var(--font-mono); }
.test-list h3 { font-size: 25px; line-height: 1.2; }
.test-list p, .test-list li { color: var(--body); font-size: 15px; line-height: 1.7; }
.test-list ul { padding-left: 20px; }
.test-details { margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--border); background: var(--border); }
.test-details section { min-width: 0; padding: 18px; background: var(--surface-2); }
.test-details h4 { margin: 0 0 8px; color: var(--accent); font: 600 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.test-details p { margin: 0; font-size: 14px; line-height: 1.6; }
.test-steps { margin: 22px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.failure-note { margin: 18px 0 0; padding-left: 14px; border-left: 2px solid var(--accent); color: var(--muted) !important; }
.failure-note strong { color: var(--fg); }
code { color: var(--accent); font-family: var(--font-mono); }
pre { max-width: 100%; margin: 22px 0; padding: 18px; overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-deep); color: var(--body); font: 12px/1.7 var(--font-mono); }
pre code { color: inherit; }
.verification-close { margin-bottom: 96px; padding: 64px; border: 1px solid var(--border); background: var(--surface-2); }
@media (max-width: 760px) {
  .site-nav { height: 64px; }
  .nav-inner { width: calc(100% - 32px); }
  .brand { width: 132px; }
  .nav-links, .button.secondary { display: none; }
  .nav-actions { margin-left: auto; }
  .verification-hero, .protocol, .verification-close { width: calc(100% - 32px); }
  .verification-hero { min-height: auto; padding: 76px 0 64px; }
  .verification-hero h1 { font-size: 48px; }
  .protocol { padding: 64px 0; grid-template-columns: 1fr; gap: 42px; }
  .protocol-heading { position: static; }
  .test-list article { padding: 32px 0; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .test-details { grid-template-columns: 1fr; }
  .verification-close { margin-bottom: 64px; padding: 32px 24px; }
  .hero-actions, .verification-close > div { align-items: flex-start; flex-direction: column; gap: 18px; }
}