diff --git a/src/components/Landing/HeaderContent.astro b/src/components/Landing/HeaderContent.astro
index 13bd9cd3d..a3bdc61d1 100644
--- a/src/components/Landing/HeaderContent.astro
+++ b/src/components/Landing/HeaderContent.astro
@@ -382,7 +382,8 @@ const needsScrollState = variant === 'transparent' || variant === 'transparent-h
 			&.opened-burger {
 				// Anchor the drawer where the bar already sits (top stays at --promo-cur,
 				// below the banner) and fill to the viewport bottom, so opening at the top
-				// shifts nothing. The banner stays visible above the drawer.
+				// shifts nothing. The banner stays visible above the drawer (when scrolled
+				// it has already collapsed off-screen, so the drawer reaches top:0).
 				bottom: 0;
 				z-index: 10000;
 				display: flex !important;
diff --git a/src/components/PromoBanner.astro b/src/components/PromoBanner.astro
index 929aca261..0a1ae80a8 100644
--- a/src/components/PromoBanner.astro
+++ b/src/components/PromoBanner.astro
@@ -117,7 +117,7 @@ const hasSwitcher = slides.length > 1;
 }
 {
 	/* No slide to show (e.g. all targets matched the current page): zero --promo-h. */
-	!showBanner && <style is:inline set:html=":root{--promo-h:0px}" />
+	!showBanner && <style is:inline set:html=":root{--promo-h:0px;--promo-anim:none}" />
 }
 
 <script>
@@ -456,12 +456,6 @@ const hasSwitcher = slides.length > 1;
 		position: static;
 	}
 
-	// Docs: banner is inside the header wrapper, so the open full-screen mobile menu
-	// would cover it — hide it. (Marketing: banner is a sibling, never matches.)
-	header.header.opened-burger #promo-banner {
-		display: none;
-	}
-
 	// Mobile: badge stays left, message wraps beside it; taller bar.
 	@include media-down(md) {
 		:root {
diff --git a/src/styles/_starlight-overrides.scss b/src/styles/_starlight-overrides.scss
index eedc6090c..aafed3d6a 100644
--- a/src/styles/_starlight-overrides.scss
+++ b/src/styles/_starlight-overrides.scss
@@ -15,12 +15,46 @@
 // Content offset uses the CONSTANT banner height (not --promo-cur) so the page
 // never jumps when the banner hides — by then content has scrolled behind the
 // header, leaving no gap. Unlayered → beats Starlight's @layer core rule.
-// (The scroll-collapse animation that drives --promo-cur lives in
-// PromoBanner.astro, co-located with the banner.)
 .main-frame {
 	padding-top: calc(#{$header-height} + var(--promo-h, 0px) + var(--sl-mobile-toc-height, 0px));
 }
 
+// Promo banner hide-on-scroll, pure CSS: scroll collapses --promo-cur over the
+// banner's height, so header/sidebar/TOC lift proportionally. Unsupported
+// browsers keep --promo-cur = --promo-h → banner stays pinned (graceful).
+@keyframes promo-collapse {
+	from {
+		--promo-cur: var(--promo-h, 0px);
+	}
+	to {
+		--promo-cur: 0px;
+	}
+}
+@keyframes promo-vanish {
+	0%,
+	99% {
+		visibility: visible;
+	}
+	to {
+		visibility: hidden; // drop the off-screen banner from tab order
+	}
+}
+@supports (animation-timeline: scroll()) {
+	:root {
+		// `--promo-anim` lets a banner-less page (the campaign's own target page,
+		// which sets --promo-h:0) switch the collapse OFF — otherwise the range
+		// `0 0px` is degenerate and leaves --promo-cur indeterminate (stale band).
+		animation: var(--promo-anim, promo-collapse) linear both;
+		animation-timeline: scroll(root);
+		animation-range: 0 var(--promo-h, 0px);
+	}
+	#promo-banner {
+		animation: promo-vanish linear both;
+		animation-timeline: scroll(root);
+		animation-range: 0 var(--promo-h, 0px);
+	}
+}
+
 // Bump Starlight's content padding from 1.5rem → 2rem at the same breakpoint
 // where Starlight switches to its desktop layout (>= 72rem). The 1.5rem
 // default leaves the page heading visually flush against the left sidebar