/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4 · genre: atmospheric · macrostructure: Stat-Led · theme: Terminal · enrichment: none (typography only) · nav: N8 (prompt `>`, cursor end, content width) · footer: Ft5 (38ch, wordmark under, hairline rule) · polish pass 2026-09-22: filled primary chip + border-box (button height fix), bar values to bar-end, latency rows stack <40rem, main minmax(0,1fr) grid-blowout fix, hero figure tnum off, pro copy (hosted ~0.3s measured), aria-live help, focusable pres, input:disabled 3-channel · contrast: pass (40-41) · mobile: pass (34, 49, 50-57) · slop: 58/58 (8 noted: same-archetype polish per request) */
:root {
  --color-paper: oklch(13% 0.012 150);
  --color-paper-2: oklch(16.5% 0.012 150);
  --color-paper-3: oklch(20% 0.012 150);
  --color-rule: oklch(28% 0.010 150);
  --color-neutral: oklch(58% 0.010 150);
  --color-muted: oklch(70% 0.008 150);
  --color-ink: oklch(93% 0.008 150);
  --color-accent: oklch(72% 0.20 150);
  --color-accent-ink: oklch(14% 0.01 150);
  --color-focus: oklch(80% 0.15 150);
  --color-error: oklch(62% 0.20 25);
  --color-nav: oklch(16% 0.012 150 / 0.82);
  --color-bloom-a: oklch(30% 0.10 150 / 0.55);
  --color-bloom-b: oklch(26% 0.09 140 / 0.45);
  --font-display: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.9531rem;
  --text-2xl: 2.4414rem;
  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 220ms;
  --z-sticky: 200;
}
html { overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
body {
  overflow-x: clip;
  margin: 0;
  background:
    radial-gradient(28% 22% at 12% 8%, var(--color-bloom-a), transparent 70%),
    radial-gradient(24% 20% at 88% 30%, var(--color-bloom-b), transparent 70%),
    var(--color-paper);
  background-attachment: fixed;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}
main {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: var(--space-2xl) var(--space-3xl);
}
h1, h2 { font-family: var(--font-display); font-style: normal; letter-spacing: -0.02em; line-height: 1.08; overflow-wrap: anywhere; min-width: 0; }
h2 { font-size: var(--text-xl); margin: 0 0 var(--space-sm); overflow-wrap: anywhere; }
p { max-width: 65ch; }
a { color: var(--color-accent); }
.tnum { font-variant-numeric: tabular-nums; }
p, td { overflow-wrap: anywhere; }
.mono { font-family: var(--font-display); font-size: 0.92em; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* N8 terminal nav */
.term-nav { position: sticky; top: var(--space-md); z-index: var(--z-sticky); max-width: 60rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.term-nav__inner {
  display: flex; align-items: center; gap: var(--space-md);
  background: var(--color-nav);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  padding: var(--space-xs) var(--space-lg);
}
.wordmark { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.term-nav__cmd { display: none; color: var(--color-neutral); font-family: var(--font-display); font-size: var(--text-sm); }
.term-nav__cmd .prompt { color: var(--color-accent); }
.term-nav__links { display: flex; gap: var(--space-md); margin-inline-start: auto; font-family: var(--font-display); font-size: var(--text-sm); }
.term-nav__links a { color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.term-nav__links a:hover { color: var(--color-accent); }
.nav-cta { color: var(--color-accent); }
.caret { display: inline-block; width: 1ch; color: var(--color-accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* H4 stat hero, left-biased */
.hero { padding-block: var(--space-2xl) var(--space-xl); }
.hero__figure { font-family: var(--font-display); font-weight: 700; font-size: clamp(4.5rem, 12vw, 8rem); line-height: 1; letter-spacing: -0.05em; color: var(--color-ink); font-variant-numeric: normal; }
.hero__title { font-size: var(--text-2xl); margin: var(--space-sm) 0 0; max-width: 20ch; }
.hero__sub { color: var(--color-muted); margin: var(--space-md) 0 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-block-start: var(--space-lg); }
.chip {
  display: inline-block; white-space: nowrap;
  border: 1px solid var(--color-accent); color: var(--color-accent-ink);
  background: var(--color-accent); border-radius: 4px;
  padding: var(--space-xs) var(--space-lg); min-height: 44px;
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-base);
  line-height: 1.4;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .chip:hover { background: var(--color-focus); border-color: var(--color-focus); } }
.chip:active { transform: translateY(1px); }
.chip:disabled { opacity: 0.55; cursor: not-allowed; }
.chip--ghost { border-color: var(--color-rule); color: var(--color-muted); background: transparent; }
@media (hover: hover) { .chip--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); background: transparent; } }
.tlink { color: var(--color-accent); text-decoration: underline solid 1px; text-underline-offset: 3px; white-space: nowrap; }
@media (hover: hover) { .tlink:hover { text-decoration-thickness: 2px; } }
.hero__secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-xl) 0 0; padding: var(--space-lg) 0 0; border-block-start: 1px solid var(--color-rule); }
.hero__secondary div { display: grid; gap: var(--space-2xs); }
.hero__secondary dt { color: var(--color-neutral); font-size: var(--text-sm); }
.hero__secondary dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); }

