diff --git a/app/home.css b/app/home.css
index b185d33..a624173 100644
--- a/app/home.css
+++ b/app/home.css
@@ -73,21 +73,50 @@
 
 /* The map */
 
+/* Pulled up close to the hero so the columns start above the fold. */
 .home__map {
+  margin-block-start: calc(var(--space-12) - var(--space-24));
   scroll-margin-block-start: var(--space-8);
 }
 
 .map-head {
   display: grid;
-  gap: var(--space-4);
-  margin-block-end: var(--space-8);
+  gap: var(--space-3) var(--space-8);
+  margin-block-end: var(--space-6);
+}
+
+@media (min-width: 48rem) {
+  .map-head {
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: baseline;
+  }
+
+  .map-head__note {
+    justify-self: end;
+    text-align: end;
+  }
+
+  .legend {
+    grid-column: 1 / -1;
+  }
+}
+
+.map-head__title {
+  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
+}
+
+.map-head__note {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: 0.02em;
+  color: var(--color-ink-muted);
 }
 
 .legend {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3) var(--space-8);
-  margin: var(--space-2) 0 0;
+  margin: 0;
   padding: 0;
   list-style: none;
   font-size: var(--text-sm);
diff --git a/app/page.tsx b/app/page.tsx
index 03fd364..0503257 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -38,10 +38,10 @@ export default function HomePage() {
 
       <section id="map" className="wrap home__map" aria-labelledby="map-title">
         <div className="map-head">
-          <h2 id="map-title" className="section-title">
+          <h2 id="map-title" className="section-title map-head__title">
             {home.mapHeading}
           </h2>
-          <p className="lede">{home.mapLede}</p>
+          <p className="map-head__note">{home.mapLede}</p>
           <ul className="legend" aria-label={home.legendLabel}>
             {STATUS_IDS.map((id) => (
               <li key={id} className="legend__item" data-status={id}>
diff --git a/content/home.json b/content/home.json
index 2d898a6..1a7e52d 100644
--- a/content/home.json
+++ b/content/home.json
@@ -11,7 +11,7 @@
   ],
   "lede": "Agents are the new browsers. Since mid-2025, a dozen open standards have appeared to teach websites how to deal with them. They're young, they overlap, and the press releases make all of them sound finished. Here is what each one does, who's behind it, and how real it is today.",
   "mapHeading": "The map",
-  "mapLede": "Read it left to right as an agent's visit: find what's offered, use the site, prove who it is, shop, then pay.",
+  "mapLede": "Read it left to right, in the order an agent visits a site.",
   "patternsHeading": "What's real, what's hype",
   "patterns": [
     {