/* ───────────────────────────────────────────────────────────────────────── LANDING — the blocks that only the front page uses. rivet.css owns the palette; nothing here declares a colour that is not already a token. scenes.css owns the hero shell, the scrub, the split rows, the plates and the FAQ. TWO RULES INHERITED AND KEPT. No three-up feature grid anywhere — every block here is a row list, a vertical sequence or a two-column ledger, each unequal on purpose. And no wall of prose where a shape would do: the trust section below is a diagram for exactly that reason. WHAT CAME OUT ON 2026-08-08, and why, so it does not creep back: .hero-still the cinematic board photograph that used to open the page. The fold is the running editor now (assets/css/bench.css). .steps "three things happen, in this order" — three long paragraphs describing what the thing at the top of the page now does in front of you. .guarantee the ⌘Z panel. Undo is not a feature, it is table stakes, and giving it its own block said we thought otherwise. .proof-card two cards, one of which sold a recorded replay that showed the pre-rebuild panel. The replay is gone; the score stayed and got the room. ───────────────────────────────────────────────────────────────────────── */ /* ── the fold ───────────────────────────────────────────────────────────── BREATHING ROOM AT THE TOP IS A DECISION, not slack. Linear, Stripe and Cursor all open on 140–180 px of nothing above the headline, and it is what makes a page read as confident rather than as crammed. The measure came down with it: the lede is two sentences and is capped at 52ch so it cannot grow into a paragraph again. */ .hero { padding-top: clamp(112px, 15vh, 172px); } .hero-say { max-width: 72ch; } .hero h1 { max-width: 20ch; } .hero .lede { max-width: 52ch; } /* The window is wider than the words and starts lower than a picture would, so the eye reaches the product having already read the sentence. */ .bench-wrap { margin-top: clamp(34px, 5.5vh, 62px); } /* The bleed on .feat-visual is meant to run past the gutter, and on a wide window the 1300 px wrap has enough slack to absorb it. At ~1024 it does not, so 20 px hung off the right edge and — which nothing was clipping — could be panned sideways. CLIPPED AT THE SECTION, and it has to be the section. The obvious fix is `overflow-x: clip` on , and it was measured doing this: with it, the sticky stage in .turn stops sticking, so the board slid off screen and the entire scrub was dead. It still SCREENSHOTS as a board, which is exactly how that would have shipped. */ #inside { overflow-x: clip; } /* The orbit frame in the fabrication row is 2.5:1 with the board small in a wide dark stage — contained at full width it reads as a small board in a big empty box. Cropped to the same 16:8 the app screenshots beside it use, it sits at their visual weight. 3550 natural into a ~800 px slot leaves ~4.4x, so the crop and the zoom are free. */ .feat-frame img[src*="orbit/"] { aspect-ratio: 16 / 8; object-fit: cover; transform: scale(1.16); } /* ── the proof strip ────────────────────────────────────────────────────── Sits directly under the fold, where the atlas puts logos and star ratings. There are none to put here and inventing them is not on the table, so it carries four things a stranger can VERIFY — each linked to the page that proves it. A claim that does not link to its evidence does not belong. */ .proofstrip { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: clamp(46px, 7vw, 92px); } .proofstrip a { flex: 1 1 210px; padding: 20px 24px 20px 0; border-right: 1px solid var(--line); position: relative; transition: color .2s var(--ease); } .proofstrip a:last-child { border-right: 0; } .proofstrip b { display: block; font-family: var(--display); font-variation-settings: 'wdth' 102; font-weight: 600; font-size: 14.5px; letter-spacing: -.015em; color: var(--fg); } /* `a > span`, NOT a bare `span`: the arrow lives inside the and a bare selector turned it into a block, so every heading broke and dropped its arrow onto a line of its own. */ .proofstrip a > span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--fg-3); max-width: 30ch; } .proofstrip b .arw { margin-left: 6px; } .proofstrip a .arw { color: var(--fg-3); transition: transform .26s var(--ease), color .2s var(--ease); } .proofstrip a:hover .arw { transform: translateX(3px); color: var(--cu); } .proofstrip a:hover b { color: var(--cu-hi); } @media (max-width: 720px) { .proofstrip a { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; } .proofstrip a:last-child { border-bottom: 0; } } /* ── positioning by contrast ────────────────────────────────────────────── Rows, left side quiet and right side loud, so the eye lands on the answer rather than on the thing being rejected. */ .instead { margin-top: clamp(30px, 4vw, 50px); border-top: 1px solid var(--line); } .instead > div { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 8px 44px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); } .instead .not { color: var(--fg-3); font-size: 15px; line-height: 1.5; position: relative; padding-left: 26px; } /* A struck-through dash rather than a red cross: this is a comparison, not a defect report, and red on this site belongs to DRC alone. */ .instead .not::before { content: ''; position: absolute; left: 0; top: .72em; width: 14px; height: 1px; background: var(--line-2); } .instead .is { color: var(--fg); font-size: 15.5px; line-height: 1.5; font-weight: 520; letter-spacing: -.012em; position: relative; padding-left: 26px; } .instead .is::before { content: ''; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--cu); } .instead .is b { font-weight: 640; } @media (max-width: 780px) { .instead > div { grid-template-columns: 1fr; gap: 10px; } } /* ── the trust diagram ──────────────────────────────────────────────────── What stood here was four paragraphs about privacy. The argument is a shape — one enclosure, one arrow out of it, and nothing else crossing the line — and a shape argues faster than a paragraph and is harder to weasel. The ledger under it is what that one arrow is carrying, printed in full, because printing it in full IS the claim. */ .trustfig { margin-top: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-radius: 14px; background: var(--sub); padding: clamp(14px, 2.4vw, 26px); } .trustfig svg { width: 100%; height: auto; display: block; } .trustfig text { font-family: var(--sans); font-size: 14px; font-weight: 540; fill: var(--fg); letter-spacing: -.01em; } .trustfig .tf-cap { font-family: var(--display); font-variation-settings: 'wdth' 68; font-size: 12px; font-weight: 640; letter-spacing: .05em; text-transform: uppercase; fill: var(--fg-3); } .trustfig .tf-machine > rect { fill: none; stroke: var(--line-2); stroke-width: 1.5; } .trustfig .tf-chip rect { fill: var(--card-2); stroke: var(--line); stroke-width: 1; } .trustfig .tf-chip text { text-anchor: middle; fill: var(--fg-2); font-size: 13.5px; } .trustfig .tf-app rect { fill: rgb(var(--fg-rgb) / .05); stroke: var(--line-2); stroke-width: 1; } .trustfig .tf-app text { text-anchor: middle; font-weight: 620; font-size: 15px; } .trustfig .tf-out path { stroke: var(--cu); stroke-width: 2; fill: none; } .trustfig .tf-out text { text-anchor: middle; fill: var(--cu-deep); font-size: 13px; font-weight: 600; } .trustfig #tf-arrow path { fill: var(--cu); } .trustfig .tf-far rect { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 4 4; } .trustfig .tf-far text { text-anchor: middle; fill: var(--fg-2); font-size: 13.5px; } .trustfig .tf-far .tf-sub { fill: var(--fg-3); font-size: 12px; } .trustfig .tf-never path { stroke: var(--line-2); stroke-width: 1.5; fill: none; } .trustfig .tf-never .tf-x { stroke: var(--line-2); stroke-width: 1.8; } .trustfig .tf-never text { text-anchor: middle; fill: var(--fg-3); font-size: 12.5px; font-weight: 500; } /* ── the ledger ─────────────────────────────────────────────────────────── Two columns, unequal, and the one that matters is the one that is empty. */ .ledger { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(26px, 4vw, 42px); } .ledger section { border-top: 1px solid var(--line); padding-top: 16px; } .ledger h3 { margin: 0 0 4px; font-family: var(--display); font-variation-settings: 'wdth' 68; font-weight: 640; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); } .ledger ul { list-style: none; margin: 0; padding: 0; } .ledger li { padding: 13px 0; border-bottom: 1px solid rgb(var(--line-rgb) / .6); font-size: 14.5px; color: var(--fg-2); line-height: 1.5; } .ledger li:last-child { border-bottom: 0; } .ledger li b { color: var(--fg); font-weight: 600; } .ledger li em { font-style: normal; color: var(--fg-3); display: block; margin-top: 3px; font-size: 13px; } .ledger .out li { color: var(--fg); } .ledger .out li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cu); margin-right: 10px; vertical-align: 2px; } .ledger .never li::before { content: ''; display: inline-block; width: 8px; height: 1px; background: var(--line-2); margin-right: 10px; vertical-align: 4px; } @media (max-width: 780px) { .ledger { grid-template-columns: 1fr; } } /* ── the score ──────────────────────────────────────────────────────────── Printed with its date and its model id attached, because a pass rate without those two things is not a fact. The two worst groups are set at the same size as the two best, which is the whole point of showing it. */ .score { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 4px 0 0; padding: 0; list-style: none; } .score li { font-size: 13.5px; color: var(--fg-3); } .score li b { display: block; font-family: var(--display); font-variation-settings: 'wdth' 104; font-weight: 620; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1.05; color: var(--fg); } .score li.bad b { color: var(--fg-2); } .score.big { margin-top: clamp(26px, 4vw, 42px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); gap: 0; } .score.big li { flex: 1 1 170px; padding: 22px 24px 22px 0; border-right: 1px solid var(--line); } .score.big li:last-child { border-right: 0; } .score.big li b { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 4px; } @media (max-width: 700px) { .score.big li { flex: 1 1 45%; border-right: 0; } } /* ── a section-level way in ─────────────────────────────────────────────── Every scene ends with one of these. The atlas is blunt about it: a section that raises a question and does not say where the answer is has spent the visitor's attention without giving it anywhere to go. */ .more { margin-top: clamp(24px, 3vw, 38px); display: inline-flex; }