/* Hallmark · shape: Conversational FAQ (draw swap: pricing table becomes a with/without table, WaveQ is free) · genre: modern-minimal · theme: Cobalt (deal 1/3, seed simple-minimalistic-github-pages-c9d1·cdde2efa·2026-11-12·r0) · job: sign up · draw: 255327
 * hero: Stage · nav: edge-aligned · footer: index columns · imagery: none, the product's real output in graphite panes and diagrams drawn from examples/sample.vcd · signature: raw VCD lines joined by hairline elbows to the exact JSON answer they become, with the same lines drawn as a live waveform whose cursor lands at 16 ns
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, the page could read as a feature tour; every head is a question a sceptical engineer would ask and every answer shows real output */
/* Hallmark · dismissed 58 · page total 565 counts 163 words of real tool output in code panes and 71 axis and lane labels in the sample.vcd diagrams; the prose is 333 words */
/* Hallmark · dismissed 58 · the 89-word screen at y 3650 is the install terminal and the client config, code a reader copies, with 31 words of prose */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 partial (the phone first screen shows the matched lines and the answer pane top; the full answer sits just under the fold at 812) · finish-review: skipped at user request */
/* Hallmark · redesign: polish (hero, 2026-11-14) · added the live waveform pane (diagram:scope, built from sample.vcd by build_diagrams.py) and one 9 s loop with a pause key; nothing removed · sloplint 0 FAIL 0 WARN, kept 11/11 links 7/7 hooks · finish-review: skipped, scoped hero change */
@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); }

.nav__inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.wordmark { font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; }
.wordmark:hover { color: var(--color-accent); }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); }
.nav__links > a:not(.key) { font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-ink-2); text-decoration: none; }
.nav__links > a:not(.key):hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }

/* ---------- controls: keycaps ---------- */
.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), background-color 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:disabled, .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--primary:hover { background: var(--color-accent-deep); }
.key--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.key--copy { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
html:not(.js) .key--copy { display: none; }
@media (prefers-reduced-motion: reduce) { .key { transition: background-color var(--dur-micro) linear; } .key:hover, .key:active { transform: none; } }

/* cut panels */
.cut { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
@supports (corner-shape: bevel) { .cut { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; } }
.graphite { background: var(--color-graphite); color: var(--color-graphite-ink); border-color: var(--color-graphite-2); }
.graphite .token { font-weight: 400; color: var(--color-accent-2); }

code, pre { font-family: var(--font-outlier); }

/* command chip */
.cmd { display: flex; align-items: center; gap: var(--space-sm); min-height: 64px; padding: var(--space-xs) var(--space-xs) var(--space-sm) var(--space-md); background: var(--color-paper-2); max-width: 100%; }
.cmd code { flex: 1; min-width: 0; white-space: normal; font-size: var(--text-xs); line-height: 1.5; color: var(--color-ink); }
.cmd code::before { content: "$ "; color: var(--color-muted); }

/* ---------- hero: Stage ---------- */
.hero { min-height: calc(100svh - 72px); display: grid; align-items: center; padding-block: var(--space-xl) var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.hero__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); justify-items: start; }
.hero h1 { font-size: clamp(2.75rem, 3.6vw + 1rem, 4.75rem); line-height: 1.02; max-width: 12ch; }
.hero .lead { color: var(--color-ink-2); max-width: 30ch; }
.hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); justify-items: start; margin-top: var(--space-xs); width: 100%; }
.hero__actions .cmd { width: 100%; max-width: 31rem; }
.hero__go { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); }
.terms { font-size: var(--text-sm); line-height: 1.45; color: var(--color-muted); }

/* ---------- the mapping figure ---------- */
.mapping { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 0.76fr) var(--space-xl) minmax(0, 1.3fr); align-items: center; }
.mapping .pane { min-width: 0; overflow: hidden; grid-column: 1; grid-row: 1; }
.mapping .pane--answer { grid-column: 3; }
.pane__head { display: flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-bottom: var(--rule-hair) solid var(--color-graphite-2); font-size: var(--text-xs); color: var(--color-graphite-muted); }
.pane__head code { font-size: var(--text-xs); }
.pane__body { margin: 0; padding: var(--space-sm) 0; font-size: var(--text-xs); line-height: 24px; overflow-x: auto; white-space: normal; }
.pane__body code { display: block; white-space: normal; }
.pane__body span { display: block; padding: 0 var(--space-md); white-space: pre; }
.pane__body .hit { position: relative; isolation: isolate; color: var(--color-graphite-ink); }
.pane__body .hit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-graphite-2); box-shadow: inset 2px 0 0 var(--color-accent-2); }
.pane__body .skipline { color: var(--color-graphite-muted); }
.mapping__links { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.mapping__links path { fill: none; stroke: var(--color-accent); stroke-width: 1.25; }
.mapping__links circle { fill: var(--color-accent); }
.mapping figcaption { grid-column: 1 / -1; margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); max-width: none; text-wrap: balance; }
.mapping figcaption code { font-size: var(--text-xs); padding: 0 var(--space-2xs); background: var(--color-paper-3); border-radius: var(--radius-input); }

