The rest of the roadmap: a second ground, real shadows, one table owner, arrow keys, tests, one brand colour

[datlechin]

Everything left that did not need a screenshot, a benchmark or sponsor copy.
Six items, one PR, each its own commit.

1. The page had one background for sixteen sections

This was flagged critical in the very first audit and never touched.

Over roughly ten thousand pixels of scroll the only rhythm device was hairline
density, so a reader could not tell from peripheral vision whether they had
moved from Architecture to Agents to Mobile. That is the difference between
restrained and monotonous. --card, --secondary and --accent were declared
in the stylesheet and used zero times, which is how long this had been the
intention.

Two grounds, not five. raised goes to the four sections that already read as
inset: Safe Mode, the depth index, the prices, the questions.

Measured rather than assumed — every foreground token was checked against the
new surface, the tightest being --muted-foreground-subtle at 4.61:1, which
still clears AA. [data-tone="raised"] sits after .dark because both are
specificity (0,1,0) and the tie breaks on source order.

Pricing is wrapped in SectionShell to get there, which it should have been
since #2. It was the one landing section rendering its own header, and it had
already drifted: extra spacers the shell has no concept of, a headline missing
text-pretty. Every shell change had been silently skipping the highest-intent
section on the page.

2. shadow-sm is a 3px blur on a 1216px-wide image

An order of magnitude too small, which is exactly why the hero read as a sticker
laid on the page rather than a window above it. Nine images across three files.

Replaced with the three-layer ramp every reference Mac-app site converged on
independently: tight contact shadow, mid lift, one large soft ambient.
Warm-tinted rather than neutral black.

drop-shadow rather than box-shadow because the shipped PNGs have an alpha
channel — I checked — so the captures carry real transparent macOS squircle
corners and the shadow follows the actual silhouette. The border and radius come
off for the same reason: border-radius is a circular arc tracing a continuous
curve, and the join is visible.

3. The three tables had already disagreed

Not about typography — they differ there on purpose — but about the one thing
the hairline system exists to settle. Columns are structure and take the heavier
rule; rows are data and take the hairline. The spec table did that. The plan
comparison drew its column separators with the row weight, so the one table
where columns carry the entire meaning drew them faintest.

DataTable owns the shell, the two weights by name, and a required
caption — the only reliable way to keep every data table announcing what it
is before a screen reader starts reading cells.

Worth flagging because it typechecks either way: two className="…${TOKEN}…"
strings in spec-strip were double-quoted rather than template literals, so they
would have shipped the literal text as a class name. Caught by grepping the
compiled stylesheet for the token names.

4. Arrow keys across the database tiles

Twenty-seven tiles; reaching one meant Tab twenty-seven times. Up and down move
a whole row, read off COLS at the current breakpoint so the two cannot
disagree. Focus clamps rather than wraps — wrapping a 2D grid on Left at the
start of a row lands you at the end of the previous one, which reads as focus
jumping backwards.

Purely additive: every tile stays in the tab order. The usual composite
pattern would leave one, but that needs role="grid" with row and gridcell
children, and this is one flat CSS grid whose borders are computed by index —
row wrappers would break the layout outright. Adding the roles without the
structure would describe a widget that is not there.

depth-grid and faq do not get this: they contain zero interactive
elements, so there is nothing to move between. The plan named all three.

5. Nothing from the last four PRs had a test

Survivable while the ssr job did not run. Not survivable now that it does,
because it is the only thing that sees the rendered DOM and it was still
checking the page as it looked before any of this.

Nine assertions, all on things a typecheck cannot see, each guarding a defect
this work actually shipped and had to repair — every rule numbered (AccentLine
was not), rule-inset-host present (without it half the ordinals were 32px
off), four routes to /download, both blocking objections before the feature
tour, the AI answer between Agents and Safety, more than one ground, Agents
adjacent to Safety, data-row on more than twenty elements, and plan
availability as words.

6. Four values claimed to be the brand colour

--primary #f68001, a theme-color meta #FFAA46, #ffaa46 across three OG
templates, a manifest declaring #000000. None agreed, none referenced the others.

theme-color was wrong in kind: it tints the browser's own chrome, so an accent
there paints the address bar a colour appearing nowhere on the page — and one
value cannot serve a site that follows the OS. Now two media-scoped tags
carrying the actual backgrounds, both computed from tokens.

The OG templates keep #ffaa46 deliberately. It corresponds to the dark
theme's --primary-strong, which computes to #ffa65e — 10.4:1 against the card
ground versus 10.2:1, a difference nobody can see. Changing it would regenerate
thirty-six committed PNGs through Chromium for nothing. What those files needed
was a reference, not a new value.

Still outstanding, unchanged

The hero recapture, the cold-start measurement, and eight sponsor descriptions.
All three need an artifact or a fact I do not have, and I will not invent any of
them.

Verification

typecheck, build and pint clean. 105 tests / 1849 assertions with
REQUIRE_SSR=1, up from 96. Rendered HTML checked for all six: four raised
sections, app-plate on hero and both comparison shots, zero shadow-sm left
on any screenshot, three tables through the primitive, two media-scoped
theme-color tags, and one main / one h1 / one header still.