diff --git a/src/pages/roadmap.astro b/src/pages/roadmap.astro
index 17b57f8..ff463bb 100644
--- a/src/pages/roadmap.astro
+++ b/src/pages/roadmap.astro
@@ -23,9 +23,8 @@ const items = getAllRoadmapItems()
       </p>
     </header>
 
-    <RoadmapRoute items={items} />
-
-    <!-- Legend — final row inside content column. -->
+    <!-- Legend lives above the route now — reads as a key the eye picks
+         up just before walking the path. -->
     <div class="roadmap-legend" aria-label="Status legend">
       <span><i style="background:#6d8c7c"></i>Shipping</span>
       <span><i style="background:#b96b58"></i>In beta</span>
@@ -33,9 +32,11 @@ const items = getAllRoadmapItems()
       <span><i style="background:#d4d2c8"></i>Considering</span>
     </div>
 
-    <!-- Latest dispatch — moved below the route. The route is the page's
-         primary surface; the dispatch is supplementary editorial that
-         sits at the foot. -->
+    <RoadmapRoute items={items} />
+
+    <!-- Latest dispatch sits at the foot of the page with generous
+         space above so it reads as a separate beat, not a continuation
+         of the route. -->
     <LatestDispatchBanner />
 
   </article>
@@ -52,7 +53,7 @@ const items = getAllRoadmapItems()
   .roadmap-header {
     text-align: center;
     max-width: 640px;
-    margin: 0 auto 48px;
+    margin: 0 auto 28px;        /* tightened — legend sits right under */
     padding-top: 32px;
   }
   .roadmap-title {
@@ -72,12 +73,12 @@ const items = getAllRoadmapItems()
     max-width: 520px;
   }
 
-  /* ── Legend ───────────────────────────────────────────────────── */
+  /* ── Legend (above the route, key-style) ─────────────────────── */
   .roadmap-legend {
     display: flex;
     justify-content: center;
     gap: 24px;
-    margin-top: 28px;
+    margin: 0 auto 32px;        /* legend → route */
     flex-wrap: wrap;
   }
   .roadmap-legend span {
@@ -97,13 +98,14 @@ const items = getAllRoadmapItems()
     flex-shrink: 0;
   }
 
-  /* ── Dispatch banner (now below the route) ───────────────────── */
-  .roadmap-page :global(.rr-dispatch) { margin-top: 64px; }
+  /* ── Dispatch banner (foot of page, generous breathing room) ── */
+  .roadmap-page :global(.rr-dispatch) { margin-top: 112px; }
 
   @media (max-width: 767px) {
     .roadmap-page { padding: 0 24px 64px; }
-    .roadmap-header { padding-top: 24px; margin-bottom: 32px; }
+    .roadmap-header { padding-top: 24px; margin-bottom: 20px; }
     .roadmap-title { font-size: 36px; }
-    .roadmap-page :global(.rr-dispatch) { margin-top: 48px; }
+    .roadmap-legend { margin-bottom: 24px; }
+    .roadmap-page :global(.rr-dispatch) { margin-top: 72px; }
   }
 </style>