diff --git a/src/components/RoadmapRoute.astro b/src/components/RoadmapRoute.astro
index 590a50d..b456547 100644
--- a/src/components/RoadmapRoute.astro
+++ b/src/components/RoadmapRoute.astro
@@ -310,25 +310,25 @@ const initialShippingX = lastShippingIndex >= 0 ? itemXByIndex[lastShippingIndex
     height: 14px;
     border-radius: 50%;
     box-shadow: 0 0 0 5px var(--background);   /* halo cuts the path under the dot */
-    transition: transform .25s ease;
+    transition: transform .25s ease, box-shadow .25s ease;
     scroll-snap-align: center;
   }
   .rr-dot.rr-current {
+    transform: scale(1.3);
+    box-shadow:
+      0 0 0 5px var(--background),              /* cream halo */
+      0 0 0 6px rgba(185, 107, 88, 0.45);       /* terracotta ring outside */
+  }
+
+  /* Hover-on-card animates the sibling dot too. :has() is fine on every
+     evergreen browser we target; older Firefox just doesn't grow the dot. */
+  .rr-milestone:has(.rr-card:hover) .rr-dot,
+  .rr-milestone:has(.rr-card:focus-visible) .rr-dot {
     transform: scale(1.15);
   }
-  .rr-dot.rr-current::after {
-    /* a quiet pulsing ring around the 'you are here' milestone */
-    content: '';
-    position: absolute;
-    inset: -6px;
-    border-radius: 50%;
-    border: 1px solid #6d8c7c;
-    opacity: 0.4;
-    animation: rr-pulse 2.4s ease-in-out infinite;
-  }
-  @keyframes rr-pulse {
-    0%, 100% { transform: scale(1);   opacity: 0.4; }
-    50%      { transform: scale(1.3); opacity: 0;   }
+  .rr-milestone:has(.rr-card:hover) .rr-dot.rr-current,
+  .rr-milestone:has(.rr-card:focus-visible) .rr-dot.rr-current {
+    transform: scale(1.4);
   }
 
   .rr-attach {