Make the site consistent with itself: one header rhythm, one copy of each component, one value per role

[datlechin]

A seven-lens audit across all ten pages, then the fixes. −219 lines net, and
every consistency counter that mattered is now zero.

The homepage had six passes of attention over six PRs. The other nine pages had
almost none, and that is exactly where the divergence had collected.

The header rhythm was hand-rolled forty-one times

Not one of the nine non-homepage pages used SectionShell. Compare and
DatabaseClient each built seventeen section headers by hand. Every copy had
drifted from the one the component documents:

• The retired FullLine → h-4 → FullLine / FullLine → h-2 → FullLine pattern
  was still intact on six pages — four rules where the system draws two, which
  renders as a 1px rule, 16px gap, 1px rule band. SectionShell's own docblock
  calls that a mis-rendered table border and says it was deleted.
• None of them imported AccentLine, so the orange tick that marks the
  start of every section on the homepage was missing from all forty-one.
• Every label, heading and lede used pl-4 — flush against its rules with no
  vertical padding, and no right padding either, so long text ran into the
  container rail.
• Three h1 size ramps and three padding treatments across the eight pages with
  an h1.

There is now one HeaderStack. SectionShell renders it with an h2 and a
landmark, PageHeader with an h1, SectionHeader alone for the two pages whose
sections live inside conditional fragments no component wrapper lines up with.
Duplicating a rhythm is how a rhythm stops being one.

Compare's Verdict section had an eyebrow and no heading at all. It has one.

Four things existed in two to eight copies

The Apple mark, eight copies in four shapes. Four carried no size class at
all — inside a flex button that means the browser guesses — and half were
missing aria-hidden, announcing an unlabelled graphic inside a button that
already reads "Download for Mac".

The tick, three copies that disagreed on colour. One used bare --primary
at 2.62:1, in the glyph that is the sole carrier of meaning in a comparison
column.

That is why availability is now one Availability component rather than a glyph
you are trusted to pair with text. Both glyphs are aria-hidden, so a cell
holding only one announces as empty — and an empty cell in a comparison table
does not read as "no answer", it reads as "not included". The pricing table
shipped that, was fixed in #3, and Compare lost the same fix midway through
this very branch when its local wrappers were swapped out. A pair that must
not be separated should not be two things.

The FAQ, two presentations. An open grid on the homepage and /faq, a
<details> accordion on Compare and DatabaseClient — byte-identical between
those two, and invalid in both, since a <dl> may contain only <dt>, <dd>
and <div>. Open won: three to eight questions is nothing to collapse for, and
an answer behind a disclosure ranks lower and is never skimmed.

SectionBlock and Bullet, byte-identical in Privacy and Terms.

Images and tables

Four screenshot blocks fetched both themes. hidden dark:contents — and
display: none does not cancel an in-flight request, which is the exact reason
themed-image.tsx exists and says so in its docblock. Those pages also skipped
the WebP ladder that had already been generated for the same files.

Compare's comparison table was a grid of divs with no table semantics,
drawing its column separators at the row weight — in the one table where the
columns carry the entire meaning.

Three scrolling code blocks were unreachable by keyboard. A container that
scrolls but holds nothing focusable fails WCAG 2.1.1. The two that do hold
focusable children are fine and deliberately unchanged.

One value per role

	before	after
header spacer divs	22	0
pl-4 on an element	43	0
raw gray-950 / black / white alphas	12	0
transition-all	7	0
arbitrary text-[Npx]	4	0
disabled:opacity values	2	1
hand-written prose links	21	0
<details> accordions	2	0

The accent tint went from seven values in two syntaxes to two roles, written
down in app.css: /5 marks a surface as the featured one, /10 fills a chip
or a selected control. safety.tsx keeps its own finer ladder and that is
not drift — the tint there encodes how far up the six-level ladder a row sits,
so it has to be finer and evenly spaced.

The mobile nav also keeps its own close icon. It shares a path with the "not
included" cross and nothing else — 20px inheriting the button's colour versus
14px in muted-foreground — and sharing a path is not sharing a role.

Verification

typecheck, build and pint clean. 105 tests / 1849 assertions with
REQUIRE_SSR=1. Every page type re-rendered and checked: /, /terms,
/privacy, /refund-policy, /download, /faq, /blog, /compare/dbeaver
and /postgresql-client each show one <main>, one <h1>, the accent tick
present, zero doubled rules and zero accordions.