blocks in a row with the comparison table buried in the middle, and they read as one grey wall: "everything looks the same and boring, nothing is really outlined, the headers dont do enough, tables look weird and dont stand out". Three things were actually wrong: 1. NO TYPE HIERARCHY. .doc h2 is 20px against 15.5px body — a 1.29x jump. That is not a heading, it is slightly larger text. Here h2 is 27px/700 with tighter tracking (1.74x), and the space above it is ~4x the space below, so a heading visibly belongs to what follows instead of floating between two blocks. 2. THE TABLE WAS THE WEAKEST THING ON THE PAGE, and it is the entire reason someone opens a comparison. It had no container, no fill, and one hairline per row. It is now a real spec sheet: its own panel, mono column heads, and the Clarus column claimed with a gold wash and a full-height rule so the eye knows which side it is reading without going back to the header. 3. EVERY SECTION LOOKED IDENTICAL, so nothing signalled what was worth stopping for. There are now five distinct treatments — verdict split, spec table, single-fact callout, trial block, related strip — and a section gets the one that matches what it is. The variety carries information; it is not decoration. The verdict split is the signature. The competitor is named FIRST and given exactly equal weight; only a gold edge marks ours. Most comparison pages shrink the alternative — this product's whole voice is "we would rather say so than pretend otherwise", so the honesty is built into the layout instead of being claimed in a sentence. ⚠️⚠️ EVERY CLASS HERE IS PREFIXED `v-`, AND THAT IS LOAD-BEARING. The first version used plain names and five of them already existed in site.css: `.mk`, `.call`, `.ghost`, `.row`, `.y`. `.mk` is the homepage's annotation marker and is `display: none` — so the tick and dash in every table cell rendered as NOTHING. Load order did not save it: compare.css comes after site.css, but a later rule only wins per-PROPERTY, and this file never set `display`, so `display: none` survived untouched. The cells looked simply empty, with no error anywhere. Do not add an unprefixed class to this file. Check with: grep -o '\.[a-z][\w-]*' compare.css | sort -u ───────────────────────────────────────────────────────────────────────────── */ /* Wider than .doc's 780px: a three-column table needs the room, and the verdict split needs two panels that do not become slivers. */ .cmp-page { max-width: 960px; } .cmp-page h1 { font-size: clamp(36px, 5.4vw, 52px); font-weight: 700; letter-spacing: -0.042em; } .cmp-page .v-dek { color: var(--text-mut); font-size: 16.5px; margin: 12px 0 0; max-width: 58ch; } /* ── Section headings ─────────────────────────────────────────────────────── The rule sits ABOVE with generous room and the gap below is small. That asymmetry is what makes a heading read as the start of something, rather than as a divider floating between two paragraphs. */ .cmp-page h2 { font-size: 27px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--text); margin: 72px 0 18px; padding-top: 30px; border-top: 1px solid var(--line); } .cmp-page h2 + p { margin-top: 0; } .cmp-page p, .cmp-page li { font-size: 16px; line-height: 1.62; } /* ⚠️ `.doc a { color: var(--gold) }` is (0,1,1) and `.btn-gold` is (0,1,0), so the link rule WON and the download button rendered gold text on a gold fill — invisible. Restated at (0,2,0). Same trap as .ft-items on /features. */ .cmp-page .btn-gold { color: oklch(0.15 0.02 84); } .cmp-page .btn-gold:hover { text-decoration: none; } /* ── The verdict split — the signature ────────────────────────────────────── Two panels, equal weight, competitor first. */ .v-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 36px 0 4px; align-items: stretch; } .v-panel { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px 24px; } /* Ours: a gold edge and a soft glow around it. Nothing else. ⚠️ There was a 2px gold bar pinned across the top of this panel. It read as a stray piece of furniture rather than an accent — "some weird bar at the top of it" — and a glow says the same thing without adding an object to the layout. Do not reintroduce the bar. */ .v-panel.v-ours { border-color: var(--gold-soft); background: linear-gradient(180deg, var(--gold-faint) 0%, transparent 62%), var(--panel); box-shadow: 0 0 34px -10px oklch(var(--gold-l) var(--gold-c) var(--gold-h) / 0.30); } .v-who { font-family: "Geist Mono", ui-monospace, Consolas, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 12px; } .v-panel.v-ours .v-who { color: var(--gold); } .v-verdict { font-size: 18.5px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.32; color: var(--text); margin: 0; } .v-panel ul { list-style: none; padding: 0; margin: 16px 0 0; } .v-panel li { position: relative; padding-left: 18px; margin: 0 0 7px; font-size: 14.5px; color: var(--text-mut); line-height: 1.5; } .v-panel li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); } .v-panel.v-ours li::before { background: var(--gold-deep); } .v-panel li:last-child { margin-bottom: 0; } /* ── The spec table ───────────────────────────────────────────────────────── ⚠️ The scroll container is the WRAPPER, never the