/* the live waveform: the same lines drawn, a cursor that lands at 16 ns, the run of valid it lands in */
.mapping { grid-template-rows: auto auto; row-gap: var(--space-md); }
.mapping > .pane:first-child { grid-row: 1 / span 2; }
.mapping .pane--scope { grid-column: 3; grid-row: 1; align-self: end; }
.mapping .pane--answer { grid-row: 2; align-self: start; }
.pane--scope .pane__head { justify-content: space-between; gap: var(--space-md); padding-block: var(--space-2xs); }
.live-toggle { min-height: 32px; min-width: 56px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-graphite-glyph-2); border-radius: var(--radius-input); background: transparent; color: var(--color-graphite-ink); font: 500 var(--text-xs)/1 var(--font-display); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.live-toggle:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); }
.live-toggle:active { transform: translateY(1px); }
.live-toggle:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
.live-toggle[aria-pressed="true"] { border-color: var(--color-accent-2); color: var(--color-accent-2); }
.live-toggle:disabled { opacity: 0.55; cursor: not-allowed; }
html:not(.js) .live-toggle { display: none; }
.scope__plot { padding: var(--space-sm) var(--space-md) 0; }
.diagram.scope text { fill: var(--color-graphite-muted); }
.diagram.scope .lane { fill: var(--color-graphite-ink); font-weight: 500; }
.diagram.scope .tick { fill: var(--color-graphite-muted); }
.diagram.scope .axis { stroke: var(--color-graphite-glyph-2); }
.diagram.scope .grid { stroke: var(--color-graphite-glyph-1); }
.diagram.scope .wave { stroke: var(--color-graphite-ink); stroke-width: 1.5; }
.diagram.scope .wave--hit { stroke: var(--color-accent-2); stroke-width: 2; }
.diagram.scope .bus { fill: var(--color-graphite-2); stroke: var(--color-graphite-ink); stroke-width: 1.25; }
.diagram.scope .bus-label { fill: var(--color-graphite-ink); }
.diagram.scope .cursor { stroke: var(--color-accent-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.diagram.scope .cursor-label { fill: var(--color-accent-2); font-weight: 500; }
.scope__run { fill: color-mix(in oklab, var(--color-accent-2) 16%, transparent); stroke: var(--color-accent-2); stroke-width: 1; transform-box: fill-box; transform-origin: left center; }
.scope__readout { padding: var(--space-xs) var(--space-md) var(--space-md); font-size: var(--text-sm); color: var(--color-graphite-ink); }

/* one 9 s loop, transform and opacity only; script turns it on, the key and an off-screen hero pause it */
@keyframes scope-cursor {
  0% { transform: translateX(var(--from)); opacity: 0; }
  5% { transform: translateX(var(--from)); opacity: 1; }
  28%, 88% { transform: translateX(0); opacity: 1; }
  96%, 100% { transform: translateX(0); opacity: 0; }
}
@keyframes scope-run { 0%, 29% { transform: scaleX(0); opacity: 0; } 38%, 88% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes scope-show { 0%, 38% { transform: translateY(4px); opacity: 0; } 44%, 88% { transform: translateY(0); opacity: 1; } 96%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes scope-glow { 0%, 44% { opacity: 0; } 49%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes scope-glow-late { 0%, 50% { opacity: 0; } 56%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.mapping.is-live .scope__cursor { animation: scope-cursor 9s var(--ease-in-out) infinite; }
.mapping.is-live .scope__run { animation: scope-run 9s var(--ease-out) infinite; }
.mapping.is-live .scope__readout, .mapping.is-live .scope__stamp { animation: scope-show 9s var(--ease-out) infinite; }
.mapping.is-live > .pane:first-child .hit::before { animation: scope-glow 9s linear infinite; }
.mapping.is-live .pane--answer .hit::before, .mapping.is-live .mapping__links { animation: scope-glow-late 9s linear infinite; }
.mapping.is-paused *, .mapping.is-paused *::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mapping .scope__cursor, .mapping .scope__run, .mapping .scope__readout, .mapping .scope__stamp, .mapping .hit::before, .mapping .mapping__links { animation: none; } .live-toggle { display: none; } }

@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .mapping { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .mapping .pane, .mapping > .pane:first-child, .mapping .pane--scope, .mapping .pane--answer { grid-column: 1; grid-row: auto; align-self: auto; }
  .mapping .pane--scope { order: -1; }
  .mapping__links { display: none; }
  .mapping .pane__body span:not(.hit):not(.ctx) { display: none; }
  .mapping .pane__body { padding-block: var(--space-xs); }
  .mapping figcaption { margin-top: 0; }
}

/* ---------- sections: question and answer ---------- */
.qa { padding-block: var(--section-gap); }
.qa + .qa:not(.band) { border-top: var(--rule-hair) solid var(--color-rule); }
.band { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
#how { padding-block: var(--section-gap-l) var(--section-gap); }
.qa__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); max-width: 64rem; }
.qa__head .lead { color: var(--color-ink-2); }
.qa__head--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: end; max-width: none; }
.qa code, .close code, .foot code { font-size: 0.92em; }
p code, dd code, td code, .aside code { padding: 0 var(--space-2xs); background: var(--color-paper-3); border-radius: var(--radius-input); }
.band p code, .band td code { background: var(--color-paper); }

/* split: text beside a plate */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split__text { display: grid; gap: var(--space-lg); align-content: center; }
.split__text p { color: var(--color-ink-2); max-width: 46ch; }

/* plates hold the diagrams */
.plate { margin: 0; padding: var(--space-xl); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.plate figcaption { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); text-wrap: balance; }
.plate--wide { padding: var(--space-xl) var(--space-xl) var(--space-lg); }
.diagram { width: 100%; height: auto; overflow: visible; }
.diagram text { font-family: var(--font-outlier); font-size: 12px; fill: var(--color-ink-2); }
.diagram--wide text { font-size: 13px; }
.diagram .lane { fill: var(--color-ink); font-weight: 500; }
.diagram .tick { fill: var(--color-muted); text-anchor: middle; font-size: 11px; }
.diagram .axis { stroke: var(--color-rule-2); stroke-width: 1; }
.diagram .grid { stroke: var(--color-rule); stroke-width: 1; stroke-dasharray: 2 4; }
.diagram .wave { fill: none; stroke: var(--color-ink); stroke-width: 1.75; stroke-linejoin: round; }
.diagram .bus { fill: var(--color-paper-2); stroke: var(--color-ink); stroke-width: 1.5; }
.diagram .bus-label { text-anchor: middle; dominant-baseline: central; fill: var(--color-ink); font-weight: 500; }
.diagram .rail { stroke: var(--color-rule-2); stroke-width: 1; }
.diagram .dot { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 1.5; }
.diagram .note { fill: var(--color-ink-2); }
.diagram .run { fill: var(--color-paper-3); stroke: var(--color-rule-2); }
.diagram .run--hit { fill: var(--color-accent-wash); stroke: var(--color-accent); stroke-width: 1.5; }
.diagram .run-label { text-anchor: middle; fill: var(--color-ink-2); }
.diagram .run-label--hit { fill: var(--color-accent-deep); font-weight: 500; }
.diagram .edge-mark { fill: none; stroke: var(--color-ink); stroke-width: 1.75; stroke-linejoin: round; }
.diagram .cursor { stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.diagram .cursor-label { fill: var(--color-accent-deep); font-weight: 500; }
.diagram .edge-line { stroke: var(--color-rule-2); stroke-width: 1; }
.diagram .edge-line--hit { stroke: var(--color-accent); stroke-width: 1.5; }
.diagram .match-band { fill: var(--color-accent-wash); }
.diagram .sample { fill: var(--color-paper); stroke: var(--color-muted); stroke-width: 1.5; }
.diagram .sample--hit { fill: var(--color-accent); stroke: var(--color-accent); }

/* the comparison table */
.compare { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.compare th, .compare td { padding: var(--space-md) var(--space-lg) var(--space-md) 0; text-align: left; vertical-align: top; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.compare thead th { font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); white-space: nowrap; padding-block: 0 var(--space-sm); }
.compare tbody th { font: 600 var(--text-title)/1.25 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); width: 26%; }
.compare td { color: var(--color-ink-2); width: 37%; line-height: 1.5; }
.compare td:last-child { color: var(--color-ink); }
.compare tbody tr { height: 72px; }
.compare__lit > * { background: var(--color-accent-wash); }
.compare__lit > th { box-shadow: inset 3px 0 0 var(--color-accent); padding-left: var(--space-md); }

/* three tables, three across */
.tables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-xl) 0 0; }
.tables > div { padding-inline: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.tables > div:first-child { padding-left: 0; border-left: 0; }
.tables dt { font-size: var(--text-title); font-variant-numeric: tabular-nums; margin-bottom: var(--space-xs); }
.tables dt code { font-weight: 500; color: var(--color-ink); }
.tables dd { margin: 0; color: var(--color-ink-2); max-width: 36ch; }

/* graphite snippets */
.snippet { overflow: hidden; }
.snippet pre { margin: 0; padding: var(--space-md); font-size: var(--text-xs); line-height: 1.7; overflow-x: auto; }
.snippet .token { font-weight: 500; }

/* failures, as rows */
.fails { list-style: none; margin: 0; padding: 0; }
.fails li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.fails li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.fails__call { font-size: var(--text-md); color: var(--color-ink); overflow-wrap: anywhere; }
.fails__reply { font-size: var(--text-sm); color: var(--color-ink-2); overflow-wrap: anywhere; }
.fails__reply b { display: inline-block; margin-right: var(--space-sm); font-weight: 500; color: var(--color-error); }

/* connect */
.connect { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.connect__install { display: grid; gap: var(--space-lg); }
.connect__install p:not(.aside) { color: var(--color-ink-2); }
.aside { font-size: var(--text-sm); color: var(--color-muted); }
.aside a { color: var(--color-ink-2); }
.aside a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.switch { display: grid; gap: var(--space-md); }
.tray { display: inline-flex; justify-self: start; gap: var(--space-2xs); padding: var(--space-2xs); background: var(--color-paper-3); border-radius: var(--radius-card); }
html:not(.js) .tray { display: none; }
.tab { min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid transparent; border-radius: var(--radius-input); background: transparent; color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-display); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.tab:hover { color: var(--color-ink); }
.tab:active { background: var(--color-paper-2); }
.tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tab:disabled { opacity: 0.55; cursor: not-allowed; }
.tab[aria-selected="true"] { background: var(--color-key-face); color: var(--color-ink); border-color: var(--color-rule-2); box-shadow: var(--shadow-key-press); }

/* close band */
.close__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; }
.close__actions { display: grid; gap: var(--space-md); justify-items: start; }
.close__actions .cmd { width: 100%; }

/* footer: index columns */
.foot { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--space-xl) var(--gap-columns); }
.foot__mark { display: grid; gap: var(--space-sm); align-content: start; }
.foot__mark .wordmark { font-size: var(--text-2xl); }
.foot__mark p { color: var(--color-ink-2); }
.foot h3 { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--color-muted); margin-bottom: var(--space-sm); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.foot ul a { color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.foot ul a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.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); max-width: none; }

@media (max-width: 60rem) {
  .split, .split--flip, .connect, .close__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .split--flip .split__visual { order: 2; }
  .qa__head--split { grid-template-columns: minmax(0, 1fr); }
  .plate { padding: var(--space-md); }
  .plate__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
  .plate__scroll:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .plate__scroll .diagram { min-width: 34rem; }
  .plate__scroll .diagram--wide { min-width: 56rem; }
  .compare tbody th, .compare td { width: 100%; }
  .tables { grid-template-columns: minmax(0, 1fr); }
  .tables > div { padding: var(--space-md) 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .tables > div:first-child { border-top: 0; }
  .fails li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tbody tr { height: auto; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
  .compare th, .compare td { padding: var(--space-2xs) 0; border: 0; }
  .compare td:nth-of-type(1)::before { content: "Raw VCD: "; color: var(--color-muted); }
  .compare td:nth-of-type(2)::before { content: "WaveQ: "; color: var(--color-muted); }
  .compare__lit > th { box-shadow: none; padding-left: 0; }
  .compare__lit { background: var(--color-accent-wash); padding-inline: var(--space-md); }
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__mark { grid-column: 1 / -1; }
}