Redesign the website on the Voca warm-paper system

[Mr-Sunglasses]

Rebuilds vocamac.com around the shared Voca design language — warm paper, deep ink, one green accent, flat fills — and tells a VocaMac-specific, release-accurate story.

Structure and content

• Every product fact now lives in web/data/product.toml, so version, model catalogue, requirements and links have one source of truth.
• The homepage reads as a narrative: how it works → model choice → real product states → the privacy path → configuration → install → FAQ.
• Claims are scoped to the shipped stable release, and nightly-only work is labelled as such.
• Adds automated checks (node --test, html-validate, stylelint) and wires them into CI.

Design system

• An inline SVG icon set (layouts/partials/icon.html) used across the steps, config cards, privacy boundaries, install paths and every feature page.
• The privacy section's plain-text chips become a real flow diagram — microphone → in-memory audio → WhisperKit/CoreML → transcript at cursor — with animated connectors and an explicit "no extra stop" callout.
• Feature pages get a sticky table of contents, so the 44rem measure no longer sits alone against a third of a page of empty paper.
• The social card is redrawn in the new style and rasterised from SVG.

Colour and accessibility

These were measured, not eyeballed:

Problem	Was	Now
.prose a out-specified .btn-primary, painting the feature-page CTA dark green on green	unreadable	scoped to :not(.btn)
.btn-secondary — a near-white slab on warm paper, leaning on a hairline	2.48:1 border	takes its surface, brand-tinted border ≥3:1
--faint on paper (hero proof, step notes, install details, footer meta)	3.41:1	≥4.5:1 on every surface
Focus ring on paper	1.62:1	9.14:1, and 9.8:1 on dark surfaces

The DMG download also gets the primary treatment it was always the main action for.

Motion

• Scroll reveals now actually play. The 800ms blanket fallback un-hid everything below the fold, so it is cleared once the observer reports — and restored for print, which never scrolls.
• Hero audio meter, staggered word arrival, recording halos, nav underline, hamburger-to-X, plus-to-minus FAQ marker, card lift, TOC scroll-spy.
• All of it collapses under prefers-reduced-motion.

Layout bugs fixed

• .mobile-nav a caught the trailing .btn and reset it to a left-aligned, unpadded block.
• In-page anchors scrolled section titles under the sticky header.
• .model-table carried a border-radius a collapsed table can never clip.
• The copy button scrolled out of view with long commands.
• Back links shared a line with the section tag.
• The hero caret parked at the end of the first line once the transcript wrapped.
• The stacked privacy route inherited a flex-basis as height on phones.
• The route connector is rotated rather than hidden on phones, so its pulse keeps travelling.

Verification

• npm run check — 9/9 passing
• npx html-validate 'public/**/*.html' — clean
• npx stylelint static/style.css — clean
• Rendered and inspected at 390 / 640 / 760 / 1440px; animations confirmed running at each breakpoint via getAnimations(), and reveals confirmed 0/15 → 15/15 on scroll.