/* Hallmark · shape: Marquee Hero · genre: modern-minimal · theme: Cobalt (deal 3/3, seed graft-run-x86-windows-96db·4f473ec4·2026-11-12·r0) · job: try · draw: e74004
 * hero: Ledge · nav: banner over a retracting bar · footer: index columns · imagery: none, a generated ASCII field · signature: the benchmark table, graft beside Rosetta in real milliseconds
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 · weakest: H, a marquee fold delays the proof; the benchmark table starts directly under it on a hard paper change */
/* Hallmark · dismissed 58 · the 1440 window from y=1050 holds the benchmark table, whose milliseconds and row names count as words */
/* Hallmark · answered F25 · the benchmark table pins its row-naming column under 60rem and scrolls the figures beside it */
@import url("./tokens.css");
@import url("./base.css");

/* chrome */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.banner { background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); }
.banner__in { display: flex; align-items: center; min-height: 36px; }

.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.bar__in { display: flex; align-items: center; gap: var(--space-xl); min-height: 64px; }
.bar nav { display: flex; gap: var(--space-lg); margin-left: auto; }
.bar nav a { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.bar nav a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.bar nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.wordmark { font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* keys */
.key { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-key-face); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-key); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.key:hover { transform: translateY(-1px); }
.key:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); }
.key:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.key[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.key--primary { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: var(--shadow-key-accent); }
.key--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
@media (prefers-reduced-motion: reduce) { .key { transition: none; } .key:hover, .key:active { transform: none; } }

/* hero: the field above, the statement resting at its base */
.hero { position: relative; isolation: isolate; display: flex; min-height: calc(100dvh - 100px); background-color: var(--color-paper); background-image: radial-gradient(var(--color-glyph-1) 1px, transparent 1.5px); background-size: var(--cell-w) var(--cell-h); border-bottom: 4px solid var(--color-ink); }
.js .hero { background-image: none; }
.field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero__in { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xl); padding-block: var(--space-3xl) var(--space-2xl); }
.hero h1 { max-width: 13ch; font-size: clamp(4rem, 9vw, 8.5rem); line-height: 0.96; }
.hero__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); }
.hero__foot .lead { color: var(--color-ink-2); }

/* section heads */
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head .lead { color: var(--color-ink-2); }
.head--split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: end; }

/* benchmarks */
.bench { padding-block: var(--section-gap-s) var(--section-gap); background: var(--color-paper-2); }
.table-wrap { overflow-x: auto; border-top: 2px solid var(--color-ink); }
.table-wrap:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-lg) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); text-align: left; vertical-align: baseline; }
th:first-child, td:first-child { padding-left: 0; }
thead th { font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); white-space: nowrap; }
tbody th { font: 500 var(--text-title)/1.2 var(--font-display); color: var(--color-ink); white-space: nowrap; }
td.num { font: 400 var(--text-lg)/1.2 var(--font-outlier); font-variant-numeric: tabular-nums; color: var(--color-ink); white-space: nowrap; }
td.muted { font-size: var(--text-sm); color: var(--color-muted); }
tr.is-ours { background: var(--color-accent-wash); }
tr.is-ours th { font-weight: 600; padding-left: var(--space-md); }
tr.is-ours td.num { color: var(--color-accent-deep); }
.note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* how it works: head beside rows */
.how { padding-block: var(--section-gap); }
.how__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.rows { margin: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.rows > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows dt { font: 500 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.rows dd { margin: 0; color: var(--color-ink-2); max-width: 52ch; }

/* status: the graphite index */
.status { padding-block: var(--section-gap-s); background: var(--color-graphite); color: var(--color-graphite-ink); }
.status h2 { color: var(--color-graphite-ink); }
.status .head .lead { color: var(--color-graphite-muted); }
.index { margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: var(--rule-hair) solid var(--color-graphite-2); }
.index li { counter-increment: step; display: grid; grid-template-columns: var(--space-2xl) minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-graphite-2); }
.index li::before { content: counter(step); font: 400 var(--text-md)/1 var(--font-outlier); color: var(--color-graphite-muted); }
.index__what { font: 500 var(--text-title)/1.2 var(--font-display); }
.index__state { color: var(--color-graphite-muted); }
.index__state.is-done { color: var(--color-graphite-ink); }
.index__state.is-now { color: var(--color-accent-2); }

/* questions */
.faq { padding-block: var(--section-gap-l) var(--section-gap); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.qa { border-top: var(--rule-hair) solid var(--color-rule-2); }
.qa details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 72px; padding-block: var(--space-md); font: 500 var(--text-title)/1.2 var(--font-display); cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font: 400 var(--text-xl)/1 var(--font-outlier); color: var(--color-muted); }
.qa details[open] summary::after { content: "\2212"; }
.qa summary:hover { color: var(--color-accent-deep); }
.qa summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.qa p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }

/* close */
.close { padding-block: var(--section-gap-s); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }
.close__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; }
.close__acts { display: grid; justify-items: start; gap: var(--space-md); }
.close__acts p { font-size: var(--text-sm); color: var(--color-ink-2); }
.close a:not(.key):hover, .foot a:hover { text-decoration-color: var(--color-accent); }
.close a:not(.key):focus-visible, .foot a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* footer */
.foot { padding-block: var(--space-3xl) var(--space-xl); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--space-xl) var(--gap-columns); }
.wordmark--large { margin: 0; font-size: var(--text-section); }
.foot__h { margin-bottom: var(--space-sm); font: 500 var(--text-sm)/1.3 var(--font-display); letter-spacing: 0; color: var(--color-muted); }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.foot__legal { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 60rem) {
  .bar nav { display: none; }
  .bar__in { justify-content: space-between; }
  .head--split, .how__grid, .faq__grid, .close__in, .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .index li { grid-template-columns: var(--space-xl) minmax(0, 1fr); }
  .index__state { grid-column: 2; }
  .hero { min-height: 80dvh; }
  tbody th, thead th:first-child { position: sticky; left: 0; z-index: var(--z-raised); background: var(--color-paper-2); }
  tr.is-ours th { background: var(--color-accent-wash); }
}