feat(landing): show the four surfaces on the front page, and answer the first-drive questions in the FAQ

[khagele]

Closes #730

The front page now shows the RX webapp, the map, a hunt and a repeater's reach as mockups with real values, and the FAQ grows from 9 to 16 answers.

Front page (landing/index.html, landing/style.css)

• Hero. "Map the mesh as you move and find hidden nodes." Start mapping (the RX webapp) stays the primary action, See the map the second. Four checks: Find hidden LoRa traffic sources, Map repeater coverage, Analyze on the desktop map, Free, code on GitHub.
• Tour. Four tabs above one mockup each. The mockups are drawings in the product's style; every number in them is real:
  • RX webapp: a reception from the 7 September export (NL-NIJ-NIMBUS, advert, 0 hops, -111 dBm, SNR 5.5), with the HUD and the floating readout.
  • Map: hex coverage with its RSSI legend.
  • Hunt & Locate: #77, a companion heard with no path (0 hops), 21 Requests in one hour on 30 June, search area 353 m.
  • Reach: DTIS, rays from the RSSI estimate to its receptions (farthest 10.7 km), the advertised position 3.1 km off.
  • The Hunt & Locate and Reach captions carry the §7 disclaimer, pinned by a test per panel.
• Slideshow. WAI-ARIA tabs. Each tab shows for 6 s, timed by a progress line under the active tab. A pointer that can hover pauses it while it is over the tour. Picking a tab stops it for good, by click, tap, keyboard focus or arrow key, and under prefers-reduced-motion it never starts. There is no play/pause button: the tabs are the control.
• Numbers. 427 nodes heard, 68k receptions, 75 companions mapping, counted through the API on 27 September 2026 and static in the HTML, with that date under them. The fourth tile is MQTT, open data.
• FAQ card links four answers, including #account. The section #get-an-account is gone: its four steps are now the FAQ answer.
• Theme. Follows prefers-color-scheme. The toggle overrides it and stores ch-theme in localStorage; a script in <head> applies it before the first paint. Master forced dark.
• Type. Space Grotesk Bold for headings, self-hosted in landing/fonts/ with its OFL licence. Colours come from the --ch-* tokens. hero.svg is removed.

FAQ (landing/faq.html)

• New: #rx-and-map, #browsers (Web Bluetooth: Chrome on Android, Bluefy on iOS, not Firefox), #install, #readout (keeping it in view on the road), #sf (SF7 and SF8), #own-broker, #contribute.
• Reworked: #account (the four steps), #auto-discover (what it sends and how often; anchor kept), #who-sees (receptions also go to DutchMeshCore, switchable under Manage brokers).
• Same header, footer and theme toggle as the front page.

Deploy

The landing is uploaded by hand. This PR adds landing/fonts/ (SpaceGrotesk-Bold.woff2, OFL.txt) and removes landing/hero.svg, so the upload needs the new folder.

Verification

• npx vitest run in landing/: 49 tests green (master: 29).
• Each new test mutation-checked: 11 mutations (a CDN stylesheet, a missing font file, a tab without a panel, two selected tabs, a shown hidden panel, a shot without a label, a caption without the disclaimer, the account steps removed, a dead FAQ anchor, the account link removed, a short scroll reserve), all red.
• Rendered at 1280 px and on a Pixel 7 profile, light and dark, and reviewed on a phone.

Not in this PR

• No changelog entry: the What's new panel lives in the app and the map, and earlier landing PRs (feat(landing): replace the blog with a FAQ #547, feat(landing,app,web): link the FAQ from both About tabs, and give every question an anchor #580) added none.
• The numbers do not update themselves. They are refreshed by hand, for example at a release.

🤖 Generated with Claude Code

[khagele]

Amended (70654d9): a click picks a tab and the show goes on from there, with the progress line starting over; keyboard focus and the arrow keys still stop it, so it never moves away from under a keyboard user. Checked in Chromium: after a mouse click is-playing stays and the next tab follows after 6 s; after Tab it stops. Landing: 41 tests.

[efiten]

Review before merge: two points to change, small ones below. Copy checked against app/src; the slideshow read from the code; the 360 px measurements taken in headless Chrome.

1. FAQ #auto-discover: telemetry is not once a minute (change requested)
The 4th bullet says a companion is asked for telemetry "each at most once a minute". Only the anonymous repeater asks have the 60 s gap (app/src/anonreq.js:35, ANON_MIN_GAP_MS). Telemetry goes every cycle, rotating over the selected companions and alternating with the anonymous ask (app.js:1868-1887), so a companion can be asked every 10 to 20 s. Proposed: apply "once a minute" to the repeater asks only.

2. The tour has no stop for pointer, touch or screen-reader users (change requested)
Since 70654d9 a click restarts the show, hover pauses it only while the pointer is over it, and only keyboard focus or the arrow keys stop it. A mouse, touch or virtual-cursor user reading a caption (one has a link) can have the panel swapped under them every 6 s (WCAG 2.2.2). On phones .lp-tour.is-playing:hover (style.css:114) can also stay stuck after a tap; not checked on a device.
Question: (a) stop on click again, or (b) add a pause/play control? Wrapping the hover rule in @media (hover: hover) helps touch either way.

3. Suggestion: tests for the slideshow logic
The 41 tests cover the markup. The advance on animationend and the stop rules are logic without a test, which is how point 2 changed without a test noticing.

4. Small ones

• faq.html:116 "full screen and upright": the manifest is standalone, not fullscreen.
• At 360 px the "Hunt & Locate" tab label overflows (scrollWidth 88 against clientWidth 77); the tabs are 38 px tall against the 44 px touch target in the design system.
• style.css:119,127,163 use raw rgba(...) in box-shadows; AGENTS.md asks for tokens.
• #who-sees says DutchMeshCore is on by default. That becomes true with feat(app): send one broker to several collectors under one switch #722 and the new config.json, so the two ship together.

[khagele]

Pushed 8a96cd2 for the review. Per point:

1. Telemetry. The bullet now reads: "a companion is asked for its telemetry, or a repeater for its regions and clock or for its owner. A repeater gets such a question at most once a minute."
2. Stop. (a): a click or tap on a tab stops the show for good, as keyboard focus and the arrow keys did (Kasper, 30 September). The hover pause sits inside @media (hover: hover). Checked in Chromium at 360 px: after a click is-playing is gone and the picked tab is still selected 8 s later. Not checked on a device.
3. Tests. landing.test.js runs the page's own inline script against a stand-in for the tabs and panels: advance and wrap on animationend, stop on a click, on keyboard focus and on an arrow key, no start under reduced motion. 9 mutations of the script, 9 red.
4. Small ones.
   • #install: "in its own window without the browser's address bar, and upright".
   • A tab is 44 px high. At 420 px and under the tabs are sized by their labels instead of in four equal parts: at 360 px every label has 12 px to spare, at 339 px 2 px. Above that they stay equal, 140 px each at 1280.
   • The three shadows mix from one --ch-shadow token with color-mix, and a test keeps colour values inside the token block. tokens.css has no shadow token, so this one is the landing's own; the rgba(0,0,0,.3) shadows in app.css are outside this PR.
   • #who-sees: agreed, it ships with feat(app): send one broker to several collectors under one switch #722 and the new config.json.

Landing: 49 tests (41 before). The PR description carries the new stop rule and count.