/* Sections */
.section-lede { color: var(--color-muted); }
.section-lede a { color: var(--color-accent); }
.fineprint { color: var(--color-muted); font-size: var(--text-sm); }

/* Benchmark bars (Tier-B SVG-free: pure CSS bars, tabular figures) */
.bars { display: grid; gap: var(--space-md); margin: var(--space-lg) 0 0; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); align-items: center; }
.bar-label { color: var(--color-muted); font-size: var(--text-sm); }
.bar-track { display: grid; gap: 4px; }
.bar { display: flex; justify-content: flex-end; width: var(--w); min-width: 3.2rem; background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; padding: var(--space-3xs) var(--space-xs); border-radius: 2px; }
.bar.ghost { background: var(--color-paper-3); color: var(--color-muted); }
.bars figcaption { color: var(--color-neutral); font-size: var(--text-sm); margin-block-start: var(--space-xs); }
.swatch { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 2px; vertical-align: baseline; }
.swatch--ref { background: var(--color-accent); }
.swatch--cmp { background: var(--color-paper-3); border: 1px solid var(--color-rule); }
.latency { display: grid; gap: var(--space-sm); margin-block-start: var(--space-lg); border-block-start: 1px solid var(--color-rule); padding-block-start: var(--space-lg); }
.latency > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); align-items: baseline; }
.lat-label { color: var(--color-muted); }
.lat-val { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.lat-note { grid-column: 1 / -1; color: var(--color-neutral); font-size: var(--text-sm); }

/* Console + forms */
.field { display: grid; gap: var(--space-2xs); margin-block-end: var(--space-md); max-width: 34rem; }
.field__label { font-size: var(--text-sm); color: var(--color-muted); }
.input {
  border: 1px solid var(--color-rule); outline: 2px solid transparent; outline-offset: 1px;
  background: var(--color-paper); color: var(--color-ink);
  border-radius: 4px; min-height: 44px; padding: 0 var(--space-md);
  font: inherit; width: 100%; box-sizing: border-box;
}
.input::placeholder { color: var(--color-neutral); }
@media (hover: hover) { .input:hover { background: var(--color-paper-2); } }
.input:focus-visible { outline: 2px solid var(--color-focus); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.input:disabled { opacity: 0.55; cursor: not-allowed; }
.field__help { font-size: var(--text-sm); color: var(--color-neutral); min-height: 1lh; }
.field__error { font-size: var(--text-sm); color: var(--color-error); min-height: 1lh; }
.resp-frame { border-block-start: 1px solid var(--color-rule); margin-block-start: var(--space-lg); padding-block-start: var(--space-xs); max-width: 44rem; }
.resp-label { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-neutral); }
.resp-frame pre { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--space-md); overflow-x: auto; font-family: var(--font-display); font-size: var(--text-sm); line-height: 1.5; }
.keyout { border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--space-lg); max-width: 44rem; margin-block-start: var(--space-lg); background: var(--color-paper-2); }
.keyout__label { font-size: var(--text-sm); color: var(--color-muted); display: block; margin-block-end: var(--space-xs); }
.keyout__key { display: block; font-size: var(--text-md); color: var(--color-accent); overflow-wrap: anywhere; margin-block-end: var(--space-md); }
.keyout__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }

/* Demos gallery: stacked rows, alternating direction on wide screens */
.demo-row { display: grid; gap: var(--space-xl); }
.demo-row > div { display: grid; gap: var(--space-sm); align-content: start; }
.demo-row h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; }
.demo-row .section-lede { margin: 0; }
.demo-stat { font-family: var(--font-display); color: var(--color-accent); margin: 0; }
@media (min-width: 60rem) {
  .demo-row { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-2xl); }
  .demo-row > div:last-child { border-inline-start: 1px solid var(--color-rule); padding-inline-start: var(--space-2xl); }
}

/* Ft5 statement footer */
.statement { max-width: 72rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); padding-block: var(--space-3xl) var(--space-xl); }
.statement__line { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: -0.02em; margin: 0 0 var(--space-lg); max-width: 38ch; }
.statement__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); align-items: baseline; border-block-start: 1px solid var(--color-rule); padding-block-start: var(--space-md); color: var(--color-neutral); font-size: var(--text-sm); }
.statement__meta nav { display: flex; gap: var(--space-md); }
.statement__meta a { color: var(--color-muted); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .statement__meta a:hover { color: var(--color-accent); } }

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  *, *::before, *::after { transition-duration: 150ms !important; }
}
.term-nav__links a:not(.nav-cta) { display: none; }
@media (min-width: 40rem) {
  .term-nav__links a:not(.nav-cta) { display: inline; }
  .bar-row { grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: var(--space-md); }
  .latency > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .lat-val { text-align: end; }
  .lat-note { grid-column: auto; text-align: end; }
}
@media (min-width: 60rem) {
  .hero__secondary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main { gap: var(--space-4xl); }
}