diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 5d46556..224805c 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -45,7 +45,8 @@
       "Bash(pnpm db:seed)",
       "Bash(curl -s -c /tmp/jar.txt -d \"email=lars@virk2.dk&password=cab123\" http://localhost:4321/login -o /dev/null -i)",
       "Bash(curl -s -c /tmp/jar.txt -d \"email=lars@virk2.dk&password=cab123\" http://localhost:4321/login -o /dev/null)",
-      "Bash(curl -s -b /tmp/jar.txt http://localhost:4321/roadmap)"
+      "Bash(curl -s -b /tmp/jar.txt http://localhost:4321/roadmap)",
+      "Bash(grep -nE \"\\\\.rr-fade-left, \\\\.rr-fade-right|rr-fade-left \\\\{|rr-fade-right \\\\{\" src/components/RoadmapRoute.astro)"
     ]
   }
 }
diff --git a/src/components/RoadmapRoute.astro b/src/components/RoadmapRoute.astro
index ae32db5..70a073b 100644
--- a/src/components/RoadmapRoute.astro
+++ b/src/components/RoadmapRoute.astro
@@ -72,7 +72,8 @@ const initialShippingX = lastShippingIndex >= 0 ? layout.itemX[lastShippingIndex
   <!-- The route — desktop horizontal -->
   <div class="rr-wrap rr-desktop">
     <div class="rr-scroll" id="rr-scroll">
-      <div class="rr-track" style={`width: ${layout.trackWidth}px; height: 420px;`}>
+      <div class="rr-scroll-inner">
+        <div class="rr-track" style={`width: ${layout.trackWidth}px; height: 420px;`}>
         <svg class="rr-path" width={layout.trackWidth} height="420" aria-hidden="true">
           <defs>
             <linearGradient id="rr-path-gradient" x1="0" y1="0" x2="1" y2="0">
@@ -113,6 +114,7 @@ const initialShippingX = lastShippingIndex >= 0 ? layout.itemX[lastShippingIndex
             </div>
           </div>
         ))}
+        </div>
       </div>
     </div>
 
@@ -239,18 +241,24 @@ const initialShippingX = lastShippingIndex >= 0 ? layout.itemX[lastShippingIndex
   /* ── Desktop route ──────────────────────────────────────────────── */
   .rr-wrap { position: relative; }
   .rr-scroll {
+    /* overflow-x: auto + overflow-y: visible is the only thing that lets
+       hovered cards expand above/below the track without being clipped.
+       The previous fix bandaged it with extra trackHeight; this is the
+       real fix. The .rr-scroll-inner wrapper is the spec-recommended
+       belt-and-braces in case a browser misbehaves on this combination. */
     overflow-x: auto;
+    overflow-y: visible;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     scrollbar-width: none;
-    /* 60px is enough for a 220px card centred under a dot 60px from
-       the edge — card extends 50px past the dot, sits inside the
-       padded container. */
-    padding: 0 60px 8px;
+    /* Top/bottom give cards room to grow above/below the track. The 60px
+       sides give the first/last cards room when fully scrolled. */
+    padding: 60px 60px 80px;
     scroll-padding-left: 60px;
     scroll-padding-right: 60px;
   }
   .rr-scroll::-webkit-scrollbar { display: none; }
+  .rr-scroll-inner { /* structural — keeps the track on its own layer */ }
   .rr-track { position: relative; }
   .rr-path { position: absolute; top: 0; left: 0; pointer-events: none; }
 
@@ -376,11 +384,13 @@ const initialShippingX = lastShippingIndex >= 0 ? layout.itemX[lastShippingIndex
     margin: 0;
   }
 
-  /* Edge fades */
+  /* Edge fades cover only the track itself — the top/bottom padding
+     zones (60/80) on .rr-scroll exist so hover cards can overflow there
+     without clipping, so the fades shouldn't paint over them. */
   .rr-fade-left, .rr-fade-right {
     position: absolute;
-    top: 0;
-    bottom: 16px;
+    top: 60px;
+    bottom: 80px;
     pointer-events: none;
     transition: opacity .25s ease;
   }