[P2][UX] Simplify the first-visit and mobile crossing-selection journey

[sbc1-code]

Problem

The desktop product is functional, but the first visit still opens with all 44 crossing cards and an abstract heading (“Border Crossing Intelligence”). Direction, freshness, geography, and the next useful action compete for attention.

A true mobile browser pass was not completed during the audit because the available Chrome viewport override did not change the rendered viewport. This task must include real 360–390 px verification, not assumptions from responsive CSS.

Scope

• Make the first screen answer: where are you crossing, which direction, and how fresh is the report?
• Test a clearer wait-time-first H1/value proposition.
• Improve default crossing discovery without forcing geolocation.
• Preserve fast return access to favorites and alerts.
• Ensure primary navigation, filters, cards, and detail transitions work at 360, 390, tablet, and desktop widths.
• Clean up page heading semantics so route pages do not inherit an extra sidebar H1.

Definition of done

• A new visitor can choose the intended crossing and direction and open a useful detail view in a short usability script.
• A returning visitor reaches a favorite crossing in one obvious action.
• No horizontal overflow, clipped controls, inaccessible target sizes, or obscured content at tested widths.
• Before/after screenshots and task timings are attached.
• Core actions meet keyboard and screen-reader labeling checks.

Parent roadmap: #56

[sbc1-code]

Partially addressed, shipped 2026-08-20.

The mobile audit this issue calls for was finally done at a real viewport. The Chrome viewport override noted here still does not change the rendered viewport; Playwright does, which is how these numbers were measured.

Shipped in #72 (accessibility):

• Duplicate <h1> fixed. The sidebar brand was an <h1> inside hidden lg:flex, so it was in the DOM at every width and every page had two — including on mobile.
• Tap targets to WCAG 2.2 AA SC 2.5.8 (24x24), with 44x44 on primary controls via a .tap-44 hit-area utility that does not change painted size. Measured after: 0 controls under 24px, body scrollWidth exactly 390 (no overflow).

Shipped in #75 (Border Line + mobile collapse):

• Page height 17,888px -> 5,269px at 390x844.
• Cards rendered 42 -> 5 behind a "Show all 42" control. This is not just scroll length: BorderCrossingCard fetches its own /data/aggregates/<slug>.json, so this removes ~37 requests from the cellular landing path.
• A geographic spine now carries orientation, so the card wall is no longer the only way to find a crossing.

Still open, which is why this stays open: the first-visit journey itself. A first-time visitor still lands on the full dashboard rather than being routed to a likely crossing. The geolocation prompt exists but only sets a region filter.

Note: crossing count is now 42, not 44 (see #73 — two of the listed crossings were legacy duplicate port numbers that had never once reported a wait).