Design train: capture Design's drawn mobile + reconcile M1a to it

Design now provides mobile designs (Vyndr Mobile.dc.html, 5 screens at 390×844).
Captured as specs/design-reference/MOBILE-SPEC.md — the buildable distillation
(the raw dc-runtime HTML needs React to render; the design project holds the
verbatim source). I'm now IMPLEMENTING Design's mobile, not inferring it.

RECONCILE of the already-shipped M1a against Design's mobile:
- EKG hidden <768px — Design AGREES (mobile app bar carries no EKG). KEPT.
- .vbtn 44px tap target — Design AGREES (buttons are 44/46px). KEPT.
- .m-hero generic clamp — CONFLICT. Design uses CONTEXT-SPECIFIC hero sizes
  (74px grade tier / 40px live tier / 24px /u stats), not one clamp, and
  nothing consumed the class. REMOVED; the specific sizes land per-surface in M1b.
- Mobile HEADER shape — Design OVERRIDES: mobile is an app bar (logo + sync
  clock) + a breadth strip + a bottom wire, NOT the collapsed heartbeat bar.
  The EKG-drop is a compatible interim step; the full app-bar recomposition is
  M1b (the board/shell surface). Flagged in the CSS + MOBILE-SPEC.

Built to Design's mobile spec, VISUALLY UNVERIFIED at 390px (Chrome audit is eyes).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/app/globals.css

@@ -1363,18 +1363,18 @@ html[data-font="readable"] .wm::after { opacity: 0.45 !important; }
 
 /* ============================================================
    DESIGN COMPLETION TRAIN — M1 MOBILE FOUNDATION (2026-07-16)
-   The mockup (specs/design-reference/vyndr-system.html) is DESKTOP-ONLY.
-   These rules are the deliberate 390px expression of its grammar — not a
-   shrink: ONE animated element in the header (DESIGN-SPEC §4), one bold
-   mono hero per card with muted context (§3/§5), ≥44px primary tap targets,
-   zero horizontal overflow. BUILT TO SPEC, VISUALLY UNVERIFIED at 390px
-   (WSL2↔Chrome unreachable here — a true-390px Chrome audit is the eyes).
+   Now RECONCILED against Design's drawn mobile (specs/design-reference/
+   MOBILE-SPEC.md — Design DREW 390×844, so these implement it, not infer it).
+   Design agrees: no EKG on mobile, ≥44px tap targets. Design OVERRIDES the
+   header shape — mobile is an app bar (logo + sync clock) + breadth strip +
+   bottom wire, not the collapsed heartbeat bar; that full recomposition is
+   M1b (the board/shell surface). Built to Design's mobile spec, but still
+   VISUALLY UNVERIFIED at 390px (WSL2↔Chrome unreachable — Chrome audit is eyes).
    ============================================================ */
 
-/* Header-zone collapse (audit: ticker + SIGNAL LIVE + STALE all stacking in
-   ~110px on narrow). The EKG is decorative proof-of-life — dropped on phones
-   so the heartbeat reads as ONE clean status line, and the ticker + live-dot
-   become the single animated element in the header. */
+/* Header EKG drop <768px — Design's mobile has no EKG (app bar carries only
+   logo + sync clock). Interim step until the full app-bar recomposition in
+   M1b; keeps the heartbeat from reading as the audit's stacked 110px zone. */
 @media (max-width: 767px) {
   .hb-ekg { display: none !important; }
   .heartbeat-bar {
@@ -1399,12 +1399,9 @@ html[data-font="readable"] .wm::after { opacity: 0.45 !important; }
   }
 }
 
-/* Mono hero grammar (§3 "one bold hero figure among muted context"). Card
-   hero numbers opt in via .m-hero; they scale up on phones so the ONE figure
-   that matters dominates the stacked card. Context stays demoted. */
-@media (max-width: 640px) {
-  .m-hero { font-size: clamp(28px, 12vw, 56px) !important; line-height: 1; }
-}
+/* (removed .m-hero — RECONCILE 2026-07-16: Design's mobile uses CONTEXT-
+   SPECIFIC hero sizes, not one generic clamp: 74px grade tier, 40px live
+   tier, 24px /u stats. Those land per-surface in M1b, not as a global class.) */
 
 /* ============================================================
    Session 60 (night2/E) — §7 reveal choreography.