/* 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.page {
  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);
}
.page h1, .page h2 { font-family: var(--font-display); font-style: normal; letter-spacing: -0.02em; line-height: 1.08; overflow-wrap: anywhere; min-width: 0; }
.page h2 { font-size: var(--text-xl); margin: 0 0 var(--space-sm); overflow-wrap: anywhere; }
.page p { max-width: 65ch; }
.page a { color: var(--color-accent); }
.tnum { font-variant-numeric: tabular-nums; }
.page p, .page 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; }
a.chip { color: var(--color-accent-ink); }
a.chip--ghost { color: var(--color-muted); }
@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: vertical groups (r1 accent, Jev ghost, r0 muted) */
.vbars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); margin: var(--space-lg) 0 0; }
.vgroup { display: grid; gap: var(--space-xs); align-content: start; }
.vgroup > span { color: var(--color-muted); font-size: var(--text-sm); text-align: center; }
.vcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); align-items: stretch; height: 11rem; border-block-end: 1px solid var(--color-rule); position: relative; }
.vcols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vcol { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-height: 0; height: 100%; }
.vcol > span { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; }
.vbar { width: 100%; max-width: 2.75rem; height: var(--h); min-height: 3px; border-radius: 2px 2px 0 0; background: var(--color-accent); }
.vbar.ghost { background: var(--color-paper-3); border: 1px solid var(--color-rule); border-block-end: 0; }
.vbar.dim { background: var(--color-neutral); }
.chance { position: absolute; left: 0; right: 0; bottom: 33.3%; border-block-start: 1px dashed var(--color-neutral); }
.chance > span { position: absolute; left: 0; top: -1.4em; font-size: var(--text-sm); color: var(--color-neutral); white-space: nowrap; }
.vbars figcaption { color: var(--color-neutral); font-size: var(--text-sm); margin-block-start: var(--space-xs); grid-column: 1 / -1; }
@media (min-width: 60rem) {
  .vbars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.swatch { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 2px; vertical-align: baseline; }
.swatch--ref { background: var(--color-accent); }
.swatch--jev { background: transparent; border: 1px solid var(--color-rule); }
.swatch--dim { background: var(--color-neutral); }
.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; grid-template-rows: auto auto 1fr auto; }
.demo-row .chip { justify-self: start; align-self: end; }
.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: repeat(3, minmax(0, 1fr)); }
  .demo-row > div + div { border-inline-start: 1px solid var(--color-rule); padding-inline-start: var(--space-xl); }
}

/* 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; }
  .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); }
}

/* Clerk auth slot: children join the nav flex row; avatar aligns inline */
#auth-slot { display: contents; }
#user-button { display: inline-flex; align-items: center; }

/* Account page: key rows + section titles */
.card-title { font-family: var(--font-display); font-size: var(--text-md); margin-block-start: var(--space-xl); }
.row { display: flex; gap: var(--space-sm); margin-block-start: var(--space-md); flex-wrap: wrap; }
.keylist { display: grid; gap: var(--space-sm); margin-block-start: var(--space-md); }
.keyrow {
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
  border: 1px solid var(--color-rule); border-radius: 4px;
  padding: var(--space-sm) var(--space-md); background: var(--color-paper-2);
}
.keyrow__name { color: var(--color-muted); }
.keyrow code { color: var(--color-accent); }
.keyrow__date { margin-inline-start: auto; color: var(--color-muted); font-size: var(--text-sm); }
.keyrow__revoke { padding: 0.35rem 0.8rem; }
#signin-mount { margin-block-start: var(--space-md); }

/* Account page: profile + usage */
.profile { display: flex; gap: var(--space-md); align-items: center; margin-block-start: var(--space-md); }
.profile__avatar { border-radius: 50%; border: 1px solid var(--color-rule); }
.profile__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); }
.profile__id { color: var(--color-muted); font-size: var(--text-sm); }
.ubars { display: flex; gap: var(--space-2xs); align-items: stretch; margin-block-start: var(--space-md); min-height: 96px; }
.ubar { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); flex: 1; min-width: 0; }
.ubar__fill { width: 100%; max-width: 2rem; margin-block-start: auto; height: var(--h, 4%); min-height: 3px; background: var(--color-accent); border-radius: 2px; opacity: 0.85; }
.ubar__day { font-size: var(--text-xs); color: var(--color-neutral); font-family: var(--font-display); }
.meter { flex: 1 1 100%; height: 6px; background: var(--color-paper-3); border-radius: 3px; overflow: hidden; }
.meter__fill { height: 100%; background: var(--color-accent); }