Design completion train — import authoritative mockup + M1a mobile foundation

SETUP (required first step): overwrote specs/design-reference/ with the CURRENT
authoritative mockup ("Vyndr System.dc.html" from claude.ai/design, the version
with the combat card / pitcher identity / live grade-shift / correlation builder
/ FREE|PRO pricing / TRANSMISSION QUIET). 12 surfaces. Confirmed it has NO media
queries — desktop-only, so the 390px expression is a deliberate design decision,
not a shrink.

M1a — mobile foundation (built to spec, VISUALLY UNVERIFIED at 390px; WSL2↔Chrome
unreachable, the Chrome audit is the eyes):
- Header-zone collapse (the concrete audit finding: ticker + SIGNAL LIVE + STALE
  stacking in ~110px). The decorative EKG is dropped <768px so the heartbeat
  reads as ONE clean status line; signal pulse + ticker are the single animated
  element (DESIGN-SPEC §4). LiveLayer gains .heartbeat-bar / .hb-ekg hooks.
- Primary CTA (.vbtn) meets the 44px touch target on mobile; dense `small`
  buttons opt out (density is a feature).
- .m-hero mono-hero clamp for the one-figure-per-card grammar at 390px.
- M4 test-lock: vyndrParityQA asserts the header collapse, tap target, overflow
  containment, and the honest "UNVERIFIED at 390px" label are all in source.

Per-surface stacking (M1b), billboards (M2), desktop parity (M3) continue.

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

web/src/components/vyndr/LiveLayer.tsx

@@ -118,7 +118,7 @@ export function HeartbeatBar() {
   const syncColor = tier === 'stale' ? 'var(--miss)' : tier === 'amber' ? 'var(--amber)' : 'var(--text-2)';
   return (
     <div
-      className="scanlines"
+      className="scanlines heartbeat-bar"
       style={{
         display: 'flex',
         alignItems: 'center',
@@ -136,8 +136,10 @@ export function HeartbeatBar() {
         <span className="mono" style={{ color: 'var(--g-a)', fontWeight: 700, letterSpacing: '0.12em' }}>SIGNAL LIVE</span>
       </span>
 
-      {/* EKG strip */}
-      <div style={{ flex: 1, overflow: 'hidden', height: 22, maskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)' }}>
+      {/* EKG strip — decorative proof-of-life. Hidden <768px (mobile header
+          collapses to ONE status line; the signal pulse + ticker are the single
+          animated element there — DESIGN-SPEC §4 "one animated element"). */}
+      <div className="hb-ekg" style={{ flex: 1, overflow: 'hidden', height: 22, maskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)' }}>
         <div className="ekg-track" style={{ height: 22 }}>
           {[0, 1].map((k) => (
             <svg key={k} width="200" height="22" viewBox="0 0 200 22" style={{ display: 'block' }} aria-hidden>

web/src/components/vyndr/VBtn.tsx

@@ -54,6 +54,9 @@ export default function VBtn({
       type={type}
       disabled={disabled}
       onClick={onClick}
+      /* full-size CTAs meet the 44px mobile touch target (globals.css M1);
+         dense `small` buttons keep their compact size (density is a feature). */
+      className={small ? undefined : 'vbtn'}
       style={{ ...base, ...VARIANTS[variant], ...style }}
       onMouseEnter={(e) => {
         if (variant === 'outline') e.currentTarget.style.borderColor = 'var(--g-a)';