feat(route): mobile vertical timeline at <768px

The treasure-map metaphor is a desktop affordance — on phones it
becomes a vertical timeline instead. Markup was rendered alongside the
desktop track in commit RM.5; this commit adds the styles to actually
show it and hides the desktop bits.

Per-row layout — 32px / 1fr grid:
- Left column holds the 12px round status-coloured dot and a 1px
  rgba(0,0,0,0.18) vertical line continuing down to the next dot. The
  last row has no line (rendered conditionally in the markup), so the
  trail ends cleanly at the final milestone.
- Right column holds the same eyebrow / serif title / description /
  trailing line — but always visible. No hover, no reveal. Reading is
  the only interaction.

Arrow buttons and progress dots both hidden at this breakpoint. The
mobile timeline needs no JS — pure markup + CSS.

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

src/components/RoadmapRoute.astro

@@ -453,11 +453,82 @@ const initialShippingX = lastShippingIndex >= 0 ? itemXByIndex[lastShippingIndex
     background: var(--on-surface);
   }
 
-  /* Mobile vertical timeline lives in step 7; hide it for now on desktop. */
+  /* ── Mobile vertical timeline ──────────────────────────────────── */
   .rr-mobile { display: none; }
 
   @media (max-width: 767px) {
     .rr-desktop { display: none; }
-    .rr-mobile { display: block; }
+    .route-arrows { display: none; }
+    .rr-mobile {
+      display: block;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .rrm-row {
+      display: grid;
+      grid-template-columns: 32px 1fr;
+      gap: 16px;
+      align-items: start;
+    }
+    .rrm-track-col {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0;
+      min-height: 100%;
+      padding-top: 6px;
+    }
+    .rrm-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    .rrm-line {
+      width: 1px;
+      flex: 1;
+      min-height: 28px;
+      background: rgba(0, 0, 0, 0.18);
+      margin-top: 4px;
+    }
+    .rrm-body {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding-bottom: 28px;
+    }
+    .rrm-eyebrow {
+      font-family: var(--font-sans);
+      font-size: 9px;
+      letter-spacing: 1.4px;
+      text-transform: uppercase;
+      margin: 0;
+      font-weight: 600;
+    }
+    .rrm-title {
+      font-family: var(--font-serif);
+      font-size: 18px;
+      line-height: 1.2;
+      color: var(--on-surface);
+      margin: 0;
+    }
+    .rrm-desc {
+      font-family: var(--font-sans);
+      font-size: 13px;
+      line-height: 1.55;
+      color: var(--on-surface-variant);
+      margin: 0;
+    }
+    .rrm-trail {
+      font-family: var(--font-sans);
+      font-size: 9px;
+      letter-spacing: 1px;
+      text-transform: uppercase;
+      color: var(--on-surface-muted);
+      margin: 0;
+    }
   }
 </style>