From aefd3ea74b3b69b7268fd72627fea98933b24865 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Mon, 30 Mar 2026 17:56:55 +0100
Subject: [PATCH 01/35] feat: landing page first pass

---
 .../landing/AccelerateSection.astro           |  744 ++++++++++++
 src/components/landing/BuildFromScratch.astro |  388 ++++++
 src/components/landing/FullPageLines.astro    |   45 +
 src/components/landing/Hero.astro             |   61 +
 src/components/landing/PlatformStats.astro    |  257 ++++
 src/components/landing/ProductCard.astro      |  189 +++
 src/components/landing/ProductCardGrid.astro  |   72 ++
 src/components/landing/ProtectSection.astro   |  157 +++
 src/components/landing/RequestLifecycle.astro | 1071 +++++++++++++++++
 src/components/landing/SecureSection.astro    |  111 ++
 src/components/landing/StructuralGrid.astro   |   82 ++
 src/components/landing/constants.ts           |    5 +
 src/components/overrides/Page.astro           |   54 +-
 src/components/overrides/Sidebar.astro        |   33 +-
 src/components/overrides/SidebarSublist.astro |   39 +-
 src/icons/kv.svg                              |    2 +-
 src/pages/index.astro                         |  591 +++++----
 src/pages/request-lifecycle.astro             |   63 +
 src/styles/landing.css                        |  149 +++
 src/styles/layout.css                         |   26 +-
 src/styles/sidebar.css                        |   89 +-
 21 files changed, 3944 insertions(+), 284 deletions(-)
 create mode 100644 src/components/landing/AccelerateSection.astro
 create mode 100644 src/components/landing/BuildFromScratch.astro
 create mode 100644 src/components/landing/FullPageLines.astro
 create mode 100644 src/components/landing/Hero.astro
 create mode 100644 src/components/landing/PlatformStats.astro
 create mode 100644 src/components/landing/ProductCard.astro
 create mode 100644 src/components/landing/ProductCardGrid.astro
 create mode 100644 src/components/landing/ProtectSection.astro
 create mode 100644 src/components/landing/RequestLifecycle.astro
 create mode 100644 src/components/landing/SecureSection.astro
 create mode 100644 src/components/landing/StructuralGrid.astro
 create mode 100644 src/components/landing/constants.ts
 create mode 100644 src/pages/request-lifecycle.astro
 create mode 100644 src/styles/landing.css

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
new file mode 100644
index 000000000000000..cb8635749db424b
--- /dev/null
+++ b/src/components/landing/AccelerateSection.astro
@@ -0,0 +1,744 @@
+---
+/**
+ * AccelerateSection variant-a — "The Waterfall"
+ *
+ * A request-lifecycle waterfall that shows where latency hides
+ * and which Cloudflare product eliminates it. Inspired by DevTools
+ * network panels — rendered as styled HTML/CSS bars with hover
+ * interactions that connect phases to products.
+ *
+ * Toggle between "Without Cloudflare" and "With Cloudflare" to see
+ * latency bars shrink in real time.
+ */
+import { Icon } from "astro-icon/components";
+import ProductCard from "./ProductCard.astro";
+import ProductCardGrid from "./ProductCardGrid.astro";
+
+/**
+ * Each phase of a request lifecycle.
+ * `before` / `after` are percentage widths (of a ~1200ms budget).
+ * `offset` is when the phase starts (percentage left-offset).
+ */
+const phases = [
+	{
+		id: "dns",
+		phase: "DNS Lookup",
+		before: { offset: 0, width: 18 },
+		after: { offset: 0, width: 3 },
+		product: "DNS",
+		icon: "dns",
+		href: "/dns/",
+		outcome: "Resolve DNS in single-digit milliseconds",
+		detail:
+			"Fastest authoritative DNS. DNSSEC, wildcard records, proxy control.",
+		tags: ["Authoritative DNS", "DNSSEC"],
+		color: "bg-orange-400",
+		colorMuted: "bg-orange-400/20",
+	},
+	{
+		id: "connect",
+		phase: "TCP + TLS",
+		before: { offset: 18, width: 22 },
+		after: { offset: 3, width: 4 },
+		product: "Argo Smart Routing",
+		icon: "argo-smart-routing",
+		href: "/argo-smart-routing/",
+		outcome: "Route around congestion automatically",
+		detail:
+			"Real-time network intelligence — typically 30% faster than public internet.",
+		tags: ["Smart Routing", "Tiered Caching"],
+		color: "bg-amber-500",
+		colorMuted: "bg-amber-500/20",
+	},
+	{
+		id: "wait",
+		phase: "Server Wait (TTFB)",
+		before: { offset: 40, width: 35 },
+		after: { offset: 7, width: 5 },
+		product: "Cache",
+		icon: "cache",
+		href: "/cache/get-started/",
+		outcome: "Cache at the edge, not from origin",
+		detail: "Serve from 330+ cities. Cache Rules, tiered caching, purge API.",
+		tags: ["Cache Rules", "Tiered Cache", "Cache Reserve"],
+		color: "bg-yellow-500",
+		colorMuted: "bg-yellow-500/20",
+	},
+	{
+		id: "db",
+		phase: "Database Query",
+		before: { offset: 75, width: 18 },
+		after: { offset: 12, width: 3 },
+		product: "Hyperdrive",
+		icon: "hyperdrive",
+		href: "/hyperdrive/",
+		outcome: "Make database queries feel local",
+		detail:
+			"Connection pooling and caching at the edge. Slash query latency for Postgres, MySQL, and more.",
+		tags: ["Connection Pooling", "Query Caching"],
+		color: "bg-lime-500",
+		colorMuted: "bg-lime-500/20",
+	},
+	{
+		id: "assets",
+		phase: "Asset Optimization",
+		before: { offset: 40, width: 30 },
+		after: { offset: 7, width: 6 },
+		product: "Images",
+		icon: "images",
+		href: "/images/",
+		outcome: "Transform and serve images from the edge",
+		detail:
+			"Resize, convert to modern formats, and deliver from 330+ cities. No origin round-trip.",
+		tags: ["Transform", "Polish", "WebP/AVIF"],
+		color: "bg-teal-500",
+		colorMuted: "bg-teal-500/20",
+	},
+	{
+		id: "scripts",
+		phase: "Third-party Scripts",
+		before: { offset: 60, width: 35 },
+		after: { offset: 15, width: 5 },
+		product: "Zaraz",
+		icon: "zaraz",
+		href: "/zaraz/",
+		outcome: "Move third-party scripts off the main thread",
+		detail:
+			"Load analytics, ads, and pixels server-side. Fewer network requests, faster page loads.",
+		tags: ["Server-side Tags", "Consent Mgmt"],
+		color: "bg-sky-500",
+		colorMuted: "bg-sky-500/20",
+	},
+];
+
+/** Total "before" time label */
+const beforeTotal = "~1,240 ms";
+---
+
+<section
+	class="px-8 pt-20 pb-20 max-[900px]:px-5 max-[900px]:pt-14 max-[900px]:pb-14"
+	aria-labelledby="accelerate-heading"
+	id="accelerate"
+>
+	<!-- Section header -->
+	<div class="mb-8">
+		<span class="text-accent font-mono text-xs tracking-widest uppercase"
+			>Accelerate</span
+		>
+	</div>
+	<h2
+		id="accelerate-heading"
+		class="mb-1.5 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-100"
+	>
+		See where the milliseconds go
+	</h2>
+	<p
+		class="mb-8 max-w-[600px] text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400"
+	>
+		Every request is a waterfall of latency. Hover a phase to see which product
+		eliminates it — toggle to see the compound effect.
+	</p>
+
+	<!-- Toggle: Without / With Cloudflare -->
+	<div
+		class="mb-5 flex flex-wrap items-center justify-between gap-4 max-[600px]:gap-3"
+		role="radiogroup"
+		aria-label="Comparison mode"
+	>
+		<div
+			class="wf-toggle-track relative inline-flex rounded-lg border border-zinc-200 bg-zinc-100 p-1 dark:border-[#2a2a2a] dark:bg-zinc-800/80"
+		>
+			<span
+				id="wf-toggle-slider"
+				class="wf-toggle-slider absolute top-1 bottom-1 left-1 rounded-lg transition-[left,width,background-color] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]"
+				aria-hidden="true"></span>
+			<button
+				type="button"
+				id="wf-toggle-before"
+				role="radio"
+				aria-checked="true"
+				tabindex="0"
+				class="wf-toggle-btn wf-toggle-active focus-visible:outline-accent relative z-10 flex min-h-[44px] cursor-pointer items-center gap-2 rounded-lg px-5 py-2.5 text-base font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:-outline-offset-2 max-[600px]:px-3"
+			>
+				<span
+					class="wf-toggle-dot size-2 shrink-0 rounded-full transition-colors duration-200"
+					aria-hidden="true"></span>
+				Without Cloudflare
+			</button>
+			<button
+				type="button"
+				id="wf-toggle-after"
+				role="radio"
+				aria-checked="false"
+				tabindex="-1"
+				class="wf-toggle-btn focus-visible:outline-accent relative z-10 flex min-h-[44px] cursor-pointer items-center gap-2 rounded-lg px-5 py-2.5 text-base font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:-outline-offset-2 max-[600px]:px-3"
+			>
+				<span
+					class="wf-toggle-dot size-2 shrink-0 rounded-full transition-colors duration-200"
+					aria-hidden="true"></span>
+				With Cloudflare
+			</button>
+		</div>
+		<div
+			class="wf-total-label flex items-baseline gap-2 font-mono text-sm text-zinc-500 tabular-nums transition-opacity duration-300 max-[600px]:text-xs dark:text-zinc-400"
+		>
+			<span class="text-[11px] tracking-widest uppercase">Total</span>
+			<span
+				id="wf-total-value"
+				class="text-sm font-semibold text-zinc-900 tabular-nums dark:text-zinc-100"
+				>{beforeTotal}</span
+			>
+		</div>
+	</div>
+
+	<!-- Main waterfall container -->
+	<div
+		class="relative overflow-visible border border-zinc-200 dark:border-[#2a2a2a]"
+	>
+		<!-- Corner plus marks -->
+		{
+			[
+				"-top-[5.5px] -left-[5.5px]",
+				"-top-[5.5px] -right-[5.5px]",
+				"-bottom-[5.5px] -left-[5.5px]",
+				"-right-[5.5px] -bottom-[5.5px]",
+			].map((pos) => (
+				<svg
+					width="10"
+					height="10"
+					viewBox="0 0 10 10"
+					class={`pointer-events-none absolute ${pos} z-10`}
+					aria-hidden="true"
+				>
+					<line
+						x1="0"
+						y1="5"
+						x2="10"
+						y2="5"
+						stroke-width="1"
+						class="stroke-accent dark:stroke-white"
+					/>
+					<line
+						x1="5"
+						y1="0"
+						x2="5"
+						y2="10"
+						stroke-width="1"
+						class="stroke-accent dark:stroke-white"
+					/>
+				</svg>
+			))
+		}
+
+		<!-- Timescale ruler — uses the same grid as waterfall rows so ticks align with bars -->
+		<div
+			class="bg-l-card dark:bg-l-card-dark grid h-7 items-end gap-3 border-b border-zinc-200 px-4 max-[600px]:hidden dark:border-[#2a2a2a]"
+			style="grid-template-columns: 150px 1fr auto;"
+			aria-hidden="true"
+		>
+			<div></div>
+			<div class="relative h-full">
+				{
+					[0, 200, 400, 600, 800, 1000, 1200].map((ms) => (
+						<div
+							class="absolute bottom-0 flex flex-col items-center"
+							style={`left: ${(ms / 1300) * 100}%`}
+						>
+							<span
+								class="wf-ruler-label mb-1 font-mono text-[9px] tracking-wider text-zinc-400 tabular-nums dark:text-zinc-500"
+								data-ms={ms}
+							>
+								{ms === 0 ? "0" : `${ms}ms`}
+							</span>
+							<span class="h-1.5 w-px bg-zinc-200 dark:bg-zinc-700" />
+						</div>
+					))
+				}
+			</div>
+			<div></div>
+		</div>
+
+		<!-- Waterfall rows -->
+		{
+			phases.map((p, i) => (
+				<a
+					href={p.href}
+					class:list={[
+						"wf-row group relative grid items-center gap-3 px-4 py-3.5 no-underline transition-colors duration-150",
+						"bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark",
+						"focus-visible:outline-accent focus-visible:outline-2 focus-visible:-outline-offset-2",
+						"max-[600px]:grid-cols-[1fr] max-[600px]:gap-2 max-[600px]:px-3 max-[600px]:py-3",
+						i > 0 && "border-t border-zinc-200 dark:border-[#2a2a2a]",
+					]}
+					style="grid-template-columns: 150px 1fr auto;"
+					data-phase={p.id}
+				>
+					{/* Accent bar — bottom reveal on hover */}
+					<span
+						class="bg-accent pointer-events-none absolute bottom-0 left-0 h-0.5 w-0 transition-[width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:w-full"
+						aria-hidden="true"
+					/>
+
+					{/* Left: phase name + product */}
+					<div class="flex min-w-0 items-center gap-2.5 max-[600px]:gap-2">
+						<span class="group-hover:border-accent/30 group-hover:bg-accent/5 group-hover:text-accent flex size-8 shrink-0 items-center justify-center rounded border border-zinc-200 bg-zinc-100 text-zinc-400 transition-colors duration-150 dark:border-[#2a2a2a] dark:bg-zinc-800 dark:text-zinc-500">
+							<Icon name={p.icon} size="16px" />
+						</span>
+						<div class="min-w-0 truncate">
+							<p class="truncate text-sm leading-tight font-medium text-zinc-800 dark:text-zinc-100">
+								{p.phase}
+							</p>
+							<p class="wf-product-label text-accent truncate font-mono text-[11px] tracking-widest uppercase opacity-0 transition-opacity duration-300">
+								{p.product}
+							</p>
+						</div>
+					</div>
+
+					{/* Center: waterfall bar visualization */}
+					<div class="relative h-8 max-[600px]:h-6" aria-hidden="true">
+						{/* Background track */}
+						<div class="absolute inset-0 rounded-sm bg-zinc-100 dark:bg-zinc-800/50" />
+
+						{/* "Before" bar (slow) */}
+						<div
+							class={`wf-bar wf-bar-before absolute top-1 bottom-1 rounded-sm transition-[left,width,box-shadow] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] ${p.color}`}
+							style={`left: ${p.before.offset}%; width: ${p.before.width}%;`}
+							data-offset-before={p.before.offset}
+							data-width-before={p.before.width}
+							data-offset-after={p.after.offset}
+							data-width-after={p.after.width}
+						>
+							<span class="wf-bar-label absolute top-1/2 right-1.5 -translate-y-1/2 font-mono text-[9px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm">
+								{Math.round(p.before.width * 13)}ms
+							</span>
+						</div>
+
+						{/* Time markers (vertical dashed lines) */}
+						{[25, 50, 75].map((pct) => (
+							<div
+								class="absolute top-0 bottom-0 border-l border-dashed border-zinc-200/60 dark:border-zinc-700/40"
+								style={`left: ${pct}%`}
+							/>
+						))}
+					</div>
+
+					{/* Right: arrow */}
+					<div class="group-hover:text-accent flex items-center text-zinc-300 transition-colors duration-150 max-[600px]:hidden dark:text-zinc-600">
+						<svg
+							width="14"
+							height="14"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="transition-transform duration-150 group-hover:translate-x-0.5"
+							aria-hidden="true"
+						>
+							<line x1="5" y1="12" x2="19" y2="12" />
+							<polyline points="12 5 19 12 12 19" />
+						</svg>
+					</div>
+				</a>
+			))
+		}
+
+		<!-- Total bar / savings summary row -->
+		<div
+			class="wf-summary bg-l-card dark:bg-l-card-dark border-t border-zinc-200 px-4 py-3.5 dark:border-[#2a2a2a]"
+			aria-live="polite"
+		>
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex items-center gap-3">
+					<span
+						class="font-mono text-[11px] tracking-widest text-zinc-500 uppercase dark:text-zinc-400"
+						>Total Latency</span
+					>
+					<div
+						class="relative h-3 w-48 overflow-hidden rounded-full bg-zinc-100 max-[600px]:w-28 dark:bg-zinc-800/50"
+					>
+						<div
+							id="wf-total-bar"
+							class="bg-accent absolute inset-y-0 left-0 rounded-full transition-[width] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]"
+							style="width: 95%;"
+						>
+						</div>
+					</div>
+				</div>
+				<div class="flex items-center gap-2">
+					<span
+						id="wf-savings-badge"
+						class="hidden font-mono text-xs font-semibold text-emerald-600 tabular-nums dark:text-emerald-400"
+					>
+						-92% faster
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Section bridge — connects waterfall to product cards -->
+	<h3
+		class="not-content mb-8 pt-20 text-lg font-medium -tracking-tight text-zinc-900 dark:text-zinc-100"
+	>
+		Explore by product
+	</h3>
+
+	<!-- Product detail cards -->
+	<ProductCardGrid>
+		{
+			phases.map((p) => (
+				<div
+					class="wf-product-card flex transition-[background-color] duration-200"
+					data-phase={p.id}
+				>
+					<ProductCard
+						icon={p.icon}
+						product={p.product}
+						scenario={p.outcome}
+						detail={p.detail}
+						href={p.href}
+						cta="Explore docs"
+					/>
+				</div>
+			))
+		}
+	</ProductCardGrid>
+</section>
+
+<style>
+	/* Toggle track */
+	.wf-toggle-track {
+		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
+	}
+	:root[data-theme="dark"] .wf-toggle-track {
+		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+	}
+
+	/* Sliding background indicator */
+	.wf-toggle-slider {
+		background: white;
+		box-shadow:
+			0 1px 3px rgba(0, 0, 0, 0.1),
+			0 1px 2px rgba(0, 0, 0, 0.06);
+	}
+	:root[data-theme="dark"] .wf-toggle-slider {
+		background: #2a2a2a;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+	}
+
+	/* Toggle button states */
+	.wf-toggle-btn {
+		color: var(--color-zinc-500, #71717a);
+		background: transparent;
+	}
+	:root[data-theme="dark"] .wf-toggle-btn {
+		color: #71717a;
+	}
+	.wf-toggle-btn .wf-toggle-dot {
+		background-color: var(--color-zinc-300, #d4d4d8);
+	}
+	:root[data-theme="dark"] .wf-toggle-btn .wf-toggle-dot {
+		background-color: #52525b;
+	}
+	.wf-toggle-btn.wf-toggle-active {
+		color: var(--color-zinc-900, #18181b);
+	}
+	:root[data-theme="dark"] .wf-toggle-btn.wf-toggle-active {
+		color: var(--color-zinc-100, #f4f4f5);
+	}
+	/* Only the "With Cloudflare" button gets the accent dot */
+	#wf-toggle-after.wf-toggle-active .wf-toggle-dot {
+		background-color: var(--color-accent, #f56500);
+	}
+	#wf-toggle-before.wf-toggle-active .wf-toggle-dot {
+		background-color: var(--color-zinc-500, #71717a);
+	}
+	:root[data-theme="dark"] #wf-toggle-before.wf-toggle-active .wf-toggle-dot {
+		background-color: #a1a1aa;
+	}
+
+	/* Waterfall row highlight when hovered — also highlights the matching product card */
+	.wf-row[data-highlighted="true"] {
+		background: color-mix(in srgb, var(--color-accent, #f56500) 3%, white);
+	}
+	:root[data-theme="dark"] .wf-row[data-highlighted="true"] {
+		background: color-mix(in srgb, var(--color-accent, #f56500) 5%, #1d1d1d);
+	}
+
+	.wf-product-card:hover,
+	.wf-product-card[data-highlighted="true"] {
+		background: color-mix(in srgb, var(--color-accent, #f56500) 3%, white);
+	}
+	:root[data-theme="dark"] .wf-product-card:hover,
+	:root[data-theme="dark"] .wf-product-card[data-highlighted="true"] {
+		background: color-mix(in srgb, var(--color-accent, #f56500) 5%, #1d1d1d);
+	}
+
+	:global(.wf-product-card .pc-icon-shell) {
+		border-style: solid;
+	}
+	:global(.wf-product-card[data-highlighted="true"] .pc-icon-shell) {
+		background: var(--pc-hover-bg, rgba(245, 101, 0, 0.1));
+		border-color: var(--pc-hover-color, #f56500);
+		border-style: dashed;
+		color: var(--pc-hover-color, #f56500);
+	}
+	:global(:root[data-theme="dark"]
+		.wf-product-card[data-highlighted="true"]
+		.pc-icon-shell) {
+		background: var(--pc-hover-bg-dark, rgba(245, 101, 0, 0.16));
+		border-color: var(--pc-hover-color, #f56500);
+		color: var(--pc-hover-color, #f56500);
+	}
+
+	/* Bar label visibility — hide label if bar is too narrow */
+	.wf-bar .wf-bar-label {
+		opacity: 1;
+		transition: opacity 0.3s ease;
+	}
+
+	/* Pulse on the bar when entering "after" state */
+	.wf-bar.wf-bar-shrunk {
+		animation: wf-shrink-pulse 0.6s ease-out;
+	}
+
+	@keyframes wf-shrink-pulse {
+		0% {
+			box-shadow: 0 0 0 0
+				color-mix(in srgb, var(--color-accent, #f56500) 30%, transparent);
+		}
+		70% {
+			box-shadow: 0 0 0 4px
+				color-mix(in srgb, var(--color-accent, #f56500) 0%, transparent);
+		}
+		100% {
+			box-shadow: 0 0 0 0
+				color-mix(in srgb, var(--color-accent, #f56500) 0%, transparent);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.wf-bar {
+			transition-duration: 0.01ms !important;
+		}
+		.wf-bar.wf-bar-shrunk {
+			animation: none !important;
+		}
+	}
+
+	/* Responsive: on mobile, switch waterfall row to stacked layout */
+	@media (max-width: 600px) {
+		.wf-row {
+			grid-template-columns: 1fr !important;
+		}
+	}
+</style>
+
+<script>
+	function initWaterfall() {
+		const section = document.getElementById("accelerate");
+		if (!section) return;
+		const prefersReducedMotion = window.matchMedia(
+			"(prefers-reduced-motion: reduce)",
+		).matches;
+
+		// Guard against double-init
+		if (section.dataset.wfInit === "true") return;
+		section.dataset.wfInit = "true";
+
+		const btnBefore = section.querySelector(
+			"#wf-toggle-before",
+		) as HTMLButtonElement | null;
+		const btnAfter = section.querySelector(
+			"#wf-toggle-after",
+		) as HTMLButtonElement | null;
+		const slider = section.querySelector(
+			"#wf-toggle-slider",
+		) as HTMLElement | null;
+		const totalValue = section.querySelector(
+			"#wf-total-value",
+		) as HTMLElement | null;
+		const totalBar = section.querySelector(
+			"#wf-total-bar",
+		) as HTMLElement | null;
+		const savingsBadge = section.querySelector(
+			"#wf-savings-badge",
+		) as HTMLElement | null;
+		const bars = section.querySelectorAll<HTMLElement>(".wf-bar-before");
+		const productLabels =
+			section.querySelectorAll<HTMLElement>(".wf-product-label");
+		const rows = section.querySelectorAll<HTMLElement>(".wf-row");
+		const cards = section.querySelectorAll<HTMLElement>(".wf-product-card");
+
+		let isAfter = false;
+
+		/** Position the sliding indicator behind the active button */
+		function positionSlider(activeBtn: HTMLElement | null) {
+			if (!slider || !activeBtn) return;
+			const track = slider.parentElement;
+			if (!track) return;
+			const trackRect = track.getBoundingClientRect();
+			const btnRect = activeBtn.getBoundingClientRect();
+			slider.style.left = `${btnRect.left - trackRect.left}px`;
+			slider.style.width = `${btnRect.width}px`;
+		}
+
+		// Set initial slider position
+		requestAnimationFrame(() => positionSlider(btnBefore));
+
+		function setMode(after: boolean) {
+			isAfter = after;
+
+			// Update toggle buttons
+			if (btnBefore && btnAfter) {
+				btnBefore.classList.toggle("wf-toggle-active", !after);
+				btnAfter.classList.toggle("wf-toggle-active", after);
+				btnBefore.setAttribute("aria-checked", String(!after));
+				btnAfter.setAttribute("aria-checked", String(after));
+				btnBefore.setAttribute("tabindex", after ? "-1" : "0");
+				btnAfter.setAttribute("tabindex", after ? "0" : "-1");
+				positionSlider(after ? btnAfter : btnBefore);
+			}
+
+			// Show product names only in "With Cloudflare" state
+			productLabels.forEach((label) => {
+				label.style.opacity = after ? "1" : "0";
+			});
+
+			// Animate bars
+			bars.forEach((bar) => {
+				const offset = after
+					? bar.dataset.offsetAfter
+					: bar.dataset.offsetBefore;
+				const width = after ? bar.dataset.widthAfter : bar.dataset.widthBefore;
+				bar.style.left = `${offset}%`;
+				bar.style.width = `${width}%`;
+
+				// Update label text
+				const label = bar.querySelector(".wf-bar-label");
+				if (label && width) {
+					const ms = Math.round(parseFloat(width) * 13);
+					label.textContent = `${ms}ms`;
+					// Hide label if bar too narrow
+					(label as HTMLElement).style.opacity =
+						parseFloat(width) < 6 ? "0" : "1";
+				}
+
+				// Pulse effect on shrink
+				if (after && !prefersReducedMotion) {
+					bar.classList.remove("wf-bar-shrunk");
+					void bar.offsetWidth; // force reflow
+					bar.classList.add("wf-bar-shrunk");
+				} else {
+					bar.classList.remove("wf-bar-shrunk");
+				}
+			});
+
+			// Update total bar + label
+			if (totalBar) {
+				totalBar.style.width = after ? "8%" : "95%";
+			}
+			if (totalValue) {
+				totalValue.textContent = after ? "~95 ms" : "~1,240 ms";
+			}
+			if (savingsBadge) {
+				savingsBadge.classList.toggle("hidden", !after);
+			}
+		}
+
+		const onBeforeClick = () => setMode(false);
+		const onAfterClick = () => setMode(true);
+		btnBefore?.addEventListener("click", onBeforeClick);
+		btnAfter?.addEventListener("click", onAfterClick);
+
+		const onToggleKeyDown = (event: KeyboardEvent) => {
+			if (!btnBefore || !btnAfter) return;
+			const radios = [btnBefore, btnAfter];
+			const currentIndex = isAfter ? 1 : 0;
+			let nextIndex = currentIndex;
+
+			switch (event.key) {
+				case "ArrowRight":
+				case "ArrowDown":
+					nextIndex = (currentIndex + 1) % radios.length;
+					break;
+				case "ArrowLeft":
+				case "ArrowUp":
+					nextIndex = (currentIndex - 1 + radios.length) % radios.length;
+					break;
+				case "Home":
+					nextIndex = 0;
+					break;
+				case "End":
+					nextIndex = radios.length - 1;
+					break;
+				default:
+					return;
+			}
+
+			event.preventDefault();
+			setMode(nextIndex === 1);
+			radios[nextIndex].focus();
+		};
+
+		btnBefore?.addEventListener("keydown", onToggleKeyDown);
+		btnAfter?.addEventListener("keydown", onToggleKeyDown);
+
+		setMode(false);
+
+		// Cross-highlight: hovering a waterfall row highlights the matching product card and vice versa
+		function highlightPhase(phaseId: string | null) {
+			rows.forEach((row) => {
+				const match = row.dataset.phase === phaseId;
+				row.setAttribute("data-highlighted", String(match && phaseId !== null));
+			});
+			cards.forEach((card) => {
+				const match = card.dataset.phase === phaseId;
+				card.setAttribute(
+					"data-highlighted",
+					String(match && phaseId !== null),
+				);
+			});
+		}
+
+		rows.forEach((row) => {
+			row.addEventListener("mouseenter", () =>
+				highlightPhase(row.dataset.phase ?? null),
+			);
+			row.addEventListener("mouseleave", () => highlightPhase(null));
+		});
+		cards.forEach((card) => {
+			card.addEventListener("mouseenter", () =>
+				highlightPhase(card.dataset.phase ?? null),
+			);
+			card.addEventListener("mouseleave", () => highlightPhase(null));
+		});
+
+		// Re-position slider on resize
+		const onResize = () => positionSlider(isAfter ? btnAfter : btnBefore);
+		window.addEventListener("resize", onResize);
+
+		// Cleanup on page leave (for Astro view transitions)
+		document.addEventListener(
+			"astro:before-swap",
+			() => {
+				window.removeEventListener("resize", onResize);
+				btnBefore?.removeEventListener("click", onBeforeClick);
+				btnAfter?.removeEventListener("click", onAfterClick);
+				btnBefore?.removeEventListener("keydown", onToggleKeyDown);
+				btnAfter?.removeEventListener("keydown", onToggleKeyDown);
+			},
+			{ once: true },
+		);
+	}
+
+	// Initialize on both DOMContentLoaded and astro:page-load to cover all scenarios
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", initWaterfall);
+	} else {
+		initWaterfall();
+	}
+	document.addEventListener("astro:page-load", initWaterfall);
+</script>
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
new file mode 100644
index 000000000000000..3703facfff60cb8
--- /dev/null
+++ b/src/components/landing/BuildFromScratch.astro
@@ -0,0 +1,388 @@
+---
+/**
+ * Steelmanned Minimal Tabs
+ *
+ * Improvements over base:
+ * - Icons restored in tab bar (product identity)
+ * - Tab bar has subtle background differentiation from panel
+ * - Active tab gets bg fill, not just underline
+ * - Command block has segmented $ | command | copy layout (matching PlatformStats precision)
+ * - CTA is a bordered button, not naked text
+ * - Tags rendered as low-contrast text links (less noise)
+ * - Plus marks on outer container (structural language from PlatformStats)
+ * - Consistent border/bg tokens throughout
+ */
+import { Icon } from "astro-icon/components";
+
+const primitives = [
+	{
+		id: "compute",
+		label: "Compute",
+		icon: "workers-vpc",
+		iconColor: "#0a95ff",
+		iconBg: "rgba(10, 149, 255, 0.1)",
+		iconBgDark: "rgba(10, 149, 255, 0.16)",
+		heading: "Run code at the edge",
+		description:
+			"Deploy serverless functions and full-stack apps onto Cloudflare's global network. No servers to manage, no cold starts — your code runs in 330+ cities, milliseconds from every user.",
+		command: "npm create cloudflare@latest my-app",
+		cta: {
+			label: "Deploy your first Worker",
+			href: "/workers/get-started/guide/",
+		},
+		tags: [
+			{ label: "Workers", href: "/workers/" },
+			{ label: "Pages", href: "/pages/" },
+			{ label: "Containers", href: "/containers/" },
+			{ label: "Workflows", href: "/workflows/" },
+			{ label: "Queues", href: "/queues/" },
+		],
+	},
+	{
+		id: "ai",
+		label: "AI",
+		icon: "workers-ai",
+		iconColor: "#19e306",
+		iconBg: "#f2f5e1",
+		iconBgDark: "rgba(25, 227, 6, 0.16)",
+		heading: "Add intelligence to anything you build",
+		description:
+			"Run inference, build agents, and search across your data — all from inside your Workers, with no external API calls or GPU infrastructure.",
+		command: "npx wrangler ai models list",
+		cta: { label: "Browse available models", href: "/workers-ai/models/" },
+		tags: [
+			{ label: "Workers AI", href: "/workers-ai/" },
+			{ label: "AI Gateway", href: "/ai-gateway/" },
+			{ label: "AI Agents", href: "/agents/" },
+			{ label: "Vectorize", href: "/vectorize/" },
+			{ label: "Browser Rendering", href: "/browser-rendering/" },
+		],
+	},
+	{
+		id: "storage",
+		label: "Storage",
+		icon: "kv",
+		iconColor: "#ee0ddb",
+		iconBg: "rgba(238, 13, 219, 0.1)",
+		iconBgDark: "rgba(238, 13, 219, 0.16)",
+		heading: "Persist data close to your users",
+		description:
+			"S3-compatible object storage, a relational SQL database, and low-latency KV — all queryable directly from Workers with no connection pooling.",
+		command: "npx wrangler r2 bucket create my-bucket",
+		cta: { label: "Get started with R2", href: "/r2/get-started/" },
+		tags: [
+			{ label: "R2", href: "/r2/" },
+			{ label: "D1", href: "/d1/" },
+			{ label: "KV", href: "/kv/" },
+			{ label: "Hyperdrive", href: "/hyperdrive/" },
+		],
+	},
+	{
+		id: "media",
+		label: "Media",
+		icon: "images",
+		iconColor: "#9616ff",
+		iconBg: "rgba(150, 22, 255, 0.1)",
+		iconBgDark: "rgba(150, 22, 255, 0.22)",
+		heading: "Serve images and video at scale",
+		description:
+			"Store, transform, and deliver images and video from Cloudflare's network. Resize on the fly, stream live or on-demand — no separate infrastructure.",
+		command: "npx wrangler pages project create my-site",
+		cta: { label: "Get started with Images", href: "/images/get-started/" },
+		tags: [
+			{ label: "Images", href: "/images/" },
+			{ label: "Stream", href: "/stream/" },
+			{ label: "Realtime", href: "/realtime/" },
+		],
+	},
+];
+---
+
+<section
+	class="px-8 pt-14 pb-4 max-[900px]:px-5 max-[900px]:pt-10"
+	aria-labelledby="build-heading"
+	id="build"
+>
+	<div class="mb-3">
+		<span class="text-accent font-mono text-xs tracking-widest uppercase"
+			>Build</span
+		>
+	</div>
+	<h2
+		id="build-heading"
+		class="mb-9 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 dark:text-zinc-50"
+	>
+		Everything you need to build at the edge
+	</h2>
+
+	<div
+		class="relative overflow-visible border border-zinc-200 dark:border-[#2a2a2a]"
+		id="build-tabs-root"
+	>
+		<!-- Corner plus marks -->
+		{
+			[
+				"-top-[5.5px] -left-[5.5px]",
+				"-top-[5.5px] -right-[5.5px]",
+				"-bottom-[5.5px] -left-[5.5px]",
+				"-right-[5.5px] -bottom-[5.5px]",
+			].map((pos) => (
+				<svg
+					width="10"
+					height="10"
+					viewBox="0 0 10 10"
+					class={`pointer-events-none absolute ${pos} z-10`}
+					aria-hidden="true"
+				>
+					<line
+						x1="0"
+						y1="5"
+						x2="10"
+						y2="5"
+						stroke-width="1"
+						class="stroke-accent dark:stroke-white"
+					/>
+					<line
+						x1="5"
+						y1="0"
+						x2="5"
+						y2="10"
+						stroke-width="1"
+						class="stroke-accent dark:stroke-white"
+					/>
+				</svg>
+			))
+		}
+
+		<!-- Tab bar -->
+		<div
+			class="flex border-b border-zinc-200 bg-zinc-100/80 dark:border-[#2a2a2a] dark:bg-zinc-900/60"
+			role="tablist"
+			aria-label="Build primitives"
+		>
+			{
+				primitives.map((p, i) => (
+					<button
+						role="tab"
+						type="button"
+						aria-selected={i === 0 ? "true" : "false"}
+						aria-controls={`build-panel-${p.id}`}
+						id={`build-tab-${p.id}`}
+						class={[
+							"build-tab group relative flex shrink-0 items-center gap-2 px-5 py-3",
+							"font-mono text-xs tracking-widest uppercase",
+							"cursor-pointer transition-colors duration-150 select-none",
+							"border-r border-zinc-200 last:border-r-0 dark:border-[#2a2a2a]",
+							"focus-visible:outline-accent focus-visible:outline-2 focus-visible:-outline-offset-2",
+							i === 0
+								? "build-tab-active dark:text-accent text-zinc-900"
+								: "build-tab-inactive",
+						].join(" ")}
+					>
+						{p.label}
+						<span
+							class={`bg-accent pointer-events-none absolute bottom-0 left-0 h-0.5 transition-[width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] ${i === 0 ? "w-full" : "w-0"}`}
+							aria-hidden="true"
+						/>
+					</button>
+				))
+			}
+		</div>
+
+		<!-- Panels -->
+		{
+			primitives.map((p, i) => (
+				<div
+					role="tabpanel"
+					id={`build-panel-${p.id}`}
+					aria-labelledby={`build-tab-${p.id}`}
+					hidden={i !== 0}
+					class="bg-l-card dark:bg-l-card-dark p-8 max-[600px]:p-5"
+				>
+					<div class="max-w-[640px]">
+					<div class="mb-4 flex items-center gap-3">
+						<div
+							class="build-panel-icon flex size-8 shrink-0 items-center justify-center rounded border border-dashed"
+							style={`--build-icon-color:${p.iconColor};--build-icon-bg:${p.iconBg};--build-icon-bg-dark:${p.iconBgDark};`}
+						>
+							<Icon name={p.icon} size="16px" />
+						</div>
+							<h3 class="text-xl font-medium -tracking-tight text-zinc-900 dark:text-zinc-50">
+								{p.heading}
+							</h3>
+						</div>
+						<p class="mb-6 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300">
+							{p.description}
+						</p>
+
+						{/* Command block — segmented */}
+						<div class="mb-6 flex max-w-[560px] items-stretch overflow-hidden rounded border border-zinc-200 dark:border-[#2a2a2a]">
+							<code
+								id={`build-cmd-${p.id}`}
+								class="bg-l-card dark:bg-l-card-dark min-w-0 flex-1 truncate px-3 py-4 font-mono text-sm leading-none text-zinc-700 select-all dark:text-zinc-300"
+							>
+								{p.command}
+							</code>
+							<button
+								type="button"
+								data-copy-target={`build-cmd-${p.id}`}
+								aria-label="Copy to clipboard"
+								class="build-copy-btn focus-visible:outline-accent flex w-10 shrink-0 cursor-pointer items-center justify-center border-l border-zinc-200 text-zinc-500 transition-colors duration-150 hover:bg-zinc-200 hover:text-zinc-700 focus-visible:outline-2 focus-visible:-outline-offset-2 dark:border-[#2a2a2a] dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-100"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="18"
+									height="18"
+									fill="currentColor"
+									viewBox="0 0 256 256"
+									aria-hidden="true"
+								>
+									<path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z" />
+								</svg>
+							</button>
+						</div>
+
+						{/* CTA + tags row */}
+						<div class="flex items-center gap-6 max-[600px]:flex-col max-[600px]:items-start max-[600px]:gap-4">
+							<a
+								href={p.cta.href}
+								class="focus-visible:outline-accent inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-md bg-[#18181b] px-4 py-2 text-sm font-medium text-white no-underline transition-colors duration-150 hover:bg-[#f56500] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-[#fafafa] dark:text-[#09090b] dark:hover:bg-[#e4e4e7] dark:hover:text-[#09090b]"
+							>
+								{p.cta.label}
+								<svg
+									width="12"
+									height="12"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="shrink-0"
+									aria-hidden="true"
+								>
+									<>
+										<line x1="5" y1="12" x2="19" y2="12" />
+										<polyline points="12 5 19 12 12 19" />
+									</>
+								</svg>
+							</a>
+							<p class="relative top-px font-mono text-xs text-zinc-600 dark:text-zinc-300">
+								{p.tags.map((tag, idx) => (
+									<>
+										{idx > 0 && <span class="mx-1" aria-hidden="true">·</span>}
+										<a href={tag.href} class="text-zinc-600 no-underline hover:underline hover:underline-offset-4 dark:text-zinc-300">{tag.label}</a>
+									</>
+								))}
+							</p>
+						</div>
+					</div>
+				</div>
+			))
+		}
+	</div>
+</section>
+
+<style is:global>
+	.build-tab-active {
+		background: var(--color-l-card);
+	}
+	.build-tab-inactive {
+		background: transparent;
+		color: #52525b;
+	}
+	:root[data-theme="dark"] .build-tab-inactive {
+		color: #a1a1aa;
+	}
+	.build-tab-inactive:hover {
+		background: var(--color-l-card);
+		color: #18181b;
+	}
+	:root[data-theme="dark"] .build-tab-active {
+		background: var(--color-l-card-dark);
+	}
+	:root[data-theme="dark"] .build-tab-inactive:hover {
+		background: var(--color-l-card-dark);
+		color: #fafafa;
+	}
+
+	.build-panel-icon {
+		color: var(--build-icon-color);
+		border-color: var(--build-icon-color);
+		background: var(--build-icon-bg);
+	}
+	:root[data-theme="dark"] .build-panel-icon {
+		background: var(--build-icon-bg-dark);
+	}
+</style>
+
+<script>
+	const root = document.getElementById("build-tabs-root");
+	if (root) {
+		const tabs = Array.from(
+			root.querySelectorAll<HTMLButtonElement>("[role=tab]"),
+		);
+		const panels = Array.from(
+			root.querySelectorAll<HTMLElement>("[role=tabpanel]"),
+		);
+		function activate(idx: number) {
+			tabs.forEach((tab, i) => {
+				const active = i === idx;
+				tab.setAttribute("aria-selected", String(active));
+				tab.classList.toggle("build-tab-active", active);
+				tab.classList.toggle("text-zinc-900", active);
+				tab.classList.toggle("dark:text-accent", active);
+				tab.classList.toggle("build-tab-inactive", !active);
+				const bar = tab.querySelector("span:last-child") as HTMLElement | null;
+				if (bar) {
+					bar.classList.toggle("w-full", active);
+					bar.classList.toggle("w-0", !active);
+				}
+			});
+			panels.forEach((p, i) => {
+				if (i === idx) p.removeAttribute("hidden");
+				else p.setAttribute("hidden", "");
+			});
+		}
+		tabs.forEach((tab, i) => {
+			tab.addEventListener("click", () => activate(i));
+			tab.addEventListener("keydown", (e: KeyboardEvent) => {
+				if (e.key === "ArrowRight") {
+					e.preventDefault();
+					const n = (i + 1) % tabs.length;
+					activate(n);
+					tabs[n].focus();
+				}
+				if (e.key === "ArrowLeft") {
+					e.preventDefault();
+					const n = (i - 1 + tabs.length) % tabs.length;
+					activate(n);
+					tabs[n].focus();
+				}
+			});
+		});
+	}
+
+	// Copy buttons
+	document
+		.querySelectorAll<HTMLButtonElement>(".build-copy-btn")
+		.forEach((btn) => {
+			btn.addEventListener("click", async () => {
+				const targetId = btn.dataset.copyTarget;
+				if (!targetId) return;
+				const codeEl = document.getElementById(targetId);
+				if (!codeEl) return;
+				const text = codeEl.textContent?.trim() ?? "";
+				try {
+					await navigator.clipboard.writeText(text);
+				} catch {
+					return;
+				}
+				const prev = btn.innerHTML;
+				btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34Z"/></svg>`;
+				setTimeout(() => {
+					btn.innerHTML = prev;
+				}, 1500);
+			});
+		});
+</script>
diff --git a/src/components/landing/FullPageLines.astro b/src/components/landing/FullPageLines.astro
new file mode 100644
index 000000000000000..5978a138080c95d
--- /dev/null
+++ b/src/components/landing/FullPageLines.astro
@@ -0,0 +1,45 @@
+---
+/**
+ * Full-page vertical container lines.
+ *
+ * Positioned absolutely within the same relative parent as StructuralGrid
+ * so the lines share the same coordinate system as the plus marks and
+ * corner brackets. Uses 100lvh height to extend beyond the content area;
+ * parent containers have overflow:visible so the lines are not clipped.
+ *
+ * Uses the same container widths and responsive margin logic as StructuralGrid.
+ */
+const CONTAINERS = [1400, 1280, 720, 400];
+
+const MIN_MARGINS = [0, 48, 120, 200];
+function rw(w: number): string {
+	const i = CONTAINERS.indexOf(w);
+	const margin = i >= 0 ? MIN_MARGINS[i] : 0;
+	if (margin === 0) return `min(${w}px, 100%)`;
+	return `min(${w}px, calc(100% - ${margin}px))`;
+}
+
+const lineBase = "absolute top-0 left-1/2 -translate-x-1/2";
+---
+
+<div
+	class="pointer-events-none absolute inset-x-0 top-0 z-0 max-[1024px]:hidden"
+	style="height: 100%"
+	aria-hidden="true"
+>
+	<!-- Center line -->
+	<div
+		class="absolute top-0 left-1/2 h-full w-0 border-l border-dotted border-black/[0.06] dark:border-white/[0.04]"
+	>
+	</div>
+
+	<!-- Container lines -->
+	{
+		CONTAINERS.map((w) => (
+			<div
+				class={`${lineBase} h-full border-r border-black/[0.06] dark:border-white/[0.04]`}
+				style={`width:${rw(w)}`}
+			/>
+		))
+	}
+</div>
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
new file mode 100644
index 000000000000000..d3b401098a64cc5
--- /dev/null
+++ b/src/components/landing/Hero.astro
@@ -0,0 +1,61 @@
+---
+import { Icon } from "@astrojs/starlight/components";
+import { stagger } from "./constants";
+---
+
+<section
+	id="hero"
+	class="px-8 pt-24 pb-16 max-[900px]:px-5 max-[900px]:pt-16 max-[900px]:pb-12 max-[480px]:pt-12"
+>
+	<p
+		class={`font-mono text-xs uppercase tracking-[0.12em] mb-5 text-accent ${stagger(0.03)}`}
+	>
+		Helping build a better Internet
+	</p>
+
+	<h1
+		class={`text-[clamp(2.75rem,5vw,3.5rem)] font-medium -tracking-[0.025em] leading-[1.08] text-balance mb-4 text-primary dark:text-white ${stagger(0.05)}`}
+	>
+		Cloudflare Developer Docs
+	</h1>
+
+	<p
+		class={`text-lg text-pretty max-w-[480px] leading-relaxed mb-8 max-[480px]:text-base max-[480px]:mb-6 text-[#52525b] dark:text-[#a1a1aa] ${stagger(0.1)}`}
+	>
+		Everything you need to build a better Internet; guides, references, and
+		tools for Cloudflare's developer platform.
+	</p>
+
+	<div
+		class={`flex items-center gap-5 text-sm max-[480px]:flex-wrap max-[480px]:gap-3 ${stagger(0.16)}`}
+	>
+		<a
+			href="/workers/get-started/guide/"
+			class="focus-visible:outline-accent inline-flex h-10 cursor-pointer items-center gap-2 rounded-lg rounded-md bg-[#18181b] px-4 text-base font-medium text-white no-underline transition-colors duration-150 hover:bg-[#f56500] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-[#fafafa] dark:text-[#09090b] dark:hover:bg-[#e4e4e7] dark:hover:text-[#09090b]"
+		>
+			Get started
+			<Icon name="right-arrow" size="0.75rem" />
+		</a>
+		<span
+			class="h-4 w-px bg-black/10 max-[480px]:hidden dark:bg-white/10"
+			aria-hidden="true"></span>
+		<a
+			href="/directory/"
+			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
+		>
+			All products
+		</a>
+		<a
+			href="/api/"
+			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
+		>
+			API reference
+		</a>
+		<a
+			href="/learning-paths/"
+			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 max-[480px]:hidden dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
+		>
+			Learning paths
+		</a>
+	</div>
+</section>
diff --git a/src/components/landing/PlatformStats.astro b/src/components/landing/PlatformStats.astro
new file mode 100644
index 000000000000000..09d25bb8ccd6821
--- /dev/null
+++ b/src/components/landing/PlatformStats.astro
@@ -0,0 +1,257 @@
+---
+import { stagger } from "./constants";
+
+const stats = [
+	{
+		value: 330,
+		suffix: "+",
+		unit: "cities",
+		label: "Global network",
+		detail: "Points of presence",
+	},
+	{
+		value: 100,
+		suffix: "+",
+		unit: "products",
+		label: "Platform surface",
+		detail: "Developer primitives",
+	},
+	{
+		value: 78,
+		suffix: "M+",
+		unit: "req/s",
+		label: "Average throughput",
+		detail: "At the edge",
+	},
+	{
+		value: 99.99,
+		suffix: "%",
+		unit: "uptime",
+		label: "Network SLA",
+		detail: "Contractual guarantee",
+	},
+];
+---
+
+<section
+	id="platform"
+	class={`px-8 pt-10 pb-12 max-[900px]:px-5 max-[900px]:pt-8 max-[900px]:pb-8 ${stagger(0.42)}`}
+	aria-labelledby="stats-heading"
+>
+	<div class="mb-3">
+		<span class="text-accent font-mono text-xs tracking-widest uppercase"
+			>Platform at a Glance</span
+		>
+	</div>
+
+	<div
+		class="grid grid-cols-4 gap-px overflow-visible border border-[#e8e8e8] bg-[#e8e8e8] max-[768px]:grid-cols-2 dark:border-[#2a2a2a] dark:bg-[#2a2a2a]"
+		id="stats-grid"
+	>
+		{
+			stats.map((stat, i) => (
+				<div class="bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark relative flex flex-col justify-between px-5 py-5 transition-colors duration-150">
+					{/* Corner plus marks — all four corners */}
+					<svg
+						width="10"
+						height="10"
+						viewBox="0 0 10 10"
+						class="pointer-events-none absolute -top-[5.5px] -left-[5.5px] z-10"
+						aria-hidden="true"
+					>
+						<line
+							x1="0"
+							y1="5"
+							x2="10"
+							y2="5"
+							stroke-width="1"
+							class="stroke-accent dark:stroke-white"
+						/>
+						<line
+							x1="5"
+							y1="0"
+							x2="5"
+							y2="10"
+							stroke-width="1"
+							class="stroke-accent dark:stroke-white"
+						/>
+					</svg>
+					<svg
+						width="10"
+						height="10"
+						viewBox="0 0 10 10"
+						class="pointer-events-none absolute -top-[5.5px] -right-[5.5px] z-10"
+						aria-hidden="true"
+					>
+						<line
+							x1="0"
+							y1="5"
+							x2="10"
+							y2="5"
+							stroke-width="1"
+							class="stroke-accent dark:stroke-white"
+						/>
+						<line
+							x1="5"
+							y1="0"
+							x2="5"
+							y2="10"
+							stroke-width="1"
+							class="stroke-accent dark:stroke-white"
+						/>
+					</svg>
+					<svg
+						width="10"
+						height="10"
+						viewBox="0 0 10 10"
+						class="pointer-events-none absolute -bottom-[5.5px] -left-[5.5px] z-10"
+						aria-hidden="true"
+					>
+						<line
+							x1="0"
+							y1="5"
+							x2="10"
+							y2="5"
+							stroke-width="1"
+							class="stroke-accent dark:stroke-white"
+						/>
+						<line
+							x1="5"
+							y1="0"
+							x2="5"
+							y2="10"
+							stroke-width="1"
+							class="stroke-accent dark:stroke-white"
+						/>
+					</svg>
+					<svg
+						width="10"
+						height="10"
+						viewBox="0 0 10 10"
+						class="pointer-events-none absolute -right-[5.5px] -bottom-[5.5px] z-10"
+						aria-hidden="true"
+					>
+						<line
+							x1="0"
+							y1="5"
+							x2="10"
+							y2="5"
+							stroke-width="1"
+							class="stroke-accent dark:stroke-white"
+						/>
+						<line
+							x1="5"
+							y1="0"
+							x2="5"
+							y2="10"
+							stroke-width="1"
+							class="stroke-accent dark:stroke-white"
+						/>
+					</svg>
+
+					{/* Index */}
+					<div
+						class="mb-2.5 font-mono text-[10px] text-zinc-400 uppercase tabular-nums select-none dark:text-zinc-600"
+						aria-hidden="true"
+					>
+						{String(i + 1).padStart(2, "0")}
+					</div>
+
+					{/* Stat value */}
+					<p class="mb-1">
+						<span
+							class="stat-counter font-mono text-3xl leading-none font-medium -tracking-tight text-zinc-900 tabular-nums dark:text-white"
+							data-target={stat.value}
+							data-suffix={stat.suffix}
+							data-decimals={stat.value % 1 !== 0 ? "2" : "0"}
+						>
+							{stat.value % 1 !== 0 ? stat.value.toFixed(2) : stat.value}
+							{stat.suffix}
+						</span>
+					</p>
+
+					{/* Unit */}
+					<p class="text-accent mb-3 font-mono text-xs tracking-wide uppercase">
+						{stat.unit}
+					</p>
+
+					{/* Label + detail */}
+					<div class="border-t border-dashed border-[#e8e8e8] pt-3 dark:border-[#2a2a2a]">
+						<div class="space-y-0.5">
+							<p class="text-sm leading-tight font-medium text-zinc-900 dark:text-zinc-50">
+								{stat.label}
+							</p>
+							<p class="font-mono text-xs text-zinc-500 dark:text-zinc-400">
+								{stat.detail}
+							</p>
+						</div>
+					</div>
+				</div>
+			))
+		}
+	</div>
+</section>
+
+<script>
+	function easeOutExpo(t: number): number {
+		return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+	}
+
+	function animateCounter(el: HTMLElement) {
+		const target = parseFloat(el.dataset.target ?? "0");
+		const suffix = el.dataset.suffix ?? "";
+		const decimals = parseInt(el.dataset.decimals ?? "0", 10);
+		const prefersReducedMotion = window.matchMedia(
+			"(prefers-reduced-motion: reduce)",
+		).matches;
+
+		if (prefersReducedMotion) {
+			el.textContent = target.toFixed(decimals) + suffix;
+			return;
+		}
+
+		const duration = 1400;
+		const start = performance.now();
+
+		function tick(now: number) {
+			const elapsed = now - start;
+			const progress = Math.min(elapsed / duration, 1);
+			const eased = easeOutExpo(progress);
+			const current = target * eased;
+
+			el.textContent = current.toFixed(decimals) + suffix;
+
+			if (progress < 1) {
+				requestAnimationFrame(tick);
+			} else {
+				el.textContent = target.toFixed(decimals) + suffix;
+			}
+		}
+
+		requestAnimationFrame(tick);
+	}
+
+	const counters = document.querySelectorAll<HTMLElement>(".stat-counter");
+
+	if ("IntersectionObserver" in window) {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						animateCounter(entry.target as HTMLElement);
+						observer.unobserve(entry.target);
+					}
+				});
+			},
+			{ threshold: 0.3 },
+		);
+		counters.forEach((el) => observer.observe(el));
+	} else {
+		counters.forEach((el) => {
+			const target = parseFloat(el.dataset.target ?? "0");
+			const suffix = el.dataset.suffix ?? "";
+			const decimals = parseInt(el.dataset.decimals ?? "0", 10);
+			el.textContent = target.toFixed(decimals) + suffix;
+		});
+	}
+</script>
diff --git a/src/components/landing/ProductCard.astro b/src/components/landing/ProductCard.astro
new file mode 100644
index 000000000000000..cbaaa48f76faaac
--- /dev/null
+++ b/src/components/landing/ProductCard.astro
@@ -0,0 +1,189 @@
+---
+/**
+ * ProductCard — Reusable card for showcasing a product with icon, scenario, detail, and CTA.
+ *
+ * Props:
+ * - icon: Icon name from the astro-icon set
+ * - product: Short product label (e.g. "WAF", "SSL/TLS")
+ * - scenario: Bold heading text describing the use case
+ * - detail: Supporting description text
+ * - href: Link destination for the CTA
+ * - cta: CTA button text (defaults to "Get started")
+ */
+import { Icon } from "astro-icon/components";
+
+interface Props {
+	icon: string;
+	product: string;
+	scenario: string;
+	detail: string;
+	href: string;
+	cta?: string;
+}
+
+const BLUE = "#0a95ff";
+const MAGENTA = "#ee0ddb";
+const AI_GREEN = "#19e306";
+const AI_BG = "#f2f5e1";
+const MEDIA_PURPLE = "#9616ff";
+const MEDIA_BG = "rgba(150, 22, 255, 0.1)";
+const ACCENT = "#f56500";
+
+const computeProducts = new Set([
+	"workers",
+	"containers",
+	"sandbox",
+	"sandboxes",
+	"durable objects",
+	"browser rendering",
+	"workflows",
+]);
+
+const storageProducts = new Set([
+	"r2",
+	"data platform",
+	"hyperdrive",
+	"d1",
+	"kv",
+	"queues",
+]);
+
+const aiProducts = new Set([
+	"workers ai",
+	"agents",
+	"ai agents",
+	"ai gateway",
+	"vectorize",
+	"ai search",
+]);
+
+const mediaProducts = new Set([
+	"images",
+	"stream",
+	"screem",
+	"realtime",
+	"realtimekit",
+	"realtime kit",
+	"turn",
+	"sfu",
+	"turn / sfu",
+	"turn/sfu",
+]);
+
+const normalizeProduct = (value: string) =>
+	value
+		.toLowerCase()
+		.replace(/[\-_]/g, " ")
+		.replace(/\s+/g, " ")
+		.trim();
+
+const getIconHoverPalette = (value: string) => {
+	const normalized = normalizeProduct(value);
+	if (storageProducts.has(normalized)) {
+		return {
+			color: MAGENTA,
+			bg: "color-mix(in srgb, #ee0ddb 10%, transparent)",
+			bgDark: "color-mix(in srgb, #ee0ddb 16%, transparent)",
+		};
+	}
+	if (aiProducts.has(normalized)) {
+		return {
+			color: AI_GREEN,
+			bg: AI_BG,
+			bgDark: "color-mix(in srgb, #19e306 22%, transparent)",
+		};
+	}
+	if (mediaProducts.has(normalized)) {
+		return {
+			color: MEDIA_PURPLE,
+			bg: MEDIA_BG,
+			bgDark: "rgba(150, 22, 255, 0.22)",
+		};
+	}
+	if (computeProducts.has(normalized)) {
+		return {
+			color: BLUE,
+			bg: "color-mix(in srgb, #0a95ff 10%, transparent)",
+			bgDark: "color-mix(in srgb, #0a95ff 16%, transparent)",
+		};
+	}
+	return {
+		color: ACCENT,
+		bg: "color-mix(in srgb, #f56500 10%, transparent)",
+		bgDark: "color-mix(in srgb, #f56500 16%, transparent)",
+	};
+};
+
+const { icon, product, scenario, detail, href, cta = "Get started" } =
+	Astro.props;
+
+const iconHoverPalette = getIconHoverPalette(product);
+---
+
+<div
+	class="pc-card group/product-card bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark flex flex-1 flex-col p-6 transition-colors duration-150"
+	style={`--pc-hover-color: ${iconHoverPalette.color}; --pc-hover-bg: ${iconHoverPalette.bg}; --pc-hover-bg-dark: ${iconHoverPalette.bgDark};`}
+>
+	{/* Header: icon + product label */}
+	<div class="mb-4 flex items-center justify-between">
+		<span
+			class="pc-icon-shell relative flex size-11 items-center justify-center rounded-md border border-zinc-200 bg-zinc-100 text-zinc-400 transition-[background-color,border-color,color] duration-200 dark:border-[#2a2a2a] dark:bg-zinc-800 dark:text-zinc-500"
+		>
+			<Icon name={icon} size="24px" class="pc-icon transition-colors duration-200" />
+		</span>
+		<span class="text-accent font-mono text-xs tracking-wide uppercase">
+			{product}
+		</span>
+	</div>
+
+	{/* Scenario */}
+	<p
+		class="mb-2 text-base leading-snug font-medium text-zinc-900 md:text-lg dark:text-zinc-50"
+	>
+		{scenario}
+	</p>
+	<p
+		class="mb-6 flex-1 text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400"
+	>
+		{detail}
+	</p>
+
+	{/* CTA */}
+	<a
+		href={href}
+		class="group/cta hover:text-accent hover:underline focus-visible:outline-accent inline-flex w-fit items-center gap-2 rounded-md py-1 text-sm font-medium text-zinc-600 no-underline underline-offset-4 transition-colors duration-150 focus-visible:outline-2 focus-visible:-outline-offset-2 dark:text-zinc-300"
+	>
+		{cta}
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="transition-transform duration-150 group-hover/cta:translate-x-0.5"
+			aria-hidden="true"
+		>
+			<line x1="5" y1="12" x2="19" y2="12"></line>
+			<polyline points="12 5 19 12 12 19"></polyline>
+		</svg>
+	</a>
+</div>
+
+<style>
+	.pc-card:hover .pc-icon-shell,
+	.pc-card:focus-within .pc-icon-shell {
+		background: var(--pc-hover-bg, rgba(245, 101, 0, 0.1));
+		border-color: var(--pc-hover-color, #f56500);
+		border-style: dashed;
+		color: var(--pc-hover-color, #f56500);
+	}
+
+	:root[data-theme="dark"] .pc-card:hover .pc-icon-shell,
+	:root[data-theme="dark"] .pc-card:focus-within .pc-icon-shell {
+		background: var(--pc-hover-bg-dark, rgba(245, 101, 0, 0.16));
+		color: var(--pc-hover-color, #f56500);
+	}
+</style>
diff --git a/src/components/landing/ProductCardGrid.astro b/src/components/landing/ProductCardGrid.astro
new file mode 100644
index 000000000000000..48ad189b838fb57
--- /dev/null
+++ b/src/components/landing/ProductCardGrid.astro
@@ -0,0 +1,72 @@
+---
+/**
+ * ProductCardGrid — Reusable grid wrapper with plus-mark corner flair.
+ *
+ * Renders a 3-column (1-column on mobile) grid with 1px gap borders
+ * and decorative plus marks on the four outer corners.
+ *
+ * Props:
+ * - label: Optional category label shown above the grid
+ *
+ * Usage:
+ *   <ProductCardGrid label="Network & Application">
+ *     <ProductCard ... />
+ *     <ProductCard ... />
+ *   </ProductCardGrid>
+ */
+interface Props {
+	label?: string;
+}
+
+const { label } = Astro.props;
+---
+
+<div>
+	{
+		label && (
+			<p class="mb-4 font-mono text-xs tracking-wide text-zinc-500 uppercase dark:text-zinc-400">
+				{label}
+			</p>
+		)
+	}
+	<div
+		class="relative grid grid-cols-3 gap-px overflow-visible border border-zinc-200 bg-zinc-200 max-[768px]:grid-cols-1 dark:border-[#2a2a2a] dark:bg-[#2a2a2a]"
+	>
+		{/* Plus marks on the four corners */}
+		{
+			[
+				"-top-[5.5px] -left-[5.5px]",
+				"-top-[5.5px] -right-[5.5px]",
+				"-bottom-[5.5px] -left-[5.5px]",
+				"-right-[5.5px] -bottom-[5.5px]",
+			].map((pos) => (
+				<svg
+					width="10"
+					height="10"
+					viewBox="0 0 10 10"
+					class={`pointer-events-none absolute ${pos} z-10`}
+					aria-hidden="true"
+				>
+					<line
+						x1="0"
+						y1="5"
+						x2="10"
+						y2="5"
+						stroke-width="1"
+						class="stroke-accent dark:stroke-white"
+					/>
+					<line
+						x1="5"
+						y1="0"
+						x2="5"
+						y2="10"
+						stroke-width="1"
+						class="stroke-accent dark:stroke-white"
+					/>
+				</svg>
+			))
+		}
+
+		<slot />
+	</div>
+</div>
diff --git a/src/components/landing/ProtectSection.astro b/src/components/landing/ProtectSection.astro
new file mode 100644
index 000000000000000..cdd50cb086d5e8d
--- /dev/null
+++ b/src/components/landing/ProtectSection.astro
@@ -0,0 +1,157 @@
+---
+const products = [
+	{
+		name: "WAF",
+		description: "Custom firewall rules, managed rulesets, and rate limiting. Block threats at the edge before they reach your origin.",
+		detail: "Custom rules · Managed rulesets · Analytics",
+		href: "/waf/",
+	},
+	{
+		name: "Rate Limiting",
+		description: "Protect APIs and pages from abuse. Configurable thresholds, fingerprinting, and response actions.",
+		detail: "Per-IP · Per-session · Sliding window",
+		href: "/waf/rate-limiting-rules/",
+	},
+	{
+		name: "DDoS Protection",
+		description: "Always-on, unmetered mitigation for L3–L7 attacks. Automatic detection with tunable sensitivity.",
+		detail: "L3 · L4 · L7 · Unmetered",
+		href: "/ddos-protection/",
+	},
+	{
+		name: "Cloudflare Tunnel",
+		description: "Expose private services to the internet without opening firewall ports. One command to create a secure outbound-only connection.",
+		detail: "No inbound ports · Remote config · API",
+		href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
+	},
+	{
+		name: "Access",
+		description: "Zero Trust access control for any application. SSO, identity provider integration, and per-request policy enforcement.",
+		detail: "SSO · IdP integrations · Policies",
+		href: "/cloudflare-one/access-controls/policies/",
+	},
+	{
+		name: "Gateway",
+		description: "DNS, HTTP, and network filtering for your team's traffic. Block malware, phishing, and unwanted sites without a VPN.",
+		detail: "DNS filtering · HTTP inspection · L4",
+		href: "/cloudflare-one/traffic-policies/",
+	},
+	{
+		name: "Bot Management",
+		description: "Detect and block automated traffic. Behavioral analysis, challenge flows, and bot score APIs built into every request.",
+		detail: "ML scoring · Challenge · JS detection",
+		href: "/bots/",
+	},
+	{
+		name: "Turnstile",
+		description: "CAPTCHA-free bot detection for your frontend. Drop-in widget that challenges bots invisibly, never your users.",
+		detail: "Invisible · Managed · Non-interactive",
+		href: "/turnstile/",
+	},
+	{
+		name: "SSL/TLS",
+		description: "Universal SSL by default, with full control over cipher suites, certificate authorities, and origin authentication.",
+		detail: "Universal · Advanced · mTLS · Origin CA",
+		href: "/ssl/",
+	},
+];
+
+const quickLinks = [
+	{ label: "Tunnel get started", href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/get-started/create-remote-tunnel/" },
+	{ label: "IP access rules", href: "/waf/tools/ip-access-rules/" },
+	{ label: "Turnstile troubleshooting", href: "/turnstile/troubleshooting/client-side-errors/error-codes/" },
+	{ label: "WAF security events", href: "/waf/analytics/security-events/" },
+	{ label: "Cloudflare One setup", href: "/cloudflare-one/setup/" },
+	{ label: "WARP Client", href: "/warp-client/" },
+];
+---
+
+<section
+	class="px-8 pt-16 pb-12 max-[900px]:px-4 max-[900px]:pt-10"
+	aria-labelledby="protect-heading"
+>
+	<!-- Section header -->
+	<div class="mb-10 flex items-end justify-between gap-6 max-[600px]:flex-col max-[600px]:items-start max-[600px]:gap-4">
+		<div>
+			<div class="mb-3 flex items-center gap-2">
+				<span class="font-mono text-[0.5625rem] tracking-[0.2em] text-accent uppercase">
+					Protect
+				</span>
+				<span class="h-px w-8 bg-accent/40"></span>
+			</div>
+			<h2
+				id="protect-heading"
+				class="text-[clamp(1.5rem,3vw,2rem)] font-normal -tracking-[0.03em] leading-tight text-[#18181b]"
+			>
+				Secure what you're building
+			</h2>
+			<p class="mt-3 text-[0.9375rem] text-[#6b6b74] max-w-[480px] leading-relaxed">
+				Layer security, access control, and bot protection onto any app or infrastructure — without re-architecting anything.
+			</p>
+		</div>
+		<a
+			href="/cloudflare-one/"
+			class="shrink-0 inline-flex items-center gap-2 rounded-lg border border-black/10 bg-black/2 px-4 py-2 font-mono text-[0.625rem] tracking-widest text-[#6b6b74] uppercase transition-colors duration-100 hover:bg-black/5 hover:text-[#1a1a1e] no-underline max-[600px]:hidden"
+		>
+			Explore Zero Trust
+			<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+				<line x1="5" y1="12" x2="19" y2="12" />
+				<polyline points="12 5 19 12 12 19" />
+			</svg>
+		</a>
+	</div>
+
+	<!-- Products list -->
+	<div class="border border-black/6 divide-y divide-black/6 overflow-hidden">
+		{products.map((p) => (
+			<a
+				href={p.href}
+				class="group relative flex items-center gap-6 bg-white/90 px-6 py-5 no-underline text-inherit transition-colors duration-100 hover:bg-zinc-50 focus-visible:outline-2 focus-visible:outline-accent focus-visible:-outline-offset-2 max-[600px]:flex-col max-[600px]:items-start max-[600px]:gap-2 max-[600px]:px-4 max-[600px]:py-4"
+			>
+				{/* Left accent reveal */}
+				<span
+					class="pointer-events-none absolute top-0 left-0 w-[2px] h-0 bg-accent transition-[height] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:h-full"
+					aria-hidden="true"
+				/>
+
+				{/* Product name */}
+				<div class="w-[140px] shrink-0 max-[600px]:w-auto">
+					<span class="text-[0.9375rem] font-medium text-[#1a1a1e] leading-tight">
+						{p.name}
+					</span>
+				</div>
+
+				{/* Description */}
+				<p class="flex-1 text-[0.8125rem] text-[#6b6b74] leading-normal m-0">
+					{p.description}
+				</p>
+
+				{/* Detail tags */}
+				<div class="shrink-0 font-mono text-[0.5625rem] tracking-wide text-[#9b9ba4] max-w-[200px] text-right leading-relaxed max-[900px]:hidden">
+					{p.detail}
+				</div>
+
+				{/* Arrow */}
+				<div class="shrink-0 flex items-center opacity-0 -translate-x-1 transition-[opacity,transform] duration-100 group-hover:opacity-100 group-hover:translate-x-0 max-[600px]:hidden">
+					<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-accent" aria-hidden="true">
+						<line x1="5" y1="12" x2="19" y2="12" />
+						<polyline points="12 5 19 12 12 19" />
+					</svg>
+				</div>
+			</a>
+		))}
+	</div>
+
+	<!-- Quick links footer -->
+	<div class="mt-4 flex items-center gap-2 flex-wrap">
+		<span class="font-mono text-[0.5rem] tracking-[0.2em] text-[#9b9ba4] uppercase mr-1">Also:</span>
+		{quickLinks.map((l) => (
+			<a
+				href={l.href}
+				class="font-mono text-[0.5625rem] tracking-wide text-[#6b6b74] no-underline border-b border-dashed border-black/15 pb-px transition-colors duration-100 hover:text-accent hover:border-accent"
+			>
+				{l.label}
+			</a>
+		))}
+	</div>
+</section>
diff --git a/src/components/landing/RequestLifecycle.astro b/src/components/landing/RequestLifecycle.astro
new file mode 100644
index 000000000000000..b3b7499610321be
--- /dev/null
+++ b/src/components/landing/RequestLifecycle.astro
@@ -0,0 +1,1071 @@
+---
+/**
+ * RequestLifecycle — Self-contained Astro component
+ *
+ * Catalogue-style product nodes + kumo/flow connectors.
+ * Zero framework JS — vanilla <script> for interactivity.
+ *
+ * Visual: dashed-border icon nodes, category-colored fills, kumo S-curve
+ * connectors with pin-square terminals, dot grid background, segmented
+ * toggle toolbar, step-based request animation timeline.
+ */
+import { Icon } from "astro-icon/components";
+
+interface PipelineNode {
+	id: string;
+	icon: string;
+	label: string;
+	href: string;
+	security: boolean;
+	color?: string;
+	borderColor: string;
+	bgColor: string;
+	iconColor: string;
+	iconSize: string;
+	iconAdjust?: string;
+}
+
+const ACCENT = "#f56500";
+const BLUE = "#0A95FF";
+const RED = "#ef4444";
+const AMBER = "#f59e0b";
+const PURPLE = "#8b5cf6";
+const TEAL = "#14b8a6";
+
+const NODES: PipelineNode[] = [
+	{
+		id: "dns",
+		icon: "dns",
+		label: "DNS",
+		href: "/dns/",
+		security: false,
+		borderColor: BLUE,
+		bgColor: "rgba(10,149,255,0.18)",
+		iconColor: BLUE,
+		iconSize: "28px",
+		iconAdjust: "translate(1.5px,1.5px)",
+	},
+	{
+		id: "tls",
+		icon: "ssl",
+		label: "TLS",
+		href: "/ssl/",
+		security: false,
+		borderColor: BLUE,
+		bgColor: "rgba(10,149,255,0.18)",
+		iconColor: BLUE,
+		iconSize: "24px",
+		iconAdjust: "translate(-0.5px,-0.5px)",
+	},
+	{
+		id: "ddos",
+		icon: "ddos-protection",
+		label: "DDoS",
+		href: "/ddos-protection/",
+		security: true,
+		color: RED,
+		borderColor: RED,
+		bgColor: "rgba(239,68,68,0.18)",
+		iconColor: RED,
+		iconSize: "27px",
+	},
+	{
+		id: "waf",
+		icon: "waf",
+		label: "WAF",
+		href: "/waf/",
+		security: true,
+		color: AMBER,
+		borderColor: AMBER,
+		bgColor: "rgba(245,158,11,0.18)",
+		iconColor: AMBER,
+		iconSize: "23px",
+	},
+	{
+		id: "bots",
+		icon: "bots",
+		label: "Bots",
+		href: "/bots/",
+		security: true,
+		color: PURPLE,
+		borderColor: PURPLE,
+		bgColor: "rgba(139,92,246,0.18)",
+		iconColor: PURPLE,
+		iconSize: "25px",
+		iconAdjust: "translateY(-1px)",
+	},
+	{
+		id: "rate",
+		icon: "waf",
+		label: "Rate",
+		href: "/waf/rate-limiting-rules/",
+		security: true,
+		color: "#3b82f6",
+		borderColor: "#3b82f6",
+		bgColor: "rgba(59,130,246,0.18)",
+		iconColor: "#3b82f6",
+		iconSize: "23px",
+	},
+	{
+		id: "cache",
+		icon: "cache",
+		label: "Cache",
+		href: "/cache/",
+		security: false,
+		borderColor: TEAL,
+		bgColor: "rgba(20,184,166,0.18)",
+		iconColor: TEAL,
+		iconSize: "24px",
+	},
+	{
+		id: "origin",
+		icon: "workers",
+		label: "Origin",
+		href: "/workers/",
+		security: false,
+		borderColor: BLUE,
+		bgColor: "rgba(10,149,255,0.18)",
+		iconColor: BLUE,
+		iconSize: "24px",
+	},
+];
+
+const SECURITY = NODES.filter((n) => n.security);
+---
+
+<section
+	id="request"
+	class="rl-section hidden px-8 pt-14 pb-8 max-[900px]:px-5 max-[900px]:pt-10"
+	aria-labelledby="rl-heading"
+	data-rl
+>
+	<div class="mb-3">
+		<span class="text-accent font-mono text-xs tracking-widest uppercase"
+			>Project</span
+		>
+	</div>
+	<h2
+		id="rl-heading"
+		class="mb-2 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 dark:text-zinc-50"
+	>
+		The anatomy of a request
+	</h2>
+	<p
+		class="mb-8 max-w-[520px] text-sm leading-relaxed text-pretty text-zinc-500 dark:text-zinc-400"
+	>
+		Every request passes through Cloudflare's edge before reaching your origin.
+		Toggle security features to add inspection checkpoints.
+	</p>
+
+	<!-- Toolbar -->
+	<div class="rl-toolbar">
+		<div class="rl-toolbar-left">
+			<button type="button" class="rl-send" data-rl-send>
+				<svg width="7" height="7" viewBox="0 0 24 24" fill="currentColor"
+					><polygon points="5 3 19 12 5 21"></polygon></svg
+				>
+				Send
+			</button>
+			<span
+				class="rl-status"
+				data-rl-status
+				aria-live="polite"
+				aria-atomic="true"></span>
+		</div>
+		<div class="rl-toolbar-right" role="group" aria-label="Security features">
+			{
+				SECURITY.map((n, i) => (
+					<button
+						type="button"
+						class:list={["rl-seg", i === SECURITY.length - 1 && "rl-seg--last"]}
+						data-rl-toggle={n.id}
+						data-rl-color={n.color}
+						aria-pressed="true"
+					>
+						<span class="rl-seg-dot" />
+						{n.label}
+					</button>
+				))
+			}
+		</div>
+	</div>
+
+	<!-- Pipeline container -->
+	<div class="rl-container" data-rl-container>
+		<!-- Dot grid -->
+		<div
+			class="pointer-events-none absolute inset-0 z-0 overflow-hidden"
+			aria-hidden="true"
+		>
+			<div
+				class="absolute h-full w-full"
+				style="background-image: radial-gradient(var(--l-dot-color) 1px, transparent 1px); background-size: var(--l-dot-size); mask-image: var(--l-dot-mask)"
+			>
+			</div>
+		</div>
+
+		<!-- Corner marks -->
+		{
+			[
+				"-top-[5.5px] -left-[5.5px]",
+				"-top-[5.5px] -right-[5.5px]",
+				"-bottom-[5.5px] -left-[5.5px]",
+				"-right-[5.5px] -bottom-[5.5px]",
+			].map((pos) => (
+				<svg
+					width="10"
+					height="10"
+					viewBox="0 0 10 10"
+					class={`pointer-events-none absolute ${pos} z-10`}
+					aria-hidden="true"
+				>
+					<line
+						x1="0"
+						y1="5"
+						x2="10"
+						y2="5"
+						stroke-width="1"
+						class="stroke-accent dark:stroke-white"
+					/>
+					<line
+						x1="5"
+						y1="0"
+						x2="5"
+						y2="10"
+						stroke-width="1"
+						class="stroke-accent dark:stroke-white"
+					/>
+				</svg>
+			))
+		}
+
+		<!-- SVG connectors -->
+		<svg class="rl-svg" aria-hidden="true" data-rl-svg>
+			<defs>
+				<marker
+					id="rl-pin"
+					markerWidth="6"
+					markerHeight="6"
+					refX="3"
+					refY="3"
+					orient="auto"
+					markerUnits="userSpaceOnUse"
+				>
+					<rect
+						x="0.5"
+						y="0.5"
+						width="5"
+						height="5"
+						rx="0.5"
+						class="rl-pin-fill"
+						stroke="currentColor"
+						stroke-width="1"></rect>
+				</marker>
+				<marker
+					id="rl-pin-a"
+					markerWidth="6"
+					markerHeight="6"
+					refX="3"
+					refY="3"
+					orient="auto"
+					markerUnits="userSpaceOnUse"
+				>
+					<rect
+						x="0.5"
+						y="0.5"
+						width="5"
+						height="5"
+						rx="0.5"
+						class="rl-pin-fill"
+						stroke="var(--color-accent, #f56500)"
+						stroke-width="1"></rect>
+				</marker>
+			</defs>
+		</svg>
+
+		<!-- Grid -->
+		<div class="rl-grid">
+			<!-- Request (user icon) -->
+			<div class="rl-cell" style="grid-column:1">
+				<div class="rl-wrap group">
+					<span
+						class="rl-label"
+						style={`color:${ACCENT};background:rgba(245,101,0,0.06);border-color:${ACCENT};display:none;opacity:0`}
+						>Request</span
+					>
+					<div
+						class="rl-node-user"
+						data-rl-node="request"
+						style={`color:${ACCENT}`}
+					>
+						<svg
+							width="56"
+							height="56"
+							viewBox="0 0 24 24"
+							fill="none"
+							style={`color:${ACCENT}`}
+						>
+							<path
+								d="M22.62 1.38H1.38V22.62H22.62V1.38Z"
+								stroke="currentColor"
+								stroke-width="0.6"></path>
+							<path
+								d="M21.6 0.18H23.4C23.632 0.18 23.82 0.368 23.82 0.6V2.4C23.82 2.632 23.632 2.82 23.4 2.82H21.6C21.368 2.82 21.18 2.632 21.18 2.4V0.6C21.18 0.368 21.368 0.18 21.6 0.18Z"
+								class="rl-pin-fill"
+								stroke="currentColor"
+								stroke-width="0.6"></path>
+							<path
+								d="M23.4 21.18H21.6C21.368 21.18 21.18 21.368 21.18 21.6V23.4C21.18 23.632 21.368 23.82 21.6 23.82H23.4C23.632 23.82 23.82 23.632 23.82 23.4V21.6C23.82 21.368 23.632 21.18 23.4 21.18Z"
+								class="rl-pin-fill"
+								stroke="currentColor"
+								stroke-width="0.6"></path>
+							<path
+								d="M2.4 21.18H0.6C0.368 21.18 0.18 21.368 0.18 21.6V23.4C0.18 23.632 0.368 23.82 0.6 23.82H2.4C2.632 23.82 2.82 23.632 2.82 23.4V21.6C2.82 21.368 2.632 21.18 2.4 21.18Z"
+								class="rl-pin-fill"
+								stroke="currentColor"
+								stroke-width="0.6"></path>
+							<path
+								d="M0.6 0.18H2.4C2.632 0.18 2.82 0.368 2.82 0.6V2.4C2.82 2.632 2.632 2.82 2.4 2.82H0.6C0.368 2.82 0.18 2.632 0.18 2.4V0.6C0.18 0.368 0.368 0.18 0.6 0.18Z"
+								class="rl-pin-fill"
+								stroke="currentColor"
+								stroke-width="0.6"></path>
+							<path
+								fill-rule="evenodd"
+								clip-rule="evenodd"
+								d="M8.109 14.925C9.111 13.862 10.482 13.2 12 13.2C13.518 13.2 14.889 13.862 15.891 14.925C16.001 15.041 16.031 15.211 15.967 15.358C15.904 15.504 15.76 15.6 15.6 15.6H8.4C8.24 15.6 8.096 15.504 8.033 15.358C7.97 15.211 7.999 15.041 8.109 14.925Z"
+								stroke="currentColor"
+								stroke-width="0.8"></path>
+							<path
+								fill-rule="evenodd"
+								clip-rule="evenodd"
+								d="M9.8 10.2C9.8 8.985 10.785 8 12 8C13.215 8 14.2 8.985 14.2 10.2C14.2 11.415 13.215 12.4 12 12.4C10.785 12.4 9.8 11.415 9.8 10.2Z"
+								stroke="currentColor"
+								stroke-width="0.8"></path>
+						</svg>
+					</div>
+				</div>
+			</div>
+
+			<!-- Pipeline nodes -->
+			{
+				NODES.map((node, i) => (
+					<div
+						class="rl-cell"
+						style={`grid-column:${i + 2}`}
+						data-rl-cell={node.id}
+					>
+						<a
+							href={node.href}
+							class="rl-wrap group no-underline"
+							data-rl-link={node.id}
+							aria-label={node.label}
+						>
+							<span
+								class="rl-label"
+								style={`color:${node.borderColor};background:${node.bgColor};border-color:${node.borderColor};display:none;opacity:0`}
+							>
+								{node.label}
+							</span>
+							<div
+								class="rl-node"
+								data-rl-node={node.id}
+								data-border-color={node.borderColor}
+								style={`border-color:${node.borderColor};background:${node.bgColor};color:${node.iconColor}`}
+							>
+								<span
+									class="rl-icon-wrap"
+									style={
+										node.iconAdjust ? `transform:${node.iconAdjust}` : undefined
+									}
+								>
+									<Icon name={node.icon} size={node.iconSize} />
+								</span>
+							</div>
+							{node.security && (
+								<span class="rl-node-status" data-rl-st={node.id} />
+							)}
+						</a>
+					</div>
+				))
+			}
+
+			<!-- Response -->
+			<div class="rl-cell" style="grid-column:10">
+				<div class="rl-wrap group">
+					<span
+						class="rl-label"
+						style={`color:${ACCENT};background:rgba(245,101,0,0.06);border-color:${ACCENT};display:none;opacity:0`}
+						>Response</span
+					>
+					<div
+						class="rl-node"
+						data-rl-node="response"
+						style={`border-color:${ACCENT};background:rgba(245,101,0,0.18);color:${ACCENT}`}
+					>
+						<svg
+							width="20"
+							height="20"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							><polyline points="20 6 9 17 4 12"></polyline></svg
+						>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="rl-edge-label" aria-hidden="true">Cloudflare Edge</div>
+	</div>
+</section>
+
+<style>
+	/* ---- Toolbar ---- */
+	.rl-toolbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 8px;
+		gap: 12px;
+	}
+	.rl-toolbar-left {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+	}
+	.rl-toolbar-right {
+		display: flex;
+		align-items: center;
+	}
+
+	.rl-send {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-family: var(--font-mono, monospace);
+		font-size: 10px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		padding: 5px 12px;
+		border: 1px solid var(--color-zinc-200);
+		background: transparent;
+		color: var(--color-zinc-500);
+		cursor: pointer;
+		transition:
+			color 0.15s,
+			border-color 0.15s,
+			background-color 0.15s;
+		user-select: none;
+		touch-action: manipulation;
+	}
+	.rl-send:hover {
+		border-color: var(--color-accent);
+		color: var(--color-accent);
+	}
+	.rl-send:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+
+	.rl-status {
+		font-family: var(--font-mono, monospace);
+		font-size: 10px;
+		letter-spacing: 0.03em;
+		color: var(--color-zinc-400);
+	}
+
+	.rl-seg {
+		font-family: var(--font-mono, monospace);
+		font-size: 10px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		padding: 5px 10px;
+		border: 1px solid var(--color-zinc-200);
+		border-right-width: 0;
+		background: transparent;
+		color: var(--color-zinc-500);
+		cursor: pointer;
+		transition:
+			color 0.15s,
+			border-color 0.15s,
+			background-color 0.15s;
+		user-select: none;
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		touch-action: manipulation;
+	}
+	.rl-seg--last {
+		border-right-width: 1px;
+	}
+	.rl-seg[aria-pressed="false"] {
+		color: var(--color-zinc-500);
+	}
+	.rl-seg-dot {
+		width: 5px;
+		height: 5px;
+		background: var(--color-zinc-300);
+		transition: background 0.15s;
+	}
+	.rl-seg[aria-pressed="true"] .rl-seg-dot {
+		background: currentColor;
+	}
+	.rl-seg:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: -2px;
+	}
+
+	/* ---- Container ---- */
+	.rl-container {
+		position: relative;
+		overflow: visible;
+		border: 1px solid var(--color-zinc-200);
+		background: #fff;
+		padding: 3rem 2rem 2.5rem;
+	}
+
+	/* ---- SVG layer ---- */
+	.rl-svg {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		z-index: 1;
+		overflow: visible;
+		color: rgba(0, 0, 0, 0.15);
+	}
+	.rl-pin-fill {
+		fill: #fff;
+	}
+
+	/* ---- Grid ---- */
+	.rl-grid {
+		display: grid;
+		grid-template-columns: repeat(10, 1fr);
+		align-items: center;
+		position: relative;
+	}
+	.rl-cell {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		position: relative;
+		z-index: 2;
+	}
+	.rl-cell[data-rl-off] .rl-wrap {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	/* ---- Node ---- */
+	.rl-node {
+		width: 56px;
+		height: 56px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px dashed;
+		border-radius: 6px;
+		position: relative;
+		z-index: 2;
+		overflow: hidden;
+	}
+	.rl-node-user {
+		width: 56px;
+		height: 56px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		z-index: 2;
+	}
+	.rl-icon-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+	.rl-wrap {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		position: relative;
+		cursor: pointer;
+		text-decoration: none;
+		transition: opacity 0.25s;
+	}
+	.rl-wrap:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 4px;
+	}
+
+	/* ---- Label (hover-only, FOUC-proof via inline display:none) ---- */
+	.rl-label {
+		position: absolute;
+		bottom: calc(100% + 6px);
+		left: 50%;
+		transform: translateX(-50%);
+		white-space: nowrap;
+		pointer-events: none;
+		font-family: var(--font-mono, monospace);
+		font-size: 10px;
+		font-weight: 500;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		line-height: 1;
+		padding: 4px 8px;
+		border: 1px dashed;
+		z-index: 10;
+	}
+	.group:hover > .rl-label {
+		display: block !important;
+		opacity: 1 !important;
+	}
+
+	/* ---- Status (PASS / BLOCKED) ---- */
+	.rl-node-status {
+		position: absolute;
+		top: calc(100% + 6px);
+		left: 50%;
+		transform: translateX(-50%);
+		white-space: nowrap;
+		pointer-events: none;
+		font-family: var(--font-mono, monospace);
+		font-size: 10px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		line-height: 1;
+		padding: 3px 7px;
+		z-index: 10;
+	}
+
+	/* ---- Edge label ---- */
+	.rl-edge-label {
+		position: absolute;
+		bottom: 8px;
+		left: 50%;
+		transform: translateX(-50%);
+		font-family: var(--font-mono, monospace);
+		font-size: 7px;
+		text-transform: uppercase;
+		letter-spacing: 1.5px;
+		color: var(--color-accent);
+		opacity: 0.25;
+		white-space: nowrap;
+	}
+
+	/* ---- Dark mode ---- */
+	:global(.dark) .rl-container,
+	:global([data-theme="dark"]) .rl-container {
+		border-color: #2a2a2a;
+		background: #1d1d1d;
+	}
+	:global(.dark) .rl-svg,
+	:global([data-theme="dark"]) .rl-svg {
+		color: rgba(255, 255, 255, 0.25);
+	}
+	:global(.dark) .rl-pin-fill,
+	:global([data-theme="dark"]) .rl-pin-fill {
+		fill: #1d1d1d;
+	}
+	:global(.dark) .rl-send,
+	:global([data-theme="dark"]) .rl-send {
+		border-color: var(--color-zinc-700);
+		color: var(--color-zinc-500);
+	}
+	:global(.dark) .rl-send:hover,
+	:global([data-theme="dark"]) .rl-send:hover {
+		border-color: var(--color-accent);
+		color: var(--color-accent);
+	}
+	:global(.dark) .rl-seg,
+	:global([data-theme="dark"]) .rl-seg {
+		border-color: var(--color-zinc-700);
+	}
+	:global(.dark) .rl-seg[aria-pressed="false"],
+	:global([data-theme="dark"]) .rl-seg[aria-pressed="false"] {
+		color: var(--color-zinc-400);
+	}
+	:global(.dark) .rl-seg-dot,
+	:global([data-theme="dark"]) .rl-seg-dot {
+		background: var(--color-zinc-600);
+	}
+
+	/* ---- Responsive ---- */
+	@media (max-width: 768px) {
+		.rl-toolbar {
+			flex-direction: column;
+			align-items: stretch;
+			gap: 8px;
+		}
+		.rl-toolbar-left {
+			justify-content: space-between;
+		}
+		.rl-toolbar-right {
+			overflow-x: auto;
+		}
+		.rl-grid {
+			display: flex;
+			flex-direction: column;
+			align-items: stretch;
+		}
+		.rl-cell {
+			flex-direction: row;
+			gap: 8px;
+			min-height: unset;
+			padding: 4px 0;
+		}
+		.rl-wrap {
+			flex-direction: row;
+			gap: 8px;
+		}
+		.rl-label {
+			position: static;
+			transform: none;
+			border: none;
+			padding: 0;
+			font-size: 9px;
+			display: block !important;
+			opacity: 1 !important;
+		}
+		.rl-svg {
+			display: none;
+		}
+		.rl-edge-label {
+			display: none;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.rl-node {
+			transition: none !important;
+		}
+	}
+</style>
+
+<script>
+	function initRL() {
+		const root = document.querySelector("[data-rl]") as HTMLElement | null;
+		if (!root) return;
+		if (root.dataset.rlInit === "true") return;
+		root.dataset.rlInit = "true";
+
+		const svg = root.querySelector<SVGSVGElement>("[data-rl-svg]")!;
+		const container = root.querySelector<HTMLElement>("[data-rl-container]")!;
+		const statusEl = root.querySelector<HTMLElement>("[data-rl-status]")!;
+		const active = new Set(["ddos", "waf", "bots", "rate"]);
+		const ACCENT = "#f56500";
+		const prefersReducedMotion = window.matchMedia(
+			"(prefers-reduced-motion: reduce)",
+		).matches;
+
+		const NODES = [
+			{ id: "dns", security: false },
+			{ id: "tls", security: false },
+			{ id: "ddos", security: true, label: "DDoS" },
+			{ id: "waf", security: true, label: "WAF" },
+			{ id: "bots", security: true, label: "Bots" },
+			{ id: "rate", security: true, label: "Rate" },
+			{ id: "cache", security: false },
+			{ id: "origin", security: false },
+		];
+
+		// ---- kumo createRoundedPath (horizontal, single=true) ----
+		function makePath(x1: number, y1: number, x2: number, y2: number): string {
+			if (Math.abs(y2 - y1) <= 2) return `M ${x1} ${y1} L ${x2} ${y2}`;
+			const r = Math.min(8, Math.abs(y2 - y1) / 2);
+			const vx = x2 - 32;
+			const sx = x2 > x1 ? 1 : -1;
+			const sy = y2 > y1 ? 1 : -1;
+			return `M ${x1} ${y1} L ${vx - sx * r} ${y1} Q ${vx} ${y1} ${vx} ${y1 + sy * r} L ${vx} ${y2 - sy * r} Q ${vx} ${y2} ${vx + sx * r} ${y2} L ${x2} ${y2}`;
+		}
+
+		type Edge = { id: string; d: string };
+		let edges: Edge[] = [];
+
+		function draw() {
+			svg.querySelectorAll(".eg").forEach((g) => g.remove());
+			edges = [];
+			const cr = container.getBoundingClientRect();
+			const allIds = ["request", ...NODES.map((n) => n.id), "response"];
+			const vis = allIds.filter((id) => {
+				const n = NODES.find((n) => n.id === id);
+				return !n || !n.security || active.has(id);
+			});
+
+			for (let i = 0; i < vis.length - 1; i++) {
+				const fEl = root!.querySelector<HTMLElement>(
+					`[data-rl-node="${vis[i]}"]`,
+				);
+				const tEl = root!.querySelector<HTMLElement>(
+					`[data-rl-node="${vis[i + 1]}"]`,
+				);
+				if (!fEl || !tEl) continue;
+				const fr = fEl.getBoundingClientRect();
+				const tr = tEl.getBoundingClientRect();
+				const d = makePath(
+					fr.right - cr.left,
+					fr.top + fr.height / 2 - cr.top,
+					tr.left - cr.left,
+					tr.top + tr.height / 2 - cr.top,
+				);
+				const eid = `${vis[i]}-${vis[i + 1]}`;
+
+				const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+				g.classList.add("eg");
+				g.dataset.eid = eid;
+
+				const base = document.createElementNS(
+					"http://www.w3.org/2000/svg",
+					"path",
+				);
+				base.setAttribute("d", d);
+				base.setAttribute("fill", "none");
+				base.setAttribute("stroke", "currentColor");
+				base.setAttribute("stroke-width", "2");
+				base.setAttribute("marker-start", "url(#rl-pin)");
+				base.setAttribute("marker-end", "url(#rl-pin)");
+				g.appendChild(base);
+
+				const hl = document.createElementNS(
+					"http://www.w3.org/2000/svg",
+					"path",
+				);
+				hl.setAttribute("d", d);
+				hl.setAttribute("fill", "none");
+				hl.setAttribute("stroke", "transparent");
+				hl.setAttribute("stroke-width", "0");
+				hl.setAttribute("marker-start", "url(#rl-pin-a)");
+				hl.setAttribute("marker-end", "url(#rl-pin-a)");
+				hl.classList.add("ehl");
+				g.appendChild(hl);
+
+				svg.appendChild(g);
+				edges.push({ id: eid, d });
+			}
+		}
+
+		// ---- Toggles ----
+		const toggleCleanup: Array<() => void> = [];
+
+		root
+			.querySelectorAll<HTMLButtonElement>("[data-rl-toggle]")
+			.forEach((btn) => {
+				const id = btn.dataset.rlToggle!;
+				const color = btn.dataset.rlColor!;
+				const onClick = () => {
+					if (active.has(id)) active.delete(id);
+					else active.add(id);
+					apply();
+					requestAnimationFrame(draw);
+				};
+				function apply() {
+					const on = active.has(id);
+					btn.setAttribute("aria-pressed", String(on));
+					btn.style.color = on ? color : "";
+					const cell = root!.querySelector(
+						`[data-rl-cell="${id}"]`,
+					) as HTMLElement;
+					if (cell) {
+						if (on) cell.removeAttribute("data-rl-off");
+						else cell.setAttribute("data-rl-off", "");
+					}
+				}
+				btn.addEventListener("click", onClick);
+				toggleCleanup.push(() => btn.removeEventListener("click", onClick));
+				apply();
+			});
+
+		draw();
+		const resizeObserver = new ResizeObserver(draw);
+		resizeObserver.observe(container);
+		const onWindowResize = () => draw();
+		window.addEventListener("resize", onWindowResize, { passive: true });
+
+		// ---- Animation ----
+		let running = false;
+
+		const sendButton = root.querySelector<HTMLButtonElement>("[data-rl-send]");
+		if (!sendButton) return;
+		const onSendClick = () => {
+			if (!running) send();
+		};
+		sendButton.addEventListener("click", onSendClick);
+		const autoSendTimeout = window.setTimeout(send, 800);
+
+		function send() {
+			if (running) return;
+			running = true;
+			reset();
+
+			if (prefersReducedMotion) {
+				statusEl.textContent = "200 OK — Response delivered";
+				statusEl.style.color = ACCENT;
+				running = false;
+				return;
+			}
+
+			const threat = Math.random() < 0.3;
+			statusEl.textContent = threat
+				? "Scanning threat..."
+				: "Routing request...";
+			statusEl.style.color = threat ? "#ef4444" : "";
+
+			const vis = NODES.filter((n) => !n.security || active.has(n.id));
+			const ids = ["request", ...vis.map((n) => n.id), "response"];
+			const steps: { at: number; fn: () => void }[] = [];
+			let t = 0;
+
+			for (let i = 0; i < ids.length; i++) {
+				const nid = ids[i];
+				const pid = i > 0 ? ids[i - 1] : null;
+				const eid = pid ? `${pid}-${nid}` : null;
+
+				if (eid) {
+					const e = eid;
+					steps.push({
+						at: t,
+						fn: () => {
+							const g = svg.querySelector(`[data-eid="${e}"]`);
+							const h = g?.querySelector(".ehl") as SVGPathElement | null;
+							if (h) {
+								h.setAttribute("stroke", ACCENT);
+								h.setAttribute("stroke-width", "2");
+							}
+							const d = edges.find((x) => x.id === e)?.d;
+							if (d && g) {
+								const dot = document.createElementNS(
+									"http://www.w3.org/2000/svg",
+									"circle",
+								);
+								dot.setAttribute("r", "3");
+								dot.style.fill = ACCENT;
+								const anim = document.createElementNS(
+									"http://www.w3.org/2000/svg",
+									"animateMotion",
+								);
+								anim.setAttribute("dur", "0.8s");
+								anim.setAttribute("repeatCount", "1");
+								anim.setAttribute("path", d);
+								anim.setAttribute("fill", "freeze");
+								dot.appendChild(anim);
+								g.appendChild(dot);
+								setTimeout(() => dot.remove(), 850);
+							}
+						},
+					});
+					t += 800;
+				}
+
+				const cn = nid,
+					ce = eid;
+				const node = NODES.find((n) => n.id === cn);
+				steps.push({
+					at: t,
+					fn: () => {
+						if (ce) {
+							const h = svg.querySelector(
+								`[data-eid="${ce}"] .ehl`,
+							) as SVGPathElement | null;
+							if (h) {
+								h.setAttribute("stroke", "transparent");
+								h.setAttribute("stroke-width", "0");
+							}
+						}
+						if (node?.security && threat && rBlock(cn)) {
+							const st = root!.querySelector<HTMLElement>(
+								`[data-rl-st="${cn}"]`,
+							);
+							if (st) {
+								st.textContent = "BLOCKED";
+								st.style.color = "#ef4444";
+							}
+							statusEl.textContent = `403 — Blocked by ${node.label}`;
+							statusEl.style.color = "#ef4444";
+							return;
+						}
+						if (node?.security) {
+							const st = root!.querySelector<HTMLElement>(
+								`[data-rl-st="${cn}"]`,
+							);
+							if (st) {
+								st.textContent = "PASS";
+								st.style.color = "#10b981";
+							}
+						}
+					},
+				});
+				t += 200;
+			}
+
+			steps.push({
+				at: t,
+				fn: () => {
+					statusEl.textContent = "200 OK — Response delivered";
+					statusEl.style.color = ACCENT;
+					running = false;
+				},
+			});
+
+			let blocked = false;
+			const t0 = performance.now();
+			const q = [...steps];
+			function tick(now: number) {
+				if (blocked) return;
+				while (q.length && q[0].at <= now - t0) {
+					q.shift()!.fn();
+					if (statusEl.textContent?.includes("403")) {
+						blocked = true;
+						running = false;
+						return;
+					}
+				}
+				if (q.length) requestAnimationFrame(tick);
+				else running = false;
+			}
+			requestAnimationFrame(tick);
+		}
+
+		function reset() {
+			root!.querySelectorAll<HTMLElement>("[data-rl-st]").forEach((el) => {
+				el.textContent = "";
+				el.style.color = "";
+			});
+			svg.querySelectorAll("circle").forEach((d) => d.remove());
+			svg.querySelectorAll(".ehl").forEach((el) => {
+				el.setAttribute("stroke", "transparent");
+				el.setAttribute("stroke-width", "0");
+			});
+			statusEl.textContent = "";
+			statusEl.style.color = "";
+		}
+
+		function rBlock(id: string): boolean {
+			let h = 0;
+			for (let i = 0; i < id.length; i++)
+				h = ((h << 5) - h + id.charCodeAt(i)) | 0;
+			return (Math.abs(h) + Math.floor(Math.random() * 4)) % 7 < 2;
+		}
+
+		document.addEventListener(
+			"astro:before-swap",
+			() => {
+				window.clearTimeout(autoSendTimeout);
+				resizeObserver.disconnect();
+				window.removeEventListener("resize", onWindowResize);
+				sendButton.removeEventListener("click", onSendClick);
+				toggleCleanup.forEach((cleanup) => cleanup());
+				root.dataset.rlInit = "false";
+			},
+			{ once: true },
+		);
+	}
+
+	initRL();
+	document.addEventListener("astro:page-load", initRL);
+</script>
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
new file mode 100644
index 000000000000000..2960070c74ce2bb
--- /dev/null
+++ b/src/components/landing/SecureSection.astro
@@ -0,0 +1,111 @@
+---
+/**
+ * S6: Categorized grid with flair
+ *
+ * Two categories, three cards each. Cards have:
+ * - Large product icon as the visual anchor
+ * - Bold scenario text
+ * - Product name as accent mono label
+ * - CTA button links to product docs
+ * - Plus marks on the outer grid corners
+ * - gap-px grid technique from PlatformStats
+ */
+import ProductCard from "./ProductCard.astro";
+import ProductCardGrid from "./ProductCardGrid.astro";
+
+const categories = [
+	{
+		label: "Network & Application",
+		threats: [
+			{
+				scenario: "Under DDoS attack",
+				product: "WAF",
+				href: "/waf/custom-rules/",
+				icon: "ddos-protection",
+				detail: "Custom rules, rate limiting, automatic mitigation",
+			},
+			{
+				scenario: "SSL is fragile or misconfigured",
+				product: "SSL/TLS",
+				href: "/ssl/origin-configuration/ssl-modes/",
+				icon: "ssl",
+				detail: "Automatic certificates, strict mode, mTLS",
+			},
+			{
+				scenario: "Bots abusing login or forms",
+				product: "Turnstile",
+				href: "/turnstile/get-started/",
+				icon: "turnstile",
+				detail: "Invisible challenge, zero CAPTCHA friction",
+			},
+		],
+	},
+	{
+		label: "Access & Identity",
+		threats: [
+			{
+				scenario: "Expose internal services safely",
+				product: "Tunnel",
+				href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/get-started/create-remote-tunnel/",
+				icon: "tunnel",
+				detail: "Outbound-only encrypted tunnels, no open ports",
+			},
+			{
+				scenario: "Secure access to internal tools",
+				product: "Zero Trust",
+				href: "/cloudflare-one/setup/",
+				icon: "access",
+				detail: "Identity-aware access, device posture checks",
+			},
+			{
+				scenario: "Filter outbound traffic network-wide",
+				product: "Gateway",
+				href: "/cloudflare-one/traffic-policies/",
+				icon: "gateway",
+				detail: "DNS filtering, HTTP policies, network controls",
+			},
+		],
+	},
+];
+---
+
+<section
+	class="px-8 pt-14 pb-12 max-[900px]:px-5 max-[900px]:pt-10"
+	aria-labelledby="s6-heading"
+	id="secure"
+>
+	<div class="mb-8">
+		<span class="text-accent font-mono text-xs tracking-widest uppercase"
+			>Secure</span
+		>
+	</div>
+	<h2
+		id="s6-heading"
+		class="mb-1.5 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-100"
+	>
+		Secure what you already have
+	</h2>
+	<p
+		class="mb-8 max-w-[600px] text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400"
+	>
+		Add Cloudflare in front of what is already running — no rebuild required.
+	</p>
+
+	<div class="space-y-8">
+		{
+			categories.map((cat) => (
+				<ProductCardGrid label={cat.label}>
+					{cat.threats.map((t) => (
+						<ProductCard
+							icon={t.icon}
+							product={t.product}
+							scenario={t.scenario}
+							detail={t.detail}
+							href={t.href}
+						/>
+					))}
+				</ProductCardGrid>
+			))
+		}
+	</div>
+</section>
diff --git a/src/components/landing/StructuralGrid.astro b/src/components/landing/StructuralGrid.astro
new file mode 100644
index 000000000000000..d654155218ca121
--- /dev/null
+++ b/src/components/landing/StructuralGrid.astro
@@ -0,0 +1,82 @@
+---
+/**
+ * Structural grid overlay — dot grid + intersection markers.
+ *
+ * Works with FullPageLines.astro which draws the vertical lines.
+ * This component adds:
+ * 1. The dot grid background (full page)
+ * 2. Plus marks at line intersections (where vertical lines meet the top)
+ *
+ * The plus marks are placed at the same widths as FullPageLines tiers:
+ * - 1400px (outer scaffold)
+ * - 1280px (content container)
+ * - 1216px (content padding edge — where text starts)
+ * - 720px  (inner scaffold)
+ */
+
+/** Must match FullPageLines tier widths exactly */
+const LINE_TIERS = [
+	{ width: "min(1400px, 100%)", accent: false },
+	{ width: "min(1280px, calc(100% - 48px))", accent: true },
+	{ width: "min(1216px, calc(100% - 112px))", accent: false },
+	{ width: "min(720px, calc(100% - 120px))", accent: false },
+];
+
+const marks =
+	"absolute -top-0 left-1/2 -translate-x-1/2 h-full pointer-events-none";
+---
+
+<!-- Dot grid -->
+<div class="pointer-events-none absolute inset-0 z-0" aria-hidden="true">
+	<div
+		class="landing-dot-grid absolute h-full w-full"
+		style="background-image: radial-gradient(var(--l-dot-color) 1px, transparent 1px); background-size: var(--l-dot-size)"
+	></div>
+</div>
+
+<!-- Plus marks at line intersections -->
+<div
+	class="pointer-events-none absolute inset-0 z-1 [contain:layout_style_paint] max-[1024px]:hidden"
+	aria-hidden="true"
+>
+	<!-- Plus marks at each line tier intersection -->
+	{
+		LINE_TIERS.map((tier) => {
+			const stroke = tier.accent
+				? "var(--l-grid-mark-accent, var(--l-grid-mark))"
+				: "var(--l-grid-mark)";
+			const size = tier.accent ? 9 : 7;
+			const half = size / 2;
+			const offset = `-${half}px`;
+			return (
+				<div class={marks} style={`width:${tier.width}`}>
+					<svg
+						width={size}
+						height={size}
+						viewBox={`0 0 ${size} ${size}`}
+						shape-rendering="crispEdges"
+						class="absolute -top-[3px] -left-[3px]"
+						style={`margin-top:${offset};margin-left:${offset}`}
+						aria-hidden="true"
+					>
+						<line x1="0" y1={half} x2={size} y2={half} stroke={stroke} stroke-width="1" />
+						<line x1={half} y1="0" x2={half} y2={size} stroke={stroke} stroke-width="1" />
+					</svg>
+					<svg
+						width={size}
+						height={size}
+						viewBox={`0 0 ${size} ${size}`}
+						shape-rendering="crispEdges"
+						class="absolute -top-[3px] -right-[3px]"
+						style={`margin-top:${offset};margin-right:${offset}`}
+						aria-hidden="true"
+					>
+						<line x1="0" y1={half} x2={size} y2={half} stroke={stroke} stroke-width="1" />
+						<line x1={half} y1="0" x2={half} y2={size} stroke={stroke} stroke-width="1" />
+					</svg>
+				</div>
+			);
+		})
+	}
+
+</div>
diff --git a/src/components/landing/constants.ts b/src/components/landing/constants.ts
new file mode 100644
index 000000000000000..110e9d50ca9b6fd
--- /dev/null
+++ b/src/components/landing/constants.ts
@@ -0,0 +1,5 @@
+export const ACCENT = "#f56500";
+
+export function stagger(delay: number) {
+	return `animate-[v27-enter_0.6s_cubic-bezier(0.16,1,0.3,1)_${delay}s_both] motion-reduce:animate-none`;
+}
diff --git a/src/components/overrides/Page.astro b/src/components/overrides/Page.astro
index 67705d2852bc3e9..c08ed8517f60068 100644
--- a/src/components/overrides/Page.astro
+++ b/src/components/overrides/Page.astro
@@ -14,37 +14,43 @@ if (props.toc) {
 }
 
 if (props.hasSidebar) {
-	const group = await getSidebar(Astro);
-	props.sidebar = group.entries;
+	const pathname = Astro.url.pathname;
+	const segments = pathname.split("/").filter(Boolean);
 
-	if (props.pagination) {
-		const flattened = flattenSidebar(props.sidebar);
+	// Homepage provides its own sidebar via StarlightPage props — skip getSidebar
+	if (segments.length > 0) {
+		const group = await getSidebar(Astro);
+		props.sidebar = group.entries;
 
-		const idx = flattened.findIndex((entry) => entry.isCurrent);
+		if (props.pagination) {
+			const flattened = flattenSidebar(props.sidebar);
 
-		let prev = flattened[idx - 1];
-		let next = flattened[idx + 1];
+			const idx = flattened.findIndex((entry) => entry.isCurrent);
 
-		if (prev?.attrs["data-group-label"]) {
-			prev = {
-				...prev,
-				label: prev.attrs["data-group-label"],
-			};
-		}
+			let prev = flattened[idx - 1];
+			let next = flattened[idx + 1];
 
-		if (next?.attrs["data-group-label"]) {
-			next = {
-				...next,
-				label: next.attrs["data-group-label"],
-			};
-		}
+			if (prev?.attrs["data-group-label"]) {
+				prev = {
+					...prev,
+					label: prev.attrs["data-group-label"],
+				};
+			}
 
-		if (data.prev !== false) {
-			props.pagination.prev = prev;
-		}
+			if (next?.attrs["data-group-label"]) {
+				next = {
+					...next,
+					label: next.attrs["data-group-label"],
+				};
+			}
+
+			if (data.prev !== false) {
+				props.pagination.prev = prev;
+			}
 
-		if (data.next !== false) {
-			props.pagination.next = next;
+			if (data.next !== false) {
+				props.pagination.next = next;
+			}
 		}
 	}
 }
diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index 5e503494e696fb7..c8144ec0f32a9f7 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -5,26 +5,35 @@ import { Icon as AstroIcon } from "astro-icon/components";
 import { lookupProductTitle } from "~/util/sidebar";
 
 const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
+const isHomepage = !product;
+const productTitle = isHomepage
+	? null
+	: await lookupProductTitle(product, module);
 ---
 
-<div
-	class="sticky top-0 z-[1] flex flex-col gap-2 bg-[var(--sl-color-black)] py-3.5 min-[50rem]:bg-[var(--sl-color-bg-sidebar)]"
->
-	<div class="sidebar-product-title">
-		<a href={"/" + product + "/"} class="flex items-center gap-1 no-underline">
-			<AstroIcon name={product} size="32px" class="text-cl1-brand-orange" />
-			<span class="text-xl font-semibold text-black">
-				{lookupProductTitle(product, module)}
-			</span>
-		</a>
-	</div>
+<div class="sidebar-header">
+	{
+		!isHomepage && (
+			<div class="sidebar-product-title px-1">
+				<a
+					href={"/" + product + "/"}
+					class="flex items-center gap-2 no-underline"
+				>
+					<AstroIcon name={product} size="32px" class="text-cl1-brand-orange" />
+					<span class="text-xl text-black">
+						<strong>{productTitle}</strong>
+					</span>
+				</a>
+			</div>
+		)
+	}
 
 	<!-- Search Input -->
 	<div class="relative">
 		<input
 			type="search"
 			id="sidebar-search"
-			placeholder="Search sidebar..."
+			placeholder={isHomepage ? "Search products..." : "Search sidebar..."}
 			aria-label="Search sidebar navigation"
 			autocomplete="off"
 			spellcheck="false"
diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro
index 5cd0031adc01811..5dfdcb8c9dfa3c5 100644
--- a/src/components/overrides/SidebarSublist.astro
+++ b/src/components/overrides/SidebarSublist.astro
@@ -1,13 +1,15 @@
 ---
 import { Icon, Badge } from "@astrojs/starlight/components";
+import { Icon as AstroIcon } from "astro-icon/components";
 import type { SidebarEntry } from "~/util/sidebar";
 
 interface Props {
 	sublist: SidebarEntry[];
 	nested?: boolean;
+	headingChild?: boolean;
 }
 
-const { sublist, nested } = Astro.props;
+const { sublist, nested, headingChild } = Astro.props;
 
 /** Flatten a sidebar tree into a flat list of link entries. */
 function flattenSidebar(entries: SidebarEntry[]): SidebarEntry[] {
@@ -41,7 +43,9 @@ const restoreIndices = sublist.map((entry) =>
 	class:list={[
 		!nested
 			? "top-level list-none p-0"
-			: "mt-0.5 ml-3 list-none border-l border-[var(--sidebar-border)] p-0 pl-2",
+			: headingChild
+				? "mt-0.5 list-none p-0"
+				: "mt-0.5 ml-3 list-none border-l border-[var(--sidebar-border)] p-0 pl-2",
 	]}
 >
 	{
@@ -56,7 +60,7 @@ const restoreIndices = sublist.map((entry) =>
 							"outline-2 outline-offset-[-2px] outline-transparent focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400",
 							entry.isCurrent
 								? "!bg-[var(--sidebar-active-bg)] !font-semibold !text-[var(--sidebar-active-text)]"
-								: "transition-colors duration-150 text-[var(--sidebar-text)] hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-hover-text)]",
+								: "text-[var(--sidebar-text)] transition-colors duration-150 hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-hover-text)]",
 							!nested && "large",
 							entry.attrs.class,
 						]}
@@ -80,14 +84,19 @@ const restoreIndices = sublist.map((entry) =>
 							) || !entry.collapsed
 						}
 					>
-						<summary class:list={[
-							"group/expander flex min-h-[2.125rem] cursor-pointer items-center justify-between rounded-lg px-3 py-1.5 text-sm no-underline outline-2 outline-offset-[-2px] outline-transparent transition-colors duration-150 select-none focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400 [&::-webkit-details-marker]:hidden [&::marker]:hidden",
-							"hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-hover-text)]",
-							entry.hasActivePage
-								? "font-semibold text-[var(--sidebar-text-strong)]"
-								: "font-medium text-[var(--sidebar-text)]",
-						]}>
+						<summary
+							class:list={[
+								"group/expander flex min-h-[2.125rem] cursor-pointer items-center justify-between rounded-lg px-3 py-1.5 text-sm no-underline outline-2 outline-offset-[-2px] outline-transparent transition-colors duration-150 select-none focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400 [&::-webkit-details-marker]:hidden [&::marker]:hidden",
+								"hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-hover-text)]",
+								entry.hasActivePage
+									? "font-semibold text-[var(--sidebar-text-strong)]"
+									: "font-medium text-[var(--sidebar-text)]",
+							]}
+						>
 							<span class="group-label">
+								{entry.badge?.class?.includes("sidebar-group-icon") && (
+									<AstroIcon name={entry.badge.text} size="16px" class="group-icon shrink-0" />
+								)}
 								<span class:list={[!nested && "large"]}>{entry.label}</span>
 								{entry.badge && (
 									<Badge
@@ -99,14 +108,18 @@ const restoreIndices = sublist.map((entry) =>
 							</span>
 							<Icon
 								name="right-caret"
-								class="caret shrink-0 ml-auto -mr-px text-base text-[var(--sidebar-text)] opacity-50 group-hover/expander:text-[var(--sidebar-hover-text)] transition-transform duration-250"
+								class="caret -mr-px ml-auto shrink-0 text-base text-[var(--sidebar-text)] opacity-50 transition-transform duration-250 group-hover/expander:text-[var(--sidebar-hover-text)]"
 								size="1.25rem"
 							/>
 						</summary>
 						<sl-sidebar-restore data-index={restoreIndices[idx]} />
 						<div class="sidebar-accordion grid grid-rows-[0fr] group-open/accordion:grid-rows-[1fr]">
-							<div class="sidebar-accordion-inner overflow-hidden min-h-0">
-								<Astro.self sublist={entry.entries} nested />
+							<div class="sidebar-accordion-inner min-h-0 overflow-hidden">
+								<Astro.self
+									sublist={entry.entries}
+									nested
+									headingChild={entry.badge?.class?.includes("sidebar-heading")}
+								/>
 							</div>
 						</div>
 					</details>
diff --git a/src/icons/kv.svg b/src/icons/kv.svg
index d6740f2d26e1158..df28e6e67296073 100644
--- a/src/icons/kv.svg
+++ b/src/icons/kv.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none" viewBox="0 0 64 64"><path fill="#f6821f" d="M22 44.95h-7v-4h7zm-7-8h7v-4h-7zm7-8h-7v-4h7zm4 16h23v-4H26zm23-8H26v-4h23zm-23-8h23v-4H26z"/><path fill="#f6821f" fill-rule="evenodd" d="m6 12 2-2h19l1.675.907 3.408 5.225H56l2 2V52l-2 2H8l-2-2zm4 2v36h44V20.132H31l-1.675-.908L25.917 14z" clip-rule="evenodd"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none" viewBox="0 0 64 64"><path fill="currentColor" d="M22 44.95h-7v-4h7zm-7-8h7v-4h-7zm7-8h-7v-4h7zm4 16h23v-4H26zm23-8H26v-4h23zm-23-8h23v-4H26z"/><path fill="currentColor" fill-rule="evenodd" d="m6 12 2-2h19l1.675.907 3.408 5.225H56l2 2V52l-2 2H8l-2-2zm4 2v36h44V20.132H31l-1.675-.908L25.917 14z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d316c8ff52d028e..3b54232c534c54b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,259 +1,402 @@
 ---
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
+import type { StarlightPageProps } from "@astrojs/starlight/props";
+import StructuralGrid from "../components/landing/StructuralGrid.astro";
+import FullPageLines from "../components/landing/FullPageLines.astro";
+import Hero from "../components/landing/Hero.astro";
+import PlatformStats from "../components/landing/PlatformStats.astro";
+import BuildFromScratch from "../components/landing/BuildFromScratch.astro";
+import SecureSection from "../components/landing/SecureSection.astro";
+import RequestLifecycle from "../components/landing/RequestLifecycle.astro";
+import AccelerateSection from "../components/landing/AccelerateSection.astro";
+import "../styles/landing.css";
 
-import HeroImageDark from "~/assets/Dev-Docs-Header-Illustration-Dark-Mode-cropped.svg";
-import HeroImageLight from "~/assets/Dev-Docs-Header-Illustration-Light-Mode-cropped.svg";
+const heading = (icon: string) => ({
+	text: icon,
+	variant: "default" as const,
+	class: "sidebar-heading",
+});
 
-import SectionImageDeveloperPlatformDark from "~/assets/developer-platform-dark.svg";
-import SectionImageDeveloperPlatformLight from "~/assets/developer-platform-light.svg";
-import SectionImageZeroTrustDark from "~/assets/zero-trust-dark.svg";
-import SectionImageZeroTrustLight from "~/assets/zero-trust-light.svg";
+const groupIcon = (icon: string) => ({
+	text: icon,
+	variant: "default" as const,
+	class: "sidebar-group-icon",
+});
 
-import {
-	FourCardGrid,
-	ListCard,
-	TryItSection,
-	FeaturedContentSection,
-	RecommendedContentSection,
-	FooterHeroBlock,
-} from "~/components";
-
-const frontmatter = {
-	title: "Welcome to Cloudflare",
-	description:
-		"Explore guides and tutorials to start building on Cloudflare's platform",
-	template: "splash",
-	hero: {
-		title: "Welcome to Cloudflare",
-		tagline:
-			"Explore guides and tutorials to start building on Cloudflare's platform",
-		image: {
-			dark: HeroImageDark,
-			light: HeroImageLight,
-		},
-	},
-} as const;
-
-const topCards = [
+const sidebar = [
 	{
-		title: "Featured",
-		links: [
-			{ text: "AI tools", href: "/style-guide/ai-tooling/" },
+		label: "Get started",
+		collapsed: false,
+		badge: heading("heading-get-started"),
+		items: [
+			{ label: "Overview", link: "/" },
+			{ label: "Fundamentals", link: "/fundamentals/" },
+			{ label: "API reference", link: "/api/" },
 			{
-				text: "Troubleshoot errors",
-				href: "/support/troubleshooting/http-status-codes/",
+				label: "Troubleshooting",
+				link: "/support/troubleshooting/http-status-codes/",
 			},
-			{ text: "Register a domain", href: "/registrar/" },
-			{ text: "Setup 1.1.1.1", href: "/1.1.1.1/setup/" },
-			{
-				text: "Get started with Cloudflare",
-				href: "/learning-paths/get-started/concepts/",
-			},
-		],
-		cta: {
-			text: "View all docs",
-			href: "/directory/",
-		},
-	},
-	{
-		title: "Developer Products",
-		links: [
-			{ text: "Workers", href: "/workers/" },
-			{ text: "Pages", href: "/pages/" },
-			{ text: "R2", href: "/r2/" },
-			{ text: "Images", href: "/images/" },
-			{ text: "Stream", href: "/stream/" },
-		],
-		cta: {
-			text: "View all developer products",
-			href: "/directory/?product-group=Developer+platform",
-		},
-	},
-	{
-		title: "AI Products",
-		links: [
-			{ text: "AI Search", href: "/ai-search/" },
-			{ text: "Workers AI", href: "/workers-ai/" },
-			{ text: "AI Crawl Control", href: "/ai-crawl-control/" },
-			{ text: "AI Gateway", href: "/ai-gateway/" },
-			{ text: "AI Agents", href: "/agents/" },
 		],
-		cta: {
-			text: "View all AI products",
-			href: "/directory/?product-group=AI",
-		},
 	},
 	{
-		title: "Zero Trust",
-		links: [
-			{ text: "Access", href: "/cloudflare-one/access-controls/policies/" },
+		label: "Build",
+		collapsed: false,
+		badge: heading("heading-build"),
+		items: [
 			{
-				text: "Tunnel",
-				href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
+				label: "Compute",
+				collapsed: true,
+				badge: groupIcon("workers"),
+				items: [
+					{ label: "Workers", link: "/workers/" },
+					{ label: "Pages", link: "/pages/" },
+					{ label: "Containers", link: "/containers/" },
+					{ label: "Workflows", link: "/workflows/" },
+					{ label: "Durable Objects", link: "/durable-objects/" },
+					{ label: "Queues", link: "/queues/" },
+					{ label: "Pipelines", link: "/pipelines/" },
+					{
+						label: "Cloudflare for Platforms",
+						link: "/cloudflare-for-platforms/",
+					},
+					{ label: "Workers VPC", link: "/workers-vpc/" },
+				],
 			},
-			{ text: "Gateway", href: "/cloudflare-one/traffic-policies/" },
 			{
-				text: "Browser Isolation",
-				href: "/cloudflare-one/remote-browser-isolation/",
+				label: "AI",
+				collapsed: true,
+				badge: groupIcon("workers-ai"),
+				items: [
+					{ label: "Workers AI", link: "/workers-ai/" },
+					{ label: "AI Gateway", link: "/ai-gateway/" },
+					{ label: "AI Search", link: "/ai-search/" },
+					{ label: "AI Agents", link: "/agents/" },
+					{ label: "Vectorize", link: "/vectorize/" },
+					{ label: "Browser Rendering", link: "/browser-rendering/" },
+					{ label: "AI Crawl Control", link: "/ai-crawl-control/" },
+				],
 			},
 			{
-				text: "Replace your VPN",
-				href: "/learning-paths/replace-vpn/concepts/",
+				label: "Storage & Database",
+				collapsed: true,
+				badge: groupIcon("kv"),
+				items: [
+					{ label: "D1", link: "/d1/" },
+					{ label: "R2", link: "/r2/" },
+					{ label: "KV", link: "/kv/" },
+					{ label: "Hyperdrive", link: "/hyperdrive/" },
+				],
+			},
+			{
+				label: "Media",
+				collapsed: true,
+				badge: groupIcon("images"),
+				items: [
+					{ label: "Images", link: "/images/" },
+					{ label: "Stream", link: "/stream/" },
+					{ label: "Realtime", link: "/realtime/" },
+				],
 			},
 		],
-		cta: {
-			text: "View all Cloudflare One products",
-			href: "/directory/?product-group=Cloudflare+One",
-		},
 	},
-];
-
-const featuredSections = [
 	{
-		title: "Developer Platform",
-		text: "The Cloudflare Developer Platform provides a serverless execution environment that allows you to create entirely new applications or augment existing ones without configuring or maintaining infrastructure.",
-		image: {
-			light: SectionImageDeveloperPlatformLight,
-			dark: SectionImageDeveloperPlatformDark,
-		},
-		imagePosition: "before",
-		cards: [
-			// Currently unused.
-			// {
-			// 	title: "Create API Tokens",
-			// 	text: "If you are going to be using the Cloudflare API, you first need an API token to authenticate your requests.",
-			// 	cta: {
-			// 		title: "Create Tokens",
-			// 		href: "/fundamentals/api/get-started/create-token/",
-			// 	},
-			// },
-			// {
-			// 	title: "View Workers Examples",
-			// 	text: "Review fully functional sample scripts to get started with Workers.",
-			// 	cta: {
-			// 		title: "View Examples",
-			// 		href: "/workers/examples/",
-			// 	},
-			// },
+		label: "Protect & Connect",
+		collapsed: false,
+		badge: heading("heading-protect-connect"),
+		items: [
+			{
+				label: "Application Security",
+				collapsed: true,
+				badge: groupIcon("waf"),
+				items: [
+					{ label: "WAF", link: "/waf/" },
+					{ label: "DDoS Protection", link: "/ddos-protection/" },
+					{ label: "SSL/TLS", link: "/ssl/" },
+					{ label: "Bots", link: "/bots/" },
+					{ label: "API Shield", link: "/api-shield/" },
+					{ label: "Page Shield", link: "/page-shield/" },
+					{ label: "Turnstile", link: "/turnstile/" },
+					{ label: "Security Center", link: "/security-center/" },
+				],
+			},
+			{
+				label: "Zero Trust",
+				collapsed: true,
+				badge: groupIcon("cloudflare-one"),
+				items: [
+					{ label: "Cloudflare One", link: "/cloudflare-one/" },
+					{
+						label: "Access",
+						link: "/cloudflare-one/access-controls/policies/",
+					},
+					{
+						label: "Tunnel",
+						link: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
+					},
+					{ label: "Gateway", link: "/cloudflare-one/traffic-policies/" },
+					{
+						label: "Browser Isolation",
+						link: "/cloudflare-one/remote-browser-isolation/",
+					},
+					{ label: "WARP Client", link: "/warp-client/" },
+					{ label: "Email Security", link: "/email-security/" },
+				],
+			},
+			{
+				label: "Networking",
+				collapsed: true,
+				badge: groupIcon("network"),
+				items: [
+					{ label: "Magic Transit", link: "/magic-transit/" },
+					{ label: "Magic WAN", link: "/cloudflare-wan/" },
+					{ label: "Network Interconnect", link: "/network-interconnect/" },
+					{ label: "Spectrum", link: "/spectrum/" },
+					{ label: "BYOIP", link: "/byoip/" },
+				],
+			},
+			{
+				label: "Delivery & Performance",
+				collapsed: true,
+				badge: groupIcon("speed"),
+				items: [
+					{ label: "Cache", link: "/cache/" },
+					{ label: "Speed", link: "/speed/" },
+					{ label: "Load Balancing", link: "/load-balancing/" },
+					{ label: "Waiting Room", link: "/waiting-room/" },
+					{ label: "Argo Smart Routing", link: "/argo-smart-routing/" },
+					{ label: "Zaraz", link: "/zaraz/" },
+				],
+			},
 		],
 	},
 	{
-		title: "Zero Trust",
-		text: "Cloudflare Zero Trust replaces legacy security perimeters with our global network, making the Internet faster and safer for teams around the world.",
-		image: {
-			light: SectionImageZeroTrustLight,
-			dark: SectionImageZeroTrustDark,
-		},
-		imagePosition: "after",
-		cards: [
+		label: "Manage & Observe",
+		collapsed: false,
+		badge: heading("heading-other"),
+		items: [
+			{
+				label: "Domains & DNS",
+				collapsed: true,
+				badge: groupIcon("dns"),
+				items: [
+					{ label: "DNS", link: "/dns/" },
+					{ label: "1.1.1.1", link: "/1.1.1.1/" },
+					{ label: "Registrar", link: "/registrar/" },
+					{ label: "Email Routing", link: "/email-routing/" },
+					{ label: "DMARC Management", link: "/dmarc-management/" },
+				],
+			},
 			{
-				title: "Install the WARP Client",
-				text: "The Cloudflare WARP client allows individuals and organizations to have a faster, more secure, and more private experience online.",
-				cta: {
-					title: "Get started",
-					href: "/cloudflare-one/team-and-resources/devices/warp/",
-				},
+				label: "Observe",
+				collapsed: true,
+				badge: groupIcon("analytics"),
+				items: [
+					{ label: "Analytics", link: "/analytics/" },
+					{ label: "Web Analytics", link: "/web-analytics/" },
+					{ label: "Logs", link: "/logs/" },
+					{ label: "Log Explorer", link: "/log-explorer/" },
+					{ label: "Health Checks", link: "/health-checks/" },
+				],
 			},
 			{
-				title: "Set up a tunnel",
-				text: "Cloudflare Tunnel provides you with a secure way to connect your resources to Cloudflare without a publicly routable IP address.",
-				cta: {
-					title: "Set up a tunnel",
-					href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
-				},
+				label: "Resources",
+				collapsed: true,
+				badge: groupIcon("learning-paths"),
+				items: [
+					{ label: "Learning paths", link: "/learning-paths/" },
+					{ label: "All products", link: "/directory/" },
+					{ label: "Terraform", link: "/terraform/" },
+					{ label: "Pulumi", link: "/pulumi/" },
+					{ label: "Reference architecture", link: "/reference-architecture/" },
+					{ label: "Support", link: "/support/" },
+				],
 			},
 		],
 	},
 ];
 
-const recommendedSection = {
-	title: "Other docs you might also like",
-	cards: [
-		{
-			title: "Install an Origin CA certificate",
-			text: "Use Origin Certificate Authority (CA) certificates to encrypt traffic between Cloudflare and your origin web server and reduce origin bandwidth.",
-			cta: {
-				title: "Install Origin CA",
-				href: "/ssl/origin-configuration/origin-ca/",
-			},
-		},
-		{
-			title: "Change your nameservers",
-			text: "Make Cloudflare your primary DNS provider by updating your authoritative nameservers at your domain registrar.",
-			cta: {
-				title: "Update nameservers",
-				href: "/dns/zone-setups/full-setup/setup/",
-			},
-		},
-		{
-			title: "SSL/TLS Encryption mode",
-			text: "Your domain's encryption mode controls how Cloudflare connects to your origin server and how SSL certificates at your origin will be validated.",
-			cta: {
-				title: "Set encryption mode",
-				href: "/ssl/origin-configuration/ssl-modes/",
-			},
-		},
-		{
-			title: "Allow traffic from specific countries only",
-			text: "Block requests based on a list of allowed countries by configuring a custom rule in the Web Application Firewall (WAF).",
-			cta: {
-				title: "Allow traffic from specific countries only",
-				href: "/waf/custom-rules/use-cases/allow-traffic-from-specific-countries/",
-			},
-		},
-	],
-};
+const props = {
+	frontmatter: {
+		title: "Cloudflare Developer Docs",
+		description:
+			"Build, protect, and accelerate anything on Cloudflare's global network. Deploy serverless applications, secure your perimeter, and deliver content from 330+ cities worldwide.",
+		template: "doc",
+		tableOfContents: false,
+	},
+	sidebar,
+	hasSidebar: true,
+	hideBreadcrumbs: true,
+	hideTitle: true,
+	headings: [],
+} as StarlightPageProps;
 ---
 
-<StarlightPage frontmatter={frontmatter}>
-	<FourCardGrid>
-		{
-			topCards.map((card) => (
-				<ListCard title={card.title}>
-					<ul>
-						{card.links.map((link) => (
-							<li>
-								<a
-									href={link.href}
-									class="hover:text-accent! dark:text-accent-high! text-black! dark:hover:text-black!"
-								>
-									{link.text}
-								</a>
-							</li>
-						))}
-					</ul>
-					<p>
-						<strong>
-							<a href={card.cta.href}>{card.cta.text}</a>
-						</strong>
-					</p>
-				</ListCard>
-			))
-		}
-	</FourCardGrid>
-	<div class="hidden md:block">
-		<hr />
-		<TryItSection />
-		<hr />
-		{
-			featuredSections.map((section) => (
-				<>
-					<FeaturedContentSection
-						title={section.title}
-						text={section.text}
-						image={section.image}
-						imagePosition={section.imagePosition}
-						cards={section.cards}
-					/>
-					<hr />
-				</>
-			))
-		}
-		<RecommendedContentSection
-			title={recommendedSection.title}
-			cards={recommendedSection.cards}
-		/>
-		<hr />
-		<FooterHeroBlock />
+<StarlightPage {...props}>
+	<div class="landing-root">
+		<div class="relative">
+			<FullPageLines />
+			<StructuralGrid />
+			<main class="relative z-10 mx-auto max-w-[1280px]" id="main-content">
+				<!-- Origin marker -->
+				<div class="relative h-0 max-[1024px]:hidden">
+					<div class="pointer-events-none absolute inset-0">
+						<svg
+							class="v27-broadcast"
+							width="56"
+							height="56"
+							viewBox="0 0 56 56"
+							style="animation-delay:0s;margin-left:0;margin-top:32px"
+							><line
+								x1="0"
+								y1="28"
+								x2="56"
+								y2="28"
+								stroke="#f56500"
+								stroke-width="1"></line><line
+								x1="28"
+								y1="0"
+								x2="28"
+								y2="56"
+								stroke="#f56500"
+								stroke-width="1"></line></svg
+						>
+						<svg
+							class="v27-broadcast"
+							width="56"
+							height="56"
+							viewBox="0 0 56 56"
+							style="animation-delay:2s;margin-left:0;margin-top:32px"
+							><line
+								x1="0"
+								y1="28"
+								x2="56"
+								y2="28"
+								stroke="#f56500"
+								stroke-width="1"></line><line
+								x1="28"
+								y1="0"
+								x2="28"
+								y2="56"
+								stroke="#f56500"
+								stroke-width="1"></line></svg
+						>
+						<svg
+							class="v27-origin-static"
+							width="28"
+							height="28"
+							viewBox="0 0 28 28"
+							style="margin-left:0;margin-top:32px"
+							><line
+								x1="0"
+								y1="14"
+								x2="28"
+								y2="14"
+								stroke="#f56500"
+								stroke-width="1"></line><line
+								x1="14"
+								y1="0"
+								x2="14"
+								y2="28"
+								stroke="#f56500"
+								stroke-width="1"></line></svg
+						>
+					</div>
+				</div>
+
+				<Hero />
+				<PlatformStats />
+
+				<BuildFromScratch />
+
+				<RequestLifecycle />
+
+				<SecureSection />
+
+				<AccelerateSection />
+			</main>
+		</div>
 	</div>
 </StarlightPage>
+
+<script>
+	// Instant scroll to hash target on page load (no smooth animation).
+	// Subsequent in-page clicks use CSS scroll-behavior: smooth.
+	{
+		const hash = window.location.hash;
+		if (hash.length > 1) {
+			let target: Element | null = null;
+			let id = hash.slice(1);
+			try {
+				id = decodeURIComponent(id);
+			} catch {
+				// keep raw id when hash is malformed
+			}
+			target = document.getElementById(id);
+			if (!target) {
+				try {
+					target = document.querySelector(hash);
+				} catch {
+					target = null;
+				}
+			}
+			if (target) {
+				// Temporarily disable smooth scrolling for the initial jump
+				const html = document.documentElement;
+				const prev = html.style.scrollBehavior;
+				html.style.scrollBehavior = "auto";
+				requestAnimationFrame(() => {
+					target.scrollIntoView();
+					// Restore after the frame so future clicks are smooth again
+					requestAnimationFrame(() => {
+						html.style.scrollBehavior = prev;
+					});
+				});
+			}
+		}
+	}
+</script>
+
+<style is:global>
+	/* Starlight layout overrides */
+	.right-sidebar-container,
+	mobile-starlight-toc {
+		display: none;
+	}
+
+	.main-frame {
+		padding-top: var(--sl-nav-height);
+	}
+	.main-pane {
+		padding: 0;
+		gap: 0;
+		isolation: isolate;
+		z-index: 0;
+	}
+	.content-panel {
+		padding: 0;
+		margin: 0;
+		overflow: visible;
+	}
+	.sl-container {
+		max-width: none;
+		margin: 0;
+		padding: 0;
+		overflow: visible;
+	}
+	.sl-markdown-content {
+		margin: 0;
+		padding: 0;
+		overflow: visible;
+	}
+	.sl-markdown-content > :first-child {
+		margin-top: 0;
+	}
+	.sl-markdown-content
+		:not(a, strong, em, del, span, input, code, br)
+		+ :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
+		margin-top: 0;
+	}
+	footer {
+		display: none;
+	}
+</style>
diff --git a/src/pages/request-lifecycle.astro b/src/pages/request-lifecycle.astro
new file mode 100644
index 000000000000000..ef35d0442c6737e
--- /dev/null
+++ b/src/pages/request-lifecycle.astro
@@ -0,0 +1,63 @@
+---
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
+import type { StarlightPageProps } from "@astrojs/starlight/props";
+import RequestLifecycleSection from "../components/landing/RequestLifecycle.astro";
+
+import "../styles/landing.css";
+
+const props = {
+	frontmatter: {
+		title: "Request Lifecycle",
+		description: "Interactive request lifecycle visualization",
+		template: "doc",
+		tableOfContents: false,
+	},
+	sidebar: [],
+	hasSidebar: false,
+	hideBreadcrumbs: true,
+	hideTitle: true,
+	headings: [],
+} as StarlightPageProps;
+---
+
+<StarlightPage {...props}>
+	<div class="landing-root">
+		<RequestLifecycleSection />
+	</div>
+</StarlightPage>
+
+<style is:global>
+	.right-sidebar-container,
+	mobile-starlight-toc {
+		display: none;
+	}
+	.main-frame {
+		padding-top: var(--sl-nav-height);
+	}
+	.main-pane {
+		padding: 0;
+		gap: 0;
+	}
+	.content-panel {
+		padding: 0;
+		margin: 0;
+		overflow: visible;
+	}
+	.sl-container {
+		max-width: none;
+		margin: 0;
+		padding: 0;
+	}
+	.sl-markdown-content {
+		margin: 0;
+		padding: 0;
+	}
+	.sl-markdown-content > :first-child {
+		margin-top: 0;
+	}
+	.sl-markdown-content
+		:not(a, strong, em, del, span, input, code, br)
+		+ :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
+		margin-top: 0;
+	}
+</style>
diff --git a/src/styles/landing.css b/src/styles/landing.css
new file mode 100644
index 000000000000000..ceccea13ad302c8
--- /dev/null
+++ b/src/styles/landing.css
@@ -0,0 +1,149 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@font-face {
+	font-family: "Inter Tight";
+	font-display: swap;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	html {
+		scroll-behavior: smooth;
+	}
+}
+
+@theme {
+	--color-accent: #f56500;
+
+	/* Shared landing card surfaces — used across Stats, Build, Secure */
+	--color-l-card: #fff;
+	--color-l-card-dark: #1d1d1d;
+	--color-l-card-hover: #fff;
+	--color-l-card-hover-dark: #252525;
+
+	@keyframes v27-enter {
+		from {
+			opacity: 0;
+			transform: translateY(12px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes v27-broadcast-ring {
+		0% {
+			opacity: 0.3;
+			transform: translate(-50%, -50%) scale(1);
+		}
+		100% {
+			opacity: 0;
+			transform: translate(-50%, -50%) scale(2);
+		}
+	}
+}
+
+@utility v27-broadcast {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%) scale(1);
+	opacity: 0.3;
+	animation: v27-broadcast-ring 4s ease-out infinite;
+	pointer-events: none;
+	will-change: transform, opacity;
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: none !important;
+		opacity: 0.15;
+	}
+}
+
+@utility v27-origin-static {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	pointer-events: none;
+}
+
+@layer base {
+	:root {
+		--tw-accent-200: var(--orange-accent-200);
+		--tw-accent-600: var(--orange-accent-600);
+		--tw-accent-900: var(--orange-accent-900);
+	}
+
+	:root[data-theme="dark"] {
+		--tw-accent-200: var(--orange-accent-200);
+		--tw-accent-600: var(--orange-accent-600);
+		--tw-accent-900: var(--orange-accent-900);
+	}
+
+	* {
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	body {
+		font-family:
+			Inter,
+			ui-sans-serif,
+			system-ui,
+			-apple-system,
+			Segoe UI,
+			Roboto,
+			Helvetica,
+			Arial,
+			sans-serif;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+}
+
+/*
+ * Landing page root — font and layout only.
+ * StructuralGrid CSS variables live here because they need
+ * complex values (radial-gradient, mask-image) with no Tailwind equivalent.
+ */
+.landing-root {
+	overflow-x: clip;
+	font-family:
+		"Inter Tight",
+		Inter,
+		-apple-system,
+		sans-serif;
+	line-height: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	color: #18181b;
+
+	--l-dot-color: #efeff1;
+	--l-dot-size: 18px 18px;
+	--l-dot-mask: radial-gradient(
+		ellipse 50% 50% at 50% 50%,
+		#000 60%,
+		transparent 100%
+	);
+	--l-grid-mark: rgba(0, 0, 0, 0.08);
+	--l-grid-mark-accent: rgba(0, 0, 0, 0.12);
+	--l-h-line: rgba(0, 0, 0, 0.05);
+	--l-h-line-fine: rgba(0, 0, 0, 0.025);
+}
+
+:root[data-theme="dark"] .landing-root {
+	color: #fafafa;
+
+	--l-dot-color: rgba(255, 255, 255, 0.05);
+	--l-dot-size: 22px 22px;
+	--l-dot-mask: radial-gradient(
+		ellipse 45% 45% at 50% 50%,
+		#000 40%,
+		transparent 100%
+	);
+	--l-grid-mark: rgba(255, 255, 255, 0.1);
+	--l-grid-mark-accent: rgba(255, 255, 255, 0.16);
+	--l-h-line: rgba(255, 255, 255, 0.06);
+	--l-h-line-fine: rgba(255, 255, 255, 0.03);
+}
diff --git a/src/styles/layout.css b/src/styles/layout.css
index c6fc9c0c735eadb..044419479a6d35a 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -55,14 +55,24 @@ main > .content-panel + .content-panel {
 
 /* ── Right Sidebar (TOC) Alignment ── */
 .right-sidebar-panel {
-	padding-top: var(--layout-space-6);
-	padding-left: var(--layout-space-6);
+	padding-top: var(--layout-space-6) !important;
+	padding-left: var(--layout-space-6) !important;
 }
 
-/* ── Dividers ── */
-/* TOC vertical divider — whitespace does the separation work */
-.right-sidebar {
-	border-inline-start: none;
+/* ── Right Sidebar (TOC) Positioning ── */
+/* Override Starlight's position: fixed with sticky.
+   Starlight scopes its styles with [data-astro-cid-*] attribute selectors,
+   giving them specificity 0,2,0 which beats our bare class selectors (0,1,0).
+   We must use !important to override the scoped declarations. */
+@media (min-width: 72rem) {
+	.right-sidebar {
+		position: sticky !important;
+		top: var(--sl-nav-height) !important;
+		height: auto !important;
+		max-height: calc(100vh - var(--sl-nav-height));
+		padding-top: 0 !important;
+		border-inline-start: none !important;
+	}
 }
 
 /* Header/body horizontal divider — replaced by spacing only */
@@ -72,8 +82,8 @@ main > .content-panel + .content-panel {
 }
 
 .right-sidebar-panel .sl-container {
-	width: 100%;
-	max-width: var(--layout-toc-width);
+	width: 100% !important;
+	max-width: var(--layout-toc-width) !important;
 }
 
 /* ── Breadcrumb Spacing ── */
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
index 445b71653afaf42..0a77db0b2987b4d 100644
--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@@ -2,11 +2,96 @@
 	scrollbar-gutter: stable;
 }
 
+.sidebar-header {
+	position: sticky;
+	top: 0;
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding: 1rem 0;
+	background-color: var(--sl-color-bg-sidebar, var(--sl-color-bg));
+}
+
 .sidebar-content {
 	gap: 2px;
 	padding: 0rem 1.5rem 1.5rem 1.5rem;
 }
 
+/* ── Non-clickable section headings ──
+   Groups with a .sidebar-heading badge render as static labels
+   that visually separate sidebar sections without being interactive. */
+.sidebar-heading {
+	display: none !important;
+}
+
+.sidebar-content details:has(> summary .sidebar-heading) > summary {
+	pointer-events: none;
+	cursor: default;
+	margin-top: 0.75rem;
+	margin-bottom: 0.25rem;
+}
+
+.sidebar-content
+	details:has(> summary .sidebar-heading)
+	> summary
+	.group-label {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+}
+
+.sidebar-content
+	details:has(> summary .sidebar-heading)
+	> summary
+	.group-label
+	> span {
+	font-size: 0.6875rem;
+	font-weight: 500;
+	color: var(--sidebar-text-strong);
+	opacity: 0.45;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+.sidebar-content details:has(> summary .sidebar-heading) > summary .caret {
+	display: none;
+}
+
+.sidebar-content details:has(> summary .sidebar-heading) > summary:hover {
+	background-color: transparent !important;
+}
+
+/* First heading group needs no top margin */
+.sidebar-content
+	> .top-level
+	> li:first-child
+	details:has(> summary .sidebar-heading)
+	> summary {
+	margin-top: 0;
+}
+
+/* ── Animated group icons ──
+   Product icons on sub-group summaries that animate on hover. */
+.sidebar-group-icon {
+	display: none !important;
+}
+
+.sidebar-content summary .group-label > astro-island {
+	display: contents;
+}
+
+.sidebar-content summary .group-icon {
+	flex-shrink: 0;
+	color: var(--sidebar-text);
+}
+
+.sidebar-content summary .group-label:has(.group-icon) {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+}
+
 /* ── Light theme ── */
 :root[data-theme="light"] {
 	--sl-color-bg-nav: var(--color-cl1-white);
@@ -33,8 +118,8 @@
 	--sidebar-hover-text: var(--sidebar-text-strong);
 	--sidebar-active-bg: var(--color-cl1-gray-2);
 	--sidebar-active-text: var(--sidebar-text-strong);
-	--sidebar-border: var(--color-cl1-gray-2);
-	--sidebar-border-hover: var(--color-cl1-gray-3);
+	--sidebar-border: color-mix(in srgb, white 5%, transparent);
+	--sidebar-border-hover: color-mix(in srgb, white 10%, transparent);
 	--sl-color-sidebar-active: var(--sidebar-text-strong);
 	--sl-color-sidebar-hover: var(--color-cl1-gray-2);
 }

From 7a363598b727eeb4b62d67255438d09fa95f5dc4 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Mon, 30 Mar 2026 17:58:05 +0100
Subject: [PATCH 02/35] feat: improve spacing

---
 src/components/landing/AccelerateSection.astro | 6 +++---
 src/components/landing/BuildFromScratch.astro  | 4 ++--
 src/components/landing/RequestLifecycle.astro  | 2 +-
 src/components/landing/SecureSection.astro     | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index cb8635749db424b..e0a50e1d331d21d 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -116,19 +116,19 @@ const beforeTotal = "~1,240 ms";
 ---
 
 <section
-	class="px-8 pt-20 pb-20 max-[900px]:px-5 max-[900px]:pt-14 max-[900px]:pb-14"
+	class="px-8 pt-14 pb-14 max-[900px]:px-5 max-[900px]:pt-10 max-[900px]:pb-10"
 	aria-labelledby="accelerate-heading"
 	id="accelerate"
 >
 	<!-- Section header -->
-	<div class="mb-8">
+	<div class="mb-3">
 		<span class="text-accent font-mono text-xs tracking-widest uppercase"
 			>Accelerate</span
 		>
 	</div>
 	<h2
 		id="accelerate-heading"
-		class="mb-1.5 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-100"
+		class="mb-2 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-100"
 	>
 		See where the milliseconds go
 	</h2>
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index 3703facfff60cb8..1ff6f6f88d291c5 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -99,7 +99,7 @@ const primitives = [
 ---
 
 <section
-	class="px-8 pt-14 pb-4 max-[900px]:px-5 max-[900px]:pt-10"
+	class="px-8 pt-14 pb-6 max-[900px]:px-5 max-[900px]:pt-10 max-[900px]:pb-6"
 	aria-labelledby="build-heading"
 	id="build"
 >
@@ -110,7 +110,7 @@ const primitives = [
 	</div>
 	<h2
 		id="build-heading"
-		class="mb-9 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 dark:text-zinc-50"
+		class="mb-8 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 dark:text-zinc-50"
 	>
 		Everything you need to build at the edge
 	</h2>
diff --git a/src/components/landing/RequestLifecycle.astro b/src/components/landing/RequestLifecycle.astro
index b3b7499610321be..26a590772581d67 100644
--- a/src/components/landing/RequestLifecycle.astro
+++ b/src/components/landing/RequestLifecycle.astro
@@ -135,7 +135,7 @@ const SECURITY = NODES.filter((n) => n.security);
 
 <section
 	id="request"
-	class="rl-section hidden px-8 pt-14 pb-8 max-[900px]:px-5 max-[900px]:pt-10"
+	class="rl-section hidden px-8 pt-14 pb-8 max-[900px]:px-5 max-[900px]:pt-10 max-[900px]:pb-8"
 	aria-labelledby="rl-heading"
 	data-rl
 >
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index 2960070c74ce2bb..4d650e94a4c9c1b 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -70,18 +70,18 @@ const categories = [
 ---
 
 <section
-	class="px-8 pt-14 pb-12 max-[900px]:px-5 max-[900px]:pt-10"
+	class="px-8 pt-14 pb-12 max-[900px]:px-5 max-[900px]:pt-10 max-[900px]:pb-10"
 	aria-labelledby="s6-heading"
 	id="secure"
 >
-	<div class="mb-8">
+	<div class="mb-3">
 		<span class="text-accent font-mono text-xs tracking-widest uppercase"
 			>Secure</span
 		>
 	</div>
 	<h2
 		id="s6-heading"
-		class="mb-1.5 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-100"
+		class="mb-2 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-100"
 	>
 		Secure what you already have
 	</h2>

From 0fa281ade4b634a220014ab91b570ab77ea2405f Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Mon, 30 Mar 2026 18:11:54 +0100
Subject: [PATCH 03/35] fix: escape char

---
 src/components/landing/ProductCard.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/landing/ProductCard.astro b/src/components/landing/ProductCard.astro
index cbaaa48f76faaac..ee3de009695e61c 100644
--- a/src/components/landing/ProductCard.astro
+++ b/src/components/landing/ProductCard.astro
@@ -73,7 +73,7 @@ const mediaProducts = new Set([
 const normalizeProduct = (value: string) =>
 	value
 		.toLowerCase()
-		.replace(/[\-_]/g, " ")
+		.replace(/[-_]/g, " ")
 		.replace(/\s+/g, " ")
 		.trim();
 

From d71d6173d54420c63096c6f9330363ba16e1912f Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 31 Mar 2026 13:09:41 +0100
Subject: [PATCH 04/35] fix: clean up

---
 astro.config.ts                               |  1 +
 .../landing/AccelerateSection.astro           | 84 ++++++++++-------
 src/components/landing/BuildFromScratch.astro | 16 ++--
 src/components/landing/Hero.astro             | 17 ++--
 src/components/landing/PlatformStats.astro    | 94 ++++++++++++-------
 src/components/landing/ProductCard.astro      | 10 +-
 src/components/landing/SecureSection.astro    | 17 +++-
 src/components/overrides/Sidebar.astro        | 10 +-
 src/icons/dns.svg                             |  2 +-
 src/pages/index.astro                         | 63 +++++++------
 src/styles/sidebar.css                        | 11 ---
 11 files changed, 190 insertions(+), 135 deletions(-)

diff --git a/astro.config.ts b/astro.config.ts
index 7927b24ae3c5cd3..b83e3a97fab807d 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -52,6 +52,7 @@ async function autogenStyles() {
 	)
 		.filter((x) => x.isFile())
 		.map((x) => x.parentPath + x.name)
+		.filter((x) => x !== "./src/styles/landing.css")
 		.sort((a) => (a === "./src/styles/tailwind.css" ? -1 : 1));
 
 	return styles;
diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index e0a50e1d331d21d..5ad407f7ce9a76d 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -31,6 +31,7 @@ const phases = [
 		outcome: "Resolve DNS in single-digit milliseconds",
 		detail:
 			"Fastest authoritative DNS. DNSSEC, wildcard records, proxy control.",
+		cta: "Optimize DNS performance",
 		tags: ["Authoritative DNS", "DNSSEC"],
 		color: "bg-orange-400",
 		colorMuted: "bg-orange-400/20",
@@ -46,6 +47,7 @@ const phases = [
 		outcome: "Route around congestion automatically",
 		detail:
 			"Real-time network intelligence — typically 30% faster than public internet.",
+		cta: "Turn on Argo Smart Routing",
 		tags: ["Smart Routing", "Tiered Caching"],
 		color: "bg-amber-500",
 		colorMuted: "bg-amber-500/20",
@@ -60,6 +62,7 @@ const phases = [
 		href: "/cache/get-started/",
 		outcome: "Cache at the edge, not from origin",
 		detail: "Serve from 330+ cities. Cache Rules, tiered caching, purge API.",
+		cta: "Improve cache hit ratio",
 		tags: ["Cache Rules", "Tiered Cache", "Cache Reserve"],
 		color: "bg-yellow-500",
 		colorMuted: "bg-yellow-500/20",
@@ -75,6 +78,7 @@ const phases = [
 		outcome: "Make database queries feel local",
 		detail:
 			"Connection pooling and caching at the edge. Slash query latency for Postgres, MySQL, and more.",
+		cta: "Speed up database queries",
 		tags: ["Connection Pooling", "Query Caching"],
 		color: "bg-lime-500",
 		colorMuted: "bg-lime-500/20",
@@ -90,6 +94,7 @@ const phases = [
 		outcome: "Transform and serve images from the edge",
 		detail:
 			"Resize, convert to modern formats, and deliver from 330+ cities. No origin round-trip.",
+		cta: "Optimize image delivery",
 		tags: ["Transform", "Polish", "WebP/AVIF"],
 		color: "bg-teal-500",
 		colorMuted: "bg-teal-500/20",
@@ -105,18 +110,17 @@ const phases = [
 		outcome: "Move third-party scripts off the main thread",
 		detail:
 			"Load analytics, ads, and pixels server-side. Fewer network requests, faster page loads.",
+		cta: "Move scripts with Zaraz",
 		tags: ["Server-side Tags", "Consent Mgmt"],
 		color: "bg-sky-500",
 		colorMuted: "bg-sky-500/20",
 	},
 ];
 
-/** Total "before" time label */
-const beforeTotal = "~1,240 ms";
 ---
 
 <section
-	class="px-8 pt-14 pb-14 max-[900px]:px-5 max-[900px]:pt-10 max-[900px]:pb-10"
+	class="px-8 pt-10 pb-10 max-[900px]:px-5"
 	aria-labelledby="accelerate-heading"
 	id="accelerate"
 >
@@ -133,7 +137,7 @@ const beforeTotal = "~1,240 ms";
 		See where the milliseconds go
 	</h2>
 	<p
-		class="mb-8 max-w-[600px] text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400"
+		class="mb-6 max-w-[600px] text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400"
 	>
 		Every request is a waterfall of latency. Hover a phase to see which product
 		eliminates it — toggle to see the compound effect.
@@ -154,29 +158,29 @@ const beforeTotal = "~1,240 ms";
 				aria-hidden="true"></span>
 			<button
 				type="button"
-				id="wf-toggle-before"
+				id="wf-toggle-after"
 				role="radio"
 				aria-checked="true"
 				tabindex="0"
-				class="wf-toggle-btn wf-toggle-active focus-visible:outline-accent relative z-10 flex min-h-[44px] cursor-pointer items-center gap-2 rounded-lg px-5 py-2.5 text-base font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:-outline-offset-2 max-[600px]:px-3"
+				class="wf-toggle-btn wf-toggle-active focus-visible:outline-accent relative z-10 flex min-h-[40px] cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:-outline-offset-2 max-[600px]:px-2.5"
 			>
 				<span
 					class="wf-toggle-dot size-2 shrink-0 rounded-full transition-colors duration-200"
 					aria-hidden="true"></span>
-				Without Cloudflare
+				With Cloudflare
 			</button>
 			<button
 				type="button"
-				id="wf-toggle-after"
+				id="wf-toggle-before"
 				role="radio"
 				aria-checked="false"
 				tabindex="-1"
-				class="wf-toggle-btn focus-visible:outline-accent relative z-10 flex min-h-[44px] cursor-pointer items-center gap-2 rounded-lg px-5 py-2.5 text-base font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:-outline-offset-2 max-[600px]:px-3"
+				class="wf-toggle-btn focus-visible:outline-accent relative z-10 flex min-h-[40px] cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:-outline-offset-2 max-[600px]:px-2.5"
 			>
 				<span
 					class="wf-toggle-dot size-2 shrink-0 rounded-full transition-colors duration-200"
 					aria-hidden="true"></span>
-				With Cloudflare
+				Without Cloudflare
 			</button>
 		</div>
 		<div
@@ -186,7 +190,7 @@ const beforeTotal = "~1,240 ms";
 			<span
 				id="wf-total-value"
 				class="text-sm font-semibold text-zinc-900 tabular-nums dark:text-zinc-100"
-				>{beforeTotal}</span
+				>~95 ms</span
 			>
 		</div>
 	</div>
@@ -264,7 +268,7 @@ const beforeTotal = "~1,240 ms";
 				<a
 					href={p.href}
 					class:list={[
-						"wf-row group relative grid items-center gap-3 px-4 py-3.5 no-underline transition-colors duration-150",
+						"wf-row group relative grid items-center gap-3 px-4 py-3 no-underline transition-colors duration-150",
 						"bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark",
 						"focus-visible:outline-accent focus-visible:outline-2 focus-visible:-outline-offset-2",
 						"max-[600px]:grid-cols-[1fr] max-[600px]:gap-2 max-[600px]:px-3 max-[600px]:py-3",
@@ -275,7 +279,7 @@ const beforeTotal = "~1,240 ms";
 				>
 					{/* Accent bar — bottom reveal on hover */}
 					<span
-						class="bg-accent pointer-events-none absolute bottom-0 left-0 h-0.5 w-0 transition-[width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:w-full"
+						class="bg-accent pointer-events-none absolute bottom-0 left-0 h-px w-0 transition-[width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:w-full"
 						aria-hidden="true"
 					/>
 
@@ -288,28 +292,28 @@ const beforeTotal = "~1,240 ms";
 							<p class="truncate text-sm leading-tight font-medium text-zinc-800 dark:text-zinc-100">
 								{p.phase}
 							</p>
-							<p class="wf-product-label text-accent truncate font-mono text-[11px] tracking-widest uppercase opacity-0 transition-opacity duration-300">
+							<p class="wf-product-label text-accent truncate font-mono text-[11px] tracking-widest uppercase opacity-100 transition-opacity duration-300">
 								{p.product}
 							</p>
 						</div>
 					</div>
 
 					{/* Center: waterfall bar visualization */}
-					<div class="relative h-8 max-[600px]:h-6" aria-hidden="true">
+					<div class="relative h-6 max-[600px]:h-5" aria-hidden="true">
 						{/* Background track */}
 						<div class="absolute inset-0 rounded-sm bg-zinc-100 dark:bg-zinc-800/50" />
 
 						{/* "Before" bar (slow) */}
 						<div
 							class={`wf-bar wf-bar-before absolute top-1 bottom-1 rounded-sm transition-[left,width,box-shadow] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] ${p.color}`}
-							style={`left: ${p.before.offset}%; width: ${p.before.width}%;`}
+							style={`left: ${p.after.offset}%; width: ${p.after.width}%;`}
 							data-offset-before={p.before.offset}
 							data-width-before={p.before.width}
 							data-offset-after={p.after.offset}
 							data-width-after={p.after.width}
 						>
 							<span class="wf-bar-label absolute top-1/2 right-1.5 -translate-y-1/2 font-mono text-[9px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm">
-								{Math.round(p.before.width * 13)}ms
+								{Math.round(p.after.width * 13)}ms
 							</span>
 						</div>
 
@@ -346,7 +350,7 @@ const beforeTotal = "~1,240 ms";
 
 		<!-- Total bar / savings summary row -->
 		<div
-			class="wf-summary bg-l-card dark:bg-l-card-dark border-t border-zinc-200 px-4 py-3.5 dark:border-[#2a2a2a]"
+			class="wf-summary bg-l-card dark:bg-l-card-dark border-t border-zinc-200 px-4 py-3 dark:border-[#2a2a2a]"
 			aria-live="polite"
 		>
 			<div class="flex items-center justify-between gap-4">
@@ -361,7 +365,7 @@ const beforeTotal = "~1,240 ms";
 						<div
 							id="wf-total-bar"
 							class="bg-accent absolute inset-y-0 left-0 rounded-full transition-[width] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]"
-							style="width: 95%;"
+							style="width: 8%;"
 						>
 						</div>
 					</div>
@@ -369,7 +373,7 @@ const beforeTotal = "~1,240 ms";
 				<div class="flex items-center gap-2">
 					<span
 						id="wf-savings-badge"
-						class="hidden font-mono text-xs font-semibold text-emerald-600 tabular-nums dark:text-emerald-400"
+						class="font-mono text-xs font-semibold text-emerald-600 tabular-nums dark:text-emerald-400"
 					>
 						-92% faster
 					</span>
@@ -379,9 +383,7 @@ const beforeTotal = "~1,240 ms";
 	</div>
 
 	<!-- Section bridge — connects waterfall to product cards -->
-	<h3
-		class="not-content mb-8 pt-20 text-lg font-medium -tracking-tight text-zinc-900 dark:text-zinc-100"
-	>
+	<h3 class="not-content mb-6 pt-12 text-lg font-medium -tracking-tight text-zinc-900 dark:text-zinc-100">
 		Explore by product
 	</h3>
 
@@ -399,7 +401,7 @@ const beforeTotal = "~1,240 ms";
 						scenario={p.outcome}
 						detail={p.detail}
 						href={p.href}
-						cta="Explore docs"
+						cta={p.cta}
 					/>
 				</div>
 			))
@@ -450,7 +452,19 @@ const beforeTotal = "~1,240 ms";
 	}
 	/* Only the "With Cloudflare" button gets the accent dot */
 	#wf-toggle-after.wf-toggle-active .wf-toggle-dot {
-		background-color: var(--color-accent, #f56500);
+		background-color: color-mix(in srgb, white 88%, transparent);
+	}
+	#wf-toggle-after.wf-toggle-active {
+		background: var(--color-accent, #f56500);
+		color: white;
+	}
+	#wf-toggle-after.wf-toggle-active::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border: 1px solid color-mix(in srgb, black 12%, transparent);
+		border-radius: inherit;
+		pointer-events: none;
 	}
 	#wf-toggle-before.wf-toggle-active .wf-toggle-dot {
 		background-color: var(--color-zinc-500, #71717a);
@@ -572,7 +586,7 @@ const beforeTotal = "~1,240 ms";
 		const rows = section.querySelectorAll<HTMLElement>(".wf-row");
 		const cards = section.querySelectorAll<HTMLElement>(".wf-product-card");
 
-		let isAfter = false;
+		let isAfter = true;
 
 		/** Position the sliding indicator behind the active button */
 		function positionSlider(activeBtn: HTMLElement | null) {
@@ -586,7 +600,7 @@ const beforeTotal = "~1,240 ms";
 		}
 
 		// Set initial slider position
-		requestAnimationFrame(() => positionSlider(btnBefore));
+		requestAnimationFrame(() => positionSlider(btnAfter));
 
 		function setMode(after: boolean) {
 			isAfter = after;
@@ -604,7 +618,13 @@ const beforeTotal = "~1,240 ms";
 
 			// Show product names only in "With Cloudflare" state
 			productLabels.forEach((label) => {
-				label.style.opacity = after ? "1" : "0";
+				if (after) {
+					label.style.display = "block";
+					label.style.opacity = "1";
+				} else {
+					label.style.display = "none";
+					label.style.opacity = "0";
+				}
 			});
 
 			// Animate bars
@@ -655,8 +675,8 @@ const beforeTotal = "~1,240 ms";
 
 		const onToggleKeyDown = (event: KeyboardEvent) => {
 			if (!btnBefore || !btnAfter) return;
-			const radios = [btnBefore, btnAfter];
-			const currentIndex = isAfter ? 1 : 0;
+			const radios = [btnAfter, btnBefore];
+			const currentIndex = isAfter ? 0 : 1;
 			let nextIndex = currentIndex;
 
 			switch (event.key) {
@@ -679,14 +699,14 @@ const beforeTotal = "~1,240 ms";
 			}
 
 			event.preventDefault();
-			setMode(nextIndex === 1);
+			setMode(nextIndex === 0);
 			radios[nextIndex].focus();
 		};
 
 		btnBefore?.addEventListener("keydown", onToggleKeyDown);
 		btnAfter?.addEventListener("keydown", onToggleKeyDown);
 
-		setMode(false);
+		setMode(true);
 
 		// Cross-highlight: hovering a waterfall row highlights the matching product card and vice versa
 		function highlightPhase(phaseId: string | null) {
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index 1ff6f6f88d291c5..1722ac9154802e5 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -199,7 +199,7 @@ const primitives = [
 					hidden={i !== 0}
 					class="bg-l-card dark:bg-l-card-dark p-8 max-[600px]:p-5"
 				>
-					<div class="max-w-[640px]">
+					<div class="w-full">
 					<div class="mb-4 flex items-center gap-3">
 						<div
 							class="build-panel-icon flex size-8 shrink-0 items-center justify-center rounded border border-dashed"
@@ -216,7 +216,7 @@ const primitives = [
 						</p>
 
 						{/* Command block — segmented */}
-						<div class="mb-6 flex max-w-[560px] items-stretch overflow-hidden rounded border border-zinc-200 dark:border-[#2a2a2a]">
+						<div class="mb-6 flex max-w-[680px] items-stretch overflow-hidden rounded border border-zinc-200 dark:border-[#2a2a2a]">
 							<code
 								id={`build-cmd-${p.id}`}
 								class="bg-l-card dark:bg-l-card-dark min-w-0 flex-1 truncate px-3 py-4 font-mono text-sm leading-none text-zinc-700 select-all dark:text-zinc-300"
@@ -243,7 +243,7 @@ const primitives = [
 						</div>
 
 						{/* CTA + tags row */}
-						<div class="flex items-center gap-6 max-[600px]:flex-col max-[600px]:items-start max-[600px]:gap-4">
+						<div class="flex w-full items-center gap-6 max-[600px]:flex-col max-[600px]:items-start max-[600px]:gap-4">
 							<a
 								href={p.cta.href}
 								class="focus-visible:outline-accent inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-md bg-[#18181b] px-4 py-2 text-sm font-medium text-white no-underline transition-colors duration-150 hover:bg-[#f56500] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-[#fafafa] dark:text-[#09090b] dark:hover:bg-[#e4e4e7] dark:hover:text-[#09090b]"
@@ -267,12 +267,14 @@ const primitives = [
 									</>
 								</svg>
 							</a>
-							<p class="relative top-px font-mono text-xs text-zinc-600 dark:text-zinc-300">
+							<p class="relative top-px min-w-0 flex-1 font-mono text-xs text-zinc-600 dark:text-zinc-300">
 								{p.tags.map((tag, idx) => (
-									<>
-										{idx > 0 && <span class="mx-1" aria-hidden="true">·</span>}
+									<span class="inline-flex items-center">
 										<a href={tag.href} class="text-zinc-600 no-underline hover:underline hover:underline-offset-4 dark:text-zinc-300">{tag.label}</a>
-									</>
+										{idx < p.tags.length - 1 && (
+											<span class="mx-1" aria-hidden="true">·</span>
+										)}
+									</span>
 								))}
 							</p>
 						</div>
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
index d3b401098a64cc5..c9f9f77e60e15fd 100644
--- a/src/components/landing/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -3,14 +3,11 @@ import { Icon } from "@astrojs/starlight/components";
 import { stagger } from "./constants";
 ---
 
-<section
-	id="hero"
-	class="px-8 pt-24 pb-16 max-[900px]:px-5 max-[900px]:pt-16 max-[900px]:pb-12 max-[480px]:pt-12"
->
+<section id="hero" class="px-8 pt-16 pb-16 max-[900px]:px-5 max-[900px]:pb-12">
 	<p
 		class={`font-mono text-xs uppercase tracking-[0.12em] mb-5 text-accent ${stagger(0.03)}`}
 	>
-		Helping build a better Internet
+		Build a better internet
 	</p>
 
 	<h1
@@ -30,8 +27,8 @@ import { stagger } from "./constants";
 		class={`flex items-center gap-5 text-sm max-[480px]:flex-wrap max-[480px]:gap-3 ${stagger(0.16)}`}
 	>
 		<a
-			href="/workers/get-started/guide/"
-			class="focus-visible:outline-accent inline-flex h-10 cursor-pointer items-center gap-2 rounded-lg rounded-md bg-[#18181b] px-4 text-base font-medium text-white no-underline transition-colors duration-150 hover:bg-[#f56500] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-[#fafafa] dark:text-[#09090b] dark:hover:bg-[#e4e4e7] dark:hover:text-[#09090b]"
+			href="/fundamentals"
+			class="focus-visible:outline-accent inline-flex h-10 shrink-0 cursor-pointer items-center gap-2 whitespace-nowrap rounded-lg rounded-md bg-[#18181b] px-4 text-base font-medium text-white no-underline transition-colors duration-150 hover:bg-[#f56500] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 max-[480px]:h-9 max-[480px]:px-3 max-[480px]:text-sm dark:bg-[#fafafa] dark:text-[#09090b] dark:hover:bg-[#e4e4e7] dark:hover:text-[#09090b]"
 		>
 			Get started
 			<Icon name="right-arrow" size="0.75rem" />
@@ -43,7 +40,7 @@ import { stagger } from "./constants";
 			href="/directory/"
 			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
 		>
-			All products
+			Directory
 		</a>
 		<a
 			href="/api/"
@@ -52,10 +49,10 @@ import { stagger } from "./constants";
 			API reference
 		</a>
 		<a
-			href="/learning-paths/"
+			href="/resources/"
 			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 max-[480px]:hidden dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
 		>
-			Learning paths
+			Resources
 		</a>
 	</div>
 </section>
diff --git a/src/components/landing/PlatformStats.astro b/src/components/landing/PlatformStats.astro
index 09d25bb8ccd6821..e28a5388efebeef 100644
--- a/src/components/landing/PlatformStats.astro
+++ b/src/components/landing/PlatformStats.astro
@@ -161,12 +161,15 @@ const stats = [
 					<p class="mb-1">
 						<span
 							class="stat-counter font-mono text-3xl leading-none font-medium -tracking-tight text-zinc-900 tabular-nums dark:text-white"
-							data-target={stat.value}
-							data-suffix={stat.suffix}
-							data-decimals={stat.value % 1 !== 0 ? "2" : "0"}
 						>
-							{stat.value % 1 !== 0 ? stat.value.toFixed(2) : stat.value}
-							{stat.suffix}
+							<span
+								class="stat-counter-value inline-block"
+								data-target={stat.value}
+								data-decimals={stat.value % 1 !== 0 ? "2" : "0"}
+								style={`min-width: ${(stat.value % 1 !== 0 ? stat.value.toFixed(2) : String(stat.value)).length}ch;`}
+							>
+								{stat.value % 1 !== 0 ? stat.value.toFixed(2) : stat.value}
+							</span><span class="stat-counter-suffix">{stat.suffix}</span>
 						</span>
 					</p>
 
@@ -193,65 +196,86 @@ const stats = [
 </section>
 
 <script>
-	function easeOutExpo(t: number): number {
-		return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+	function easeOutCubic(t: number): number {
+		return 1 - Math.pow(1 - t, 3);
 	}
 
 	function animateCounter(el: HTMLElement) {
+		if (el.dataset.animated === "true") return;
+
 		const target = parseFloat(el.dataset.target ?? "0");
-		const suffix = el.dataset.suffix ?? "";
 		const decimals = parseInt(el.dataset.decimals ?? "0", 10);
+		const scale = 10 ** decimals;
+		const targetScaled = Math.round(target * scale);
 		const prefersReducedMotion = window.matchMedia(
 			"(prefers-reduced-motion: reduce)",
 		).matches;
 
 		if (prefersReducedMotion) {
-			el.textContent = target.toFixed(decimals) + suffix;
+			el.textContent = target.toFixed(decimals);
+			el.dataset.animated = "true";
 			return;
 		}
 
-		const duration = 1400;
+		const duration = 1250;
 		const start = performance.now();
+		let lastScaled = -1;
 
 		function tick(now: number) {
 			const elapsed = now - start;
 			const progress = Math.min(elapsed / duration, 1);
-			const eased = easeOutExpo(progress);
-			const current = target * eased;
+			const eased = easeOutCubic(progress);
+			const nextScaled = Math.min(targetScaled, Math.floor(targetScaled * eased));
 
-			el.textContent = current.toFixed(decimals) + suffix;
+			if (nextScaled !== lastScaled) {
+				el.textContent = (nextScaled / scale).toFixed(decimals);
+				lastScaled = nextScaled;
+			}
 
 			if (progress < 1) {
 				requestAnimationFrame(tick);
 			} else {
-				el.textContent = target.toFixed(decimals) + suffix;
+				el.textContent = target.toFixed(decimals);
+				el.dataset.animated = "true";
 			}
 		}
 
 		requestAnimationFrame(tick);
 	}
 
-	const counters = document.querySelectorAll<HTMLElement>(".stat-counter");
-
-	if ("IntersectionObserver" in window) {
-		const observer = new IntersectionObserver(
-			(entries) => {
-				entries.forEach((entry) => {
-					if (entry.isIntersecting) {
-						animateCounter(entry.target as HTMLElement);
-						observer.unobserve(entry.target);
-					}
-				});
-			},
-			{ threshold: 0.3 },
+	function initPlatformStatsCounters() {
+		const counters = document.querySelectorAll<HTMLElement>(
+			".stat-counter-value",
 		);
-		counters.forEach((el) => observer.observe(el));
-	} else {
-		counters.forEach((el) => {
-			const target = parseFloat(el.dataset.target ?? "0");
-			const suffix = el.dataset.suffix ?? "";
-			const decimals = parseInt(el.dataset.decimals ?? "0", 10);
-			el.textContent = target.toFixed(decimals) + suffix;
-		});
+
+		if ("IntersectionObserver" in window) {
+			const observer = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							animateCounter(entry.target as HTMLElement);
+							observer.unobserve(entry.target);
+						}
+					});
+				},
+				{ threshold: 0.35 },
+			);
+			counters.forEach((el) => observer.observe(el));
+		} else {
+			counters.forEach((el) => {
+				const target = parseFloat(el.dataset.target ?? "0");
+				const decimals = parseInt(el.dataset.decimals ?? "0", 10);
+				el.textContent = target.toFixed(decimals);
+				el.dataset.animated = "true";
+			});
+		}
+	}
+
+	initPlatformStatsCounters();
+	if (!(window as Window & { __platformStatsCountersBound?: boolean })
+		.__platformStatsCountersBound) {
+		document.addEventListener("astro:page-load", initPlatformStatsCounters);
+		(window as Window & { __platformStatsCountersBound?: boolean })
+			.__platformStatsCountersBound = true;
 	}
 </script>
diff --git a/src/components/landing/ProductCard.astro b/src/components/landing/ProductCard.astro
index ee3de009695e61c..e91de89e6c288ab 100644
--- a/src/components/landing/ProductCard.astro
+++ b/src/components/landing/ProductCard.astro
@@ -114,8 +114,14 @@ const getIconHoverPalette = (value: string) => {
 	};
 };
 
-const { icon, product, scenario, detail, href, cta = "Get started" } =
-	Astro.props;
+const {
+	icon,
+	product,
+	scenario,
+	detail,
+	href,
+	cta = "Get started",
+} = Astro.props;
 
 const iconHoverPalette = getIconHoverPalette(product);
 ---
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index 4d650e94a4c9c1b..dbecf0d25c5d5f0 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -20,23 +20,26 @@ const categories = [
 			{
 				scenario: "Under DDoS attack",
 				product: "WAF",
-				href: "/waf/custom-rules/",
+				href: "/waf",
 				icon: "ddos-protection",
 				detail: "Custom rules, rate limiting, automatic mitigation",
+				cta: "Harden your app with WAF",
 			},
 			{
 				scenario: "SSL is fragile or misconfigured",
 				product: "SSL/TLS",
-				href: "/ssl/origin-configuration/ssl-modes/",
+				href: "/ssl",
 				icon: "ssl",
 				detail: "Automatic certificates, strict mode, mTLS",
+				cta: "Set up SSL/TLS",
 			},
 			{
 				scenario: "Bots abusing login or forms",
 				product: "Turnstile",
-				href: "/turnstile/get-started/",
+				href: "/turnstile",
 				icon: "turnstile",
 				detail: "Invisible challenge, zero CAPTCHA friction",
+				cta: "Add Turnstile protection",
 			},
 		],
 	},
@@ -46,16 +49,18 @@ const categories = [
 			{
 				scenario: "Expose internal services safely",
 				product: "Tunnel",
-				href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/get-started/create-remote-tunnel/",
+				href: "/cloudflare-one/networks/connectors/cloudflare-tunnel",
 				icon: "tunnel",
 				detail: "Outbound-only encrypted tunnels, no open ports",
+				cta: "Create a secure Tunnel",
 			},
 			{
 				scenario: "Secure access to internal tools",
 				product: "Zero Trust",
-				href: "/cloudflare-one/setup/",
+				href: "/cloudflare-one/",
 				icon: "access",
 				detail: "Identity-aware access, device posture checks",
+				cta: "Set up Zero Trust access",
 			},
 			{
 				scenario: "Filter outbound traffic network-wide",
@@ -63,6 +68,7 @@ const categories = [
 				href: "/cloudflare-one/traffic-policies/",
 				icon: "gateway",
 				detail: "DNS filtering, HTTP policies, network controls",
+				cta: "Create Gateway policies",
 			},
 		],
 	},
@@ -102,6 +108,7 @@ const categories = [
 							scenario={t.scenario}
 							detail={t.detail}
 							href={t.href}
+							cta={t.cta}
 						/>
 					))}
 				</ProductCardGrid>
diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index c8144ec0f32a9f7..66bb9149e71d2c0 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -11,17 +11,17 @@ const productTitle = isHomepage
 	: await lookupProductTitle(product, module);
 ---
 
-<div class="sidebar-header">
+<div class="sidebar-header sticky top-0 z-[1] flex flex-col gap-2 bg-[var(--sl-color-black)] py-3.5 min-[50rem]:bg-[var(--sl-color-bg-sidebar)]">
 	{
 		!isHomepage && (
-			<div class="sidebar-product-title px-1">
+			<div class="sidebar-product-title">
 				<a
 					href={"/" + product + "/"}
-					class="flex items-center gap-2 no-underline"
+					class="flex items-center gap-1 no-underline"
 				>
 					<AstroIcon name={product} size="32px" class="text-cl1-brand-orange" />
-					<span class="text-xl text-black">
-						<strong>{productTitle}</strong>
+					<span class="text-xl font-semibold text-[var(--sidebar-text-strong)]">
+						{productTitle}
 					</span>
 				</a>
 			</div>
diff --git a/src/icons/dns.svg b/src/icons/dns.svg
index 81ed4783609480f..b8f6acebd01476f 100644
--- a/src/icons/dns.svg
+++ b/src/icons/dns.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M35 26.98h-2.125v-8.574H21.148v-5.449h2.102l1.25-1.25V5l-1.25-1.25h-6.738L15.262 5v6.707l1.25 1.25h2.136v5.45H7.125v8.573H5l-1.25 1.25V35L5 36.25h6.742l1.25-1.25v-6.77l-1.25-1.25H9.625v-6.074h9.023v6.074h-2.136l-1.25 1.25V35l1.25 1.25h6.738L24.5 35v-6.77l-1.25-1.25h-2.102v-6.074h9.235v6.074h-2.121l-1.25 1.25V35l1.25 1.25H35L36.25 35v-6.77ZM17.762 6.25H22v4.238h-4.238Zm-7.27 27.5H6.25v-4.27h4.238Zm11.508 0h-4.238v-4.27H22Zm11.75 0h-4.238v-4.27h4.238Zm0 0"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g transform="translate(4 4)"><path d="M35 26.98h-2.125v-8.574H21.148v-5.449h2.102l1.25-1.25V5l-1.25-1.25h-6.738L15.262 5v6.707l1.25 1.25h2.136v5.45H7.125v8.573H5l-1.25 1.25V35L5 36.25h6.742l1.25-1.25v-6.77l-1.25-1.25H9.625v-6.074h9.023v6.074h-2.136l-1.25 1.25V35l1.25 1.25h6.738L24.5 35v-6.77l-1.25-1.25h-2.102v-6.074h9.235v6.074h-2.121l-1.25 1.25V35l1.25 1.25H35L36.25 35v-6.77ZM17.762 6.25H22v4.238h-4.238Zm-7.27 27.5H6.25v-4.27h4.238Zm11.508 0h-4.238v-4.27H22Zm11.75 0h-4.238v-4.27h4.238Z"/></g></svg>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3b54232c534c54b..95f93a50140c652 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -36,6 +36,19 @@ const sidebar = [
 				label: "Troubleshooting",
 				link: "/support/troubleshooting/http-status-codes/",
 			},
+			{
+				label: "Resources",
+				collapsed: true,
+				badge: groupIcon("learning-paths"),
+				items: [
+					{ label: "Learning paths", link: "/learning-paths/" },
+					{ label: "Directory", link: "/directory/" },
+					{ label: "Terraform", link: "/terraform/" },
+					{ label: "Pulumi", link: "/pulumi/" },
+					{ label: "Reference architecture", link: "/reference-architecture/" },
+					{ label: "Support", link: "/support/" },
+				],
+			},
 		],
 	},
 	{
@@ -142,6 +155,18 @@ const sidebar = [
 					{ label: "Email Security", link: "/email-security/" },
 				],
 			},
+			{
+				label: "Domains & DNS",
+				collapsed: true,
+				badge: groupIcon("dns"),
+				items: [
+					{ label: "DNS", link: "/dns/" },
+					{ label: "1.1.1.1", link: "/1.1.1.1/" },
+					{ label: "Registrar", link: "/registrar/" },
+					{ label: "Email Routing", link: "/email-routing/" },
+					{ label: "DMARC Management", link: "/dmarc-management/" },
+				],
+			},
 			{
 				label: "Networking",
 				collapsed: true,
@@ -174,18 +199,6 @@ const sidebar = [
 		collapsed: false,
 		badge: heading("heading-other"),
 		items: [
-			{
-				label: "Domains & DNS",
-				collapsed: true,
-				badge: groupIcon("dns"),
-				items: [
-					{ label: "DNS", link: "/dns/" },
-					{ label: "1.1.1.1", link: "/1.1.1.1/" },
-					{ label: "Registrar", link: "/registrar/" },
-					{ label: "Email Routing", link: "/email-routing/" },
-					{ label: "DMARC Management", link: "/dmarc-management/" },
-				],
-			},
 			{
 				label: "Observe",
 				collapsed: true,
@@ -198,19 +211,6 @@ const sidebar = [
 					{ label: "Health Checks", link: "/health-checks/" },
 				],
 			},
-			{
-				label: "Resources",
-				collapsed: true,
-				badge: groupIcon("learning-paths"),
-				items: [
-					{ label: "Learning paths", link: "/learning-paths/" },
-					{ label: "All products", link: "/directory/" },
-					{ label: "Terraform", link: "/terraform/" },
-					{ label: "Pulumi", link: "/pulumi/" },
-					{ label: "Reference architecture", link: "/reference-architecture/" },
-					{ label: "Support", link: "/support/" },
-				],
-			},
 		],
 	},
 ];
@@ -396,7 +396,16 @@ const props = {
 		+ :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
 		margin-top: 0;
 	}
-	footer {
-		display: none;
+
+	/* Restore footer spacing — scoped to the landing page only */
+	body:has(.landing-root) footer {
+		margin-top: 0;
+	}
+	body:has(.landing-root) footer .custom-footer-section {
+		max-width: 1280px;
+		margin-inline: auto;
+		padding-inline: 1.5rem;
+		padding-bottom: 1.5rem;
+		border-top: 1px solid var(--sl-color-gray-6);
 	}
 </style>
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
index 0a77db0b2987b4d..fd1f3232e53a930 100644
--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@@ -2,17 +2,6 @@
 	scrollbar-gutter: stable;
 }
 
-.sidebar-header {
-	position: sticky;
-	top: 0;
-	z-index: 1;
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	padding: 1rem 0;
-	background-color: var(--sl-color-bg-sidebar, var(--sl-color-bg));
-}
-
 .sidebar-content {
 	gap: 2px;
 	padding: 0rem 1.5rem 1.5rem 1.5rem;

From f484a1353b11bb00aa2952c9cad9f87f7e2c9db4 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 31 Mar 2026 14:36:46 +0100
Subject: [PATCH 05/35] fix: bg lines

---
 src/components/landing/FullPageLines.astro | 2 +-
 src/pages/index.astro                      | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/landing/FullPageLines.astro b/src/components/landing/FullPageLines.astro
index 5978a138080c95d..d82cc7fbff33e94 100644
--- a/src/components/landing/FullPageLines.astro
+++ b/src/components/landing/FullPageLines.astro
@@ -24,7 +24,7 @@ const lineBase = "absolute top-0 left-1/2 -translate-x-1/2";
 
 <div
 	class="pointer-events-none absolute inset-x-0 top-0 z-0 max-[1024px]:hidden"
-	style="height: 100%"
+	style="height: calc(100% + 25rem)"
 	aria-hidden="true"
 >
 	<!-- Center line -->
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 95f93a50140c652..da15079c22e91db 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -402,10 +402,13 @@ const props = {
 		margin-top: 0;
 	}
 	body:has(.landing-root) footer .custom-footer-section {
+		position: relative;
+		z-index: 1;
 		max-width: 1280px;
 		margin-inline: auto;
 		padding-inline: 1.5rem;
 		padding-bottom: 1.5rem;
 		border-top: 1px solid var(--sl-color-gray-6);
+		background-color: var(--sl-color-bg);
 	}
 </style>

From 272995fc11ead1c4ed0afa3e8a11de1e2b94ec97 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 31 Mar 2026 16:45:14 +0100
Subject: [PATCH 06/35] feat: tweak spacing

---
 src/components/landing/AccelerateSection.astro | 2 +-
 src/components/landing/BuildFromScratch.astro  | 2 +-
 src/components/landing/Hero.astro              | 2 +-
 src/components/landing/PlatformStats.astro     | 2 +-
 src/components/landing/RequestLifecycle.astro  | 2 +-
 src/components/landing/SecureSection.astro     | 2 +-
 src/pages/index.astro                          | 9 ++++++---
 src/styles/landing.css                         | 9 +++++++++
 8 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index 5ad407f7ce9a76d..a0bec7adabcca0e 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -120,7 +120,7 @@ const phases = [
 ---
 
 <section
-	class="px-8 pt-10 pb-10 max-[900px]:px-5"
+	class="pt-10 pb-10"
 	aria-labelledby="accelerate-heading"
 	id="accelerate"
 >
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index 1722ac9154802e5..3f52638fcef6481 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -99,7 +99,7 @@ const primitives = [
 ---
 
 <section
-	class="px-8 pt-14 pb-6 max-[900px]:px-5 max-[900px]:pt-10 max-[900px]:pb-6"
+	class="pt-14 pb-6 max-[900px]:pt-10 max-[900px]:pb-6"
 	aria-labelledby="build-heading"
 	id="build"
 >
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
index c9f9f77e60e15fd..11542684971d072 100644
--- a/src/components/landing/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -3,7 +3,7 @@ import { Icon } from "@astrojs/starlight/components";
 import { stagger } from "./constants";
 ---
 
-<section id="hero" class="px-8 pt-16 pb-16 max-[900px]:px-5 max-[900px]:pb-12">
+<section id="hero" class="pb-16 max-[900px]:pb-12">
 	<p
 		class={`font-mono text-xs uppercase tracking-[0.12em] mb-5 text-accent ${stagger(0.03)}`}
 	>
diff --git a/src/components/landing/PlatformStats.astro b/src/components/landing/PlatformStats.astro
index e28a5388efebeef..74e5af30302d7a6 100644
--- a/src/components/landing/PlatformStats.astro
+++ b/src/components/landing/PlatformStats.astro
@@ -35,7 +35,7 @@ const stats = [
 
 <section
 	id="platform"
-	class={`px-8 pt-10 pb-12 max-[900px]:px-5 max-[900px]:pt-8 max-[900px]:pb-8 ${stagger(0.42)}`}
+	class={`pt-10 pb-12 max-[900px]:pt-8 max-[900px]:pb-8 ${stagger(0.42)}`}
 	aria-labelledby="stats-heading"
 >
 	<div class="mb-3">
diff --git a/src/components/landing/RequestLifecycle.astro b/src/components/landing/RequestLifecycle.astro
index 26a590772581d67..d0cc29792644d7a 100644
--- a/src/components/landing/RequestLifecycle.astro
+++ b/src/components/landing/RequestLifecycle.astro
@@ -135,7 +135,7 @@ const SECURITY = NODES.filter((n) => n.security);
 
 <section
 	id="request"
-	class="rl-section hidden px-8 pt-14 pb-8 max-[900px]:px-5 max-[900px]:pt-10 max-[900px]:pb-8"
+	class="rl-section hidden pt-14 pb-8 max-[900px]:pt-10 max-[900px]:pb-8"
 	aria-labelledby="rl-heading"
 	data-rl
 >
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index dbecf0d25c5d5f0..8f78b0d5b72fd1a 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -76,7 +76,7 @@ const categories = [
 ---
 
 <section
-	class="px-8 pt-14 pb-12 max-[900px]:px-5 max-[900px]:pt-10 max-[900px]:pb-10"
+	class="pt-14 pb-12 max-[900px]:pt-10 max-[900px]:pb-10"
 	aria-labelledby="s6-heading"
 	id="secure"
 >
diff --git a/src/pages/index.astro b/src/pages/index.astro
index da15079c22e91db..073450da94491e4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -39,7 +39,6 @@ const sidebar = [
 			{
 				label: "Resources",
 				collapsed: true,
-				badge: groupIcon("learning-paths"),
 				items: [
 					{ label: "Learning paths", link: "/learning-paths/" },
 					{ label: "Directory", link: "/directory/" },
@@ -236,7 +235,11 @@ const props = {
 		<div class="relative">
 			<FullPageLines />
 			<StructuralGrid />
-			<main class="relative z-10 mx-auto max-w-[1280px]" id="main-content">
+			<main
+				class="relative z-10 mx-auto max-w-[1280px]"
+				id="main-content"
+				style="padding-inline: var(--l-section-pad); padding-top: var(--l-pad-top);"
+			>
 				<!-- Origin marker -->
 				<div class="relative h-0 max-[1024px]:hidden">
 					<div class="pointer-events-none absolute inset-0">
@@ -406,7 +409,7 @@ const props = {
 		z-index: 1;
 		max-width: 1280px;
 		margin-inline: auto;
-		padding-inline: 1.5rem;
+		padding-inline: var(--l-section-pad, 1.5rem);
 		padding-bottom: 1.5rem;
 		border-top: 1px solid var(--sl-color-gray-6);
 		background-color: var(--sl-color-bg);
diff --git a/src/styles/landing.css b/src/styles/landing.css
index ceccea13ad302c8..71caa351a1cc484 100644
--- a/src/styles/landing.css
+++ b/src/styles/landing.css
@@ -108,6 +108,8 @@
  * complex values (radial-gradient, mask-image) with no Tailwind equivalent.
  */
 .landing-root {
+	--l-section-pad: 2rem; /* 32px — single token for balanced inset */
+	--l-pad-top: var(--l-section-pad);
 	overflow-x: clip;
 	font-family:
 		"Inter Tight",
@@ -132,6 +134,13 @@
 	--l-h-line-fine: rgba(0, 0, 0, 0.025);
 }
 
+@media (max-width: 900px) {
+	.landing-root {
+		--l-section-pad: 1.25rem; /* 20px — keeps the inset balanced on small screens */
+		--l-pad-top: 4rem; /* 64px — pt-16, more breathing room on mobile */
+	}
+}
+
 :root[data-theme="dark"] .landing-root {
 	color: #fafafa;
 

From 3032d9e34a06fa8c0696b6f83697d84b1c8048bc Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 31 Mar 2026 18:16:40 +0100
Subject: [PATCH 07/35] fix: amend copy and styling

---
 .../landing/AccelerateSection.astro           | 52 +++++++------------
 src/pages/index.astro                         |  6 +--
 src/styles/landing.css                        | 15 ++++--
 3 files changed, 31 insertions(+), 42 deletions(-)

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index a0bec7adabcca0e..82b946c74fec5d3 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -1,36 +1,20 @@
 ---
-/**
- * AccelerateSection variant-a — "The Waterfall"
- *
- * A request-lifecycle waterfall that shows where latency hides
- * and which Cloudflare product eliminates it. Inspired by DevTools
- * network panels — rendered as styled HTML/CSS bars with hover
- * interactions that connect phases to products.
- *
- * Toggle between "Without Cloudflare" and "With Cloudflare" to see
- * latency bars shrink in real time.
- */
 import { Icon } from "astro-icon/components";
 import ProductCard from "./ProductCard.astro";
 import ProductCardGrid from "./ProductCardGrid.astro";
 
-/**
- * Each phase of a request lifecycle.
- * `before` / `after` are percentage widths (of a ~1200ms budget).
- * `offset` is when the phase starts (percentage left-offset).
- */
 const phases = [
 	{
 		id: "dns",
 		phase: "DNS Lookup",
-		before: { offset: 0, width: 18 },
-		after: { offset: 0, width: 3 },
+		before: { offset: 0, width: 9.6 },
+		after: { offset: 0, width: 0.85 },
 		product: "DNS",
 		icon: "dns",
 		href: "/dns/",
 		outcome: "Resolve DNS in single-digit milliseconds",
 		detail:
-			"Fastest authoritative DNS. DNSSEC, wildcard records, proxy control.",
+			"Fastest authoritative DNS — 11ms average. DNSSEC, wildcard records, proxy control.",
 		cta: "Optimize DNS performance",
 		tags: ["Authoritative DNS", "DNSSEC"],
 		color: "bg-orange-400",
@@ -39,8 +23,8 @@ const phases = [
 	{
 		id: "connect",
 		phase: "TCP + TLS",
-		before: { offset: 18, width: 22 },
-		after: { offset: 3, width: 4 },
+		before: { offset: 9.6, width: 19.2 },
+		after: { offset: 0.85, width: 2 },
 		product: "Argo Smart Routing",
 		icon: "argo-smart-routing",
 		href: "/argo-smart-routing/",
@@ -55,8 +39,8 @@ const phases = [
 	{
 		id: "wait",
 		phase: "Server Wait (TTFB)",
-		before: { offset: 40, width: 35 },
-		after: { offset: 7, width: 5 },
+		before: { offset: 28.8, width: 38.46 },
+		after: { offset: 2.85, width: 0.4 },
 		product: "Cache",
 		icon: "cache",
 		href: "/cache/get-started/",
@@ -70,8 +54,8 @@ const phases = [
 	{
 		id: "db",
 		phase: "Database Query",
-		before: { offset: 75, width: 18 },
-		after: { offset: 12, width: 3 },
+		before: { offset: 52, width: 48.1 },
+		after: { offset: 3.25, width: 12 },
 		product: "Hyperdrive",
 		icon: "hyperdrive",
 		href: "/hyperdrive/",
@@ -86,8 +70,8 @@ const phases = [
 	{
 		id: "assets",
 		phase: "Asset Optimization",
-		before: { offset: 40, width: 30 },
-		after: { offset: 7, width: 6 },
+		before: { offset: 28.8, width: 20.8 },
+		after: { offset: 2.85, width: 10.8 },
 		product: "Images",
 		icon: "images",
 		href: "/images/",
@@ -102,8 +86,8 @@ const phases = [
 	{
 		id: "scripts",
 		phase: "Third-party Scripts",
-		before: { offset: 60, width: 35 },
-		after: { offset: 15, width: 5 },
+		before: { offset: 52, width: 38.46 },
+		after: { offset: 14, width: 0 },
 		product: "Zaraz",
 		icon: "zaraz",
 		href: "/zaraz/",
@@ -190,7 +174,7 @@ const phases = [
 			<span
 				id="wf-total-value"
 				class="text-sm font-semibold text-zinc-900 tabular-nums dark:text-zinc-100"
-				>~95 ms</span
+				>~110 ms</span
 			>
 		</div>
 	</div>
@@ -365,7 +349,7 @@ const phases = [
 						<div
 							id="wf-total-bar"
 							class="bg-accent absolute inset-y-0 left-0 rounded-full transition-[width] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]"
-							style="width: 8%;"
+							style="width: 9%;"
 						>
 						</div>
 					</div>
@@ -375,7 +359,7 @@ const phases = [
 						id="wf-savings-badge"
 						class="font-mono text-xs font-semibold text-emerald-600 tabular-nums dark:text-emerald-400"
 					>
-						-92% faster
+						-91% faster
 					</span>
 				</div>
 			</div>
@@ -658,10 +642,10 @@ const phases = [
 
 			// Update total bar + label
 			if (totalBar) {
-				totalBar.style.width = after ? "8%" : "95%";
+				totalBar.style.width = after ? "9%" : "95%";
 			}
 			if (totalValue) {
-				totalValue.textContent = after ? "~95 ms" : "~1,240 ms";
+				totalValue.textContent = after ? "~110 ms" : "~1,300 ms";
 			}
 			if (savingsBadge) {
 				savingsBadge.classList.toggle("hidden", !after);
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 073450da94491e4..d4c9f4dd82cafa4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -248,7 +248,7 @@ const props = {
 							width="56"
 							height="56"
 							viewBox="0 0 56 56"
-							style="animation-delay:0s;margin-left:0;margin-top:32px"
+							style="animation-delay:0s;margin-left:0;margin-top:4px"
 							><line
 								x1="0"
 								y1="28"
@@ -268,7 +268,7 @@ const props = {
 							width="56"
 							height="56"
 							viewBox="0 0 56 56"
-							style="animation-delay:2s;margin-left:0;margin-top:32px"
+							style="animation-delay:2s;margin-left:0;margin-top:4px"
 							><line
 								x1="0"
 								y1="28"
@@ -288,7 +288,7 @@ const props = {
 							width="28"
 							height="28"
 							viewBox="0 0 28 28"
-							style="margin-left:0;margin-top:32px"
+							style="margin-left:0;margin-top:4px"
 							><line
 								x1="0"
 								y1="14"
diff --git a/src/styles/landing.css b/src/styles/landing.css
index 71caa351a1cc484..8ae656443c60529 100644
--- a/src/styles/landing.css
+++ b/src/styles/landing.css
@@ -19,7 +19,7 @@
 	/* Shared landing card surfaces — used across Stats, Build, Secure */
 	--color-l-card: #fff;
 	--color-l-card-dark: #1d1d1d;
-	--color-l-card-hover: #fff;
+	--color-l-card-hover: #fafafa;
 	--color-l-card-hover-dark: #252525;
 
 	@keyframes v27-enter {
@@ -108,7 +108,7 @@
  * complex values (radial-gradient, mask-image) with no Tailwind equivalent.
  */
 .landing-root {
-	--l-section-pad: 2rem; /* 32px — single token for balanced inset */
+	--l-section-pad: max(2rem, 4vw);
 	--l-pad-top: var(--l-section-pad);
 	overflow-x: clip;
 	font-family:
@@ -134,16 +134,21 @@
 	--l-h-line-fine: rgba(0, 0, 0, 0.025);
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1439px) {
+	.landing-root {
+		--l-section-pad: max(2rem, 4vw);
+	}
+}
+
+@media (max-width: 800px) {
 	.landing-root {
-		--l-section-pad: 1.25rem; /* 20px — keeps the inset balanced on small screens */
 		--l-pad-top: 4rem; /* 64px — pt-16, more breathing room on mobile */
 	}
 }
 
 :root[data-theme="dark"] .landing-root {
 	color: #fafafa;
-
+	background: blue;
 	--l-dot-color: rgba(255, 255, 255, 0.05);
 	--l-dot-size: 22px 22px;
 	--l-dot-mask: radial-gradient(

From 484a34d6cea2e2b8888e4eec7d1e93993a7e14e5 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Wed, 1 Apr 2026 17:10:43 +0100
Subject: [PATCH 08/35] fix: bg

---
 src/styles/landing.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/landing.css b/src/styles/landing.css
index 8ae656443c60529..fb45ba268337506 100644
--- a/src/styles/landing.css
+++ b/src/styles/landing.css
@@ -148,7 +148,6 @@
 
 :root[data-theme="dark"] .landing-root {
 	color: #fafafa;
-	background: blue;
 	--l-dot-color: rgba(255, 255, 255, 0.05);
 	--l-dot-size: 22px 22px;
 	--l-dot-mask: radial-gradient(

From c57b034dfad199968859b4f412697e106edf4c0c Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 7 Apr 2026 10:55:00 +0100
Subject: [PATCH 09/35] feat: changlelog

---
 .../landing/AccelerateSection.astro           |    6 +-
 src/components/landing/BuildFromScratch.astro |    6 +-
 src/components/landing/ChangelogSection.astro |  391 +++++
 src/components/landing/Hero.astro             |   24 +-
 src/components/landing/SecureSection.astro    |    4 +-
 src/pages/design-lab/sidebar-variants.astro   | 1401 +++++++++++++++++
 src/pages/index.astro                         |    7 +-
 src/pages/request-lifecycle.astro             |   63 -
 8 files changed, 1819 insertions(+), 83 deletions(-)
 create mode 100644 src/components/landing/ChangelogSection.astro
 create mode 100644 src/pages/design-lab/sidebar-variants.astro
 delete mode 100644 src/pages/request-lifecycle.astro

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index 82b946c74fec5d3..d428123e2eefc99 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -116,15 +116,15 @@ const phases = [
 	</div>
 	<h2
 		id="accelerate-heading"
-		class="mb-2 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-100"
+		class="mb-2 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
 	>
 		See where the milliseconds go
 	</h2>
 	<p
-		class="mb-6 max-w-[600px] text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400"
+		class="mb-6 text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400"
 	>
 		Every request is a waterfall of latency. Hover a phase to see which product
-		eliminates it — toggle to see the compound effect.
+		eliminates it, and toggle to see the compound effect.
 	</p>
 
 	<!-- Toggle: Without / With Cloudflare -->
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index 3f52638fcef6481..fd863dc2bed7844 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -110,7 +110,7 @@ const primitives = [
 	</div>
 	<h2
 		id="build-heading"
-		class="mb-8 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 dark:text-zinc-50"
+		class="mb-8 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
 	>
 		Everything you need to build at the edge
 	</h2>
@@ -207,11 +207,11 @@ const primitives = [
 						>
 							<Icon name={p.icon} size="16px" />
 						</div>
-							<h3 class="text-xl font-medium -tracking-tight text-zinc-900 dark:text-zinc-50">
+							<h3 class="text-base leading-snug font-medium text-zinc-900 md:text-lg dark:text-zinc-50">
 								{p.heading}
 							</h3>
 						</div>
-						<p class="mb-6 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300">
+						<p class="mb-6 text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400">
 							{p.description}
 						</p>
 
diff --git a/src/components/landing/ChangelogSection.astro b/src/components/landing/ChangelogSection.astro
new file mode 100644
index 000000000000000..ee88b8b888e7c12
--- /dev/null
+++ b/src/components/landing/ChangelogSection.astro
@@ -0,0 +1,391 @@
+---
+/**
+ * ChangelogSection — Broadcast-grid changelog for the landing page.
+ *
+ * Asymmetric bento grid: the latest entry is a large featured card
+ * spanning 2 rows with a broadcast-ring pulse; remaining entries fill
+ * a 3-column gap-px grid with product-category colour accents.
+ * Plus-mark corner flair on the outer container.
+ *
+ * Hover states mirror ProductCard.astro:
+ *   - card bg shifts (bg-l-card → bg-l-card-hover)
+ *   - CTA text goes accent + underline, arrow shifts right
+ *   - titles do NOT change colour on hover
+ */
+import { getChangelogs } from "~/util/changelog";
+import { getEntries } from "astro:content";
+import { format } from "date-fns";
+
+/* ── Product-category palette (mirrors ProductCard.astro) ───────── */
+const COMPUTE = new Set([
+	"workers",
+	"pages",
+	"containers",
+	"workflows",
+	"durable-objects",
+	"queues",
+	"pipelines",
+	"cloudflare-for-platforms",
+	"workers-vpc",
+]);
+const STORAGE = new Set(["r2", "d1", "kv", "hyperdrive"]);
+const AI = new Set([
+	"workers-ai",
+	"ai-gateway",
+	"ai-search",
+	"agents",
+	"vectorize",
+	"browser-rendering",
+	"ai-crawl-control",
+]);
+const MEDIA = new Set(["images", "stream", "realtime"]);
+
+function catColor(id: string) {
+	if (COMPUTE.has(id)) return "#0a95ff";
+	if (STORAGE.has(id)) return "#ee0ddb";
+	if (AI.has(id)) return "#19e306";
+	if (MEDIA.has(id)) return "#9616ff";
+	return "#f56500";
+}
+
+/* ── Data ────────────────────────────────────────────────────────── */
+const all = await getChangelogs({
+	filter: (e) => !e.data.hidden && !e.data.scheduled,
+});
+
+const entries = await Promise.all(
+	all.slice(0, 8).map(async (entry) => {
+		const products = await getEntries(entry.data.products);
+		return {
+			title: entry.data.title,
+			description: entry.data.description,
+			dateFormatted: format(entry.data.date, "MMM dd, yyyy"),
+			dateShort: format(entry.data.date, "MMM dd"),
+			products: products.map((p) => ({
+				name: p.data.name,
+				id: p.id,
+				color: catColor(p.id),
+			})),
+			url: `/changelog/post/${entry.id}/`,
+		};
+	}),
+);
+
+const featured = entries[0];
+const grid = entries.slice(1);
+
+/* ── Plus-mark corner positions ──────────────────────────────────── */
+const CORNERS = [
+	"-top-[5.5px] -left-[5.5px]",
+	"-top-[5.5px] -right-[5.5px]",
+	"-bottom-[5.5px] -left-[5.5px]",
+	"-right-[5.5px] -bottom-[5.5px]",
+];
+---
+
+{
+	entries.length > 0 && (
+		<section
+			id="changelog"
+			class="pt-14 pb-12 max-[900px]:pt-10 max-[900px]:pb-10"
+			aria-labelledby="cl-heading"
+		>
+			{/* ── Header ─────────────────────────────────────────── */}
+			<div class="mb-8 flex items-end justify-between max-[600px]:mb-6">
+				<div>
+					<div class="mb-3">
+						<span class="text-accent font-mono text-xs tracking-widest uppercase">
+							Changelog
+						</span>
+					</div>
+					<h2
+						id="cl-heading"
+						class="mb-2 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
+					>
+						What we've shipped
+					</h2>
+					<p class="max-w-[600px] text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400">
+						The latest features and improvements shipping across Cloudflare.
+					</p>
+				</div>
+				<a
+					href="/changelog/"
+					class="group text-accent decoration-accent/40 hidden shrink-0 items-center gap-1.5 font-mono text-xs tracking-wider underline-offset-4 hover:underline md:inline-flex"
+				>
+					View all
+					<svg
+						width="12"
+						height="12"
+						viewBox="0 0 12 12"
+						class="transition-transform duration-150 group-hover:translate-x-0.5"
+						aria-hidden="true"
+					>
+						<path
+							d="M4.5 2.5L8 6L4.5 9.5"
+							stroke="currentColor"
+							stroke-width="1.2"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</a>
+			</div>
+
+			{/* ── Grid ───────────────────────────────────────────── */}
+			<div class="relative bg-green-100">
+				{CORNERS.map((pos) => (
+					<svg
+						width="10"
+						height="10"
+						viewBox="0 0 10 10"
+						class={`pointer-events-none absolute ${pos} z-10`}
+						aria-hidden="true"
+					>
+						<line
+							x1="0"
+							y1="5"
+							x2="10"
+							y2="5"
+							stroke-width="1"
+							class="stroke-accent dark:stroke-white"
+						/>
+						<line
+							x1="5"
+							y1="0"
+							x2="5"
+							y2="10"
+							stroke-width="1"
+							class="stroke-accent dark:stroke-white"
+						/>
+					</svg>
+				))}
+
+				<div class="cl-grid grid gap-px border border-zinc-200 bg-zinc-200 dark:border-[#2a2a2a] dark:bg-[#2a2a2a]">
+					{/* ── Featured (latest) — same spacing rhythm as ProductCard ── */}
+					{featured && (
+						<a
+							href={featured.url}
+							class="cl-featured bg-l-card dark:bg-l-card-dark hover:bg-l-card-hover dark:hover:bg-l-card-hover-dark flex flex-col p-6 transition-colors duration-150"
+						>
+							{/* Header — date left, product label right (matching small cards) */}
+							<div class="mb-4 flex items-center justify-between">
+								<div class="flex items-center gap-2.5">
+									<span class="cl-broadcast" aria-hidden="true">
+										<span class="cl-ring" />
+										<span class="cl-ring cl-ring--delay" />
+										<span class="cl-core" />
+									</span>
+									<span class="text-accent font-mono text-xs font-medium tracking-widest uppercase">
+										Latest
+									</span>
+									<time class="font-mono text-xs text-zinc-500 tabular-nums dark:text-zinc-400">
+										{featured.dateFormatted}
+									</time>
+								</div>
+								{featured.products[0] && (
+									<span class="text-accent font-mono text-xs tracking-wide uppercase">
+										{featured.products[0].name}
+									</span>
+								)}
+							</div>
+
+							{/* Title — mirrors ProductCard scenario (mb-2) */}
+							<div class="mb-9 flex-1 pt-4">
+								<h3 class="mb-2 text-xl leading-snug font-medium text-zinc-900 md:text-2xl dark:text-zinc-50">
+									{featured.title}
+								</h3>
+
+								{/* Description — mirrors ProductCard detail (mb-6 flex-1) */}
+								<p class="max-w-[480px] text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400">
+									{featured.description}
+								</p>
+							</div>
+
+							{/* CTA — mirrors ProductCard CTA */}
+							<span class="group/cta inline-flex w-fit items-center gap-2 text-sm font-medium text-zinc-600 dark:text-zinc-300">
+								Read update
+								<svg
+									width="14"
+									height="14"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="transition-transform duration-150 group-hover/cta:translate-x-0.5"
+									aria-hidden="true"
+								>
+									<line x1="5" y1="12" x2="19" y2="12" />
+									<polyline points="12 5 19 12 12 19" />
+								</svg>
+							</span>
+						</a>
+					)}
+
+					{/* ── Smaller cards (mirrors ProductCard anatomy) ── */}
+					{grid.map((entry) => (
+						<a
+							href={entry.url}
+							class="cl-card bg-l-card dark:bg-l-card-dark hover:bg-l-card-hover dark:hover:bg-l-card-hover-dark flex flex-col p-6 transition-colors duration-150"
+						>
+							{/* Header: date + product label — mirrors ProductCard icon + label row */}
+							<div class="mb-4 flex items-center justify-between">
+								<time class="font-mono text-xs text-zinc-500 tabular-nums dark:text-zinc-400">
+									{entry.dateShort}
+								</time>
+								<span class="text-accent font-mono text-xs tracking-wide uppercase">
+									{entry.products[0]?.name}
+								</span>
+							</div>
+
+							{/* Title — matches ProductCard scenario */}
+							<p class="mb-2 line-clamp-2 text-base leading-snug font-medium text-zinc-900 md:text-lg dark:text-zinc-50">
+								{entry.title}
+							</p>
+
+							{/* Description — matches ProductCard detail */}
+							<p class="mb-6 line-clamp-2 flex-1 text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400">
+								{entry.description}
+							</p>
+
+							{/* CTA — matches ProductCard CTA */}
+							<span class="group/cta inline-flex w-fit items-center gap-2 text-sm font-medium text-zinc-600 dark:text-zinc-300">
+								Read more
+								<svg
+									width="14"
+									height="14"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="transition-transform duration-150 group-hover/cta:translate-x-0.5"
+									aria-hidden="true"
+								>
+									<line x1="5" y1="12" x2="19" y2="12" />
+									<polyline points="12 5 19 12 12 19" />
+								</svg>
+							</span>
+						</a>
+					))}
+				</div>
+			</div>
+
+			{/* ── Mobile CTA ─────────────────────────────────────── */}
+			<div class="mt-6 md:hidden">
+				<a
+					href="/changelog/"
+					class="group text-accent decoration-accent/40 inline-flex items-center gap-1.5 font-mono text-xs tracking-wider underline-offset-4 hover:underline"
+				>
+					View all updates
+					<svg
+						width="12"
+						height="12"
+						viewBox="0 0 12 12"
+						class="transition-transform duration-150 group-hover:translate-x-0.5"
+						aria-hidden="true"
+					>
+						<path
+							d="M4.5 2.5L8 6L4.5 9.5"
+							stroke="currentColor"
+							stroke-width="1.2"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</a>
+			</div>
+		</section>
+	)
+}
+
+<style>
+	/* ── Grid layout ───────────────────────────────────────────────── */
+	.cl-grid {
+		grid-template-columns: 5fr 3fr 3fr;
+	}
+	.cl-featured {
+		grid-row: 1 / 3;
+		text-decoration: none;
+	}
+	.cl-grid > a:not(.cl-featured) {
+		text-decoration: none;
+	}
+
+	/* Hover: CTA goes accent + underline (small cards) — mirrors ProductCard */
+	.cl-card:hover .group\/cta,
+	.cl-card:focus-within .group\/cta {
+		color: var(--color-accent);
+		text-decoration: underline;
+		text-underline-offset: 4px;
+		text-decoration-color: color-mix(in srgb, #f56500 40%, transparent);
+	}
+
+	/* Hover: CTA text goes accent + underline (featured card) */
+	.cl-featured:hover .group\/cta {
+		color: var(--color-accent);
+		text-decoration: underline;
+		text-underline-offset: 4px;
+		text-decoration-color: color-mix(in srgb, #f56500 40%, transparent);
+	}
+
+	@media (max-width: 768px) {
+		.cl-grid {
+			grid-template-columns: 1fr;
+		}
+		.cl-featured {
+			grid-row: auto;
+		}
+	}
+
+	/* ── Broadcast ring animation ──────────────────────────────────── */
+	.cl-broadcast {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 12px;
+		height: 12px;
+		flex-shrink: 0;
+	}
+	.cl-core {
+		position: absolute;
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+		background: var(--color-accent);
+	}
+	.cl-ring {
+		position: absolute;
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		border: 1px solid var(--color-accent);
+		animation: cl-pulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+		will-change: transform, opacity;
+	}
+	.cl-ring--delay {
+		animation-delay: 1.5s;
+	}
+	@keyframes cl-pulse {
+		0% {
+			transform: scale(0.4);
+			opacity: 0.6;
+		}
+		100% {
+			transform: scale(1.6);
+			opacity: 0;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.cl-ring {
+			animation: none;
+			opacity: 0.25;
+			transform: scale(1);
+		}
+	}
+</style>
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
index 11542684971d072..b59a15b2d64f552 100644
--- a/src/components/landing/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -19,8 +19,8 @@ import { stagger } from "./constants";
 	<p
 		class={`text-lg text-pretty max-w-[480px] leading-relaxed mb-8 max-[480px]:text-base max-[480px]:mb-6 text-[#52525b] dark:text-[#a1a1aa] ${stagger(0.1)}`}
 	>
-		Everything you need to build a better Internet; guides, references, and
-		tools for Cloudflare's developer platform.
+		Connect to or build on the Cloudflare network. Make your apps, agents,
+		employees, and networks fast and secure
 	</p>
 
 	<div
@@ -28,7 +28,7 @@ import { stagger } from "./constants";
 	>
 		<a
 			href="/fundamentals"
-			class="focus-visible:outline-accent inline-flex h-10 shrink-0 cursor-pointer items-center gap-2 whitespace-nowrap rounded-lg rounded-md bg-[#18181b] px-4 text-base font-medium text-white no-underline transition-colors duration-150 hover:bg-[#f56500] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 max-[480px]:h-9 max-[480px]:px-3 max-[480px]:text-sm dark:bg-[#fafafa] dark:text-[#09090b] dark:hover:bg-[#e4e4e7] dark:hover:text-[#09090b]"
+			class="focus-visible:outline-accent inline-flex h-10 shrink-0 cursor-pointer items-center gap-2 rounded-lg rounded-md bg-[#18181b] px-4 text-base font-medium whitespace-nowrap text-white no-underline transition-colors duration-150 hover:bg-[#f56500] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 max-[480px]:h-9 max-[480px]:px-3 max-[480px]:text-sm dark:bg-[#fafafa] dark:text-[#09090b] dark:hover:bg-[#e4e4e7] dark:hover:text-[#09090b]"
 		>
 			Get started
 			<Icon name="right-arrow" size="0.75rem" />
@@ -37,22 +37,28 @@ import { stagger } from "./constants";
 			class="h-4 w-px bg-black/10 max-[480px]:hidden dark:bg-white/10"
 			aria-hidden="true"></span>
 		<a
-			href="/directory/"
+			href="#build"
 			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
 		>
-			Directory
+			Build
 		</a>
 		<a
-			href="/api/"
+			href="#secure"
 			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
 		>
-			API reference
+			Secure
 		</a>
 		<a
-			href="/resources/"
+			href="#accelerate"
+			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
+		>
+			Accelerate
+		</a>
+		<a
+			href="#changelog"
 			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 max-[480px]:hidden dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
 		>
-			Resources
+			Changelog
 		</a>
 	</div>
 </section>
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index 8f78b0d5b72fd1a..53decd23fc42814 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -87,14 +87,14 @@ const categories = [
 	</div>
 	<h2
 		id="s6-heading"
-		class="mb-2 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-100"
+		class="mb-2 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
 	>
 		Secure what you already have
 	</h2>
 	<p
 		class="mb-8 max-w-[600px] text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400"
 	>
-		Add Cloudflare in front of what is already running — no rebuild required.
+		Add Cloudflare in front of what is already running, no rebuild required.
 	</p>
 
 	<div class="space-y-8">
diff --git a/src/pages/design-lab/sidebar-variants.astro b/src/pages/design-lab/sidebar-variants.astro
new file mode 100644
index 000000000000000..868f499fb91018b
--- /dev/null
+++ b/src/pages/design-lab/sidebar-variants.astro
@@ -0,0 +1,1401 @@
+---
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
+import type { StarlightPageProps } from "@astrojs/starlight/props";
+import { Icon as AstroIcon } from "astro-icon/components";
+
+const props = {
+	frontmatter: {
+		title: "Sidebar Nav — Final Variants",
+		description:
+			"Five high-fidelity sidebar variants informed by the adversarial suggestion pipeline.",
+		template: "doc",
+		tableOfContents: false,
+	},
+	hasSidebar: false,
+	hideBreadcrumbs: true,
+	headings: [],
+} as StarlightPageProps;
+
+const navItems = [
+	{ label: "Overview", active: true },
+	{ label: "Get started", group: false },
+	{ label: "Configuration", group: false },
+	{ label: "Runtime APIs", group: true },
+	{ label: "Workers AI", group: true },
+	{ label: "Observability", group: true },
+	{ label: "Cron Triggers", group: false },
+	{ label: "Examples", group: true },
+	{ label: "Wrangler", group: true },
+	{ label: "Platform", group: true },
+];
+
+const computeSiblings = [
+	{ label: "Workers", slug: "workers", active: true },
+	{ label: "Pages", slug: "pages", active: false },
+	{ label: "Containers", slug: "containers", active: false },
+	{ label: "Workflows", slug: "workflows", active: false },
+	{ label: "Durable Objects", slug: "durable-objects", active: false },
+	{ label: "Queues", slug: "queues", active: false },
+	{ label: "Pipelines", slug: "pipelines", active: false },
+];
+
+const taxonomyGroups = [
+	{
+		label: "Compute",
+		icon: "workers",
+		products: [
+			"Workers",
+			"Pages",
+			"Containers",
+			"Workflows",
+			"Durable Objects",
+			"Queues",
+			"Pipelines",
+		],
+	},
+	{
+		label: "AI",
+		icon: "workers-ai",
+		products: ["Workers AI", "AI Gateway", "Vectorize", "Browser Rendering"],
+	},
+	{
+		label: "Storage & Database",
+		icon: "kv",
+		products: ["D1", "R2", "KV", "Hyperdrive"],
+	},
+	{
+		label: "Media",
+		icon: "images",
+		products: ["Images", "Stream", "Realtime"],
+	},
+];
+---
+
+<StarlightPage {...props}>
+	<p class="lab-intro">
+		Five variants informed by the adversarial pipeline. Key principles:
+		search-first for 99 products, passive breadcrumb context, no full taxonomy
+		in the sidebar. All interactive — click to test. Product: <strong
+			>Workers</strong
+		> (Build → Compute).
+	</p>
+
+	<div class="lab-grid">
+		<!-- ────────────────────────────────────────
+		     BASELINE — Current production sidebar
+		     ──────────────────────────────────────── -->
+		<div class="lab-col">
+			<div class="lab-tag baseline">Current</div>
+			<div class="sb">
+				<div class="sb-sticky">
+					<div class="sb-product-title">
+						<a href="/workers/" class="sb-product-link">
+							<AstroIcon name="workers" size="32px" class="sb-icon" />
+							<span class="sb-name">Cloudflare Workers</span>
+						</a>
+					</div>
+					<div class="sb-search-wrap">
+						<input
+							class="sb-search"
+							type="text"
+							placeholder="Search sidebar..."
+							disabled
+						/>
+						<span class="sb-search-hint">/</span>
+					</div>
+				</div>
+				<nav class="sb-nav">
+					{
+						navItems.map((item) => (
+							<a
+								class:list={[
+									"sb-nav-item",
+									{ active: item.active, group: item.group },
+								]}
+							>
+								<span>{item.label}</span>
+								{item.group && <span class="sb-caret">›</span>}
+							</a>
+						))
+					}
+				</nav>
+			</div>
+			<p class="lab-note">
+				No category context. No way to switch products without going back to the
+				homepage.
+			</p>
+		</div>
+
+		<!-- ════════════════════════════════════════
+		     1 — COMMAND PALETTE PRODUCT FINDER
+		     Separate from sidebar search. ⌘K or
+		     button opens a full overlay with
+		     taxonomy-grouped search.
+		     ════════════════════════════════════════ -->
+		<div class="lab-col">
+			<div class="lab-tag">1</div>
+			<div class="sb v1-sb">
+				<div class="sb-sticky">
+					<div class="sb-product-title">
+						<a href="/workers/" class="sb-product-link">
+							<AstroIcon name="workers" size="32px" class="sb-icon" />
+							<span class="sb-name">Cloudflare Workers</span>
+						</a>
+						<button
+							class="v1-switch-btn"
+							data-v1-open
+							aria-label="Switch product"
+						>
+							<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+								><path
+									d="M6 2h4M6 14h4M2 6v4M14 6v4"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"></path></svg
+							>
+						</button>
+					</div>
+					<div class="sb-search-wrap">
+						<input
+							class="sb-search"
+							type="text"
+							placeholder="Search sidebar..."
+							disabled
+						/>
+						<span class="sb-search-hint">/</span>
+					</div>
+				</div>
+				<nav class="sb-nav">
+					{
+						navItems.map((item) => (
+							<a
+								class:list={[
+									"sb-nav-item",
+									{ active: item.active, group: item.group },
+								]}
+							>
+								<span>{item.label}</span>
+								{item.group && <span class="sb-caret">›</span>}
+							</a>
+						))
+					}
+				</nav>
+
+				<!-- Overlay -->
+				<div class="v1-overlay" data-v1-overlay>
+					<div class="v1-palette">
+						<div class="v1-palette-search-wrap">
+							<svg
+								class="v1-search-icon"
+								width="14"
+								height="14"
+								viewBox="0 0 16 16"
+								fill="none"
+								><circle
+									cx="7"
+									cy="7"
+									r="5.5"
+									stroke="currentColor"
+									stroke-width="1.5"></circle><path
+									d="m11 11 3.5 3.5"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"></path></svg
+							>
+							<input
+								class="v1-palette-search"
+								type="text"
+								placeholder="Search all products..."
+								data-v1-search
+								autofocus
+							/>
+							<kbd class="v1-kbd">esc</kbd>
+						</div>
+						<div class="v1-palette-body" data-v1-body>
+							<div class="v1-section-label">Build</div>
+							{
+								taxonomyGroups.map((group) => (
+									<div class="v1-group">
+										<div class="v1-group-label">
+											<AstroIcon
+												name={group.icon}
+												size="14px"
+												class="v1-group-icon"
+											/>
+											{group.label}
+										</div>
+										{group.products.map((p) => (
+											<a
+												class:list={["v1-product", { active: p === "Workers" }]}
+												href="#"
+											>
+												{p}
+												{p === "Workers" && (
+													<span class="v1-current">current</span>
+												)}
+											</a>
+										))}
+									</div>
+								))
+							}
+							<div class="v1-section-label" style="margin-top: 0.5rem;">
+								Protect &amp; Connect
+							</div>
+							<div class="v1-group">
+								<div class="v1-group-label">
+									<AstroIcon name="waf" size="14px" class="v1-group-icon" />
+									Application Security
+								</div>
+								<a class="v1-product" href="#">WAF</a>
+								<a class="v1-product" href="#">DDoS Protection</a>
+								<a class="v1-product" href="#">SSL/TLS</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<p class="lab-note">
+				<strong>Command palette.</strong> A dedicated switch button (or ⌘K) opens
+				a search-first product finder as a full overlay. Taxonomy groups visible
+				while searching. Handles 99 products gracefully because search is primary,
+				not browsing.
+			</p>
+		</div>
+
+		<!-- ════════════════════════════════════════
+		     2 — INLINE EXPANDABLE SWITCHER
+		     Product title expands to reveal a
+		     compact categorized product picker.
+		     ════════════════════════════════════════ -->
+		<div class="lab-col">
+			<div class="lab-tag">2</div>
+			<div class="sb">
+				<div class="sb-sticky">
+					<div class="sb-product-title">
+						<button class="v2-trigger" data-v2-trigger>
+							<AstroIcon name="workers" size="32px" class="sb-icon" />
+							<div class="v2-title-text">
+								<span class="sb-name">Cloudflare Workers</span>
+								<span class="v2-context">Build › Compute</span>
+							</div>
+							<span class="v2-chevron" data-v2-chevron>‹</span>
+						</button>
+					</div>
+					<div class="v2-panel" data-v2-panel>
+						<input
+							class="v2-filter"
+							type="text"
+							placeholder="Find a product..."
+							data-v2-filter
+						/>
+						<div class="v2-panel-body" data-v2-panel-body>
+							{
+								taxonomyGroups.map((group) => (
+									<div class="v2-group">
+										<div class="v2-group-label">
+											<AstroIcon
+												name={group.icon}
+												size="13px"
+												class="v2-group-icon"
+											/>
+											{group.label}
+										</div>
+										<div class="v2-group-items">
+											{group.products.map((p) => (
+												<a
+													class:list={["v2-item", { active: p === "Workers" }]}
+													href="#"
+												>
+													{p}
+												</a>
+											))}
+										</div>
+									</div>
+								))
+							}
+						</div>
+						<a href="/" class="v2-all-link">All products →</a>
+					</div>
+					<div class="sb-search-wrap">
+						<input
+							class="sb-search"
+							type="text"
+							placeholder="Search sidebar..."
+							disabled
+						/>
+						<span class="sb-search-hint">/</span>
+					</div>
+				</div>
+				<nav class="sb-nav">
+					{
+						navItems.map((item) => (
+							<a
+								class:list={[
+									"sb-nav-item",
+									{ active: item.active, group: item.group },
+								]}
+							>
+								<span>{item.label}</span>
+								{item.group && <span class="sb-caret">›</span>}
+							</a>
+						))
+					}
+				</nav>
+			</div>
+			<p class="lab-note">
+				<strong>Inline switcher.</strong> Product title is clickable — expands a
+				compact panel with search + categorized product list. Panel pushes content
+				down (not an overlay). Category context always visible as subtitle.
+			</p>
+		</div>
+
+		<!-- ════════════════════════════════════════
+		     3 — BREADCRUMB TITLE WITH POPOVERS
+		     Compact breadcrumb format. Clicking
+		     segments opens popovers showing
+		     siblings at that level.
+		     ════════════════════════════════════════ -->
+		<div class="lab-col">
+			<div class="lab-tag">3</div>
+			<div class="sb">
+				<div class="sb-sticky">
+					<div class="sb-product-title v3-title">
+						<AstroIcon name="workers" size="32px" class="sb-icon" />
+						<div class="v3-crumbs">
+							<a href="/" class="v3-crumb-link">Build</a>
+							<span class="v3-crumb-sep">›</span>
+							<button class="v3-crumb-btn" data-v3-trigger>
+								Compute
+								<svg
+									width="10"
+									height="10"
+									viewBox="0 0 10 10"
+									class="v3-crumb-chevron"
+									><path
+										d="M2.5 4 5 6.5 7.5 4"
+										stroke="currentColor"
+										stroke-width="1.25"
+										fill="none"
+										stroke-linecap="round"
+										stroke-linejoin="round"></path></svg
+								>
+							</button>
+							<div class="v3-popover" data-v3-popover>
+								{
+									computeSiblings.map((p) => (
+										<a
+											class:list={["v3-pop-item", { active: p.active }]}
+											href={`/${p.slug}/`}
+										>
+											<AstroIcon
+												name={p.slug}
+												size="16px"
+												class="v3-pop-icon"
+											/>
+											{p.label}
+										</a>
+									))
+								}
+							</div>
+							<span class="v3-crumb-sep">›</span>
+							<span class="v3-crumb-current">Workers</span>
+						</div>
+					</div>
+					<div class="sb-search-wrap">
+						<input
+							class="sb-search"
+							type="text"
+							placeholder="Search sidebar..."
+							disabled
+						/>
+						<span class="sb-search-hint">/</span>
+					</div>
+				</div>
+				<nav class="sb-nav">
+					{
+						navItems.map((item) => (
+							<a
+								class:list={[
+									"sb-nav-item",
+									{ active: item.active, group: item.group },
+								]}
+							>
+								<span>{item.label}</span>
+								{item.group && <span class="sb-caret">›</span>}
+							</a>
+						))
+					}
+				</nav>
+			</div>
+			<p class="lab-note">
+				<strong>Breadcrumb with popovers.</strong> Replaces the product title with
+				a full breadcrumb trail. Clicking "Compute" opens a popover with sibling
+				products. Passive context + quick switching in one element.
+			</p>
+		</div>
+
+		<!-- ════════════════════════════════════════
+		     4 — DUAL-MODE SEARCH
+		     Sidebar search has two modes: current
+		     product (default) and all products.
+		     Tab to switch.
+		     ════════════════════════════════════════ -->
+		<div class="lab-col">
+			<div class="lab-tag">4</div>
+			<div class="sb">
+				<div class="sb-sticky">
+					<div class="sb-product-title">
+						<a href="/workers/" class="sb-product-link">
+							<AstroIcon name="workers" size="32px" class="sb-icon" />
+							<div class="v4-title-stack">
+								<span class="sb-name">Cloudflare Workers</span>
+								<span class="v4-subtitle">Build › Compute</span>
+							</div>
+						</a>
+					</div>
+					<div class="v4-search-area">
+						<div class="v4-tabs">
+							<button class="v4-tab active" data-v4-tab="sidebar"
+								>Sidebar</button
+							>
+							<button class="v4-tab" data-v4-tab="products">All Products</button
+							>
+						</div>
+						<div class="sb-search-wrap">
+							<input
+								class="sb-search"
+								type="text"
+								placeholder="Search sidebar..."
+								data-v4-input
+							/>
+							<span class="sb-search-hint">/</span>
+						</div>
+					</div>
+				</div>
+				<div class="v4-product-results" data-v4-results>
+					{
+						taxonomyGroups.slice(0, 2).map((group) => (
+							<div class="v4-result-group">
+								<div class="v4-result-label">
+									<AstroIcon
+										name={group.icon}
+										size="13px"
+										class="v4-result-icon"
+									/>
+									{group.label}
+								</div>
+								{group.products.map((p) => (
+									<a
+										class:list={["v4-result-item", { active: p === "Workers" }]}
+										href="#"
+									>
+										{p}
+									</a>
+								))}
+							</div>
+						))
+					}
+				</div>
+				<nav class="sb-nav" data-v4-nav>
+					{
+						navItems.map((item) => (
+							<a
+								class:list={[
+									"sb-nav-item",
+									{ active: item.active, group: item.group },
+								]}
+							>
+								<span>{item.label}</span>
+								{item.group && <span class="sb-caret">›</span>}
+							</a>
+						))
+					}
+				</nav>
+			</div>
+			<p class="lab-note">
+				<strong>Dual-mode search.</strong> The search bar gains a tab toggle: "Sidebar"
+				(default) searches the current product tree, "All Products" shows the full
+				taxonomy. One input, two modes. Category context as subtitle.
+			</p>
+		</div>
+
+		<!-- ════════════════════════════════════════
+		     5 — SIBLING STRIP + BREADCRUMB
+		     Horizontal scrollable strip of sibling
+		     product icons below the product title.
+		     ════════════════════════════════════════ -->
+		<div class="lab-col">
+			<div class="lab-tag">5</div>
+			<div class="sb">
+				<div class="sb-sticky">
+					<div class="sb-product-title">
+						<a href="/workers/" class="sb-product-link">
+							<AstroIcon name="workers" size="32px" class="sb-icon" />
+							<div class="v5-title-stack">
+								<span class="sb-name">Cloudflare Workers</span>
+								<a href="/" class="v5-breadcrumb">Build › Compute</a>
+							</div>
+						</a>
+					</div>
+					<div class="v5-strip-wrap">
+						<div class="v5-strip">
+							{
+								computeSiblings.map((p) => (
+									<a
+										class:list={["v5-chip", { active: p.active }]}
+										href={`/${p.slug}/`}
+										title={p.label}
+									>
+										<AstroIcon name={p.slug} size="16px" class="v5-chip-icon" />
+										<span class="v5-chip-label">{p.label}</span>
+									</a>
+								))
+							}
+						</div>
+					</div>
+					<div class="sb-search-wrap">
+						<input
+							class="sb-search"
+							type="text"
+							placeholder="Search sidebar..."
+							disabled
+						/>
+						<span class="sb-search-hint">/</span>
+					</div>
+				</div>
+				<nav class="sb-nav">
+					{
+						navItems.map((item) => (
+							<a
+								class:list={[
+									"sb-nav-item",
+									{ active: item.active, group: item.group },
+								]}
+							>
+								<span>{item.label}</span>
+								{item.group && <span class="sb-caret">›</span>}
+							</a>
+						))
+					}
+				</nav>
+			</div>
+			<p class="lab-note">
+				<strong>Sibling strip.</strong> A horizontal scrollable row of sibling product
+				icons below the title. Active product is highlighted. Breadcrumb subtitle
+				for category context. Enables one-click switching to related products.
+			</p>
+		</div>
+	</div>
+</StarlightPage>
+
+<script>
+	/* ═══ 1 — Command palette ═══ */
+	document.querySelectorAll("[data-v1-open]").forEach((btn) => {
+		btn.addEventListener("click", () => {
+			const overlay = btn
+				.closest(".sb")
+				?.querySelector("[data-v1-overlay]") as HTMLElement;
+			if (overlay) {
+				overlay.classList.add("open");
+				(
+					overlay.querySelector("[data-v1-search]") as HTMLInputElement
+				)?.focus();
+			}
+		});
+	});
+	document.querySelectorAll("[data-v1-overlay]").forEach((overlay) => {
+		overlay.addEventListener("click", (e) => {
+			if (e.target === overlay) overlay.classList.remove("open");
+		});
+	});
+	document.querySelectorAll("[data-v1-search]").forEach((input) => {
+		input.addEventListener("keydown", (e) => {
+			if ((e as KeyboardEvent).key === "Escape") {
+				(input as HTMLElement)
+					.closest("[data-v1-overlay]")
+					?.classList.remove("open");
+			}
+		});
+	});
+
+	/* ═══ 2 — Inline switcher ═══ */
+	document.querySelectorAll("[data-v2-trigger]").forEach((btn) => {
+		btn.addEventListener("click", () => {
+			const panel = btn
+				.closest(".sb-sticky")
+				?.querySelector("[data-v2-panel]") as HTMLElement;
+			const chevron = btn.querySelector("[data-v2-chevron]") as HTMLElement;
+			if (panel) {
+				const isOpen = panel.classList.toggle("open");
+				chevron?.classList.toggle("open", isOpen);
+				if (isOpen) {
+					(
+						panel.querySelector("[data-v2-filter]") as HTMLInputElement
+					)?.focus();
+				}
+			}
+		});
+	});
+
+	/* ═══ 3 — Breadcrumb popover ═══ */
+	document.querySelectorAll("[data-v3-trigger]").forEach((btn) => {
+		btn.addEventListener("click", (e) => {
+			e.stopPropagation();
+			const pop = btn.parentElement?.querySelector(
+				"[data-v3-popover]",
+			) as HTMLElement;
+			pop?.classList.toggle("open");
+		});
+	});
+	document.addEventListener("click", () => {
+		document
+			.querySelectorAll("[data-v3-popover].open")
+			.forEach((p) => p.classList.remove("open"));
+	});
+
+	/* ═══ 4 — Dual-mode search ═══ */
+	document.querySelectorAll("[data-v4-tab]").forEach((tab) => {
+		tab.addEventListener("click", () => {
+			const parent = tab.closest(".sb");
+			if (!parent) return;
+			parent
+				.querySelectorAll("[data-v4-tab]")
+				.forEach((t) => t.classList.remove("active"));
+			tab.classList.add("active");
+			const mode = (tab as HTMLElement).dataset.v4Tab;
+			const results = parent.querySelector("[data-v4-results]") as HTMLElement;
+			const nav = parent.querySelector("[data-v4-nav]") as HTMLElement;
+			const input = parent.querySelector("[data-v4-input]") as HTMLInputElement;
+			if (mode === "products") {
+				results?.classList.add("open");
+				nav?.classList.add("hidden");
+				if (input) input.placeholder = "Search all products...";
+			} else {
+				results?.classList.remove("open");
+				nav?.classList.remove("hidden");
+				if (input) input.placeholder = "Search sidebar...";
+			}
+		});
+	});
+</script>
+
+<style is:global>
+	/* ─── Layout ─── */
+	.right-sidebar-container,
+	mobile-starlight-toc {
+		display: none;
+	}
+	.main-pane {
+		justify-items: center;
+	}
+	.sl-markdown-content {
+		max-width: 100%;
+	}
+
+	.lab-intro {
+		max-width: 720px;
+		color: var(--sl-color-gray-3);
+		font-size: 0.9375rem;
+		line-height: 1.6;
+		margin-bottom: 2rem;
+	}
+	.lab-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		gap: 2.5rem;
+		padding-bottom: 4rem;
+	}
+	.lab-col {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+	.lab-tag {
+		display: inline-flex;
+		align-self: flex-start;
+		align-items: center;
+		justify-content: center;
+		min-width: 1.5rem;
+		height: 1.5rem;
+		padding: 0 0.375rem;
+		border-radius: 6px;
+		font-size: 0.6875rem;
+		font-weight: 700;
+		letter-spacing: 0.02em;
+		background: var(--sl-color-gray-6);
+		color: var(--sl-color-gray-2);
+	}
+	.lab-tag.baseline {
+		background: color-mix(in srgb, #f56500 15%, transparent);
+		color: #f56500;
+	}
+	.lab-note {
+		font-size: 0.8125rem;
+		line-height: 1.55;
+		color: var(--sl-color-gray-3);
+		margin: 0;
+	}
+	.lab-note strong {
+		color: var(--sl-color-text);
+		font-weight: 600;
+	}
+
+	/* ═══════════════════════════════════
+	   Shared sidebar mock — production
+	   ═══════════════════════════════════ */
+	.sb {
+		position: relative;
+		width: 100%;
+		max-width: 272px;
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: 10px;
+		overflow: hidden;
+		background: var(--sl-color-bg);
+		font-family:
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			sans-serif;
+	}
+	.sb-sticky {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding: 0.875rem 1rem;
+	}
+	.sb-product-title {
+		display: flex;
+		align-items: center;
+		gap: 0.125rem;
+	}
+	.sb-product-link {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		text-decoration: none;
+		color: inherit;
+	}
+	.sb-icon {
+		flex-shrink: 0;
+		color: #f56500;
+	}
+	.sb-name {
+		font-size: 1.125rem;
+		font-weight: 650;
+		color: var(--sl-color-text);
+		line-height: 1.2;
+	}
+	.sb-search-wrap {
+		position: relative;
+	}
+	.sb-search {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: 2.125rem;
+		padding: 0 2rem 0 0.75rem;
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: 8px;
+		font-size: 0.8125rem;
+		color: var(--sl-color-gray-4);
+		background: transparent;
+		outline: none;
+		box-sizing: border-box;
+	}
+	.sb-search-hint {
+		position: absolute;
+		right: 0.5rem;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 0.6875rem;
+		font-weight: 600;
+		color: var(--sl-color-gray-4);
+		background: var(--sl-color-gray-6);
+		padding: 0.0625rem 0.375rem;
+		border-radius: 4px;
+		pointer-events: none;
+		line-height: 1.4;
+	}
+	.sb-nav {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		padding: 0.375rem 0.75rem 1rem;
+	}
+	.sb-nav.hidden {
+		display: none;
+	}
+	.sb-nav-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		min-height: 2.125rem;
+		padding: 0.375rem 0.75rem;
+		border-radius: 8px;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--sl-color-gray-3);
+		text-decoration: none;
+		cursor: default;
+	}
+	.sb-nav-item.active {
+		background: var(--sl-color-gray-6);
+		color: var(--sl-color-text);
+		font-weight: 600;
+	}
+	.sb-caret {
+		font-size: 0.875rem;
+		opacity: 0.4;
+	}
+
+	/* ═══ 1 — COMMAND PALETTE ═══ */
+	.v1-switch-btn {
+		margin-left: auto;
+		display: grid;
+		place-items: center;
+		width: 28px;
+		height: 28px;
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: 6px;
+		background: transparent;
+		color: var(--sl-color-gray-3);
+		cursor: pointer;
+		transition:
+			border-color 0.15s,
+			color 0.15s,
+			background 0.15s;
+		flex-shrink: 0;
+	}
+	.v1-switch-btn:hover {
+		border-color: var(--sl-color-gray-4);
+		color: var(--sl-color-text);
+		background: var(--sl-color-gray-6);
+	}
+
+	.v1-overlay {
+		display: none;
+		position: absolute;
+		inset: 0;
+		z-index: 10;
+		background: color-mix(in srgb, var(--sl-color-bg) 85%, transparent);
+		backdrop-filter: blur(4px);
+		padding: 0.75rem;
+	}
+	.v1-overlay.open {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.v1-palette {
+		display: flex;
+		flex-direction: column;
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: 10px;
+		background: var(--sl-color-bg);
+		box-shadow: 0 8px 32px color-mix(in srgb, black 10%, transparent);
+		overflow: hidden;
+		max-height: 100%;
+	}
+	.v1-palette-search-wrap {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.625rem 0.75rem;
+		border-bottom: 1px solid var(--sl-color-gray-6);
+	}
+	.v1-search-icon {
+		color: var(--sl-color-gray-4);
+		flex-shrink: 0;
+	}
+	.v1-palette-search {
+		flex: 1;
+		border: none;
+		background: transparent;
+		font-size: 0.875rem;
+		color: var(--sl-color-text);
+		outline: none;
+	}
+	.v1-palette-search::placeholder {
+		color: var(--sl-color-gray-4);
+	}
+	.v1-kbd {
+		font-size: 0.625rem;
+		font-weight: 600;
+		padding: 0.0625rem 0.3125rem;
+		border-radius: 4px;
+		background: var(--sl-color-gray-6);
+		color: var(--sl-color-gray-4);
+		flex-shrink: 0;
+		font-family: inherit;
+		line-height: 1.5;
+	}
+
+	.v1-palette-body {
+		overflow-y: auto;
+		padding: 0.375rem;
+	}
+	.v1-section-label {
+		padding: 0.375rem 0.5rem 0.125rem;
+		font-size: 0.625rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--sl-color-gray-4);
+	}
+	.v1-group {
+		margin-bottom: 0.25rem;
+	}
+	.v1-group-label {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.25rem 0.5rem;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		color: var(--sl-color-gray-3);
+	}
+	.v1-group-icon {
+		color: var(--sl-color-gray-4);
+	}
+	.v1-product {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.3125rem 0.5rem 0.3125rem 1.625rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		border-radius: 6px;
+		text-decoration: none;
+		color: var(--sl-color-gray-3);
+		transition:
+			background 0.1s,
+			color 0.1s;
+	}
+	.v1-product:hover {
+		background: var(--sl-color-gray-6);
+		color: var(--sl-color-text);
+	}
+	.v1-product.active {
+		color: var(--sl-color-text);
+		font-weight: 600;
+	}
+	.v1-current {
+		margin-left: auto;
+		font-size: 0.5625rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: #f56500;
+		opacity: 0.8;
+	}
+
+	/* ═══ 2 — INLINE SWITCHER ═══ */
+	.v2-trigger {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		width: 100%;
+		padding: 0;
+		border: none;
+		background: none;
+		cursor: pointer;
+		text-align: left;
+		color: inherit;
+		font-family: inherit;
+	}
+	.v2-title-text {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+		min-width: 0;
+	}
+	.v2-context {
+		font-size: 0.6875rem;
+		font-weight: 500;
+		letter-spacing: 0.02em;
+		color: var(--sl-color-gray-4);
+	}
+	.v2-chevron {
+		margin-left: auto;
+		font-size: 1rem;
+		color: var(--sl-color-gray-4);
+		transition: transform 0.2s ease;
+		transform: rotate(-90deg);
+		flex-shrink: 0;
+	}
+	.v2-chevron.open {
+		transform: rotate(90deg);
+	}
+
+	.v2-panel {
+		display: none;
+		flex-direction: column;
+		margin-top: 0.375rem;
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: 8px;
+		overflow: hidden;
+		background: var(--sl-color-bg);
+	}
+	.v2-panel.open {
+		display: flex;
+	}
+
+	.v2-filter {
+		width: 100%;
+		padding: 0.5rem 0.625rem;
+		border: none;
+		border-bottom: 1px solid var(--sl-color-gray-6);
+		font-size: 0.8125rem;
+		background: transparent;
+		color: var(--sl-color-text);
+		outline: none;
+		box-sizing: border-box;
+	}
+	.v2-filter::placeholder {
+		color: var(--sl-color-gray-4);
+	}
+
+	.v2-panel-body {
+		padding: 0.25rem;
+		max-height: 220px;
+		overflow-y: auto;
+	}
+	.v2-group {
+		margin-bottom: 0.125rem;
+	}
+	.v2-group-label {
+		display: flex;
+		align-items: center;
+		gap: 0.3125rem;
+		padding: 0.25rem 0.375rem;
+		font-size: 0.625rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--sl-color-gray-4);
+	}
+	.v2-group-icon {
+		color: var(--sl-color-gray-4);
+	}
+	.v2-group-items {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+	.v2-item {
+		display: block;
+		padding: 0.25rem 0.375rem 0.25rem 1.375rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		border-radius: 5px;
+		text-decoration: none;
+		color: var(--sl-color-gray-3);
+		transition:
+			background 0.1s,
+			color 0.1s;
+	}
+	.v2-item:hover {
+		background: var(--sl-color-gray-6);
+		color: var(--sl-color-text);
+	}
+	.v2-item.active {
+		font-weight: 600;
+		color: var(--sl-color-text);
+	}
+
+	.v2-all-link {
+		display: block;
+		padding: 0.4375rem 0.625rem;
+		border-top: 1px solid var(--sl-color-gray-6);
+		font-size: 0.75rem;
+		font-weight: 500;
+		text-decoration: none;
+		color: var(--sl-color-gray-4);
+		text-align: center;
+		transition: color 0.15s;
+	}
+	.v2-all-link:hover {
+		color: var(--sl-color-text);
+	}
+
+	/* ═══ 3 — BREADCRUMB POPOVERS ═══ */
+	.v3-title {
+		flex-direction: row;
+		align-items: center;
+		gap: 0.375rem;
+	}
+	.v3-crumbs {
+		display: flex;
+		align-items: center;
+		gap: 0.1875rem;
+		flex-wrap: wrap;
+		position: relative;
+		min-width: 0;
+	}
+	.v3-crumb-link {
+		font-size: 0.6875rem;
+		font-weight: 500;
+		color: var(--sl-color-gray-4);
+		text-decoration: none;
+		transition: color 0.15s;
+	}
+	.v3-crumb-link:hover {
+		color: var(--sl-color-text);
+	}
+	.v3-crumb-sep {
+		font-size: 0.625rem;
+		color: var(--sl-color-gray-4);
+		opacity: 0.5;
+	}
+	.v3-crumb-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.125rem;
+		padding: 0.0625rem 0.25rem;
+		border: 1px solid transparent;
+		border-radius: 4px;
+		background: none;
+		font-size: 0.6875rem;
+		font-weight: 500;
+		color: var(--sl-color-gray-4);
+		cursor: pointer;
+		font-family: inherit;
+		transition:
+			border-color 0.15s,
+			color 0.15s,
+			background 0.15s;
+	}
+	.v3-crumb-btn:hover {
+		border-color: var(--sl-color-gray-5);
+		background: var(--sl-color-gray-6);
+		color: var(--sl-color-text);
+	}
+	.v3-crumb-chevron {
+		opacity: 0.5;
+	}
+	.v3-crumb-current {
+		font-size: 0.8125rem;
+		font-weight: 650;
+		color: var(--sl-color-text);
+	}
+
+	.v3-popover {
+		display: none;
+		position: absolute;
+		top: 100%;
+		left: 1.5rem;
+		margin-top: 0.25rem;
+		min-width: 180px;
+		padding: 0.25rem;
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: 8px;
+		background: var(--sl-color-bg);
+		box-shadow: 0 6px 20px color-mix(in srgb, black 8%, transparent);
+		z-index: 5;
+		flex-direction: column;
+		gap: 1px;
+	}
+	.v3-popover.open {
+		display: flex;
+	}
+	.v3-pop-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.3125rem 0.5rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		border-radius: 6px;
+		text-decoration: none;
+		color: var(--sl-color-gray-3);
+		transition:
+			background 0.1s,
+			color 0.1s;
+	}
+	.v3-pop-item:hover {
+		background: var(--sl-color-gray-6);
+		color: var(--sl-color-text);
+	}
+	.v3-pop-item.active {
+		font-weight: 600;
+		color: var(--sl-color-text);
+		background: var(--sl-color-gray-6);
+	}
+	.v3-pop-icon {
+		color: var(--sl-color-gray-4);
+		flex-shrink: 0;
+	}
+
+	/* ═══ 4 — DUAL-MODE SEARCH ═══ */
+	.v4-title-stack {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+	}
+	.v4-subtitle {
+		font-size: 0.6875rem;
+		font-weight: 500;
+		color: var(--sl-color-gray-4);
+		letter-spacing: 0.02em;
+	}
+	.v4-search-area {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+	.v4-tabs {
+		display: flex;
+		gap: 0;
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: 6px;
+		overflow: hidden;
+	}
+	.v4-tab {
+		flex: 1;
+		padding: 0.25rem 0;
+		border: none;
+		background: transparent;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		color: var(--sl-color-gray-4);
+		cursor: pointer;
+		font-family: inherit;
+		transition:
+			background 0.15s,
+			color 0.15s;
+	}
+	.v4-tab:first-child {
+		border-right: 1px solid var(--sl-color-gray-5);
+	}
+	.v4-tab.active {
+		background: var(--sl-color-gray-6);
+		color: var(--sl-color-text);
+	}
+	.v4-tab:hover:not(.active) {
+		background: color-mix(in srgb, var(--sl-color-gray-6) 50%, transparent);
+	}
+
+	.v4-product-results {
+		display: none;
+		flex-direction: column;
+		padding: 0.25rem 0.75rem 0.5rem;
+	}
+	.v4-product-results.open {
+		display: flex;
+	}
+	.v4-result-group {
+		margin-bottom: 0.125rem;
+	}
+	.v4-result-label {
+		display: flex;
+		align-items: center;
+		gap: 0.3125rem;
+		padding: 0.3125rem 0.75rem;
+		font-size: 0.625rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--sl-color-gray-4);
+	}
+	.v4-result-icon {
+		color: var(--sl-color-gray-4);
+	}
+	.v4-result-item {
+		display: block;
+		padding: 0.3125rem 0.75rem 0.3125rem 1.625rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		border-radius: 6px;
+		text-decoration: none;
+		color: var(--sl-color-gray-3);
+		transition:
+			background 0.1s,
+			color 0.1s;
+	}
+	.v4-result-item:hover {
+		background: var(--sl-color-gray-6);
+		color: var(--sl-color-text);
+	}
+	.v4-result-item.active {
+		font-weight: 600;
+		color: var(--sl-color-text);
+	}
+
+	/* ═══ 5 — SIBLING STRIP ═══ */
+	.v5-title-stack {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+		min-width: 0;
+	}
+	.v5-breadcrumb {
+		font-size: 0.6875rem;
+		font-weight: 500;
+		color: var(--sl-color-gray-4);
+		text-decoration: none;
+		letter-spacing: 0.02em;
+		transition: color 0.15s;
+	}
+	.v5-breadcrumb:hover {
+		color: var(--sl-color-text);
+	}
+
+	.v5-strip-wrap {
+		overflow-x: auto;
+		margin: -0.125rem 0;
+		scrollbar-width: none;
+	}
+	.v5-strip-wrap::-webkit-scrollbar {
+		display: none;
+	}
+	.v5-strip {
+		display: flex;
+		gap: 0.25rem;
+		padding: 0.125rem 0;
+	}
+	.v5-chip {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.1875rem 0.4375rem;
+		border-radius: 6px;
+		border: 1px solid var(--sl-color-gray-5);
+		background: transparent;
+		text-decoration: none;
+		white-space: nowrap;
+		transition:
+			border-color 0.15s,
+			background 0.15s,
+			color 0.15s;
+	}
+	.v5-chip-icon {
+		color: var(--sl-color-gray-4);
+		flex-shrink: 0;
+	}
+	.v5-chip-label {
+		font-size: 0.6875rem;
+		font-weight: 500;
+		color: var(--sl-color-gray-3);
+	}
+	.v5-chip:hover {
+		border-color: var(--sl-color-gray-4);
+		background: var(--sl-color-gray-6);
+	}
+	.v5-chip:hover .v5-chip-label {
+		color: var(--sl-color-text);
+	}
+	.v5-chip:hover .v5-chip-icon {
+		color: var(--sl-color-text);
+	}
+	.v5-chip.active {
+		border-color: color-mix(in srgb, #f56500 30%, transparent);
+		background: color-mix(in srgb, #f56500 8%, transparent);
+	}
+	.v5-chip.active .v5-chip-icon {
+		color: #f56500;
+	}
+	.v5-chip.active .v5-chip-label {
+		color: var(--sl-color-text);
+		font-weight: 600;
+	}
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d4c9f4dd82cafa4..f271281346d1190 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,8 +7,8 @@ import Hero from "../components/landing/Hero.astro";
 import PlatformStats from "../components/landing/PlatformStats.astro";
 import BuildFromScratch from "../components/landing/BuildFromScratch.astro";
 import SecureSection from "../components/landing/SecureSection.astro";
-import RequestLifecycle from "../components/landing/RequestLifecycle.astro";
 import AccelerateSection from "../components/landing/AccelerateSection.astro";
+import ChangelogSection from "../components/landing/ChangelogSection.astro";
 import "../styles/landing.css";
 
 const heading = (icon: string) => ({
@@ -32,6 +32,7 @@ const sidebar = [
 			{ label: "Overview", link: "/" },
 			{ label: "Fundamentals", link: "/fundamentals/" },
 			{ label: "API reference", link: "/api/" },
+			{ label: "Directory", link: "/directory/" },
 			{
 				label: "Troubleshooting",
 				link: "/support/troubleshooting/http-status-codes/",
@@ -311,11 +312,11 @@ const props = {
 
 				<BuildFromScratch />
 
-				<RequestLifecycle />
-
 				<SecureSection />
 
 				<AccelerateSection />
+
+				<ChangelogSection />
 			</main>
 		</div>
 	</div>
diff --git a/src/pages/request-lifecycle.astro b/src/pages/request-lifecycle.astro
deleted file mode 100644
index ef35d0442c6737e..000000000000000
--- a/src/pages/request-lifecycle.astro
+++ /dev/null
@@ -1,63 +0,0 @@
----
-import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
-import type { StarlightPageProps } from "@astrojs/starlight/props";
-import RequestLifecycleSection from "../components/landing/RequestLifecycle.astro";
-
-import "../styles/landing.css";
-
-const props = {
-	frontmatter: {
-		title: "Request Lifecycle",
-		description: "Interactive request lifecycle visualization",
-		template: "doc",
-		tableOfContents: false,
-	},
-	sidebar: [],
-	hasSidebar: false,
-	hideBreadcrumbs: true,
-	hideTitle: true,
-	headings: [],
-} as StarlightPageProps;
----
-
-<StarlightPage {...props}>
-	<div class="landing-root">
-		<RequestLifecycleSection />
-	</div>
-</StarlightPage>
-
-<style is:global>
-	.right-sidebar-container,
-	mobile-starlight-toc {
-		display: none;
-	}
-	.main-frame {
-		padding-top: var(--sl-nav-height);
-	}
-	.main-pane {
-		padding: 0;
-		gap: 0;
-	}
-	.content-panel {
-		padding: 0;
-		margin: 0;
-		overflow: visible;
-	}
-	.sl-container {
-		max-width: none;
-		margin: 0;
-		padding: 0;
-	}
-	.sl-markdown-content {
-		margin: 0;
-		padding: 0;
-	}
-	.sl-markdown-content > :first-child {
-		margin-top: 0;
-	}
-	.sl-markdown-content
-		:not(a, strong, em, del, span, input, code, br)
-		+ :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
-		margin-top: 0;
-	}
-</style>

From 4fedcbf97792bd9f6d75894734647a4b47f89137 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Mon, 20 Apr 2026 16:36:30 +0100
Subject: [PATCH 10/35] styling: more tweaks

---
 .gitignore                                    |    2 +-
 opencode.jsonc                                |    7 +
 .../landing/AccelerateSection.astro           |   33 +-
 src/components/landing/ChangelogSection.astro |    4 +-
 src/components/landing/Hero.astro             |    8 +-
 src/components/overrides/Sidebar.astro        |   23 +
 src/components/overrides/SidebarSublist.astro |    6 +-
 src/pages/design-lab/sidebar-variants.astro   | 1401 -----------------
 src/pages/index.astro                         |   66 -
 9 files changed, 47 insertions(+), 1503 deletions(-)
 delete mode 100644 src/pages/design-lab/sidebar-variants.astro

diff --git a/.gitignore b/.gitignore
index 00b121facdf7125..5e89bf2d6222fac 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,7 +8,7 @@ distllms/
 
 # skills/ is fetched from middlecache via bin/fetch-skills.ts
 skills/
-!.agents/skills/
+# .agents/skills/
 
 # dependencies
 node_modules/
diff --git a/opencode.jsonc b/opencode.jsonc
index 8ed9f40e4817db4..8a58f241bc8a458 100644
--- a/opencode.jsonc
+++ b/opencode.jsonc
@@ -1,6 +1,13 @@
 {
 	"$schema": "https://opencode.ai/config.json",
 	"permission": "allow",
+	"mcp": {
+		"aperture": {
+			"type": "local",
+			"command": ["node", "/Users/mhassan/Documents/dev/tinkering/aperture/build/index.js"],
+			"enabled": true
+		}
+	},
 	"experimental": {
 		"continue_loop_on_deny": true,
 	},
diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index d428123e2eefc99..21a97a63bd2156c 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -168,12 +168,12 @@ const phases = [
 			</button>
 		</div>
 		<div
-			class="wf-total-label flex items-baseline gap-2 font-mono text-sm text-zinc-500 tabular-nums transition-opacity duration-300 max-[600px]:text-xs dark:text-zinc-400"
+			class="wf-total-label flex items-baseline gap-2 font-mono text-xs text-zinc-500 tabular-nums transition-opacity duration-300 dark:text-zinc-400"
 		>
-			<span class="text-[11px] tracking-widest uppercase">Total</span>
+			<span class="tracking-widest uppercase">Total</span>
 			<span
 				id="wf-total-value"
-				class="text-sm font-semibold text-zinc-900 tabular-nums dark:text-zinc-100"
+				class="font-medium text-zinc-900 tabular-nums dark:text-zinc-100"
 				>~110 ms</span
 			>
 		</div>
@@ -394,24 +394,18 @@ const phases = [
 </section>
 
 <style>
-	/* Toggle track */
-	.wf-toggle-track {
-		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
-	}
-	:root[data-theme="dark"] .wf-toggle-track {
-		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
-	}
-
 	/* Sliding background indicator */
 	.wf-toggle-slider {
 		background: white;
 		box-shadow:
-			0 1px 3px rgba(0, 0, 0, 0.1),
-			0 1px 2px rgba(0, 0, 0, 0.06);
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06),
+			0 1px 2px rgba(0, 0, 0, 0.08);
 	}
 	:root[data-theme="dark"] .wf-toggle-slider {
 		background: #2a2a2a;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+		box-shadow:
+			inset 0 0 0 1px rgba(255, 255, 255, 0.06),
+			0 1px 2px rgba(0, 0, 0, 0.3);
 	}
 
 	/* Toggle button states */
@@ -441,14 +435,9 @@ const phases = [
 	#wf-toggle-after.wf-toggle-active {
 		background: var(--color-accent, #f56500);
 		color: white;
-	}
-	#wf-toggle-after.wf-toggle-active::after {
-		content: "";
-		position: absolute;
-		inset: 0;
-		border: 1px solid color-mix(in srgb, black 12%, transparent);
-		border-radius: inherit;
-		pointer-events: none;
+		box-shadow:
+			inset 0 0 0 1px rgba(0, 0, 0, 0.12),
+			0 1px 2px rgba(0, 0, 0, 0.1);
 	}
 	#wf-toggle-before.wf-toggle-active .wf-toggle-dot {
 		background-color: var(--color-zinc-500, #71717a);
diff --git a/src/components/landing/ChangelogSection.astro b/src/components/landing/ChangelogSection.astro
index ee88b8b888e7c12..5b0da1d006b8da5 100644
--- a/src/components/landing/ChangelogSection.astro
+++ b/src/components/landing/ChangelogSection.astro
@@ -133,7 +133,7 @@ const CORNERS = [
 			</div>
 
 			{/* ── Grid ───────────────────────────────────────────── */}
-			<div class="relative bg-green-100">
+			<div class="cl-grid relative grid gap-px border border-zinc-200 bg-zinc-200 dark:border-[#2a2a2a] dark:bg-[#2a2a2a]">
 				{CORNERS.map((pos) => (
 					<svg
 						width="10"
@@ -161,7 +161,6 @@ const CORNERS = [
 					</svg>
 				))}
 
-				<div class="cl-grid grid gap-px border border-zinc-200 bg-zinc-200 dark:border-[#2a2a2a] dark:bg-[#2a2a2a]">
 					{/* ── Featured (latest) — same spacing rhythm as ProductCard ── */}
 					{featured && (
 						<a
@@ -271,7 +270,6 @@ const CORNERS = [
 							</span>
 						</a>
 					))}
-				</div>
 			</div>
 
 			{/* ── Mobile CTA ─────────────────────────────────────── */}
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
index b59a15b2d64f552..f53b6f891a0743b 100644
--- a/src/components/landing/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -3,13 +3,7 @@ import { Icon } from "@astrojs/starlight/components";
 import { stagger } from "./constants";
 ---
 
-<section id="hero" class="pb-16 max-[900px]:pb-12">
-	<p
-		class={`font-mono text-xs uppercase tracking-[0.12em] mb-5 text-accent ${stagger(0.03)}`}
-	>
-		Build a better internet
-	</p>
-
+<section id="hero" class="pb-16 max-[900px]:pb-12 md:pt-6">
 	<h1
 		class={`text-[clamp(2.75rem,5vw,3.5rem)] font-medium -tracking-[0.025em] leading-[1.08] text-balance mb-4 text-primary dark:text-white ${stagger(0.05)}`}
 	>
diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index 66bb9149e71d2c0..b0488b6a2254f7d 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -53,6 +53,29 @@ const productTitle = isHomepage
 			>global search</button
 		>.
 	</div>
+
+	{
+		!isHomepage && (
+			<div class="border-b border-[var(--sidebar-border)] pb-3">
+				<a
+					href="/"
+					class="flex min-h-[2.125rem] w-full cursor-pointer items-center gap-2 rounded-lg bg-[var(--sidebar-hover-bg)] px-3 text-sm font-medium text-[var(--sidebar-text-strong)] no-underline transition-colors hover:bg-[color:var(--sidebar-hover-bg)]/80"
+				>
+					<svg
+						width="16"
+						height="16"
+						fill="currentColor"
+						viewBox="0 0 256 256"
+						class="shrink-0 opacity-50"
+						aria-hidden="true"
+					>
+						<path d="M232,200a8,8,0,0,1-16,0,88.1,88.1,0,0,0-88-88H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,61.66L51.31,96H128A104.11,104.11,0,0,1,232,200Z" />
+					</svg>
+					<span class="truncate">Overview</span>
+				</a>
+			</div>
+		)
+	}
 </div>
 
 <Default><slot /></Default>
diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro
index 5dfdcb8c9dfa3c5..c8853cadf54345e 100644
--- a/src/components/overrides/SidebarSublist.astro
+++ b/src/components/overrides/SidebarSublist.astro
@@ -59,8 +59,8 @@ const restoreIndices = sublist.map((entry) =>
 							"flex min-h-[2.125rem] items-start rounded-lg px-3 py-1.5 text-sm font-medium no-underline",
 							"outline-2 outline-offset-[-2px] outline-transparent focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400",
 							entry.isCurrent
-								? "!bg-[var(--sidebar-active-bg)] !font-semibold !text-[var(--sidebar-active-text)]"
-								: "text-[var(--sidebar-text)] transition-colors duration-150 hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-hover-text)]",
+								? "!bg-[var(--sidebar-active-bg)] !font-semibold !text-[var(--sidebar-active-text)] transition-colors duration-150 hover:!bg-[color:var(--sidebar-active-bg)]/80"
+								: "text-[var(--sidebar-text)] transition-colors duration-150 hover:bg-[color:var(--sidebar-hover-bg)]/80 hover:text-[var(--sidebar-hover-text)]",
 							!nested && "large",
 							entry.attrs.class,
 						]}
@@ -87,7 +87,7 @@ const restoreIndices = sublist.map((entry) =>
 						<summary
 							class:list={[
 								"group/expander flex min-h-[2.125rem] cursor-pointer items-center justify-between rounded-lg px-3 py-1.5 text-sm no-underline outline-2 outline-offset-[-2px] outline-transparent transition-colors duration-150 select-none focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400 [&::-webkit-details-marker]:hidden [&::marker]:hidden",
-								"hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-hover-text)]",
+								"hover:bg-[color:var(--sidebar-hover-bg)]/80 hover:text-[var(--sidebar-hover-text)]",
 								entry.hasActivePage
 									? "font-semibold text-[var(--sidebar-text-strong)]"
 									: "font-medium text-[var(--sidebar-text)]",
diff --git a/src/pages/design-lab/sidebar-variants.astro b/src/pages/design-lab/sidebar-variants.astro
deleted file mode 100644
index 868f499fb91018b..000000000000000
--- a/src/pages/design-lab/sidebar-variants.astro
+++ /dev/null
@@ -1,1401 +0,0 @@
----
-import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
-import type { StarlightPageProps } from "@astrojs/starlight/props";
-import { Icon as AstroIcon } from "astro-icon/components";
-
-const props = {
-	frontmatter: {
-		title: "Sidebar Nav — Final Variants",
-		description:
-			"Five high-fidelity sidebar variants informed by the adversarial suggestion pipeline.",
-		template: "doc",
-		tableOfContents: false,
-	},
-	hasSidebar: false,
-	hideBreadcrumbs: true,
-	headings: [],
-} as StarlightPageProps;
-
-const navItems = [
-	{ label: "Overview", active: true },
-	{ label: "Get started", group: false },
-	{ label: "Configuration", group: false },
-	{ label: "Runtime APIs", group: true },
-	{ label: "Workers AI", group: true },
-	{ label: "Observability", group: true },
-	{ label: "Cron Triggers", group: false },
-	{ label: "Examples", group: true },
-	{ label: "Wrangler", group: true },
-	{ label: "Platform", group: true },
-];
-
-const computeSiblings = [
-	{ label: "Workers", slug: "workers", active: true },
-	{ label: "Pages", slug: "pages", active: false },
-	{ label: "Containers", slug: "containers", active: false },
-	{ label: "Workflows", slug: "workflows", active: false },
-	{ label: "Durable Objects", slug: "durable-objects", active: false },
-	{ label: "Queues", slug: "queues", active: false },
-	{ label: "Pipelines", slug: "pipelines", active: false },
-];
-
-const taxonomyGroups = [
-	{
-		label: "Compute",
-		icon: "workers",
-		products: [
-			"Workers",
-			"Pages",
-			"Containers",
-			"Workflows",
-			"Durable Objects",
-			"Queues",
-			"Pipelines",
-		],
-	},
-	{
-		label: "AI",
-		icon: "workers-ai",
-		products: ["Workers AI", "AI Gateway", "Vectorize", "Browser Rendering"],
-	},
-	{
-		label: "Storage & Database",
-		icon: "kv",
-		products: ["D1", "R2", "KV", "Hyperdrive"],
-	},
-	{
-		label: "Media",
-		icon: "images",
-		products: ["Images", "Stream", "Realtime"],
-	},
-];
----
-
-<StarlightPage {...props}>
-	<p class="lab-intro">
-		Five variants informed by the adversarial pipeline. Key principles:
-		search-first for 99 products, passive breadcrumb context, no full taxonomy
-		in the sidebar. All interactive — click to test. Product: <strong
-			>Workers</strong
-		> (Build → Compute).
-	</p>
-
-	<div class="lab-grid">
-		<!-- ────────────────────────────────────────
-		     BASELINE — Current production sidebar
-		     ──────────────────────────────────────── -->
-		<div class="lab-col">
-			<div class="lab-tag baseline">Current</div>
-			<div class="sb">
-				<div class="sb-sticky">
-					<div class="sb-product-title">
-						<a href="/workers/" class="sb-product-link">
-							<AstroIcon name="workers" size="32px" class="sb-icon" />
-							<span class="sb-name">Cloudflare Workers</span>
-						</a>
-					</div>
-					<div class="sb-search-wrap">
-						<input
-							class="sb-search"
-							type="text"
-							placeholder="Search sidebar..."
-							disabled
-						/>
-						<span class="sb-search-hint">/</span>
-					</div>
-				</div>
-				<nav class="sb-nav">
-					{
-						navItems.map((item) => (
-							<a
-								class:list={[
-									"sb-nav-item",
-									{ active: item.active, group: item.group },
-								]}
-							>
-								<span>{item.label}</span>
-								{item.group && <span class="sb-caret">›</span>}
-							</a>
-						))
-					}
-				</nav>
-			</div>
-			<p class="lab-note">
-				No category context. No way to switch products without going back to the
-				homepage.
-			</p>
-		</div>
-
-		<!-- ════════════════════════════════════════
-		     1 — COMMAND PALETTE PRODUCT FINDER
-		     Separate from sidebar search. ⌘K or
-		     button opens a full overlay with
-		     taxonomy-grouped search.
-		     ════════════════════════════════════════ -->
-		<div class="lab-col">
-			<div class="lab-tag">1</div>
-			<div class="sb v1-sb">
-				<div class="sb-sticky">
-					<div class="sb-product-title">
-						<a href="/workers/" class="sb-product-link">
-							<AstroIcon name="workers" size="32px" class="sb-icon" />
-							<span class="sb-name">Cloudflare Workers</span>
-						</a>
-						<button
-							class="v1-switch-btn"
-							data-v1-open
-							aria-label="Switch product"
-						>
-							<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
-								><path
-									d="M6 2h4M6 14h4M2 6v4M14 6v4"
-									stroke="currentColor"
-									stroke-width="1.5"
-									stroke-linecap="round"></path></svg
-							>
-						</button>
-					</div>
-					<div class="sb-search-wrap">
-						<input
-							class="sb-search"
-							type="text"
-							placeholder="Search sidebar..."
-							disabled
-						/>
-						<span class="sb-search-hint">/</span>
-					</div>
-				</div>
-				<nav class="sb-nav">
-					{
-						navItems.map((item) => (
-							<a
-								class:list={[
-									"sb-nav-item",
-									{ active: item.active, group: item.group },
-								]}
-							>
-								<span>{item.label}</span>
-								{item.group && <span class="sb-caret">›</span>}
-							</a>
-						))
-					}
-				</nav>
-
-				<!-- Overlay -->
-				<div class="v1-overlay" data-v1-overlay>
-					<div class="v1-palette">
-						<div class="v1-palette-search-wrap">
-							<svg
-								class="v1-search-icon"
-								width="14"
-								height="14"
-								viewBox="0 0 16 16"
-								fill="none"
-								><circle
-									cx="7"
-									cy="7"
-									r="5.5"
-									stroke="currentColor"
-									stroke-width="1.5"></circle><path
-									d="m11 11 3.5 3.5"
-									stroke="currentColor"
-									stroke-width="1.5"
-									stroke-linecap="round"></path></svg
-							>
-							<input
-								class="v1-palette-search"
-								type="text"
-								placeholder="Search all products..."
-								data-v1-search
-								autofocus
-							/>
-							<kbd class="v1-kbd">esc</kbd>
-						</div>
-						<div class="v1-palette-body" data-v1-body>
-							<div class="v1-section-label">Build</div>
-							{
-								taxonomyGroups.map((group) => (
-									<div class="v1-group">
-										<div class="v1-group-label">
-											<AstroIcon
-												name={group.icon}
-												size="14px"
-												class="v1-group-icon"
-											/>
-											{group.label}
-										</div>
-										{group.products.map((p) => (
-											<a
-												class:list={["v1-product", { active: p === "Workers" }]}
-												href="#"
-											>
-												{p}
-												{p === "Workers" && (
-													<span class="v1-current">current</span>
-												)}
-											</a>
-										))}
-									</div>
-								))
-							}
-							<div class="v1-section-label" style="margin-top: 0.5rem;">
-								Protect &amp; Connect
-							</div>
-							<div class="v1-group">
-								<div class="v1-group-label">
-									<AstroIcon name="waf" size="14px" class="v1-group-icon" />
-									Application Security
-								</div>
-								<a class="v1-product" href="#">WAF</a>
-								<a class="v1-product" href="#">DDoS Protection</a>
-								<a class="v1-product" href="#">SSL/TLS</a>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<p class="lab-note">
-				<strong>Command palette.</strong> A dedicated switch button (or ⌘K) opens
-				a search-first product finder as a full overlay. Taxonomy groups visible
-				while searching. Handles 99 products gracefully because search is primary,
-				not browsing.
-			</p>
-		</div>
-
-		<!-- ════════════════════════════════════════
-		     2 — INLINE EXPANDABLE SWITCHER
-		     Product title expands to reveal a
-		     compact categorized product picker.
-		     ════════════════════════════════════════ -->
-		<div class="lab-col">
-			<div class="lab-tag">2</div>
-			<div class="sb">
-				<div class="sb-sticky">
-					<div class="sb-product-title">
-						<button class="v2-trigger" data-v2-trigger>
-							<AstroIcon name="workers" size="32px" class="sb-icon" />
-							<div class="v2-title-text">
-								<span class="sb-name">Cloudflare Workers</span>
-								<span class="v2-context">Build › Compute</span>
-							</div>
-							<span class="v2-chevron" data-v2-chevron>‹</span>
-						</button>
-					</div>
-					<div class="v2-panel" data-v2-panel>
-						<input
-							class="v2-filter"
-							type="text"
-							placeholder="Find a product..."
-							data-v2-filter
-						/>
-						<div class="v2-panel-body" data-v2-panel-body>
-							{
-								taxonomyGroups.map((group) => (
-									<div class="v2-group">
-										<div class="v2-group-label">
-											<AstroIcon
-												name={group.icon}
-												size="13px"
-												class="v2-group-icon"
-											/>
-											{group.label}
-										</div>
-										<div class="v2-group-items">
-											{group.products.map((p) => (
-												<a
-													class:list={["v2-item", { active: p === "Workers" }]}
-													href="#"
-												>
-													{p}
-												</a>
-											))}
-										</div>
-									</div>
-								))
-							}
-						</div>
-						<a href="/" class="v2-all-link">All products →</a>
-					</div>
-					<div class="sb-search-wrap">
-						<input
-							class="sb-search"
-							type="text"
-							placeholder="Search sidebar..."
-							disabled
-						/>
-						<span class="sb-search-hint">/</span>
-					</div>
-				</div>
-				<nav class="sb-nav">
-					{
-						navItems.map((item) => (
-							<a
-								class:list={[
-									"sb-nav-item",
-									{ active: item.active, group: item.group },
-								]}
-							>
-								<span>{item.label}</span>
-								{item.group && <span class="sb-caret">›</span>}
-							</a>
-						))
-					}
-				</nav>
-			</div>
-			<p class="lab-note">
-				<strong>Inline switcher.</strong> Product title is clickable — expands a
-				compact panel with search + categorized product list. Panel pushes content
-				down (not an overlay). Category context always visible as subtitle.
-			</p>
-		</div>
-
-		<!-- ════════════════════════════════════════
-		     3 — BREADCRUMB TITLE WITH POPOVERS
-		     Compact breadcrumb format. Clicking
-		     segments opens popovers showing
-		     siblings at that level.
-		     ════════════════════════════════════════ -->
-		<div class="lab-col">
-			<div class="lab-tag">3</div>
-			<div class="sb">
-				<div class="sb-sticky">
-					<div class="sb-product-title v3-title">
-						<AstroIcon name="workers" size="32px" class="sb-icon" />
-						<div class="v3-crumbs">
-							<a href="/" class="v3-crumb-link">Build</a>
-							<span class="v3-crumb-sep">›</span>
-							<button class="v3-crumb-btn" data-v3-trigger>
-								Compute
-								<svg
-									width="10"
-									height="10"
-									viewBox="0 0 10 10"
-									class="v3-crumb-chevron"
-									><path
-										d="M2.5 4 5 6.5 7.5 4"
-										stroke="currentColor"
-										stroke-width="1.25"
-										fill="none"
-										stroke-linecap="round"
-										stroke-linejoin="round"></path></svg
-								>
-							</button>
-							<div class="v3-popover" data-v3-popover>
-								{
-									computeSiblings.map((p) => (
-										<a
-											class:list={["v3-pop-item", { active: p.active }]}
-											href={`/${p.slug}/`}
-										>
-											<AstroIcon
-												name={p.slug}
-												size="16px"
-												class="v3-pop-icon"
-											/>
-											{p.label}
-										</a>
-									))
-								}
-							</div>
-							<span class="v3-crumb-sep">›</span>
-							<span class="v3-crumb-current">Workers</span>
-						</div>
-					</div>
-					<div class="sb-search-wrap">
-						<input
-							class="sb-search"
-							type="text"
-							placeholder="Search sidebar..."
-							disabled
-						/>
-						<span class="sb-search-hint">/</span>
-					</div>
-				</div>
-				<nav class="sb-nav">
-					{
-						navItems.map((item) => (
-							<a
-								class:list={[
-									"sb-nav-item",
-									{ active: item.active, group: item.group },
-								]}
-							>
-								<span>{item.label}</span>
-								{item.group && <span class="sb-caret">›</span>}
-							</a>
-						))
-					}
-				</nav>
-			</div>
-			<p class="lab-note">
-				<strong>Breadcrumb with popovers.</strong> Replaces the product title with
-				a full breadcrumb trail. Clicking "Compute" opens a popover with sibling
-				products. Passive context + quick switching in one element.
-			</p>
-		</div>
-
-		<!-- ════════════════════════════════════════
-		     4 — DUAL-MODE SEARCH
-		     Sidebar search has two modes: current
-		     product (default) and all products.
-		     Tab to switch.
-		     ════════════════════════════════════════ -->
-		<div class="lab-col">
-			<div class="lab-tag">4</div>
-			<div class="sb">
-				<div class="sb-sticky">
-					<div class="sb-product-title">
-						<a href="/workers/" class="sb-product-link">
-							<AstroIcon name="workers" size="32px" class="sb-icon" />
-							<div class="v4-title-stack">
-								<span class="sb-name">Cloudflare Workers</span>
-								<span class="v4-subtitle">Build › Compute</span>
-							</div>
-						</a>
-					</div>
-					<div class="v4-search-area">
-						<div class="v4-tabs">
-							<button class="v4-tab active" data-v4-tab="sidebar"
-								>Sidebar</button
-							>
-							<button class="v4-tab" data-v4-tab="products">All Products</button
-							>
-						</div>
-						<div class="sb-search-wrap">
-							<input
-								class="sb-search"
-								type="text"
-								placeholder="Search sidebar..."
-								data-v4-input
-							/>
-							<span class="sb-search-hint">/</span>
-						</div>
-					</div>
-				</div>
-				<div class="v4-product-results" data-v4-results>
-					{
-						taxonomyGroups.slice(0, 2).map((group) => (
-							<div class="v4-result-group">
-								<div class="v4-result-label">
-									<AstroIcon
-										name={group.icon}
-										size="13px"
-										class="v4-result-icon"
-									/>
-									{group.label}
-								</div>
-								{group.products.map((p) => (
-									<a
-										class:list={["v4-result-item", { active: p === "Workers" }]}
-										href="#"
-									>
-										{p}
-									</a>
-								))}
-							</div>
-						))
-					}
-				</div>
-				<nav class="sb-nav" data-v4-nav>
-					{
-						navItems.map((item) => (
-							<a
-								class:list={[
-									"sb-nav-item",
-									{ active: item.active, group: item.group },
-								]}
-							>
-								<span>{item.label}</span>
-								{item.group && <span class="sb-caret">›</span>}
-							</a>
-						))
-					}
-				</nav>
-			</div>
-			<p class="lab-note">
-				<strong>Dual-mode search.</strong> The search bar gains a tab toggle: "Sidebar"
-				(default) searches the current product tree, "All Products" shows the full
-				taxonomy. One input, two modes. Category context as subtitle.
-			</p>
-		</div>
-
-		<!-- ════════════════════════════════════════
-		     5 — SIBLING STRIP + BREADCRUMB
-		     Horizontal scrollable strip of sibling
-		     product icons below the product title.
-		     ════════════════════════════════════════ -->
-		<div class="lab-col">
-			<div class="lab-tag">5</div>
-			<div class="sb">
-				<div class="sb-sticky">
-					<div class="sb-product-title">
-						<a href="/workers/" class="sb-product-link">
-							<AstroIcon name="workers" size="32px" class="sb-icon" />
-							<div class="v5-title-stack">
-								<span class="sb-name">Cloudflare Workers</span>
-								<a href="/" class="v5-breadcrumb">Build › Compute</a>
-							</div>
-						</a>
-					</div>
-					<div class="v5-strip-wrap">
-						<div class="v5-strip">
-							{
-								computeSiblings.map((p) => (
-									<a
-										class:list={["v5-chip", { active: p.active }]}
-										href={`/${p.slug}/`}
-										title={p.label}
-									>
-										<AstroIcon name={p.slug} size="16px" class="v5-chip-icon" />
-										<span class="v5-chip-label">{p.label}</span>
-									</a>
-								))
-							}
-						</div>
-					</div>
-					<div class="sb-search-wrap">
-						<input
-							class="sb-search"
-							type="text"
-							placeholder="Search sidebar..."
-							disabled
-						/>
-						<span class="sb-search-hint">/</span>
-					</div>
-				</div>
-				<nav class="sb-nav">
-					{
-						navItems.map((item) => (
-							<a
-								class:list={[
-									"sb-nav-item",
-									{ active: item.active, group: item.group },
-								]}
-							>
-								<span>{item.label}</span>
-								{item.group && <span class="sb-caret">›</span>}
-							</a>
-						))
-					}
-				</nav>
-			</div>
-			<p class="lab-note">
-				<strong>Sibling strip.</strong> A horizontal scrollable row of sibling product
-				icons below the title. Active product is highlighted. Breadcrumb subtitle
-				for category context. Enables one-click switching to related products.
-			</p>
-		</div>
-	</div>
-</StarlightPage>
-
-<script>
-	/* ═══ 1 — Command palette ═══ */
-	document.querySelectorAll("[data-v1-open]").forEach((btn) => {
-		btn.addEventListener("click", () => {
-			const overlay = btn
-				.closest(".sb")
-				?.querySelector("[data-v1-overlay]") as HTMLElement;
-			if (overlay) {
-				overlay.classList.add("open");
-				(
-					overlay.querySelector("[data-v1-search]") as HTMLInputElement
-				)?.focus();
-			}
-		});
-	});
-	document.querySelectorAll("[data-v1-overlay]").forEach((overlay) => {
-		overlay.addEventListener("click", (e) => {
-			if (e.target === overlay) overlay.classList.remove("open");
-		});
-	});
-	document.querySelectorAll("[data-v1-search]").forEach((input) => {
-		input.addEventListener("keydown", (e) => {
-			if ((e as KeyboardEvent).key === "Escape") {
-				(input as HTMLElement)
-					.closest("[data-v1-overlay]")
-					?.classList.remove("open");
-			}
-		});
-	});
-
-	/* ═══ 2 — Inline switcher ═══ */
-	document.querySelectorAll("[data-v2-trigger]").forEach((btn) => {
-		btn.addEventListener("click", () => {
-			const panel = btn
-				.closest(".sb-sticky")
-				?.querySelector("[data-v2-panel]") as HTMLElement;
-			const chevron = btn.querySelector("[data-v2-chevron]") as HTMLElement;
-			if (panel) {
-				const isOpen = panel.classList.toggle("open");
-				chevron?.classList.toggle("open", isOpen);
-				if (isOpen) {
-					(
-						panel.querySelector("[data-v2-filter]") as HTMLInputElement
-					)?.focus();
-				}
-			}
-		});
-	});
-
-	/* ═══ 3 — Breadcrumb popover ═══ */
-	document.querySelectorAll("[data-v3-trigger]").forEach((btn) => {
-		btn.addEventListener("click", (e) => {
-			e.stopPropagation();
-			const pop = btn.parentElement?.querySelector(
-				"[data-v3-popover]",
-			) as HTMLElement;
-			pop?.classList.toggle("open");
-		});
-	});
-	document.addEventListener("click", () => {
-		document
-			.querySelectorAll("[data-v3-popover].open")
-			.forEach((p) => p.classList.remove("open"));
-	});
-
-	/* ═══ 4 — Dual-mode search ═══ */
-	document.querySelectorAll("[data-v4-tab]").forEach((tab) => {
-		tab.addEventListener("click", () => {
-			const parent = tab.closest(".sb");
-			if (!parent) return;
-			parent
-				.querySelectorAll("[data-v4-tab]")
-				.forEach((t) => t.classList.remove("active"));
-			tab.classList.add("active");
-			const mode = (tab as HTMLElement).dataset.v4Tab;
-			const results = parent.querySelector("[data-v4-results]") as HTMLElement;
-			const nav = parent.querySelector("[data-v4-nav]") as HTMLElement;
-			const input = parent.querySelector("[data-v4-input]") as HTMLInputElement;
-			if (mode === "products") {
-				results?.classList.add("open");
-				nav?.classList.add("hidden");
-				if (input) input.placeholder = "Search all products...";
-			} else {
-				results?.classList.remove("open");
-				nav?.classList.remove("hidden");
-				if (input) input.placeholder = "Search sidebar...";
-			}
-		});
-	});
-</script>
-
-<style is:global>
-	/* ─── Layout ─── */
-	.right-sidebar-container,
-	mobile-starlight-toc {
-		display: none;
-	}
-	.main-pane {
-		justify-items: center;
-	}
-	.sl-markdown-content {
-		max-width: 100%;
-	}
-
-	.lab-intro {
-		max-width: 720px;
-		color: var(--sl-color-gray-3);
-		font-size: 0.9375rem;
-		line-height: 1.6;
-		margin-bottom: 2rem;
-	}
-	.lab-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-		gap: 2.5rem;
-		padding-bottom: 4rem;
-	}
-	.lab-col {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-	.lab-tag {
-		display: inline-flex;
-		align-self: flex-start;
-		align-items: center;
-		justify-content: center;
-		min-width: 1.5rem;
-		height: 1.5rem;
-		padding: 0 0.375rem;
-		border-radius: 6px;
-		font-size: 0.6875rem;
-		font-weight: 700;
-		letter-spacing: 0.02em;
-		background: var(--sl-color-gray-6);
-		color: var(--sl-color-gray-2);
-	}
-	.lab-tag.baseline {
-		background: color-mix(in srgb, #f56500 15%, transparent);
-		color: #f56500;
-	}
-	.lab-note {
-		font-size: 0.8125rem;
-		line-height: 1.55;
-		color: var(--sl-color-gray-3);
-		margin: 0;
-	}
-	.lab-note strong {
-		color: var(--sl-color-text);
-		font-weight: 600;
-	}
-
-	/* ═══════════════════════════════════
-	   Shared sidebar mock — production
-	   ═══════════════════════════════════ */
-	.sb {
-		position: relative;
-		width: 100%;
-		max-width: 272px;
-		border: 1px solid var(--sl-color-gray-5);
-		border-radius: 10px;
-		overflow: hidden;
-		background: var(--sl-color-bg);
-		font-family:
-			system-ui,
-			-apple-system,
-			BlinkMacSystemFont,
-			sans-serif;
-	}
-	.sb-sticky {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		padding: 0.875rem 1rem;
-	}
-	.sb-product-title {
-		display: flex;
-		align-items: center;
-		gap: 0.125rem;
-	}
-	.sb-product-link {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		text-decoration: none;
-		color: inherit;
-	}
-	.sb-icon {
-		flex-shrink: 0;
-		color: #f56500;
-	}
-	.sb-name {
-		font-size: 1.125rem;
-		font-weight: 650;
-		color: var(--sl-color-text);
-		line-height: 1.2;
-	}
-	.sb-search-wrap {
-		position: relative;
-	}
-	.sb-search {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		height: 2.125rem;
-		padding: 0 2rem 0 0.75rem;
-		border: 1px solid var(--sl-color-gray-5);
-		border-radius: 8px;
-		font-size: 0.8125rem;
-		color: var(--sl-color-gray-4);
-		background: transparent;
-		outline: none;
-		box-sizing: border-box;
-	}
-	.sb-search-hint {
-		position: absolute;
-		right: 0.5rem;
-		top: 50%;
-		transform: translateY(-50%);
-		font-size: 0.6875rem;
-		font-weight: 600;
-		color: var(--sl-color-gray-4);
-		background: var(--sl-color-gray-6);
-		padding: 0.0625rem 0.375rem;
-		border-radius: 4px;
-		pointer-events: none;
-		line-height: 1.4;
-	}
-	.sb-nav {
-		display: flex;
-		flex-direction: column;
-		gap: 1px;
-		padding: 0.375rem 0.75rem 1rem;
-	}
-	.sb-nav.hidden {
-		display: none;
-	}
-	.sb-nav-item {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		min-height: 2.125rem;
-		padding: 0.375rem 0.75rem;
-		border-radius: 8px;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		color: var(--sl-color-gray-3);
-		text-decoration: none;
-		cursor: default;
-	}
-	.sb-nav-item.active {
-		background: var(--sl-color-gray-6);
-		color: var(--sl-color-text);
-		font-weight: 600;
-	}
-	.sb-caret {
-		font-size: 0.875rem;
-		opacity: 0.4;
-	}
-
-	/* ═══ 1 — COMMAND PALETTE ═══ */
-	.v1-switch-btn {
-		margin-left: auto;
-		display: grid;
-		place-items: center;
-		width: 28px;
-		height: 28px;
-		border: 1px solid var(--sl-color-gray-5);
-		border-radius: 6px;
-		background: transparent;
-		color: var(--sl-color-gray-3);
-		cursor: pointer;
-		transition:
-			border-color 0.15s,
-			color 0.15s,
-			background 0.15s;
-		flex-shrink: 0;
-	}
-	.v1-switch-btn:hover {
-		border-color: var(--sl-color-gray-4);
-		color: var(--sl-color-text);
-		background: var(--sl-color-gray-6);
-	}
-
-	.v1-overlay {
-		display: none;
-		position: absolute;
-		inset: 0;
-		z-index: 10;
-		background: color-mix(in srgb, var(--sl-color-bg) 85%, transparent);
-		backdrop-filter: blur(4px);
-		padding: 0.75rem;
-	}
-	.v1-overlay.open {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.v1-palette {
-		display: flex;
-		flex-direction: column;
-		border: 1px solid var(--sl-color-gray-5);
-		border-radius: 10px;
-		background: var(--sl-color-bg);
-		box-shadow: 0 8px 32px color-mix(in srgb, black 10%, transparent);
-		overflow: hidden;
-		max-height: 100%;
-	}
-	.v1-palette-search-wrap {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.625rem 0.75rem;
-		border-bottom: 1px solid var(--sl-color-gray-6);
-	}
-	.v1-search-icon {
-		color: var(--sl-color-gray-4);
-		flex-shrink: 0;
-	}
-	.v1-palette-search {
-		flex: 1;
-		border: none;
-		background: transparent;
-		font-size: 0.875rem;
-		color: var(--sl-color-text);
-		outline: none;
-	}
-	.v1-palette-search::placeholder {
-		color: var(--sl-color-gray-4);
-	}
-	.v1-kbd {
-		font-size: 0.625rem;
-		font-weight: 600;
-		padding: 0.0625rem 0.3125rem;
-		border-radius: 4px;
-		background: var(--sl-color-gray-6);
-		color: var(--sl-color-gray-4);
-		flex-shrink: 0;
-		font-family: inherit;
-		line-height: 1.5;
-	}
-
-	.v1-palette-body {
-		overflow-y: auto;
-		padding: 0.375rem;
-	}
-	.v1-section-label {
-		padding: 0.375rem 0.5rem 0.125rem;
-		font-size: 0.625rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--sl-color-gray-4);
-	}
-	.v1-group {
-		margin-bottom: 0.25rem;
-	}
-	.v1-group-label {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.25rem 0.5rem;
-		font-size: 0.6875rem;
-		font-weight: 600;
-		color: var(--sl-color-gray-3);
-	}
-	.v1-group-icon {
-		color: var(--sl-color-gray-4);
-	}
-	.v1-product {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.3125rem 0.5rem 0.3125rem 1.625rem;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		border-radius: 6px;
-		text-decoration: none;
-		color: var(--sl-color-gray-3);
-		transition:
-			background 0.1s,
-			color 0.1s;
-	}
-	.v1-product:hover {
-		background: var(--sl-color-gray-6);
-		color: var(--sl-color-text);
-	}
-	.v1-product.active {
-		color: var(--sl-color-text);
-		font-weight: 600;
-	}
-	.v1-current {
-		margin-left: auto;
-		font-size: 0.5625rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-		color: #f56500;
-		opacity: 0.8;
-	}
-
-	/* ═══ 2 — INLINE SWITCHER ═══ */
-	.v2-trigger {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		width: 100%;
-		padding: 0;
-		border: none;
-		background: none;
-		cursor: pointer;
-		text-align: left;
-		color: inherit;
-		font-family: inherit;
-	}
-	.v2-title-text {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-		min-width: 0;
-	}
-	.v2-context {
-		font-size: 0.6875rem;
-		font-weight: 500;
-		letter-spacing: 0.02em;
-		color: var(--sl-color-gray-4);
-	}
-	.v2-chevron {
-		margin-left: auto;
-		font-size: 1rem;
-		color: var(--sl-color-gray-4);
-		transition: transform 0.2s ease;
-		transform: rotate(-90deg);
-		flex-shrink: 0;
-	}
-	.v2-chevron.open {
-		transform: rotate(90deg);
-	}
-
-	.v2-panel {
-		display: none;
-		flex-direction: column;
-		margin-top: 0.375rem;
-		border: 1px solid var(--sl-color-gray-5);
-		border-radius: 8px;
-		overflow: hidden;
-		background: var(--sl-color-bg);
-	}
-	.v2-panel.open {
-		display: flex;
-	}
-
-	.v2-filter {
-		width: 100%;
-		padding: 0.5rem 0.625rem;
-		border: none;
-		border-bottom: 1px solid var(--sl-color-gray-6);
-		font-size: 0.8125rem;
-		background: transparent;
-		color: var(--sl-color-text);
-		outline: none;
-		box-sizing: border-box;
-	}
-	.v2-filter::placeholder {
-		color: var(--sl-color-gray-4);
-	}
-
-	.v2-panel-body {
-		padding: 0.25rem;
-		max-height: 220px;
-		overflow-y: auto;
-	}
-	.v2-group {
-		margin-bottom: 0.125rem;
-	}
-	.v2-group-label {
-		display: flex;
-		align-items: center;
-		gap: 0.3125rem;
-		padding: 0.25rem 0.375rem;
-		font-size: 0.625rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-		color: var(--sl-color-gray-4);
-	}
-	.v2-group-icon {
-		color: var(--sl-color-gray-4);
-	}
-	.v2-group-items {
-		display: flex;
-		flex-direction: column;
-		gap: 1px;
-	}
-	.v2-item {
-		display: block;
-		padding: 0.25rem 0.375rem 0.25rem 1.375rem;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		border-radius: 5px;
-		text-decoration: none;
-		color: var(--sl-color-gray-3);
-		transition:
-			background 0.1s,
-			color 0.1s;
-	}
-	.v2-item:hover {
-		background: var(--sl-color-gray-6);
-		color: var(--sl-color-text);
-	}
-	.v2-item.active {
-		font-weight: 600;
-		color: var(--sl-color-text);
-	}
-
-	.v2-all-link {
-		display: block;
-		padding: 0.4375rem 0.625rem;
-		border-top: 1px solid var(--sl-color-gray-6);
-		font-size: 0.75rem;
-		font-weight: 500;
-		text-decoration: none;
-		color: var(--sl-color-gray-4);
-		text-align: center;
-		transition: color 0.15s;
-	}
-	.v2-all-link:hover {
-		color: var(--sl-color-text);
-	}
-
-	/* ═══ 3 — BREADCRUMB POPOVERS ═══ */
-	.v3-title {
-		flex-direction: row;
-		align-items: center;
-		gap: 0.375rem;
-	}
-	.v3-crumbs {
-		display: flex;
-		align-items: center;
-		gap: 0.1875rem;
-		flex-wrap: wrap;
-		position: relative;
-		min-width: 0;
-	}
-	.v3-crumb-link {
-		font-size: 0.6875rem;
-		font-weight: 500;
-		color: var(--sl-color-gray-4);
-		text-decoration: none;
-		transition: color 0.15s;
-	}
-	.v3-crumb-link:hover {
-		color: var(--sl-color-text);
-	}
-	.v3-crumb-sep {
-		font-size: 0.625rem;
-		color: var(--sl-color-gray-4);
-		opacity: 0.5;
-	}
-	.v3-crumb-btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.125rem;
-		padding: 0.0625rem 0.25rem;
-		border: 1px solid transparent;
-		border-radius: 4px;
-		background: none;
-		font-size: 0.6875rem;
-		font-weight: 500;
-		color: var(--sl-color-gray-4);
-		cursor: pointer;
-		font-family: inherit;
-		transition:
-			border-color 0.15s,
-			color 0.15s,
-			background 0.15s;
-	}
-	.v3-crumb-btn:hover {
-		border-color: var(--sl-color-gray-5);
-		background: var(--sl-color-gray-6);
-		color: var(--sl-color-text);
-	}
-	.v3-crumb-chevron {
-		opacity: 0.5;
-	}
-	.v3-crumb-current {
-		font-size: 0.8125rem;
-		font-weight: 650;
-		color: var(--sl-color-text);
-	}
-
-	.v3-popover {
-		display: none;
-		position: absolute;
-		top: 100%;
-		left: 1.5rem;
-		margin-top: 0.25rem;
-		min-width: 180px;
-		padding: 0.25rem;
-		border: 1px solid var(--sl-color-gray-5);
-		border-radius: 8px;
-		background: var(--sl-color-bg);
-		box-shadow: 0 6px 20px color-mix(in srgb, black 8%, transparent);
-		z-index: 5;
-		flex-direction: column;
-		gap: 1px;
-	}
-	.v3-popover.open {
-		display: flex;
-	}
-	.v3-pop-item {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.3125rem 0.5rem;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		border-radius: 6px;
-		text-decoration: none;
-		color: var(--sl-color-gray-3);
-		transition:
-			background 0.1s,
-			color 0.1s;
-	}
-	.v3-pop-item:hover {
-		background: var(--sl-color-gray-6);
-		color: var(--sl-color-text);
-	}
-	.v3-pop-item.active {
-		font-weight: 600;
-		color: var(--sl-color-text);
-		background: var(--sl-color-gray-6);
-	}
-	.v3-pop-icon {
-		color: var(--sl-color-gray-4);
-		flex-shrink: 0;
-	}
-
-	/* ═══ 4 — DUAL-MODE SEARCH ═══ */
-	.v4-title-stack {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-	}
-	.v4-subtitle {
-		font-size: 0.6875rem;
-		font-weight: 500;
-		color: var(--sl-color-gray-4);
-		letter-spacing: 0.02em;
-	}
-	.v4-search-area {
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-	}
-	.v4-tabs {
-		display: flex;
-		gap: 0;
-		border: 1px solid var(--sl-color-gray-5);
-		border-radius: 6px;
-		overflow: hidden;
-	}
-	.v4-tab {
-		flex: 1;
-		padding: 0.25rem 0;
-		border: none;
-		background: transparent;
-		font-size: 0.6875rem;
-		font-weight: 600;
-		color: var(--sl-color-gray-4);
-		cursor: pointer;
-		font-family: inherit;
-		transition:
-			background 0.15s,
-			color 0.15s;
-	}
-	.v4-tab:first-child {
-		border-right: 1px solid var(--sl-color-gray-5);
-	}
-	.v4-tab.active {
-		background: var(--sl-color-gray-6);
-		color: var(--sl-color-text);
-	}
-	.v4-tab:hover:not(.active) {
-		background: color-mix(in srgb, var(--sl-color-gray-6) 50%, transparent);
-	}
-
-	.v4-product-results {
-		display: none;
-		flex-direction: column;
-		padding: 0.25rem 0.75rem 0.5rem;
-	}
-	.v4-product-results.open {
-		display: flex;
-	}
-	.v4-result-group {
-		margin-bottom: 0.125rem;
-	}
-	.v4-result-label {
-		display: flex;
-		align-items: center;
-		gap: 0.3125rem;
-		padding: 0.3125rem 0.75rem;
-		font-size: 0.625rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-		color: var(--sl-color-gray-4);
-	}
-	.v4-result-icon {
-		color: var(--sl-color-gray-4);
-	}
-	.v4-result-item {
-		display: block;
-		padding: 0.3125rem 0.75rem 0.3125rem 1.625rem;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		border-radius: 6px;
-		text-decoration: none;
-		color: var(--sl-color-gray-3);
-		transition:
-			background 0.1s,
-			color 0.1s;
-	}
-	.v4-result-item:hover {
-		background: var(--sl-color-gray-6);
-		color: var(--sl-color-text);
-	}
-	.v4-result-item.active {
-		font-weight: 600;
-		color: var(--sl-color-text);
-	}
-
-	/* ═══ 5 — SIBLING STRIP ═══ */
-	.v5-title-stack {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-		min-width: 0;
-	}
-	.v5-breadcrumb {
-		font-size: 0.6875rem;
-		font-weight: 500;
-		color: var(--sl-color-gray-4);
-		text-decoration: none;
-		letter-spacing: 0.02em;
-		transition: color 0.15s;
-	}
-	.v5-breadcrumb:hover {
-		color: var(--sl-color-text);
-	}
-
-	.v5-strip-wrap {
-		overflow-x: auto;
-		margin: -0.125rem 0;
-		scrollbar-width: none;
-	}
-	.v5-strip-wrap::-webkit-scrollbar {
-		display: none;
-	}
-	.v5-strip {
-		display: flex;
-		gap: 0.25rem;
-		padding: 0.125rem 0;
-	}
-	.v5-chip {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0.1875rem 0.4375rem;
-		border-radius: 6px;
-		border: 1px solid var(--sl-color-gray-5);
-		background: transparent;
-		text-decoration: none;
-		white-space: nowrap;
-		transition:
-			border-color 0.15s,
-			background 0.15s,
-			color 0.15s;
-	}
-	.v5-chip-icon {
-		color: var(--sl-color-gray-4);
-		flex-shrink: 0;
-	}
-	.v5-chip-label {
-		font-size: 0.6875rem;
-		font-weight: 500;
-		color: var(--sl-color-gray-3);
-	}
-	.v5-chip:hover {
-		border-color: var(--sl-color-gray-4);
-		background: var(--sl-color-gray-6);
-	}
-	.v5-chip:hover .v5-chip-label {
-		color: var(--sl-color-text);
-	}
-	.v5-chip:hover .v5-chip-icon {
-		color: var(--sl-color-text);
-	}
-	.v5-chip.active {
-		border-color: color-mix(in srgb, #f56500 30%, transparent);
-		background: color-mix(in srgb, #f56500 8%, transparent);
-	}
-	.v5-chip.active .v5-chip-icon {
-		color: #f56500;
-	}
-	.v5-chip.active .v5-chip-label {
-		color: var(--sl-color-text);
-		font-weight: 600;
-	}
-</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f271281346d1190..fc3c57dc23ffc5c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -241,72 +241,6 @@ const props = {
 				id="main-content"
 				style="padding-inline: var(--l-section-pad); padding-top: var(--l-pad-top);"
 			>
-				<!-- Origin marker -->
-				<div class="relative h-0 max-[1024px]:hidden">
-					<div class="pointer-events-none absolute inset-0">
-						<svg
-							class="v27-broadcast"
-							width="56"
-							height="56"
-							viewBox="0 0 56 56"
-							style="animation-delay:0s;margin-left:0;margin-top:4px"
-							><line
-								x1="0"
-								y1="28"
-								x2="56"
-								y2="28"
-								stroke="#f56500"
-								stroke-width="1"></line><line
-								x1="28"
-								y1="0"
-								x2="28"
-								y2="56"
-								stroke="#f56500"
-								stroke-width="1"></line></svg
-						>
-						<svg
-							class="v27-broadcast"
-							width="56"
-							height="56"
-							viewBox="0 0 56 56"
-							style="animation-delay:2s;margin-left:0;margin-top:4px"
-							><line
-								x1="0"
-								y1="28"
-								x2="56"
-								y2="28"
-								stroke="#f56500"
-								stroke-width="1"></line><line
-								x1="28"
-								y1="0"
-								x2="28"
-								y2="56"
-								stroke="#f56500"
-								stroke-width="1"></line></svg
-						>
-						<svg
-							class="v27-origin-static"
-							width="28"
-							height="28"
-							viewBox="0 0 28 28"
-							style="margin-left:0;margin-top:4px"
-							><line
-								x1="0"
-								y1="14"
-								x2="28"
-								y2="14"
-								stroke="#f56500"
-								stroke-width="1"></line><line
-								x1="14"
-								y1="0"
-								x2="14"
-								y2="28"
-								stroke="#f56500"
-								stroke-width="1"></line></svg
-						>
-					</div>
-				</div>
-
 				<Hero />
 				<PlatformStats />
 

From 07df9a40e7649f985c986998e3b9aa07e56f9fd7 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Mon, 20 Apr 2026 16:53:47 +0100
Subject: [PATCH 11/35] fix: astro check

---
 src/components/landing/ChangelogSection.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/landing/ChangelogSection.astro b/src/components/landing/ChangelogSection.astro
index 5b0da1d006b8da5..98a71a4166683d4 100644
--- a/src/components/landing/ChangelogSection.astro
+++ b/src/components/landing/ChangelogSection.astro
@@ -50,7 +50,7 @@ function catColor(id: string) {
 
 /* ── Data ────────────────────────────────────────────────────────── */
 const all = await getChangelogs({
-	filter: (e) => !e.data.hidden && !e.data.scheduled,
+	filter: (e) => !e.data.hidden,
 });
 
 const entries = await Promise.all(

From a33eabee8c8bf760a794ffbf29f01374a51c71c6 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 21 Apr 2026 10:38:33 +0100
Subject: [PATCH 12/35] styling: ui

---
 .../landing/AccelerateSection.astro           |  76 ++++---
 src/components/landing/BuildFromScratch.astro |  38 ++--
 src/components/landing/ChangelogSection.astro | 210 +++++++++---------
 src/components/landing/Hero.astro             |   2 +-
 src/components/landing/PlatformStats.astro    |  41 ++--
 src/components/landing/ProductCard.astro      |  30 +--
 src/components/landing/ProductCardGrid.astro  |   4 +-
 src/components/landing/ProtectSection.astro   | 180 +++++++++------
 src/components/landing/RequestLifecycle.astro |   4 +-
 src/components/landing/SecureSection.astro    |   2 +-
 src/components/landing/StructuralGrid.astro   |  40 +++-
 src/styles/landing.css                        |   7 +
 12 files changed, 377 insertions(+), 257 deletions(-)

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index 21a97a63bd2156c..426e2a8a165cde5 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -100,7 +100,6 @@ const phases = [
 		colorMuted: "bg-sky-500/20",
 	},
 ];
-
 ---
 
 <section
@@ -116,7 +115,7 @@ const phases = [
 	</div>
 	<h2
 		id="accelerate-heading"
-		class="mb-2 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
+		class="mb-2 text-2xl leading-[1.1] font-medium -tracking-[0.035em] text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
 	>
 		See where the milliseconds go
 	</h2>
@@ -204,7 +203,7 @@ const phases = [
 						x2="10"
 						y2="5"
 						stroke-width="1"
-						class="stroke-accent dark:stroke-white"
+						class="l-corner-stroke"
 					/>
 					<line
 						x1="5"
@@ -212,7 +211,7 @@ const phases = [
 						x2="5"
 						y2="10"
 						stroke-width="1"
-						class="stroke-accent dark:stroke-white"
+						class="l-corner-stroke"
 					/>
 				</svg>
 			))
@@ -220,8 +219,8 @@ const phases = [
 
 		<!-- Timescale ruler — uses the same grid as waterfall rows so ticks align with bars -->
 		<div
-			class="bg-l-card dark:bg-l-card-dark grid h-7 items-end gap-3 border-b border-zinc-200 px-4 max-[600px]:hidden dark:border-[#2a2a2a]"
-			style="grid-template-columns: 150px 1fr auto;"
+			class="bg-l-card dark:bg-l-card-dark grid h-7 items-end gap-4 border-b border-zinc-200 px-5 max-[600px]:hidden dark:border-[#2a2a2a]"
+			style="grid-template-columns: minmax(220px, 1.1fr) minmax(0, 3fr) auto;"
 			aria-hidden="true"
 		>
 			<div></div>
@@ -252,13 +251,13 @@ const phases = [
 				<a
 					href={p.href}
 					class:list={[
-						"wf-row group relative grid items-center gap-3 px-4 py-3 no-underline transition-colors duration-150",
+						"wf-row group relative grid items-center gap-4 px-5 py-3 no-underline transition-colors duration-150",
 						"bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark",
 						"focus-visible:outline-accent focus-visible:outline-2 focus-visible:-outline-offset-2",
 						"max-[600px]:grid-cols-[1fr] max-[600px]:gap-2 max-[600px]:px-3 max-[600px]:py-3",
 						i > 0 && "border-t border-zinc-200 dark:border-[#2a2a2a]",
 					]}
-					style="grid-template-columns: 150px 1fr auto;"
+					style="grid-template-columns: minmax(220px, 1.1fr) minmax(0, 3fr) auto;"
 					data-phase={p.id}
 				>
 					{/* Accent bar — bottom reveal on hover */}
@@ -268,15 +267,15 @@ const phases = [
 					/>
 
 					{/* Left: phase name + product */}
-					<div class="flex min-w-0 items-center gap-2.5 max-[600px]:gap-2">
+					<div class="flex min-w-0 items-center gap-3 max-[600px]:gap-2">
 						<span class="group-hover:border-accent/30 group-hover:bg-accent/5 group-hover:text-accent flex size-8 shrink-0 items-center justify-center rounded border border-zinc-200 bg-zinc-100 text-zinc-400 transition-colors duration-150 dark:border-[#2a2a2a] dark:bg-zinc-800 dark:text-zinc-500">
 							<Icon name={p.icon} size="16px" />
 						</span>
-						<div class="min-w-0 truncate">
-							<p class="truncate text-sm leading-tight font-medium text-zinc-800 dark:text-zinc-100">
+						<div class="min-w-0">
+							<p class="text-sm leading-tight font-medium text-zinc-800 dark:text-zinc-100">
 								{p.phase}
 							</p>
-							<p class="wf-product-label text-accent truncate font-mono text-[11px] tracking-widest uppercase opacity-100 transition-opacity duration-300">
+							<p class="wf-product-label text-accent font-mono text-[11px] tracking-widest uppercase opacity-100 transition-opacity duration-300">
 								{p.product}
 							</p>
 						</div>
@@ -296,7 +295,7 @@ const phases = [
 							data-offset-after={p.after.offset}
 							data-width-after={p.after.width}
 						>
-							<span class="wf-bar-label absolute top-1/2 right-1.5 -translate-y-1/2 font-mono text-[9px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm">
+							<span class="wf-bar-label absolute top-1/2 right-1.5 -translate-y-1/2 font-mono text-[9px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm max-[456px]:hidden">
 								{Math.round(p.after.width * 13)}ms
 							</span>
 						</div>
@@ -334,17 +333,20 @@ const phases = [
 
 		<!-- Total bar / savings summary row -->
 		<div
-			class="wf-summary bg-l-card dark:bg-l-card-dark border-t border-zinc-200 px-4 py-3 dark:border-[#2a2a2a]"
+			class="wf-summary bg-l-card dark:bg-l-card-dark border-t border-zinc-200 px-5 py-3 dark:border-[#2a2a2a]"
 			aria-live="polite"
 		>
 			<div class="flex items-center justify-between gap-4">
-				<div class="flex items-center gap-3">
-					<span
-						class="font-mono text-[11px] tracking-widest text-zinc-500 uppercase dark:text-zinc-400"
-						>Total Latency</span
-					>
+				{
+					/* Left: label + bar — same mono, uppercase, muted grey as the top "Total" label */
+				}
+				<div
+					class="flex items-center gap-3 font-mono text-xs text-zinc-500 tabular-nums dark:text-zinc-400"
+				>
+					<span class="tracking-widest uppercase">Total latency</span>
 					<div
-						class="relative h-3 w-48 overflow-hidden rounded-full bg-zinc-100 max-[600px]:w-28 dark:bg-zinc-800/50"
+						class="relative h-1.5 w-48 overflow-hidden rounded-full bg-zinc-100 max-[600px]:w-28 dark:bg-zinc-800/60"
+						role="presentation"
 					>
 						<div
 							id="wf-total-bar"
@@ -354,12 +356,20 @@ const phases = [
 						</div>
 					</div>
 				</div>
-				<div class="flex items-center gap-2">
+
+				{
+					/* Right: savings — mirrors the top's `TOTAL ~110 ms` label+value rhythm */
+				}
+				<div
+					id="wf-savings-group"
+					class="flex items-baseline gap-2 font-mono text-xs text-zinc-500 tabular-nums transition-opacity duration-300 max-[500px]:hidden dark:text-zinc-400"
+				>
+					<span class="tracking-widest uppercase">Savings</span>
 					<span
 						id="wf-savings-badge"
-						class="font-mono text-xs font-semibold text-emerald-600 tabular-nums dark:text-emerald-400"
+						class="font-medium text-zinc-900 tabular-nums dark:text-zinc-100"
 					>
-						-91% faster
+						91% faster
 					</span>
 				</div>
 			</div>
@@ -367,7 +377,9 @@ const phases = [
 	</div>
 
 	<!-- Section bridge — connects waterfall to product cards -->
-	<h3 class="not-content mb-6 pt-12 text-lg font-medium -tracking-tight text-zinc-900 dark:text-zinc-100">
+	<h3
+		class="not-content mb-6 pt-12 text-lg font-medium -tracking-tight text-zinc-900 dark:text-zinc-100"
+	>
 		Explore by product
 	</h3>
 
@@ -472,9 +484,11 @@ const phases = [
 		border-style: dashed;
 		color: var(--pc-hover-color, #f56500);
 	}
-	:global(:root[data-theme="dark"]
-		.wf-product-card[data-highlighted="true"]
-		.pc-icon-shell) {
+	:global(
+		:root[data-theme="dark"]
+			.wf-product-card[data-highlighted="true"]
+			.pc-icon-shell
+	) {
 		background: var(--pc-hover-bg-dark, rgba(245, 101, 0, 0.16));
 		border-color: var(--pc-hover-color, #f56500);
 		color: var(--pc-hover-color, #f56500);
@@ -553,6 +567,9 @@ const phases = [
 		const savingsBadge = section.querySelector(
 			"#wf-savings-badge",
 		) as HTMLElement | null;
+		const savingsGroup = section.querySelector(
+			"#wf-savings-group",
+		) as HTMLElement | null;
 		const bars = section.querySelectorAll<HTMLElement>(".wf-bar-before");
 		const productLabels =
 			section.querySelectorAll<HTMLElement>(".wf-product-label");
@@ -637,7 +654,10 @@ const phases = [
 				totalValue.textContent = after ? "~110 ms" : "~1,300 ms";
 			}
 			if (savingsBadge) {
-				savingsBadge.classList.toggle("hidden", !after);
+				savingsBadge.textContent = "91% faster";
+			}
+			if (savingsGroup) {
+				savingsGroup.classList.toggle("hidden", !after);
 			}
 		}
 
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index fd863dc2bed7844..f6ad522fb9f82c8 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -110,7 +110,7 @@ const primitives = [
 	</div>
 	<h2
 		id="build-heading"
-		class="mb-8 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
+		class="mb-8 text-2xl leading-[1.1] font-medium -tracking-[0.035em] text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
 	>
 		Everything you need to build at the edge
 	</h2>
@@ -140,7 +140,7 @@ const primitives = [
 						x2="10"
 						y2="5"
 						stroke-width="1"
-						class="stroke-accent dark:stroke-white"
+						class="l-corner-stroke"
 					/>
 					<line
 						x1="5"
@@ -148,7 +148,7 @@ const primitives = [
 						x2="5"
 						y2="10"
 						stroke-width="1"
-						class="stroke-accent dark:stroke-white"
+						class="l-corner-stroke"
 					/>
 				</svg>
 			))
@@ -170,7 +170,7 @@ const primitives = [
 						id={`build-tab-${p.id}`}
 						class={[
 							"build-tab group relative flex shrink-0 items-center gap-2 px-5 py-3",
-							"font-mono text-xs tracking-widest uppercase",
+							"text-sm font-medium -tracking-[0.005em]",
 							"cursor-pointer transition-colors duration-150 select-none",
 							"border-r border-zinc-200 last:border-r-0 dark:border-[#2a2a2a]",
 							"focus-visible:outline-accent focus-visible:outline-2 focus-visible:-outline-offset-2",
@@ -200,13 +200,13 @@ const primitives = [
 					class="bg-l-card dark:bg-l-card-dark p-8 max-[600px]:p-5"
 				>
 					<div class="w-full">
-					<div class="mb-4 flex items-center gap-3">
-						<div
-							class="build-panel-icon flex size-8 shrink-0 items-center justify-center rounded border border-dashed"
-							style={`--build-icon-color:${p.iconColor};--build-icon-bg:${p.iconBg};--build-icon-bg-dark:${p.iconBgDark};`}
-						>
-							<Icon name={p.icon} size="16px" />
-						</div>
+						<div class="mb-4 flex items-center gap-3">
+							<div
+								class="build-panel-icon flex size-8 shrink-0 items-center justify-center rounded border border-dashed"
+								style={`--build-icon-color:${p.iconColor};--build-icon-bg:${p.iconBg};--build-icon-bg-dark:${p.iconBgDark};`}
+							>
+								<Icon name={p.icon} size="16px" />
+							</div>
 							<h3 class="text-base leading-snug font-medium text-zinc-900 md:text-lg dark:text-zinc-50">
 								{p.heading}
 							</h3>
@@ -267,12 +267,22 @@ const primitives = [
 									</>
 								</svg>
 							</a>
-							<p class="relative top-px min-w-0 flex-1 font-mono text-xs text-zinc-600 dark:text-zinc-300">
+							<p class="relative top-px min-w-0 flex-1 text-sm text-zinc-500 dark:text-zinc-400">
 								{p.tags.map((tag, idx) => (
 									<span class="inline-flex items-center">
-										<a href={tag.href} class="text-zinc-600 no-underline hover:underline hover:underline-offset-4 dark:text-zinc-300">{tag.label}</a>
+										<a
+											href={tag.href}
+											class="text-zinc-600 no-underline hover:underline hover:underline-offset-4 dark:text-zinc-300"
+										>
+											{tag.label}
+										</a>
 										{idx < p.tags.length - 1 && (
-											<span class="mx-1" aria-hidden="true">·</span>
+											<span
+												class="mx-1.5 text-zinc-300 dark:text-zinc-600"
+												aria-hidden="true"
+											>
+												·
+											</span>
 										)}
 									</span>
 								))}
diff --git a/src/components/landing/ChangelogSection.astro b/src/components/landing/ChangelogSection.astro
index 98a71a4166683d4..72d7f886c116afc 100644
--- a/src/components/landing/ChangelogSection.astro
+++ b/src/components/landing/ChangelogSection.astro
@@ -100,7 +100,7 @@ const CORNERS = [
 					</div>
 					<h2
 						id="cl-heading"
-						class="mb-2 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
+						class="mb-2 text-2xl leading-[1.1] font-medium -tracking-[0.035em] text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
 					>
 						What we've shipped
 					</h2>
@@ -110,7 +110,7 @@ const CORNERS = [
 				</div>
 				<a
 					href="/changelog/"
-					class="group text-accent decoration-accent/40 hidden shrink-0 items-center gap-1.5 font-mono text-xs tracking-wider underline-offset-4 hover:underline md:inline-flex"
+					class="group text-accent decoration-accent/40 hidden shrink-0 items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline md:inline-flex"
 				>
 					View all
 					<svg
@@ -148,7 +148,7 @@ const CORNERS = [
 							x2="10"
 							y2="5"
 							stroke-width="1"
-							class="stroke-accent dark:stroke-white"
+							class="l-corner-stroke"
 						/>
 						<line
 							x1="5"
@@ -156,127 +156,127 @@ const CORNERS = [
 							x2="5"
 							y2="10"
 							stroke-width="1"
-							class="stroke-accent dark:stroke-white"
+							class="l-corner-stroke"
 						/>
 					</svg>
 				))}
 
-					{/* ── Featured (latest) — same spacing rhythm as ProductCard ── */}
-					{featured && (
-						<a
-							href={featured.url}
-							class="cl-featured bg-l-card dark:bg-l-card-dark hover:bg-l-card-hover dark:hover:bg-l-card-hover-dark flex flex-col p-6 transition-colors duration-150"
-						>
-							{/* Header — date left, product label right (matching small cards) */}
-							<div class="mb-4 flex items-center justify-between">
-								<div class="flex items-center gap-2.5">
-									<span class="cl-broadcast" aria-hidden="true">
-										<span class="cl-ring" />
-										<span class="cl-ring cl-ring--delay" />
-										<span class="cl-core" />
-									</span>
-									<span class="text-accent font-mono text-xs font-medium tracking-widest uppercase">
-										Latest
-									</span>
-									<time class="font-mono text-xs text-zinc-500 tabular-nums dark:text-zinc-400">
-										{featured.dateFormatted}
-									</time>
-								</div>
-								{featured.products[0] && (
-									<span class="text-accent font-mono text-xs tracking-wide uppercase">
-										{featured.products[0].name}
-									</span>
-								)}
-							</div>
-
-							{/* Title — mirrors ProductCard scenario (mb-2) */}
-							<div class="mb-9 flex-1 pt-4">
-								<h3 class="mb-2 text-xl leading-snug font-medium text-zinc-900 md:text-2xl dark:text-zinc-50">
-									{featured.title}
-								</h3>
-
-								{/* Description — mirrors ProductCard detail (mb-6 flex-1) */}
-								<p class="max-w-[480px] text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400">
-									{featured.description}
-								</p>
-							</div>
-
-							{/* CTA — mirrors ProductCard CTA */}
-							<span class="group/cta inline-flex w-fit items-center gap-2 text-sm font-medium text-zinc-600 dark:text-zinc-300">
-								Read update
-								<svg
-									width="14"
-									height="14"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									class="transition-transform duration-150 group-hover/cta:translate-x-0.5"
-									aria-hidden="true"
-								>
-									<line x1="5" y1="12" x2="19" y2="12" />
-									<polyline points="12 5 19 12 12 19" />
-								</svg>
-							</span>
-						</a>
-					)}
-
-					{/* ── Smaller cards (mirrors ProductCard anatomy) ── */}
-					{grid.map((entry) => (
-						<a
-							href={entry.url}
-							class="cl-card bg-l-card dark:bg-l-card-dark hover:bg-l-card-hover dark:hover:bg-l-card-hover-dark flex flex-col p-6 transition-colors duration-150"
-						>
-							{/* Header: date + product label — mirrors ProductCard icon + label row */}
-							<div class="mb-4 flex items-center justify-between">
+				{/* ── Featured (latest) — same spacing rhythm as ProductCard ── */}
+				{featured && (
+					<a
+						href={featured.url}
+						class="cl-featured bg-l-card dark:bg-l-card-dark hover:bg-l-card-hover dark:hover:bg-l-card-hover-dark flex flex-col p-6 transition-colors duration-150"
+					>
+						{/* Header — date left, product label right (matching small cards) */}
+						<div class="mb-4 flex items-center justify-between">
+							<div class="flex items-center gap-2.5">
+								<span class="cl-broadcast" aria-hidden="true">
+									<span class="cl-ring" />
+									<span class="cl-ring cl-ring--delay" />
+									<span class="cl-core" />
+								</span>
+								<span class="text-accent font-mono text-xs font-medium tracking-widest uppercase">
+									Latest
+								</span>
 								<time class="font-mono text-xs text-zinc-500 tabular-nums dark:text-zinc-400">
-									{entry.dateShort}
+									{featured.dateFormatted}
 								</time>
+							</div>
+							{featured.products[0] && (
 								<span class="text-accent font-mono text-xs tracking-wide uppercase">
-									{entry.products[0]?.name}
+									{featured.products[0].name}
 								</span>
-							</div>
+							)}
+						</div>
 
-							{/* Title — matches ProductCard scenario */}
-							<p class="mb-2 line-clamp-2 text-base leading-snug font-medium text-zinc-900 md:text-lg dark:text-zinc-50">
-								{entry.title}
-							</p>
+						{/* Title — mirrors ProductCard scenario (mb-2) */}
+						<div class="mb-9 flex-1 pt-4">
+							<h3 class="mb-2 text-xl leading-snug font-medium text-zinc-900 md:text-2xl dark:text-zinc-50">
+								{featured.title}
+							</h3>
 
-							{/* Description — matches ProductCard detail */}
-							<p class="mb-6 line-clamp-2 flex-1 text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400">
-								{entry.description}
+							{/* Description — mirrors ProductCard detail (mb-6 flex-1) */}
+							<p class="max-w-[480px] text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400">
+								{featured.description}
 							</p>
+						</div>
 
-							{/* CTA — matches ProductCard CTA */}
-							<span class="group/cta inline-flex w-fit items-center gap-2 text-sm font-medium text-zinc-600 dark:text-zinc-300">
-								Read more
-								<svg
-									width="14"
-									height="14"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									class="transition-transform duration-150 group-hover/cta:translate-x-0.5"
-									aria-hidden="true"
-								>
-									<line x1="5" y1="12" x2="19" y2="12" />
-									<polyline points="12 5 19 12 12 19" />
-								</svg>
+						{/* CTA — mirrors ProductCard CTA */}
+						<span class="group/cta inline-flex w-fit items-center gap-2 text-sm font-medium text-zinc-600 dark:text-zinc-300">
+							Read update
+							<svg
+								width="14"
+								height="14"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="transition-transform duration-150 group-hover/cta:translate-x-0.5"
+								aria-hidden="true"
+							>
+								<line x1="5" y1="12" x2="19" y2="12" />
+								<polyline points="12 5 19 12 12 19" />
+							</svg>
+						</span>
+					</a>
+				)}
+
+				{/* ── Smaller cards (mirrors ProductCard anatomy) ── */}
+				{grid.map((entry) => (
+					<a
+						href={entry.url}
+						class="cl-card bg-l-card dark:bg-l-card-dark hover:bg-l-card-hover dark:hover:bg-l-card-hover-dark flex flex-col p-6 transition-colors duration-150"
+					>
+						{/* Header: date + product label — mirrors ProductCard icon + label row */}
+						<div class="mb-4 flex items-center justify-between">
+							<time class="font-mono text-xs text-zinc-500 tabular-nums dark:text-zinc-400">
+								{entry.dateShort}
+							</time>
+							<span class="text-accent font-mono text-xs tracking-wide uppercase">
+								{entry.products[0]?.name}
 							</span>
-						</a>
-					))}
+						</div>
+
+						{/* Title — matches ProductCard scenario */}
+						<p class="mb-2 line-clamp-2 text-base leading-snug font-medium text-zinc-900 md:text-lg dark:text-zinc-50">
+							{entry.title}
+						</p>
+
+						{/* Description — matches ProductCard detail */}
+						<p class="mb-6 line-clamp-2 flex-1 text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400">
+							{entry.description}
+						</p>
+
+						{/* CTA — matches ProductCard CTA */}
+						<span class="group/cta inline-flex w-fit items-center gap-2 text-sm font-medium text-zinc-600 dark:text-zinc-300">
+							Read more
+							<svg
+								width="14"
+								height="14"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="transition-transform duration-150 group-hover/cta:translate-x-0.5"
+								aria-hidden="true"
+							>
+								<line x1="5" y1="12" x2="19" y2="12" />
+								<polyline points="12 5 19 12 12 19" />
+							</svg>
+						</span>
+					</a>
+				))}
 			</div>
 
 			{/* ── Mobile CTA ─────────────────────────────────────── */}
 			<div class="mt-6 md:hidden">
 				<a
 					href="/changelog/"
-					class="group text-accent decoration-accent/40 inline-flex items-center gap-1.5 font-mono text-xs tracking-wider underline-offset-4 hover:underline"
+					class="group text-accent decoration-accent/40 inline-flex items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline"
 				>
 					View all updates
 					<svg
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
index f53b6f891a0743b..4d867bec17f8760 100644
--- a/src/components/landing/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -5,7 +5,7 @@ import { stagger } from "./constants";
 
 <section id="hero" class="pb-16 max-[900px]:pb-12 md:pt-6">
 	<h1
-		class={`text-[clamp(2.75rem,5vw,3.5rem)] font-medium -tracking-[0.025em] leading-[1.08] text-balance mb-4 text-primary dark:text-white ${stagger(0.05)}`}
+		class={`text-[clamp(2.75rem,5vw,3.5rem)] font-medium -tracking-[0.04em] leading-[1.05] text-balance mb-4 text-primary dark:text-white ${stagger(0.05)}`}
 	>
 		Cloudflare Developer Docs
 	</h1>
diff --git a/src/components/landing/PlatformStats.astro b/src/components/landing/PlatformStats.astro
index 74e5af30302d7a6..fd12279deef8869 100644
--- a/src/components/landing/PlatformStats.astro
+++ b/src/components/landing/PlatformStats.astro
@@ -65,7 +65,7 @@ const stats = [
 							x2="10"
 							y2="5"
 							stroke-width="1"
-							class="stroke-accent dark:stroke-white"
+							class="l-corner-stroke"
 						/>
 						<line
 							x1="5"
@@ -73,7 +73,7 @@ const stats = [
 							x2="5"
 							y2="10"
 							stroke-width="1"
-							class="stroke-accent dark:stroke-white"
+							class="l-corner-stroke"
 						/>
 					</svg>
 					<svg
@@ -89,7 +89,7 @@ const stats = [
 							x2="10"
 							y2="5"
 							stroke-width="1"
-							class="stroke-accent dark:stroke-white"
+							class="l-corner-stroke"
 						/>
 						<line
 							x1="5"
@@ -97,7 +97,7 @@ const stats = [
 							x2="5"
 							y2="10"
 							stroke-width="1"
-							class="stroke-accent dark:stroke-white"
+							class="l-corner-stroke"
 						/>
 					</svg>
 					<svg
@@ -113,7 +113,7 @@ const stats = [
 							x2="10"
 							y2="5"
 							stroke-width="1"
-							class="stroke-accent dark:stroke-white"
+							class="l-corner-stroke"
 						/>
 						<line
 							x1="5"
@@ -121,7 +121,7 @@ const stats = [
 							x2="5"
 							y2="10"
 							stroke-width="1"
-							class="stroke-accent dark:stroke-white"
+							class="l-corner-stroke"
 						/>
 					</svg>
 					<svg
@@ -137,7 +137,7 @@ const stats = [
 							x2="10"
 							y2="5"
 							stroke-width="1"
-							class="stroke-accent dark:stroke-white"
+							class="l-corner-stroke"
 						/>
 						<line
 							x1="5"
@@ -145,7 +145,7 @@ const stats = [
 							x2="5"
 							y2="10"
 							stroke-width="1"
-							class="stroke-accent dark:stroke-white"
+							class="l-corner-stroke"
 						/>
 					</svg>
 
@@ -159,9 +159,7 @@ const stats = [
 
 					{/* Stat value */}
 					<p class="mb-1">
-						<span
-							class="stat-counter font-mono text-3xl leading-none font-medium -tracking-tight text-zinc-900 tabular-nums dark:text-white"
-						>
+						<span class="stat-counter inline-flex items-baseline font-mono text-3xl leading-none font-medium -tracking-tight text-zinc-900 tabular-nums dark:text-white">
 							<span
 								class="stat-counter-value inline-block"
 								data-target={stat.value}
@@ -169,7 +167,8 @@ const stats = [
 								style={`min-width: ${(stat.value % 1 !== 0 ? stat.value.toFixed(2) : String(stat.value)).length}ch;`}
 							>
 								{stat.value % 1 !== 0 ? stat.value.toFixed(2) : stat.value}
-							</span><span class="stat-counter-suffix">{stat.suffix}</span>
+							</span>
+							<span class="stat-counter-suffix">{stat.suffix}</span>
 						</span>
 					</p>
 
@@ -184,7 +183,7 @@ const stats = [
 							<p class="text-sm leading-tight font-medium text-zinc-900 dark:text-zinc-50">
 								{stat.label}
 							</p>
-							<p class="font-mono text-xs text-zinc-500 dark:text-zinc-400">
+							<p class="text-xs text-zinc-500 dark:text-zinc-400">
 								{stat.detail}
 							</p>
 						</div>
@@ -225,7 +224,10 @@ const stats = [
 			const elapsed = now - start;
 			const progress = Math.min(elapsed / duration, 1);
 			const eased = easeOutCubic(progress);
-			const nextScaled = Math.min(targetScaled, Math.floor(targetScaled * eased));
+			const nextScaled = Math.min(
+				targetScaled,
+				Math.floor(targetScaled * eased),
+			);
 
 			if (nextScaled !== lastScaled) {
 				el.textContent = (nextScaled / scale).toFixed(decimals);
@@ -272,10 +274,13 @@ const stats = [
 	}
 
 	initPlatformStatsCounters();
-	if (!(window as Window & { __platformStatsCountersBound?: boolean })
-		.__platformStatsCountersBound) {
+	if (
+		!(window as Window & { __platformStatsCountersBound?: boolean })
+			.__platformStatsCountersBound
+	) {
 		document.addEventListener("astro:page-load", initPlatformStatsCounters);
-		(window as Window & { __platformStatsCountersBound?: boolean })
-			.__platformStatsCountersBound = true;
+		(
+			window as Window & { __platformStatsCountersBound?: boolean }
+		).__platformStatsCountersBound = true;
 	}
 </script>
diff --git a/src/components/landing/ProductCard.astro b/src/components/landing/ProductCard.astro
index e91de89e6c288ab..8d6a8a3c7e42c6f 100644
--- a/src/components/landing/ProductCard.astro
+++ b/src/components/landing/ProductCard.astro
@@ -71,11 +71,7 @@ const mediaProducts = new Set([
 ]);
 
 const normalizeProduct = (value: string) =>
-	value
-		.toLowerCase()
-		.replace(/[-_]/g, " ")
-		.replace(/\s+/g, " ")
-		.trim();
+	value.toLowerCase().replace(/[-_]/g, " ").replace(/\s+/g, " ").trim();
 
 const getIconHoverPalette = (value: string) => {
 	const normalized = normalizeProduct(value);
@@ -126,8 +122,9 @@ const {
 const iconHoverPalette = getIconHoverPalette(product);
 ---
 
-<div
-	class="pc-card group/product-card bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark flex flex-1 flex-col p-6 transition-colors duration-150"
+<a
+	href={href}
+	class="pc-card group/product-card bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark focus-visible:outline-accent relative flex flex-1 flex-col p-6 no-underline transition-colors duration-150 focus-visible:outline-2 focus-visible:-outline-offset-2"
 	style={`--pc-hover-color: ${iconHoverPalette.color}; --pc-hover-bg: ${iconHoverPalette.bg}; --pc-hover-bg-dark: ${iconHoverPalette.bgDark};`}
 >
 	{/* Header: icon + product label */}
@@ -135,7 +132,11 @@ const iconHoverPalette = getIconHoverPalette(product);
 		<span
 			class="pc-icon-shell relative flex size-11 items-center justify-center rounded-md border border-zinc-200 bg-zinc-100 text-zinc-400 transition-[background-color,border-color,color] duration-200 dark:border-[#2a2a2a] dark:bg-zinc-800 dark:text-zinc-500"
 		>
-			<Icon name={icon} size="24px" class="pc-icon transition-colors duration-200" />
+			<Icon
+				name={icon}
+				size="24px"
+				class="pc-icon transition-colors duration-200"
+			/>
 		</span>
 		<span class="text-accent font-mono text-xs tracking-wide uppercase">
 			{product}
@@ -154,10 +155,9 @@ const iconHoverPalette = getIconHoverPalette(product);
 		{detail}
 	</p>
 
-	{/* CTA */}
-	<a
-		href={href}
-		class="group/cta hover:text-accent hover:underline focus-visible:outline-accent inline-flex w-fit items-center gap-2 rounded-md py-1 text-sm font-medium text-zinc-600 no-underline underline-offset-4 transition-colors duration-150 focus-visible:outline-2 focus-visible:-outline-offset-2 dark:text-zinc-300"
+	{/* CTA — visual only; the whole card is the link */}
+	<span
+		class="pc-cta group-hover/product-card:text-accent inline-flex w-fit items-center gap-2 text-sm font-medium text-zinc-600 underline-offset-4 transition-colors duration-150 group-hover/product-card:underline dark:text-zinc-300"
 	>
 		{cta}
 		<svg
@@ -169,14 +169,14 @@ const iconHoverPalette = getIconHoverPalette(product);
 			stroke-width="2"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			class="transition-transform duration-150 group-hover/cta:translate-x-0.5"
+			class="transition-transform duration-150 group-hover/product-card:translate-x-0.5"
 			aria-hidden="true"
 		>
 			<line x1="5" y1="12" x2="19" y2="12"></line>
 			<polyline points="12 5 19 12 12 19"></polyline>
 		</svg>
-	</a>
-</div>
+	</span>
+</a>
 
 <style>
 	.pc-card:hover .pc-icon-shell,
diff --git a/src/components/landing/ProductCardGrid.astro b/src/components/landing/ProductCardGrid.astro
index 48ad189b838fb57..a9a59d8c7ec3d13 100644
--- a/src/components/landing/ProductCardGrid.astro
+++ b/src/components/landing/ProductCardGrid.astro
@@ -53,7 +53,7 @@ const { label } = Astro.props;
 						x2="10"
 						y2="5"
 						stroke-width="1"
-						class="stroke-accent dark:stroke-white"
+						class="l-corner-stroke"
 					/>
 					<line
 						x1="5"
@@ -61,7 +61,7 @@ const { label } = Astro.props;
 						x2="5"
 						y2="10"
 						stroke-width="1"
-						class="stroke-accent dark:stroke-white"
+						class="l-corner-stroke"
 					/>
 				</svg>
 			))
diff --git a/src/components/landing/ProtectSection.astro b/src/components/landing/ProtectSection.astro
index cdd50cb086d5e8d..8453cabc0723fe0 100644
--- a/src/components/landing/ProtectSection.astro
+++ b/src/components/landing/ProtectSection.astro
@@ -2,64 +2,79 @@
 const products = [
 	{
 		name: "WAF",
-		description: "Custom firewall rules, managed rulesets, and rate limiting. Block threats at the edge before they reach your origin.",
+		description:
+			"Custom firewall rules, managed rulesets, and rate limiting. Block threats at the edge before they reach your origin.",
 		detail: "Custom rules · Managed rulesets · Analytics",
 		href: "/waf/",
 	},
 	{
 		name: "Rate Limiting",
-		description: "Protect APIs and pages from abuse. Configurable thresholds, fingerprinting, and response actions.",
+		description:
+			"Protect APIs and pages from abuse. Configurable thresholds, fingerprinting, and response actions.",
 		detail: "Per-IP · Per-session · Sliding window",
 		href: "/waf/rate-limiting-rules/",
 	},
 	{
 		name: "DDoS Protection",
-		description: "Always-on, unmetered mitigation for L3–L7 attacks. Automatic detection with tunable sensitivity.",
+		description:
+			"Always-on, unmetered mitigation for L3–L7 attacks. Automatic detection with tunable sensitivity.",
 		detail: "L3 · L4 · L7 · Unmetered",
 		href: "/ddos-protection/",
 	},
 	{
 		name: "Cloudflare Tunnel",
-		description: "Expose private services to the internet without opening firewall ports. One command to create a secure outbound-only connection.",
+		description:
+			"Expose private services to the internet without opening firewall ports. One command to create a secure outbound-only connection.",
 		detail: "No inbound ports · Remote config · API",
 		href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
 	},
 	{
 		name: "Access",
-		description: "Zero Trust access control for any application. SSO, identity provider integration, and per-request policy enforcement.",
+		description:
+			"Zero Trust access control for any application. SSO, identity provider integration, and per-request policy enforcement.",
 		detail: "SSO · IdP integrations · Policies",
 		href: "/cloudflare-one/access-controls/policies/",
 	},
 	{
 		name: "Gateway",
-		description: "DNS, HTTP, and network filtering for your team's traffic. Block malware, phishing, and unwanted sites without a VPN.",
+		description:
+			"DNS, HTTP, and network filtering for your team's traffic. Block malware, phishing, and unwanted sites without a VPN.",
 		detail: "DNS filtering · HTTP inspection · L4",
 		href: "/cloudflare-one/traffic-policies/",
 	},
 	{
 		name: "Bot Management",
-		description: "Detect and block automated traffic. Behavioral analysis, challenge flows, and bot score APIs built into every request.",
+		description:
+			"Detect and block automated traffic. Behavioral analysis, challenge flows, and bot score APIs built into every request.",
 		detail: "ML scoring · Challenge · JS detection",
 		href: "/bots/",
 	},
 	{
 		name: "Turnstile",
-		description: "CAPTCHA-free bot detection for your frontend. Drop-in widget that challenges bots invisibly, never your users.",
+		description:
+			"CAPTCHA-free bot detection for your frontend. Drop-in widget that challenges bots invisibly, never your users.",
 		detail: "Invisible · Managed · Non-interactive",
 		href: "/turnstile/",
 	},
 	{
 		name: "SSL/TLS",
-		description: "Universal SSL by default, with full control over cipher suites, certificate authorities, and origin authentication.",
+		description:
+			"Universal SSL by default, with full control over cipher suites, certificate authorities, and origin authentication.",
 		detail: "Universal · Advanced · mTLS · Origin CA",
 		href: "/ssl/",
 	},
 ];
 
 const quickLinks = [
-	{ label: "Tunnel get started", href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/get-started/create-remote-tunnel/" },
+	{
+		label: "Tunnel get started",
+		href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/get-started/create-remote-tunnel/",
+	},
 	{ label: "IP access rules", href: "/waf/tools/ip-access-rules/" },
-	{ label: "Turnstile troubleshooting", href: "/turnstile/troubleshooting/client-side-errors/error-codes/" },
+	{
+		label: "Turnstile troubleshooting",
+		href: "/turnstile/troubleshooting/client-side-errors/error-codes/",
+	},
 	{ label: "WAF security events", href: "/waf/analytics/security-events/" },
 	{ label: "Cloudflare One setup", href: "/cloudflare-one/setup/" },
 	{ label: "WARP Client", href: "/warp-client/" },
@@ -71,87 +86,122 @@ const quickLinks = [
 	aria-labelledby="protect-heading"
 >
 	<!-- Section header -->
-	<div class="mb-10 flex items-end justify-between gap-6 max-[600px]:flex-col max-[600px]:items-start max-[600px]:gap-4">
+	<div
+		class="mb-10 flex items-end justify-between gap-6 max-[600px]:flex-col max-[600px]:items-start max-[600px]:gap-4"
+	>
 		<div>
 			<div class="mb-3 flex items-center gap-2">
-				<span class="font-mono text-[0.5625rem] tracking-[0.2em] text-accent uppercase">
+				<span
+					class="text-accent font-mono text-[0.5625rem] tracking-[0.2em] uppercase"
+				>
 					Protect
 				</span>
-				<span class="h-px w-8 bg-accent/40"></span>
+				<span class="bg-accent/40 h-px w-8"></span>
 			</div>
 			<h2
 				id="protect-heading"
-				class="text-[clamp(1.5rem,3vw,2rem)] font-normal -tracking-[0.03em] leading-tight text-[#18181b]"
+				class="text-[clamp(1.5rem,3vw,2rem)] leading-tight font-normal -tracking-[0.03em] text-[#18181b]"
 			>
 				Secure what you're building
 			</h2>
-			<p class="mt-3 text-[0.9375rem] text-[#6b6b74] max-w-[480px] leading-relaxed">
-				Layer security, access control, and bot protection onto any app or infrastructure — without re-architecting anything.
+			<p
+				class="mt-3 max-w-[480px] text-[0.9375rem] leading-relaxed text-[#6b6b74]"
+			>
+				Layer security, access control, and bot protection onto any app or
+				infrastructure — without re-architecting anything.
 			</p>
 		</div>
 		<a
 			href="/cloudflare-one/"
-			class="shrink-0 inline-flex items-center gap-2 rounded-lg border border-black/10 bg-black/2 px-4 py-2 font-mono text-[0.625rem] tracking-widest text-[#6b6b74] uppercase transition-colors duration-100 hover:bg-black/5 hover:text-[#1a1a1e] no-underline max-[600px]:hidden"
+			class="inline-flex shrink-0 items-center gap-2 rounded-lg border border-black/10 bg-black/2 px-4 py-2 font-mono text-[0.625rem] tracking-widest text-[#6b6b74] uppercase no-underline transition-colors duration-100 hover:bg-black/5 hover:text-[#1a1a1e] max-[600px]:hidden"
 		>
 			Explore Zero Trust
-			<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-				<line x1="5" y1="12" x2="19" y2="12" />
-				<polyline points="12 5 19 12 12 19" />
+			<svg
+				width="10"
+				height="10"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<line x1="5" y1="12" x2="19" y2="12"></line>
+				<polyline points="12 5 19 12 12 19"></polyline>
 			</svg>
 		</a>
 	</div>
 
 	<!-- Products list -->
-	<div class="border border-black/6 divide-y divide-black/6 overflow-hidden">
-		{products.map((p) => (
-			<a
-				href={p.href}
-				class="group relative flex items-center gap-6 bg-white/90 px-6 py-5 no-underline text-inherit transition-colors duration-100 hover:bg-zinc-50 focus-visible:outline-2 focus-visible:outline-accent focus-visible:-outline-offset-2 max-[600px]:flex-col max-[600px]:items-start max-[600px]:gap-2 max-[600px]:px-4 max-[600px]:py-4"
-			>
-				{/* Left accent reveal */}
-				<span
-					class="pointer-events-none absolute top-0 left-0 w-[2px] h-0 bg-accent transition-[height] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:h-full"
-					aria-hidden="true"
-				/>
+	<div class="divide-y divide-black/6 overflow-hidden border border-black/6">
+		{
+			products.map((p) => (
+				<a
+					href={p.href}
+					class="group focus-visible:outline-accent relative flex items-center gap-6 bg-white/90 px-6 py-5 text-inherit no-underline transition-colors duration-100 hover:bg-zinc-50 focus-visible:outline-2 focus-visible:-outline-offset-2 max-[600px]:flex-col max-[600px]:items-start max-[600px]:gap-2 max-[600px]:px-4 max-[600px]:py-4"
+				>
+					{/* Left accent reveal */}
+					<span
+						class="bg-accent pointer-events-none absolute top-0 left-0 h-0 w-[2px] transition-[height] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:h-full"
+						aria-hidden="true"
+					/>
 
-				{/* Product name */}
-				<div class="w-[140px] shrink-0 max-[600px]:w-auto">
-					<span class="text-[0.9375rem] font-medium text-[#1a1a1e] leading-tight">
-						{p.name}
-					</span>
-				</div>
+					{/* Product name */}
+					<div class="w-[140px] shrink-0 max-[600px]:w-auto">
+						<span class="text-[0.9375rem] leading-tight font-medium text-[#1a1a1e]">
+							{p.name}
+						</span>
+					</div>
 
-				{/* Description */}
-				<p class="flex-1 text-[0.8125rem] text-[#6b6b74] leading-normal m-0">
-					{p.description}
-				</p>
+					{/* Description */}
+					<p class="m-0 flex-1 text-[0.8125rem] leading-normal text-[#6b6b74]">
+						{p.description}
+					</p>
 
-				{/* Detail tags */}
-				<div class="shrink-0 font-mono text-[0.5625rem] tracking-wide text-[#9b9ba4] max-w-[200px] text-right leading-relaxed max-[900px]:hidden">
-					{p.detail}
-				</div>
+					{/* Detail tags */}
+					<div class="max-w-[200px] shrink-0 text-right font-mono text-[0.5625rem] leading-relaxed tracking-wide text-[#9b9ba4] max-[900px]:hidden">
+						{p.detail}
+					</div>
 
-				{/* Arrow */}
-				<div class="shrink-0 flex items-center opacity-0 -translate-x-1 transition-[opacity,transform] duration-100 group-hover:opacity-100 group-hover:translate-x-0 max-[600px]:hidden">
-					<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-accent" aria-hidden="true">
-						<line x1="5" y1="12" x2="19" y2="12" />
-						<polyline points="12 5 19 12 12 19" />
-					</svg>
-				</div>
-			</a>
-		))}
+					{/* Arrow */}
+					<div class="flex shrink-0 -translate-x-1 items-center opacity-0 transition-[opacity,transform] duration-100 group-hover:translate-x-0 group-hover:opacity-100 max-[600px]:hidden">
+						<svg
+							width="11"
+							height="11"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="text-accent"
+							aria-hidden="true"
+						>
+							<line x1="5" y1="12" x2="19" y2="12" />
+							<polyline points="12 5 19 12 12 19" />
+						</svg>
+					</div>
+				</a>
+			))
+		}
 	</div>
 
 	<!-- Quick links footer -->
-	<div class="mt-4 flex items-center gap-2 flex-wrap">
-		<span class="font-mono text-[0.5rem] tracking-[0.2em] text-[#9b9ba4] uppercase mr-1">Also:</span>
-		{quickLinks.map((l) => (
-			<a
-				href={l.href}
-				class="font-mono text-[0.5625rem] tracking-wide text-[#6b6b74] no-underline border-b border-dashed border-black/15 pb-px transition-colors duration-100 hover:text-accent hover:border-accent"
-			>
-				{l.label}
-			</a>
-		))}
+	<div class="mt-4 flex flex-wrap items-center gap-2">
+		<span
+			class="mr-1 font-mono text-[0.5rem] tracking-[0.2em] text-[#9b9ba4] uppercase"
+			>Also:</span
+		>
+		{
+			quickLinks.map((l) => (
+				<a
+					href={l.href}
+					class="hover:text-accent hover:border-accent border-b border-dashed border-black/15 pb-px font-mono text-[0.5625rem] tracking-wide text-[#6b6b74] no-underline transition-colors duration-100"
+				>
+					{l.label}
+				</a>
+			))
+		}
 	</div>
 </section>
diff --git a/src/components/landing/RequestLifecycle.astro b/src/components/landing/RequestLifecycle.astro
index d0cc29792644d7a..0dcf09d1c8e68fc 100644
--- a/src/components/landing/RequestLifecycle.astro
+++ b/src/components/landing/RequestLifecycle.astro
@@ -225,7 +225,7 @@ const SECURITY = NODES.filter((n) => n.security);
 						x2="10"
 						y2="5"
 						stroke-width="1"
-						class="stroke-accent dark:stroke-white"
+						class="l-corner-stroke"
 					/>
 					<line
 						x1="5"
@@ -233,7 +233,7 @@ const SECURITY = NODES.filter((n) => n.security);
 						x2="5"
 						y2="10"
 						stroke-width="1"
-						class="stroke-accent dark:stroke-white"
+						class="l-corner-stroke"
 					/>
 				</svg>
 			))
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index 53decd23fc42814..7a3078ce1e87628 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -87,7 +87,7 @@ const categories = [
 	</div>
 	<h2
 		id="s6-heading"
-		class="mb-2 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
+		class="mb-2 text-2xl leading-[1.1] font-medium -tracking-[0.035em] text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
 	>
 		Secure what you already have
 	</h2>
diff --git a/src/components/landing/StructuralGrid.astro b/src/components/landing/StructuralGrid.astro
index d654155218ca121..bee327dcf74d6c0 100644
--- a/src/components/landing/StructuralGrid.astro
+++ b/src/components/landing/StructuralGrid.astro
@@ -31,7 +31,8 @@ const marks =
 	<div
 		class="landing-dot-grid absolute h-full w-full"
 		style="background-image: radial-gradient(var(--l-dot-color) 1px, transparent 1px); background-size: var(--l-dot-size)"
-	></div>
+	>
+	</div>
 </div>
 
 <!-- Plus marks at line intersections -->
@@ -59,8 +60,22 @@ const marks =
 						style={`margin-top:${offset};margin-left:${offset}`}
 						aria-hidden="true"
 					>
-						<line x1="0" y1={half} x2={size} y2={half} stroke={stroke} stroke-width="1" />
-						<line x1={half} y1="0" x2={half} y2={size} stroke={stroke} stroke-width="1" />
+						<line
+							x1="0"
+							y1={half}
+							x2={size}
+							y2={half}
+							stroke={stroke}
+							stroke-width="1"
+						/>
+						<line
+							x1={half}
+							y1="0"
+							x2={half}
+							y2={size}
+							stroke={stroke}
+							stroke-width="1"
+						/>
 					</svg>
 					<svg
 						width={size}
@@ -71,12 +86,25 @@ const marks =
 						style={`margin-top:${offset};margin-right:${offset}`}
 						aria-hidden="true"
 					>
-						<line x1="0" y1={half} x2={size} y2={half} stroke={stroke} stroke-width="1" />
-						<line x1={half} y1="0" x2={half} y2={size} stroke={stroke} stroke-width="1" />
+						<line
+							x1="0"
+							y1={half}
+							x2={size}
+							y2={half}
+							stroke={stroke}
+							stroke-width="1"
+						/>
+						<line
+							x1={half}
+							y1="0"
+							x2={half}
+							y2={size}
+							stroke={stroke}
+							stroke-width="1"
+						/>
 					</svg>
 				</div>
 			);
 		})
 	}
-
 </div>
diff --git a/src/styles/landing.css b/src/styles/landing.css
index fb45ba268337506..d4218e3f6dfbc0c 100644
--- a/src/styles/landing.css
+++ b/src/styles/landing.css
@@ -45,6 +45,10 @@
 	}
 }
 
+@utility l-corner-stroke {
+	stroke: var(--l-corner-mark, rgba(24, 24, 27, 0.28));
+}
+
 @utility v27-broadcast {
 	position: absolute;
 	left: 50%;
@@ -130,6 +134,8 @@
 	);
 	--l-grid-mark: rgba(0, 0, 0, 0.08);
 	--l-grid-mark-accent: rgba(0, 0, 0, 0.12);
+	/* Corner plus marks on cards/grids — subdued, solid grey like the Workers site */
+	--l-corner-mark: #d4d4d8;
 	--l-h-line: rgba(0, 0, 0, 0.05);
 	--l-h-line-fine: rgba(0, 0, 0, 0.025);
 }
@@ -157,6 +163,7 @@
 	);
 	--l-grid-mark: rgba(255, 255, 255, 0.1);
 	--l-grid-mark-accent: rgba(255, 255, 255, 0.16);
+	--l-corner-mark: #52525b;
 	--l-h-line: rgba(255, 255, 255, 0.06);
 	--l-h-line-fine: rgba(255, 255, 255, 0.03);
 }

From 8339eed2bc3da42e51b2fa865c59dcfdf45aac18 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 21 Apr 2026 17:47:58 +0100
Subject: [PATCH 13/35] chore: update copy

---
 .../landing/AccelerateSection.astro           | 52 +++++++++----------
 src/components/landing/BuildFromScratch.astro | 30 +++++------
 src/components/landing/Hero.astro             |  4 +-
 src/components/landing/PlatformStats.astro    |  2 +-
 src/components/landing/StructuralGrid.astro   |  9 +++-
 src/pages/index.astro                         |  2 +-
 6 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index 426e2a8a165cde5..9601d9052267ac0 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -7,8 +7,8 @@ const phases = [
 	{
 		id: "dns",
 		phase: "DNS Lookup",
-		before: { offset: 0, width: 9.6 },
-		after: { offset: 0, width: 0.85 },
+		before: { offset: 0, width: 8.33 },
+		after: { offset: 0, width: 0.46 },
 		product: "DNS",
 		icon: "dns",
 		href: "/dns/",
@@ -23,8 +23,8 @@ const phases = [
 	{
 		id: "connect",
 		phase: "TCP + TLS",
-		before: { offset: 9.6, width: 19.2 },
-		after: { offset: 0.85, width: 2 },
+		before: { offset: 8.33, width: 16.67 },
+		after: { offset: 0.46, width: 2.04 },
 		product: "Argo Smart Routing",
 		icon: "argo-smart-routing",
 		href: "/argo-smart-routing/",
@@ -39,12 +39,12 @@ const phases = [
 	{
 		id: "wait",
 		phase: "Server Wait (TTFB)",
-		before: { offset: 28.8, width: 38.46 },
-		after: { offset: 2.85, width: 0.4 },
+		before: { offset: 25, width: 20.83 },
+		after: { offset: 2.5, width: 0.21 },
 		product: "Cache",
 		icon: "cache",
 		href: "/cache/get-started/",
-		outcome: "Cache at the edge, not from origin",
+		outcome: "Serve from cache, not from origin",
 		detail: "Serve from 330+ cities. Cache Rules, tiered caching, purge API.",
 		cta: "Improve cache hit ratio",
 		tags: ["Cache Rules", "Tiered Cache", "Cache Reserve"],
@@ -54,14 +54,14 @@ const phases = [
 	{
 		id: "db",
 		phase: "Database Query",
-		before: { offset: 52, width: 48.1 },
-		after: { offset: 3.25, width: 12 },
+		before: { offset: 37.5, width: 58.33 },
+		after: { offset: 2.71, width: 9.71 },
 		product: "Hyperdrive",
 		icon: "hyperdrive",
 		href: "/hyperdrive/",
 		outcome: "Make database queries feel local",
 		detail:
-			"Connection pooling and caching at the edge. Slash query latency for Postgres, MySQL, and more.",
+			"Connection pooling and query caching globally. Slash query latency for Postgres, MySQL, and more.",
 		cta: "Speed up database queries",
 		tags: ["Connection Pooling", "Query Caching"],
 		color: "bg-lime-500",
@@ -70,12 +70,12 @@ const phases = [
 	{
 		id: "assets",
 		phase: "Asset Optimization",
-		before: { offset: 28.8, width: 20.8 },
-		after: { offset: 2.85, width: 10.8 },
+		before: { offset: 25, width: 11.25 },
+		after: { offset: 2.5, width: 5.83 },
 		product: "Images",
 		icon: "images",
 		href: "/images/",
-		outcome: "Transform and serve images from the edge",
+		outcome: "Transform and serve images globally",
 		detail:
 			"Resize, convert to modern formats, and deliver from 330+ cities. No origin round-trip.",
 		cta: "Optimize image delivery",
@@ -86,8 +86,8 @@ const phases = [
 	{
 		id: "scripts",
 		phase: "Third-party Scripts",
-		before: { offset: 52, width: 38.46 },
-		after: { offset: 14, width: 0 },
+		before: { offset: 37.5, width: 20.83 },
+		after: { offset: 12.42, width: 0 },
 		product: "Zaraz",
 		icon: "zaraz",
 		href: "/zaraz/",
@@ -173,7 +173,7 @@ const phases = [
 			<span
 				id="wf-total-value"
 				class="font-medium text-zinc-900 tabular-nums dark:text-zinc-100"
-				>~110 ms</span
+				>~300 ms</span
 			>
 		</div>
 	</div>
@@ -226,10 +226,10 @@ const phases = [
 			<div></div>
 			<div class="relative h-full">
 				{
-					[0, 200, 400, 600, 800, 1000, 1200].map((ms) => (
+					[0, 400, 800, 1200, 1600, 2000].map((ms) => (
 						<div
 							class="absolute bottom-0 flex flex-col items-center"
-							style={`left: ${(ms / 1300) * 100}%`}
+							style={`left: ${(ms / 2400) * 100}%`}
 						>
 							<span
 								class="wf-ruler-label mb-1 font-mono text-[9px] tracking-wider text-zinc-400 tabular-nums dark:text-zinc-500"
@@ -296,7 +296,7 @@ const phases = [
 							data-width-after={p.after.width}
 						>
 							<span class="wf-bar-label absolute top-1/2 right-1.5 -translate-y-1/2 font-mono text-[9px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm max-[456px]:hidden">
-								{Math.round(p.after.width * 13)}ms
+								{Math.round(p.after.width * 24)}ms
 							</span>
 						</div>
 
@@ -351,14 +351,14 @@ const phases = [
 						<div
 							id="wf-total-bar"
 							class="bg-accent absolute inset-y-0 left-0 rounded-full transition-[width] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]"
-							style="width: 9%;"
+							style="width: 12%;"
 						>
 						</div>
 					</div>
 				</div>
 
 				{
-					/* Right: savings — mirrors the top's `TOTAL ~110 ms` label+value rhythm */
+					/* Right: savings — mirrors the top's `TOTAL ~300 ms` label+value rhythm */
 				}
 				<div
 					id="wf-savings-group"
@@ -369,7 +369,7 @@ const phases = [
 						id="wf-savings-badge"
 						class="font-medium text-zinc-900 tabular-nums dark:text-zinc-100"
 					>
-						91% faster
+						87% faster
 					</span>
 				</div>
 			</div>
@@ -629,7 +629,7 @@ const phases = [
 				// Update label text
 				const label = bar.querySelector(".wf-bar-label");
 				if (label && width) {
-					const ms = Math.round(parseFloat(width) * 13);
+					const ms = Math.round(parseFloat(width) * 24);
 					label.textContent = `${ms}ms`;
 					// Hide label if bar too narrow
 					(label as HTMLElement).style.opacity =
@@ -648,13 +648,13 @@ const phases = [
 
 			// Update total bar + label
 			if (totalBar) {
-				totalBar.style.width = after ? "9%" : "95%";
+				totalBar.style.width = after ? "12%" : "96%";
 			}
 			if (totalValue) {
-				totalValue.textContent = after ? "~110 ms" : "~1,300 ms";
+				totalValue.textContent = after ? "~300 ms" : "~2,300 ms";
 			}
 			if (savingsBadge) {
-				savingsBadge.textContent = "91% faster";
+				savingsBadge.textContent = "87% faster";
 			}
 			if (savingsGroup) {
 				savingsGroup.classList.toggle("hidden", !after);
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index f6ad522fb9f82c8..935325633b37119 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -22,10 +22,10 @@ const primitives = [
 		iconColor: "#0a95ff",
 		iconBg: "rgba(10, 149, 255, 0.1)",
 		iconBgDark: "rgba(10, 149, 255, 0.16)",
-		heading: "Run code at the edge",
+		heading: "Run code everywhere",
 		description:
-			"Deploy serverless functions and full-stack apps onto Cloudflare's global network. No servers to manage, no cold starts — your code runs in 330+ cities, milliseconds from every user.",
-		command: "npm create cloudflare@latest my-app",
+			"Deploy serverless functions and full-stack apps on Cloudflare's global network. No servers to manage, no cold starts — your code runs in 330+ cities, milliseconds from every user.",
+		command: "npx wrangler init my-app",
 		cta: {
 			label: "Deploy your first Worker",
 			href: "/workers/get-started/guide/",
@@ -48,7 +48,7 @@ const primitives = [
 		heading: "Add intelligence to anything you build",
 		description:
 			"Run inference, build agents, and search across your data — all from inside your Workers, with no external API calls or GPU infrastructure.",
-		command: "npx wrangler ai models list",
+		command: "npx wrangler ai models",
 		cta: { label: "Browse available models", href: "/workers-ai/models/" },
 		tags: [
 			{ label: "Workers AI", href: "/workers-ai/" },
@@ -61,17 +61,16 @@ const primitives = [
 	{
 		id: "storage",
 		label: "Storage",
-		icon: "kv",
+		icon: "d1",
 		iconColor: "#ee0ddb",
 		iconBg: "rgba(238, 13, 219, 0.1)",
 		iconBgDark: "rgba(238, 13, 219, 0.16)",
-		heading: "Persist data close to your users",
+		heading: "Query your data from anywhere",
 		description:
-			"S3-compatible object storage, a relational SQL database, and low-latency KV — all queryable directly from Workers with no connection pooling.",
-		command: "npx wrangler r2 bucket create my-bucket",
-		cta: { label: "Get started with R2", href: "/r2/get-started/" },
+			"Serverless SQL, low-latency key-value storage, and global database acceleration — query directly from Workers with no connection management.",
+		command: "npx wrangler d1 create my-database",
+		cta: { label: "Get started with D1", href: "/d1/get-started/" },
 		tags: [
-			{ label: "R2", href: "/r2/" },
 			{ label: "D1", href: "/d1/" },
 			{ label: "KV", href: "/kv/" },
 			{ label: "Hyperdrive", href: "/hyperdrive/" },
@@ -84,12 +83,13 @@ const primitives = [
 		iconColor: "#9616ff",
 		iconBg: "rgba(150, 22, 255, 0.1)",
 		iconBgDark: "rgba(150, 22, 255, 0.22)",
-		heading: "Serve images and video at scale",
+		heading: "Store and serve media at scale",
 		description:
-			"Store, transform, and deliver images and video from Cloudflare's network. Resize on the fly, stream live or on-demand — no separate infrastructure.",
-		command: "npx wrangler pages project create my-site",
-		cta: { label: "Get started with Images", href: "/images/get-started/" },
+			"Egress-free object storage, image transformations, and video streaming — store, transform, and deliver from Cloudflare's network.",
+		command: "npx wrangler r2 bucket create my-bucket",
+		cta: { label: "Get started with R2", href: "/r2/get-started/" },
 		tags: [
+			{ label: "R2", href: "/r2/" },
 			{ label: "Images", href: "/images/" },
 			{ label: "Stream", href: "/stream/" },
 			{ label: "Realtime", href: "/realtime/" },
@@ -112,7 +112,7 @@ const primitives = [
 		id="build-heading"
 		class="mb-8 text-2xl leading-[1.1] font-medium -tracking-[0.035em] text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
 	>
-		Everything you need to build at the edge
+		Everything you need to build full-stack applications
 	</h2>
 
 	<div
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
index 4d867bec17f8760..5eb770e125eeae6 100644
--- a/src/components/landing/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -13,8 +13,8 @@ import { stagger } from "./constants";
 	<p
 		class={`text-lg text-pretty max-w-[480px] leading-relaxed mb-8 max-[480px]:text-base max-[480px]:mb-6 text-[#52525b] dark:text-[#a1a1aa] ${stagger(0.1)}`}
 	>
-		Connect to or build on the Cloudflare network. Make your apps, agents,
-		employees, and networks fast and secure
+		Compute, storage, AI, and security; ship applications instead of managing
+		infrastructure
 	</p>
 
 	<div
diff --git a/src/components/landing/PlatformStats.astro b/src/components/landing/PlatformStats.astro
index fd12279deef8869..ef3df711b6243d3 100644
--- a/src/components/landing/PlatformStats.astro
+++ b/src/components/landing/PlatformStats.astro
@@ -21,7 +21,7 @@ const stats = [
 		suffix: "M+",
 		unit: "req/s",
 		label: "Average throughput",
-		detail: "At the edge",
+		detail: "Across the network",
 	},
 	{
 		value: 99.99,
diff --git a/src/components/landing/StructuralGrid.astro b/src/components/landing/StructuralGrid.astro
index bee327dcf74d6c0..7291f813ba8ee04 100644
--- a/src/components/landing/StructuralGrid.astro
+++ b/src/components/landing/StructuralGrid.astro
@@ -26,8 +26,13 @@ const marks =
 	"absolute -top-0 left-1/2 -translate-x-1/2 h-full pointer-events-none";
 ---
 
-<!-- Dot grid -->
-<div class="pointer-events-none absolute inset-0 z-0" aria-hidden="true">
+<!-- Dot grid — extends beyond content to reach the footer divider.
+     The footer's opaque background-color covers any overshoot. -->
+<div
+	class="pointer-events-none absolute inset-x-0 top-0 z-0"
+	style="height: calc(100% + 25rem)"
+	aria-hidden="true"
+>
 	<div
 		class="landing-dot-grid absolute h-full w-full"
 		style="background-image: radial-gradient(var(--l-dot-color) 1px, transparent 1px); background-size: var(--l-dot-size)"
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fc3c57dc23ffc5c..8e939bff83599da 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -219,7 +219,7 @@ const props = {
 	frontmatter: {
 		title: "Cloudflare Developer Docs",
 		description:
-			"Build, protect, and accelerate anything on Cloudflare's global network. Deploy serverless applications, secure your perimeter, and deliver content from 330+ cities worldwide.",
+			"Compute, storage, AI, and security on Cloudflare's global network. Deploy serverless applications, secure your infrastructure, and ship without managing complexity.",
 		template: "doc",
 		tableOfContents: false,
 	},

From c9f04c4e06e8f3cebea3a2a6a79d78e12faeab7e Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Thu, 23 Apr 2026 11:07:42 +0100
Subject: [PATCH 14/35] style: accelerate

---
 .../landing/AccelerateSection.astro           | 66 ++++++++++---------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index 9601d9052267ac0..fdff5e68e4d5074 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -3,12 +3,17 @@ import { Icon } from "astro-icon/components";
 import ProductCard from "./ProductCard.astro";
 import ProductCardGrid from "./ProductCardGrid.astro";
 
+/**
+ * Scale: 100% = 1600 ms → 1% = 16 ms.
+ * All offsets are 0 so bar widths map directly to the ruler:
+ *   400 ms tick = 25%, 800 ms = 50%, 1200 ms = 75%, 1600 ms = 100%.
+ */
 const phases = [
 	{
 		id: "dns",
 		phase: "DNS Lookup",
-		before: { offset: 0, width: 8.33 },
-		after: { offset: 0, width: 0.46 },
+		before: { offset: 0, width: 12.5 },
+		after: { offset: 0, width: 0.69 },
 		product: "DNS",
 		icon: "dns",
 		href: "/dns/",
@@ -23,8 +28,8 @@ const phases = [
 	{
 		id: "connect",
 		phase: "TCP + TLS",
-		before: { offset: 8.33, width: 16.67 },
-		after: { offset: 0.46, width: 2.04 },
+		before: { offset: 0, width: 25 },
+		after: { offset: 0, width: 3.06 },
 		product: "Argo Smart Routing",
 		icon: "argo-smart-routing",
 		href: "/argo-smart-routing/",
@@ -39,8 +44,8 @@ const phases = [
 	{
 		id: "wait",
 		phase: "Server Wait (TTFB)",
-		before: { offset: 25, width: 20.83 },
-		after: { offset: 2.5, width: 0.21 },
+		before: { offset: 0, width: 31.25 },
+		after: { offset: 0, width: 0.31 },
 		product: "Cache",
 		icon: "cache",
 		href: "/cache/get-started/",
@@ -54,8 +59,8 @@ const phases = [
 	{
 		id: "db",
 		phase: "Database Query",
-		before: { offset: 37.5, width: 58.33 },
-		after: { offset: 2.71, width: 9.71 },
+		before: { offset: 0, width: 87.5 },
+		after: { offset: 0, width: 14.56 },
 		product: "Hyperdrive",
 		icon: "hyperdrive",
 		href: "/hyperdrive/",
@@ -70,8 +75,8 @@ const phases = [
 	{
 		id: "assets",
 		phase: "Asset Optimization",
-		before: { offset: 25, width: 11.25 },
-		after: { offset: 2.5, width: 5.83 },
+		before: { offset: 0, width: 16.88 },
+		after: { offset: 0, width: 8.75 },
 		product: "Images",
 		icon: "images",
 		href: "/images/",
@@ -86,8 +91,8 @@ const phases = [
 	{
 		id: "scripts",
 		phase: "Third-party Scripts",
-		before: { offset: 37.5, width: 20.83 },
-		after: { offset: 12.42, width: 0 },
+		before: { offset: 0, width: 31.25 },
+		after: { offset: 0, width: 0 },
 		product: "Zaraz",
 		icon: "zaraz",
 		href: "/zaraz/",
@@ -226,10 +231,10 @@ const phases = [
 			<div></div>
 			<div class="relative h-full">
 				{
-					[0, 400, 800, 1200, 1600, 2000].map((ms) => (
+					[0, 400, 800, 1200, 1600].map((ms) => (
 						<div
 							class="absolute bottom-0 flex flex-col items-center"
-							style={`left: ${(ms / 2400) * 100}%`}
+							style={`left: ${(ms / 1600) * 100}%`}
 						>
 							<span
 								class="wf-ruler-label mb-1 font-mono text-[9px] tracking-wider text-zinc-400 tabular-nums dark:text-zinc-500"
@@ -242,7 +247,8 @@ const phases = [
 					))
 				}
 			</div>
-			<div></div>
+			<!-- Spacer matching the arrow column width in data rows so ticks align with bars -->
+			<div class="w-3.5"></div>
 		</div>
 
 		<!-- Waterfall rows -->
@@ -282,31 +288,31 @@ const phases = [
 					</div>
 
 					{/* Center: waterfall bar visualization */}
-					<div class="relative h-6 max-[600px]:h-5" aria-hidden="true">
+					<div class="relative self-stretch max-[600px]:h-5" aria-hidden="true">
 						{/* Background track */}
-						<div class="absolute inset-0 rounded-sm bg-zinc-100 dark:bg-zinc-800/50" />
+						<div class="absolute inset-0 rounded bg-zinc-100/80 dark:bg-zinc-800/40" />
+
+						{/* Time markers (behind the bar) */}
+						{[25, 50, 75].map((pct) => (
+							<div
+								class="absolute inset-y-0 border-l border-dashed border-zinc-200/50 dark:border-zinc-700/30"
+								style={`left: ${pct}%`}
+							/>
+						))}
 
-						{/* "Before" bar (slow) */}
+						{/* Colored bar — full row height */}
 						<div
-							class={`wf-bar wf-bar-before absolute top-1 bottom-1 rounded-sm transition-[left,width,box-shadow] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] ${p.color}`}
+							class={`wf-bar wf-bar-before absolute inset-y-0 rounded transition-[left,width,box-shadow] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] ${p.color}`}
 							style={`left: ${p.after.offset}%; width: ${p.after.width}%;`}
 							data-offset-before={p.before.offset}
 							data-width-before={p.before.width}
 							data-offset-after={p.after.offset}
 							data-width-after={p.after.width}
 						>
-							<span class="wf-bar-label absolute top-1/2 right-1.5 -translate-y-1/2 font-mono text-[9px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm max-[456px]:hidden">
-								{Math.round(p.after.width * 24)}ms
+							<span class="wf-bar-label absolute top-1/2 right-2 -translate-y-1/2 font-mono text-[10px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm max-[456px]:hidden">
+								{Math.round(p.after.width * 16)}ms
 							</span>
 						</div>
-
-						{/* Time markers (vertical dashed lines) */}
-						{[25, 50, 75].map((pct) => (
-							<div
-								class="absolute top-0 bottom-0 border-l border-dashed border-zinc-200/60 dark:border-zinc-700/40"
-								style={`left: ${pct}%`}
-							/>
-						))}
 					</div>
 
 					{/* Right: arrow */}
@@ -629,7 +635,7 @@ const phases = [
 				// Update label text
 				const label = bar.querySelector(".wf-bar-label");
 				if (label && width) {
-					const ms = Math.round(parseFloat(width) * 24);
+					const ms = Math.round(parseFloat(width) * 16);
 					label.textContent = `${ms}ms`;
 					// Hide label if bar too narrow
 					(label as HTMLElement).style.opacity =

From ccce075cec738051a5d48baf6817f57448b0436b Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 28 Apr 2026 00:03:21 +0100
Subject: [PATCH 15/35] chore: copy

---
 .../landing/AccelerateSection.astro           |   23 +-
 src/components/landing/BuildFromScratch.astro |   18 +-
 src/components/landing/Hero.astro             |    4 +-
 src/components/landing/PlatformStats.astro    |   26 +-
 src/components/landing/RequestLifecycle.astro | 1071 -----------------
 src/components/landing/SecureSection.astro    |   10 +-
 src/pages/index.astro                         |    2 +-
 7 files changed, 43 insertions(+), 1111 deletions(-)
 delete mode 100644 src/components/landing/RequestLifecycle.astro

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index fdff5e68e4d5074..63adebbc7828bb6 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -17,10 +17,10 @@ const phases = [
 		product: "DNS",
 		icon: "dns",
 		href: "/dns/",
-		outcome: "Resolve DNS in single-digit milliseconds",
+		outcome: "Fastest, most resilient query responses",
 		detail:
-			"Fastest authoritative DNS — 11ms average. DNSSEC, wildcard records, proxy control.",
-		cta: "Optimize DNS performance",
+			"The world's fastest and most reliable DNS — 11ms average. DNSSEC, wildcard records, proxy control.",
+		cta: "Set up Authoritative DNS",
 		tags: ["Authoritative DNS", "DNSSEC"],
 		color: "bg-orange-400",
 		colorMuted: "bg-orange-400/20",
@@ -46,12 +46,13 @@ const phases = [
 		phase: "Server Wait (TTFB)",
 		before: { offset: 0, width: 31.25 },
 		after: { offset: 0, width: 0.31 },
-		product: "Cache",
+		product: "CDN",
 		icon: "cache",
 		href: "/cache/get-started/",
 		outcome: "Serve from cache, not from origin",
-		detail: "Serve from 330+ cities. Cache Rules, tiered caching, purge API.",
-		cta: "Improve cache hit ratio",
+		detail:
+			"CDN caches content in 330+ cities worldwide with cache rules, tiered caching, and zero-configuration setup.",
+		cta: "Set up Cache Rules",
 		tags: ["Cache Rules", "Tiered Cache", "Cache Reserve"],
 		color: "bg-yellow-500",
 		colorMuted: "bg-yellow-500/20",
@@ -64,10 +65,10 @@ const phases = [
 		product: "Hyperdrive",
 		icon: "hyperdrive",
 		href: "/hyperdrive/",
-		outcome: "Make database queries feel local",
+		outcome: "Make your database feel instant, everywhere",
 		detail:
-			"Connection pooling and query caching globally. Slash query latency for Postgres, MySQL, and more.",
-		cta: "Speed up database queries",
+			"Connection pooling, query caching, and global routing for PostgreSQL and MySQL databases.",
+		cta: "Make regional databases feel global",
 		tags: ["Connection Pooling", "Query Caching"],
 		color: "bg-lime-500",
 		colorMuted: "bg-lime-500/20",
@@ -80,9 +81,9 @@ const phases = [
 		product: "Images",
 		icon: "images",
 		href: "/images/",
-		outcome: "Transform and serve images globally",
+		outcome: "Streamlined image infrastructure built for scale",
 		detail:
-			"Resize, convert to modern formats, and deliver from 330+ cities. No origin round-trip.",
+			"Global low-latency delivery, resizing, and AI-powered optimization from 330+ cities.",
 		cta: "Optimize image delivery",
 		tags: ["Transform", "Polish", "WebP/AVIF"],
 		color: "bg-teal-500",
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index 935325633b37119..bf48411e084c492 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -22,12 +22,12 @@ const primitives = [
 		iconColor: "#0a95ff",
 		iconBg: "rgba(10, 149, 255, 0.1)",
 		iconBgDark: "rgba(10, 149, 255, 0.16)",
-		heading: "Run code everywhere",
+		heading: "Deploy with one command",
 		description:
-			"Deploy serverless functions and full-stack apps on Cloudflare's global network. No servers to manage, no cold starts — your code runs in 330+ cities, milliseconds from every user.",
+			"Deploy serverless functions and full-stack apps on Cloudflare's global network. No servers to manage. No cold starts or region complexity. Run code in 330+ cities around the world, within 50ms of 95% of the world's population.",
 		command: "npx wrangler init my-app",
 		cta: {
-			label: "Deploy your first Worker",
+			label: "Create your first Worker",
 			href: "/workers/get-started/guide/",
 		},
 		tags: [
@@ -47,7 +47,7 @@ const primitives = [
 		iconBgDark: "rgba(25, 227, 6, 0.16)",
 		heading: "Add intelligence to anything you build",
 		description:
-			"Run inference, build agents, and search across your data — all from inside your Workers, with no external API calls or GPU infrastructure.",
+			"Run AI inference globally with one API call, build agents, and search across your data — no GPUs to manage, no capacity planning.",
 		command: "npx wrangler ai models",
 		cta: { label: "Browse available models", href: "/workers-ai/models/" },
 		tags: [
@@ -65,9 +65,9 @@ const primitives = [
 		iconColor: "#ee0ddb",
 		iconBg: "rgba(238, 13, 219, 0.1)",
 		iconBgDark: "rgba(238, 13, 219, 0.16)",
-		heading: "Query your data from anywhere",
+		heading: "Make your database feel instant, everywhere",
 		description:
-			"Serverless SQL, low-latency key-value storage, and global database acceleration — query directly from Workers with no connection management.",
+			"Serverless SQL, globally distributed key-value, and global database acceleration — query directly from Workers with no connection management.",
 		command: "npx wrangler d1 create my-database",
 		cta: { label: "Get started with D1", href: "/d1/get-started/" },
 		tags: [
@@ -83,9 +83,9 @@ const primitives = [
 		iconColor: "#9616ff",
 		iconBg: "rgba(150, 22, 255, 0.1)",
 		iconBgDark: "rgba(150, 22, 255, 0.22)",
-		heading: "Store and serve media at scale",
+		heading: "Store anything, serve everywhere",
 		description:
-			"Egress-free object storage, image transformations, and video streaming — store, transform, and deliver from Cloudflare's network.",
+			"Scalable, durable, affordable object storage without egress fees, image optimization, and live and on-demand video streaming — store, transform, and deliver from Cloudflare's network.",
 		command: "npx wrangler r2 bucket create my-bucket",
 		cta: { label: "Get started with R2", href: "/r2/get-started/" },
 		tags: [
@@ -112,7 +112,7 @@ const primitives = [
 		id="build-heading"
 		class="mb-8 text-2xl leading-[1.1] font-medium -tracking-[0.035em] text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
 	>
-		Everything you need to build full-stack applications
+		Powerful primitives, seamlessly integrated
 	</h2>
 
 	<div
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
index 5eb770e125eeae6..6c495b40712d05e 100644
--- a/src/components/landing/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -13,8 +13,8 @@ import { stagger } from "./constants";
 	<p
 		class={`text-lg text-pretty max-w-[480px] leading-relaxed mb-8 max-[480px]:text-base max-[480px]:mb-6 text-[#52525b] dark:text-[#a1a1aa] ${stagger(0.1)}`}
 	>
-		Compute, storage, AI, and security; ship applications instead of managing
-		infrastructure
+		Compute, storage, AI, and security — ship applications instead of managing
+		and securing infrastructure
 	</p>
 
 	<div
diff --git a/src/components/landing/PlatformStats.astro b/src/components/landing/PlatformStats.astro
index ef3df711b6243d3..80720ef3bac1ea4 100644
--- a/src/components/landing/PlatformStats.astro
+++ b/src/components/landing/PlatformStats.astro
@@ -1,34 +1,36 @@
 ---
 import { stagger } from "./constants";
 
+// Copy mirrors workers.cloudflare.com verbatim where the slot allows.
+// See `landing-stats-decisions.md` at the repo root for sourcing rationale.
 const stats = [
 	{
 		value: 330,
 		suffix: "+",
 		unit: "cities",
-		label: "Global network",
-		detail: "Points of presence",
+		label: "Run everywhere",
+		detail: "Around the world",
 	},
 	{
 		value: 100,
 		suffix: "+",
 		unit: "products",
-		label: "Platform surface",
-		detail: "Developer primitives",
+		label: "Powerful primitives",
+		detail: "Seamlessly integrated",
 	},
 	{
-		value: 78,
+		value: 81,
 		suffix: "M+",
-		unit: "req/s",
-		label: "Average throughput",
-		detail: "Across the network",
+		unit: "HTTP requests/sec",
+		label: "Run at massive scale",
+		detail: "On Cloudflare's infrastructure",
 	},
 	{
-		value: 99.99,
+		value: 20,
 		suffix: "%",
-		unit: "uptime",
-		label: "Network SLA",
-		detail: "Contractual guarantee",
+		unit: "of the Internet",
+		label: "Internet scale",
+		detail: "1 in 5 sites on the Internet",
 	},
 ];
 ---
diff --git a/src/components/landing/RequestLifecycle.astro b/src/components/landing/RequestLifecycle.astro
deleted file mode 100644
index 0dcf09d1c8e68fc..000000000000000
--- a/src/components/landing/RequestLifecycle.astro
+++ /dev/null
@@ -1,1071 +0,0 @@
----
-/**
- * RequestLifecycle — Self-contained Astro component
- *
- * Catalogue-style product nodes + kumo/flow connectors.
- * Zero framework JS — vanilla <script> for interactivity.
- *
- * Visual: dashed-border icon nodes, category-colored fills, kumo S-curve
- * connectors with pin-square terminals, dot grid background, segmented
- * toggle toolbar, step-based request animation timeline.
- */
-import { Icon } from "astro-icon/components";
-
-interface PipelineNode {
-	id: string;
-	icon: string;
-	label: string;
-	href: string;
-	security: boolean;
-	color?: string;
-	borderColor: string;
-	bgColor: string;
-	iconColor: string;
-	iconSize: string;
-	iconAdjust?: string;
-}
-
-const ACCENT = "#f56500";
-const BLUE = "#0A95FF";
-const RED = "#ef4444";
-const AMBER = "#f59e0b";
-const PURPLE = "#8b5cf6";
-const TEAL = "#14b8a6";
-
-const NODES: PipelineNode[] = [
-	{
-		id: "dns",
-		icon: "dns",
-		label: "DNS",
-		href: "/dns/",
-		security: false,
-		borderColor: BLUE,
-		bgColor: "rgba(10,149,255,0.18)",
-		iconColor: BLUE,
-		iconSize: "28px",
-		iconAdjust: "translate(1.5px,1.5px)",
-	},
-	{
-		id: "tls",
-		icon: "ssl",
-		label: "TLS",
-		href: "/ssl/",
-		security: false,
-		borderColor: BLUE,
-		bgColor: "rgba(10,149,255,0.18)",
-		iconColor: BLUE,
-		iconSize: "24px",
-		iconAdjust: "translate(-0.5px,-0.5px)",
-	},
-	{
-		id: "ddos",
-		icon: "ddos-protection",
-		label: "DDoS",
-		href: "/ddos-protection/",
-		security: true,
-		color: RED,
-		borderColor: RED,
-		bgColor: "rgba(239,68,68,0.18)",
-		iconColor: RED,
-		iconSize: "27px",
-	},
-	{
-		id: "waf",
-		icon: "waf",
-		label: "WAF",
-		href: "/waf/",
-		security: true,
-		color: AMBER,
-		borderColor: AMBER,
-		bgColor: "rgba(245,158,11,0.18)",
-		iconColor: AMBER,
-		iconSize: "23px",
-	},
-	{
-		id: "bots",
-		icon: "bots",
-		label: "Bots",
-		href: "/bots/",
-		security: true,
-		color: PURPLE,
-		borderColor: PURPLE,
-		bgColor: "rgba(139,92,246,0.18)",
-		iconColor: PURPLE,
-		iconSize: "25px",
-		iconAdjust: "translateY(-1px)",
-	},
-	{
-		id: "rate",
-		icon: "waf",
-		label: "Rate",
-		href: "/waf/rate-limiting-rules/",
-		security: true,
-		color: "#3b82f6",
-		borderColor: "#3b82f6",
-		bgColor: "rgba(59,130,246,0.18)",
-		iconColor: "#3b82f6",
-		iconSize: "23px",
-	},
-	{
-		id: "cache",
-		icon: "cache",
-		label: "Cache",
-		href: "/cache/",
-		security: false,
-		borderColor: TEAL,
-		bgColor: "rgba(20,184,166,0.18)",
-		iconColor: TEAL,
-		iconSize: "24px",
-	},
-	{
-		id: "origin",
-		icon: "workers",
-		label: "Origin",
-		href: "/workers/",
-		security: false,
-		borderColor: BLUE,
-		bgColor: "rgba(10,149,255,0.18)",
-		iconColor: BLUE,
-		iconSize: "24px",
-	},
-];
-
-const SECURITY = NODES.filter((n) => n.security);
----
-
-<section
-	id="request"
-	class="rl-section hidden pt-14 pb-8 max-[900px]:pt-10 max-[900px]:pb-8"
-	aria-labelledby="rl-heading"
-	data-rl
->
-	<div class="mb-3">
-		<span class="text-accent font-mono text-xs tracking-widest uppercase"
-			>Project</span
-		>
-	</div>
-	<h2
-		id="rl-heading"
-		class="mb-2 text-2xl leading-tight font-medium -tracking-tight text-balance text-zinc-900 dark:text-zinc-50"
-	>
-		The anatomy of a request
-	</h2>
-	<p
-		class="mb-8 max-w-[520px] text-sm leading-relaxed text-pretty text-zinc-500 dark:text-zinc-400"
-	>
-		Every request passes through Cloudflare's edge before reaching your origin.
-		Toggle security features to add inspection checkpoints.
-	</p>
-
-	<!-- Toolbar -->
-	<div class="rl-toolbar">
-		<div class="rl-toolbar-left">
-			<button type="button" class="rl-send" data-rl-send>
-				<svg width="7" height="7" viewBox="0 0 24 24" fill="currentColor"
-					><polygon points="5 3 19 12 5 21"></polygon></svg
-				>
-				Send
-			</button>
-			<span
-				class="rl-status"
-				data-rl-status
-				aria-live="polite"
-				aria-atomic="true"></span>
-		</div>
-		<div class="rl-toolbar-right" role="group" aria-label="Security features">
-			{
-				SECURITY.map((n, i) => (
-					<button
-						type="button"
-						class:list={["rl-seg", i === SECURITY.length - 1 && "rl-seg--last"]}
-						data-rl-toggle={n.id}
-						data-rl-color={n.color}
-						aria-pressed="true"
-					>
-						<span class="rl-seg-dot" />
-						{n.label}
-					</button>
-				))
-			}
-		</div>
-	</div>
-
-	<!-- Pipeline container -->
-	<div class="rl-container" data-rl-container>
-		<!-- Dot grid -->
-		<div
-			class="pointer-events-none absolute inset-0 z-0 overflow-hidden"
-			aria-hidden="true"
-		>
-			<div
-				class="absolute h-full w-full"
-				style="background-image: radial-gradient(var(--l-dot-color) 1px, transparent 1px); background-size: var(--l-dot-size); mask-image: var(--l-dot-mask)"
-			>
-			</div>
-		</div>
-
-		<!-- Corner marks -->
-		{
-			[
-				"-top-[5.5px] -left-[5.5px]",
-				"-top-[5.5px] -right-[5.5px]",
-				"-bottom-[5.5px] -left-[5.5px]",
-				"-right-[5.5px] -bottom-[5.5px]",
-			].map((pos) => (
-				<svg
-					width="10"
-					height="10"
-					viewBox="0 0 10 10"
-					class={`pointer-events-none absolute ${pos} z-10`}
-					aria-hidden="true"
-				>
-					<line
-						x1="0"
-						y1="5"
-						x2="10"
-						y2="5"
-						stroke-width="1"
-						class="l-corner-stroke"
-					/>
-					<line
-						x1="5"
-						y1="0"
-						x2="5"
-						y2="10"
-						stroke-width="1"
-						class="l-corner-stroke"
-					/>
-				</svg>
-			))
-		}
-
-		<!-- SVG connectors -->
-		<svg class="rl-svg" aria-hidden="true" data-rl-svg>
-			<defs>
-				<marker
-					id="rl-pin"
-					markerWidth="6"
-					markerHeight="6"
-					refX="3"
-					refY="3"
-					orient="auto"
-					markerUnits="userSpaceOnUse"
-				>
-					<rect
-						x="0.5"
-						y="0.5"
-						width="5"
-						height="5"
-						rx="0.5"
-						class="rl-pin-fill"
-						stroke="currentColor"
-						stroke-width="1"></rect>
-				</marker>
-				<marker
-					id="rl-pin-a"
-					markerWidth="6"
-					markerHeight="6"
-					refX="3"
-					refY="3"
-					orient="auto"
-					markerUnits="userSpaceOnUse"
-				>
-					<rect
-						x="0.5"
-						y="0.5"
-						width="5"
-						height="5"
-						rx="0.5"
-						class="rl-pin-fill"
-						stroke="var(--color-accent, #f56500)"
-						stroke-width="1"></rect>
-				</marker>
-			</defs>
-		</svg>
-
-		<!-- Grid -->
-		<div class="rl-grid">
-			<!-- Request (user icon) -->
-			<div class="rl-cell" style="grid-column:1">
-				<div class="rl-wrap group">
-					<span
-						class="rl-label"
-						style={`color:${ACCENT};background:rgba(245,101,0,0.06);border-color:${ACCENT};display:none;opacity:0`}
-						>Request</span
-					>
-					<div
-						class="rl-node-user"
-						data-rl-node="request"
-						style={`color:${ACCENT}`}
-					>
-						<svg
-							width="56"
-							height="56"
-							viewBox="0 0 24 24"
-							fill="none"
-							style={`color:${ACCENT}`}
-						>
-							<path
-								d="M22.62 1.38H1.38V22.62H22.62V1.38Z"
-								stroke="currentColor"
-								stroke-width="0.6"></path>
-							<path
-								d="M21.6 0.18H23.4C23.632 0.18 23.82 0.368 23.82 0.6V2.4C23.82 2.632 23.632 2.82 23.4 2.82H21.6C21.368 2.82 21.18 2.632 21.18 2.4V0.6C21.18 0.368 21.368 0.18 21.6 0.18Z"
-								class="rl-pin-fill"
-								stroke="currentColor"
-								stroke-width="0.6"></path>
-							<path
-								d="M23.4 21.18H21.6C21.368 21.18 21.18 21.368 21.18 21.6V23.4C21.18 23.632 21.368 23.82 21.6 23.82H23.4C23.632 23.82 23.82 23.632 23.82 23.4V21.6C23.82 21.368 23.632 21.18 23.4 21.18Z"
-								class="rl-pin-fill"
-								stroke="currentColor"
-								stroke-width="0.6"></path>
-							<path
-								d="M2.4 21.18H0.6C0.368 21.18 0.18 21.368 0.18 21.6V23.4C0.18 23.632 0.368 23.82 0.6 23.82H2.4C2.632 23.82 2.82 23.632 2.82 23.4V21.6C2.82 21.368 2.632 21.18 2.4 21.18Z"
-								class="rl-pin-fill"
-								stroke="currentColor"
-								stroke-width="0.6"></path>
-							<path
-								d="M0.6 0.18H2.4C2.632 0.18 2.82 0.368 2.82 0.6V2.4C2.82 2.632 2.632 2.82 2.4 2.82H0.6C0.368 2.82 0.18 2.632 0.18 2.4V0.6C0.18 0.368 0.368 0.18 0.6 0.18Z"
-								class="rl-pin-fill"
-								stroke="currentColor"
-								stroke-width="0.6"></path>
-							<path
-								fill-rule="evenodd"
-								clip-rule="evenodd"
-								d="M8.109 14.925C9.111 13.862 10.482 13.2 12 13.2C13.518 13.2 14.889 13.862 15.891 14.925C16.001 15.041 16.031 15.211 15.967 15.358C15.904 15.504 15.76 15.6 15.6 15.6H8.4C8.24 15.6 8.096 15.504 8.033 15.358C7.97 15.211 7.999 15.041 8.109 14.925Z"
-								stroke="currentColor"
-								stroke-width="0.8"></path>
-							<path
-								fill-rule="evenodd"
-								clip-rule="evenodd"
-								d="M9.8 10.2C9.8 8.985 10.785 8 12 8C13.215 8 14.2 8.985 14.2 10.2C14.2 11.415 13.215 12.4 12 12.4C10.785 12.4 9.8 11.415 9.8 10.2Z"
-								stroke="currentColor"
-								stroke-width="0.8"></path>
-						</svg>
-					</div>
-				</div>
-			</div>
-
-			<!-- Pipeline nodes -->
-			{
-				NODES.map((node, i) => (
-					<div
-						class="rl-cell"
-						style={`grid-column:${i + 2}`}
-						data-rl-cell={node.id}
-					>
-						<a
-							href={node.href}
-							class="rl-wrap group no-underline"
-							data-rl-link={node.id}
-							aria-label={node.label}
-						>
-							<span
-								class="rl-label"
-								style={`color:${node.borderColor};background:${node.bgColor};border-color:${node.borderColor};display:none;opacity:0`}
-							>
-								{node.label}
-							</span>
-							<div
-								class="rl-node"
-								data-rl-node={node.id}
-								data-border-color={node.borderColor}
-								style={`border-color:${node.borderColor};background:${node.bgColor};color:${node.iconColor}`}
-							>
-								<span
-									class="rl-icon-wrap"
-									style={
-										node.iconAdjust ? `transform:${node.iconAdjust}` : undefined
-									}
-								>
-									<Icon name={node.icon} size={node.iconSize} />
-								</span>
-							</div>
-							{node.security && (
-								<span class="rl-node-status" data-rl-st={node.id} />
-							)}
-						</a>
-					</div>
-				))
-			}
-
-			<!-- Response -->
-			<div class="rl-cell" style="grid-column:10">
-				<div class="rl-wrap group">
-					<span
-						class="rl-label"
-						style={`color:${ACCENT};background:rgba(245,101,0,0.06);border-color:${ACCENT};display:none;opacity:0`}
-						>Response</span
-					>
-					<div
-						class="rl-node"
-						data-rl-node="response"
-						style={`border-color:${ACCENT};background:rgba(245,101,0,0.18);color:${ACCENT}`}
-					>
-						<svg
-							width="20"
-							height="20"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2.5"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							><polyline points="20 6 9 17 4 12"></polyline></svg
-						>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<div class="rl-edge-label" aria-hidden="true">Cloudflare Edge</div>
-	</div>
-</section>
-
-<style>
-	/* ---- Toolbar ---- */
-	.rl-toolbar {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 8px;
-		gap: 12px;
-	}
-	.rl-toolbar-left {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-	}
-	.rl-toolbar-right {
-		display: flex;
-		align-items: center;
-	}
-
-	.rl-send {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		font-family: var(--font-mono, monospace);
-		font-size: 10px;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		padding: 5px 12px;
-		border: 1px solid var(--color-zinc-200);
-		background: transparent;
-		color: var(--color-zinc-500);
-		cursor: pointer;
-		transition:
-			color 0.15s,
-			border-color 0.15s,
-			background-color 0.15s;
-		user-select: none;
-		touch-action: manipulation;
-	}
-	.rl-send:hover {
-		border-color: var(--color-accent);
-		color: var(--color-accent);
-	}
-	.rl-send:focus-visible {
-		outline: 2px solid var(--color-accent);
-		outline-offset: 2px;
-	}
-
-	.rl-status {
-		font-family: var(--font-mono, monospace);
-		font-size: 10px;
-		letter-spacing: 0.03em;
-		color: var(--color-zinc-400);
-	}
-
-	.rl-seg {
-		font-family: var(--font-mono, monospace);
-		font-size: 10px;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		padding: 5px 10px;
-		border: 1px solid var(--color-zinc-200);
-		border-right-width: 0;
-		background: transparent;
-		color: var(--color-zinc-500);
-		cursor: pointer;
-		transition:
-			color 0.15s,
-			border-color 0.15s,
-			background-color 0.15s;
-		user-select: none;
-		display: flex;
-		align-items: center;
-		gap: 5px;
-		touch-action: manipulation;
-	}
-	.rl-seg--last {
-		border-right-width: 1px;
-	}
-	.rl-seg[aria-pressed="false"] {
-		color: var(--color-zinc-500);
-	}
-	.rl-seg-dot {
-		width: 5px;
-		height: 5px;
-		background: var(--color-zinc-300);
-		transition: background 0.15s;
-	}
-	.rl-seg[aria-pressed="true"] .rl-seg-dot {
-		background: currentColor;
-	}
-	.rl-seg:focus-visible {
-		outline: 2px solid var(--color-accent);
-		outline-offset: -2px;
-	}
-
-	/* ---- Container ---- */
-	.rl-container {
-		position: relative;
-		overflow: visible;
-		border: 1px solid var(--color-zinc-200);
-		background: #fff;
-		padding: 3rem 2rem 2.5rem;
-	}
-
-	/* ---- SVG layer ---- */
-	.rl-svg {
-		position: absolute;
-		inset: 0;
-		width: 100%;
-		height: 100%;
-		pointer-events: none;
-		z-index: 1;
-		overflow: visible;
-		color: rgba(0, 0, 0, 0.15);
-	}
-	.rl-pin-fill {
-		fill: #fff;
-	}
-
-	/* ---- Grid ---- */
-	.rl-grid {
-		display: grid;
-		grid-template-columns: repeat(10, 1fr);
-		align-items: center;
-		position: relative;
-	}
-	.rl-cell {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		position: relative;
-		z-index: 2;
-	}
-	.rl-cell[data-rl-off] .rl-wrap {
-		opacity: 0;
-		pointer-events: none;
-	}
-
-	/* ---- Node ---- */
-	.rl-node {
-		width: 56px;
-		height: 56px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 1px dashed;
-		border-radius: 6px;
-		position: relative;
-		z-index: 2;
-		overflow: hidden;
-	}
-	.rl-node-user {
-		width: 56px;
-		height: 56px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		position: relative;
-		z-index: 2;
-	}
-	.rl-icon-wrap {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-	}
-	.rl-wrap {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		position: relative;
-		cursor: pointer;
-		text-decoration: none;
-		transition: opacity 0.25s;
-	}
-	.rl-wrap:focus-visible {
-		outline: 2px solid var(--color-accent);
-		outline-offset: 4px;
-	}
-
-	/* ---- Label (hover-only, FOUC-proof via inline display:none) ---- */
-	.rl-label {
-		position: absolute;
-		bottom: calc(100% + 6px);
-		left: 50%;
-		transform: translateX(-50%);
-		white-space: nowrap;
-		pointer-events: none;
-		font-family: var(--font-mono, monospace);
-		font-size: 10px;
-		font-weight: 500;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		line-height: 1;
-		padding: 4px 8px;
-		border: 1px dashed;
-		z-index: 10;
-	}
-	.group:hover > .rl-label {
-		display: block !important;
-		opacity: 1 !important;
-	}
-
-	/* ---- Status (PASS / BLOCKED) ---- */
-	.rl-node-status {
-		position: absolute;
-		top: calc(100% + 6px);
-		left: 50%;
-		transform: translateX(-50%);
-		white-space: nowrap;
-		pointer-events: none;
-		font-family: var(--font-mono, monospace);
-		font-size: 10px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		line-height: 1;
-		padding: 3px 7px;
-		z-index: 10;
-	}
-
-	/* ---- Edge label ---- */
-	.rl-edge-label {
-		position: absolute;
-		bottom: 8px;
-		left: 50%;
-		transform: translateX(-50%);
-		font-family: var(--font-mono, monospace);
-		font-size: 7px;
-		text-transform: uppercase;
-		letter-spacing: 1.5px;
-		color: var(--color-accent);
-		opacity: 0.25;
-		white-space: nowrap;
-	}
-
-	/* ---- Dark mode ---- */
-	:global(.dark) .rl-container,
-	:global([data-theme="dark"]) .rl-container {
-		border-color: #2a2a2a;
-		background: #1d1d1d;
-	}
-	:global(.dark) .rl-svg,
-	:global([data-theme="dark"]) .rl-svg {
-		color: rgba(255, 255, 255, 0.25);
-	}
-	:global(.dark) .rl-pin-fill,
-	:global([data-theme="dark"]) .rl-pin-fill {
-		fill: #1d1d1d;
-	}
-	:global(.dark) .rl-send,
-	:global([data-theme="dark"]) .rl-send {
-		border-color: var(--color-zinc-700);
-		color: var(--color-zinc-500);
-	}
-	:global(.dark) .rl-send:hover,
-	:global([data-theme="dark"]) .rl-send:hover {
-		border-color: var(--color-accent);
-		color: var(--color-accent);
-	}
-	:global(.dark) .rl-seg,
-	:global([data-theme="dark"]) .rl-seg {
-		border-color: var(--color-zinc-700);
-	}
-	:global(.dark) .rl-seg[aria-pressed="false"],
-	:global([data-theme="dark"]) .rl-seg[aria-pressed="false"] {
-		color: var(--color-zinc-400);
-	}
-	:global(.dark) .rl-seg-dot,
-	:global([data-theme="dark"]) .rl-seg-dot {
-		background: var(--color-zinc-600);
-	}
-
-	/* ---- Responsive ---- */
-	@media (max-width: 768px) {
-		.rl-toolbar {
-			flex-direction: column;
-			align-items: stretch;
-			gap: 8px;
-		}
-		.rl-toolbar-left {
-			justify-content: space-between;
-		}
-		.rl-toolbar-right {
-			overflow-x: auto;
-		}
-		.rl-grid {
-			display: flex;
-			flex-direction: column;
-			align-items: stretch;
-		}
-		.rl-cell {
-			flex-direction: row;
-			gap: 8px;
-			min-height: unset;
-			padding: 4px 0;
-		}
-		.rl-wrap {
-			flex-direction: row;
-			gap: 8px;
-		}
-		.rl-label {
-			position: static;
-			transform: none;
-			border: none;
-			padding: 0;
-			font-size: 9px;
-			display: block !important;
-			opacity: 1 !important;
-		}
-		.rl-svg {
-			display: none;
-		}
-		.rl-edge-label {
-			display: none;
-		}
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.rl-node {
-			transition: none !important;
-		}
-	}
-</style>
-
-<script>
-	function initRL() {
-		const root = document.querySelector("[data-rl]") as HTMLElement | null;
-		if (!root) return;
-		if (root.dataset.rlInit === "true") return;
-		root.dataset.rlInit = "true";
-
-		const svg = root.querySelector<SVGSVGElement>("[data-rl-svg]")!;
-		const container = root.querySelector<HTMLElement>("[data-rl-container]")!;
-		const statusEl = root.querySelector<HTMLElement>("[data-rl-status]")!;
-		const active = new Set(["ddos", "waf", "bots", "rate"]);
-		const ACCENT = "#f56500";
-		const prefersReducedMotion = window.matchMedia(
-			"(prefers-reduced-motion: reduce)",
-		).matches;
-
-		const NODES = [
-			{ id: "dns", security: false },
-			{ id: "tls", security: false },
-			{ id: "ddos", security: true, label: "DDoS" },
-			{ id: "waf", security: true, label: "WAF" },
-			{ id: "bots", security: true, label: "Bots" },
-			{ id: "rate", security: true, label: "Rate" },
-			{ id: "cache", security: false },
-			{ id: "origin", security: false },
-		];
-
-		// ---- kumo createRoundedPath (horizontal, single=true) ----
-		function makePath(x1: number, y1: number, x2: number, y2: number): string {
-			if (Math.abs(y2 - y1) <= 2) return `M ${x1} ${y1} L ${x2} ${y2}`;
-			const r = Math.min(8, Math.abs(y2 - y1) / 2);
-			const vx = x2 - 32;
-			const sx = x2 > x1 ? 1 : -1;
-			const sy = y2 > y1 ? 1 : -1;
-			return `M ${x1} ${y1} L ${vx - sx * r} ${y1} Q ${vx} ${y1} ${vx} ${y1 + sy * r} L ${vx} ${y2 - sy * r} Q ${vx} ${y2} ${vx + sx * r} ${y2} L ${x2} ${y2}`;
-		}
-
-		type Edge = { id: string; d: string };
-		let edges: Edge[] = [];
-
-		function draw() {
-			svg.querySelectorAll(".eg").forEach((g) => g.remove());
-			edges = [];
-			const cr = container.getBoundingClientRect();
-			const allIds = ["request", ...NODES.map((n) => n.id), "response"];
-			const vis = allIds.filter((id) => {
-				const n = NODES.find((n) => n.id === id);
-				return !n || !n.security || active.has(id);
-			});
-
-			for (let i = 0; i < vis.length - 1; i++) {
-				const fEl = root!.querySelector<HTMLElement>(
-					`[data-rl-node="${vis[i]}"]`,
-				);
-				const tEl = root!.querySelector<HTMLElement>(
-					`[data-rl-node="${vis[i + 1]}"]`,
-				);
-				if (!fEl || !tEl) continue;
-				const fr = fEl.getBoundingClientRect();
-				const tr = tEl.getBoundingClientRect();
-				const d = makePath(
-					fr.right - cr.left,
-					fr.top + fr.height / 2 - cr.top,
-					tr.left - cr.left,
-					tr.top + tr.height / 2 - cr.top,
-				);
-				const eid = `${vis[i]}-${vis[i + 1]}`;
-
-				const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
-				g.classList.add("eg");
-				g.dataset.eid = eid;
-
-				const base = document.createElementNS(
-					"http://www.w3.org/2000/svg",
-					"path",
-				);
-				base.setAttribute("d", d);
-				base.setAttribute("fill", "none");
-				base.setAttribute("stroke", "currentColor");
-				base.setAttribute("stroke-width", "2");
-				base.setAttribute("marker-start", "url(#rl-pin)");
-				base.setAttribute("marker-end", "url(#rl-pin)");
-				g.appendChild(base);
-
-				const hl = document.createElementNS(
-					"http://www.w3.org/2000/svg",
-					"path",
-				);
-				hl.setAttribute("d", d);
-				hl.setAttribute("fill", "none");
-				hl.setAttribute("stroke", "transparent");
-				hl.setAttribute("stroke-width", "0");
-				hl.setAttribute("marker-start", "url(#rl-pin-a)");
-				hl.setAttribute("marker-end", "url(#rl-pin-a)");
-				hl.classList.add("ehl");
-				g.appendChild(hl);
-
-				svg.appendChild(g);
-				edges.push({ id: eid, d });
-			}
-		}
-
-		// ---- Toggles ----
-		const toggleCleanup: Array<() => void> = [];
-
-		root
-			.querySelectorAll<HTMLButtonElement>("[data-rl-toggle]")
-			.forEach((btn) => {
-				const id = btn.dataset.rlToggle!;
-				const color = btn.dataset.rlColor!;
-				const onClick = () => {
-					if (active.has(id)) active.delete(id);
-					else active.add(id);
-					apply();
-					requestAnimationFrame(draw);
-				};
-				function apply() {
-					const on = active.has(id);
-					btn.setAttribute("aria-pressed", String(on));
-					btn.style.color = on ? color : "";
-					const cell = root!.querySelector(
-						`[data-rl-cell="${id}"]`,
-					) as HTMLElement;
-					if (cell) {
-						if (on) cell.removeAttribute("data-rl-off");
-						else cell.setAttribute("data-rl-off", "");
-					}
-				}
-				btn.addEventListener("click", onClick);
-				toggleCleanup.push(() => btn.removeEventListener("click", onClick));
-				apply();
-			});
-
-		draw();
-		const resizeObserver = new ResizeObserver(draw);
-		resizeObserver.observe(container);
-		const onWindowResize = () => draw();
-		window.addEventListener("resize", onWindowResize, { passive: true });
-
-		// ---- Animation ----
-		let running = false;
-
-		const sendButton = root.querySelector<HTMLButtonElement>("[data-rl-send]");
-		if (!sendButton) return;
-		const onSendClick = () => {
-			if (!running) send();
-		};
-		sendButton.addEventListener("click", onSendClick);
-		const autoSendTimeout = window.setTimeout(send, 800);
-
-		function send() {
-			if (running) return;
-			running = true;
-			reset();
-
-			if (prefersReducedMotion) {
-				statusEl.textContent = "200 OK — Response delivered";
-				statusEl.style.color = ACCENT;
-				running = false;
-				return;
-			}
-
-			const threat = Math.random() < 0.3;
-			statusEl.textContent = threat
-				? "Scanning threat..."
-				: "Routing request...";
-			statusEl.style.color = threat ? "#ef4444" : "";
-
-			const vis = NODES.filter((n) => !n.security || active.has(n.id));
-			const ids = ["request", ...vis.map((n) => n.id), "response"];
-			const steps: { at: number; fn: () => void }[] = [];
-			let t = 0;
-
-			for (let i = 0; i < ids.length; i++) {
-				const nid = ids[i];
-				const pid = i > 0 ? ids[i - 1] : null;
-				const eid = pid ? `${pid}-${nid}` : null;
-
-				if (eid) {
-					const e = eid;
-					steps.push({
-						at: t,
-						fn: () => {
-							const g = svg.querySelector(`[data-eid="${e}"]`);
-							const h = g?.querySelector(".ehl") as SVGPathElement | null;
-							if (h) {
-								h.setAttribute("stroke", ACCENT);
-								h.setAttribute("stroke-width", "2");
-							}
-							const d = edges.find((x) => x.id === e)?.d;
-							if (d && g) {
-								const dot = document.createElementNS(
-									"http://www.w3.org/2000/svg",
-									"circle",
-								);
-								dot.setAttribute("r", "3");
-								dot.style.fill = ACCENT;
-								const anim = document.createElementNS(
-									"http://www.w3.org/2000/svg",
-									"animateMotion",
-								);
-								anim.setAttribute("dur", "0.8s");
-								anim.setAttribute("repeatCount", "1");
-								anim.setAttribute("path", d);
-								anim.setAttribute("fill", "freeze");
-								dot.appendChild(anim);
-								g.appendChild(dot);
-								setTimeout(() => dot.remove(), 850);
-							}
-						},
-					});
-					t += 800;
-				}
-
-				const cn = nid,
-					ce = eid;
-				const node = NODES.find((n) => n.id === cn);
-				steps.push({
-					at: t,
-					fn: () => {
-						if (ce) {
-							const h = svg.querySelector(
-								`[data-eid="${ce}"] .ehl`,
-							) as SVGPathElement | null;
-							if (h) {
-								h.setAttribute("stroke", "transparent");
-								h.setAttribute("stroke-width", "0");
-							}
-						}
-						if (node?.security && threat && rBlock(cn)) {
-							const st = root!.querySelector<HTMLElement>(
-								`[data-rl-st="${cn}"]`,
-							);
-							if (st) {
-								st.textContent = "BLOCKED";
-								st.style.color = "#ef4444";
-							}
-							statusEl.textContent = `403 — Blocked by ${node.label}`;
-							statusEl.style.color = "#ef4444";
-							return;
-						}
-						if (node?.security) {
-							const st = root!.querySelector<HTMLElement>(
-								`[data-rl-st="${cn}"]`,
-							);
-							if (st) {
-								st.textContent = "PASS";
-								st.style.color = "#10b981";
-							}
-						}
-					},
-				});
-				t += 200;
-			}
-
-			steps.push({
-				at: t,
-				fn: () => {
-					statusEl.textContent = "200 OK — Response delivered";
-					statusEl.style.color = ACCENT;
-					running = false;
-				},
-			});
-
-			let blocked = false;
-			const t0 = performance.now();
-			const q = [...steps];
-			function tick(now: number) {
-				if (blocked) return;
-				while (q.length && q[0].at <= now - t0) {
-					q.shift()!.fn();
-					if (statusEl.textContent?.includes("403")) {
-						blocked = true;
-						running = false;
-						return;
-					}
-				}
-				if (q.length) requestAnimationFrame(tick);
-				else running = false;
-			}
-			requestAnimationFrame(tick);
-		}
-
-		function reset() {
-			root!.querySelectorAll<HTMLElement>("[data-rl-st]").forEach((el) => {
-				el.textContent = "";
-				el.style.color = "";
-			});
-			svg.querySelectorAll("circle").forEach((d) => d.remove());
-			svg.querySelectorAll(".ehl").forEach((el) => {
-				el.setAttribute("stroke", "transparent");
-				el.setAttribute("stroke-width", "0");
-			});
-			statusEl.textContent = "";
-			statusEl.style.color = "";
-		}
-
-		function rBlock(id: string): boolean {
-			let h = 0;
-			for (let i = 0; i < id.length; i++)
-				h = ((h << 5) - h + id.charCodeAt(i)) | 0;
-			return (Math.abs(h) + Math.floor(Math.random() * 4)) % 7 < 2;
-		}
-
-		document.addEventListener(
-			"astro:before-swap",
-			() => {
-				window.clearTimeout(autoSendTimeout);
-				resizeObserver.disconnect();
-				window.removeEventListener("resize", onWindowResize);
-				sendButton.removeEventListener("click", onSendClick);
-				toggleCleanup.forEach((cleanup) => cleanup());
-				root.dataset.rlInit = "false";
-			},
-			{ once: true },
-		);
-	}
-
-	initRL();
-	document.addEventListener("astro:page-load", initRL);
-</script>
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index 7a3078ce1e87628..2364208d86e1232 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -18,15 +18,15 @@ const categories = [
 		label: "Network & Application",
 		threats: [
 			{
-				scenario: "Under DDoS attack",
+				scenario: "Protect your applications",
 				product: "WAF",
 				href: "/waf",
 				icon: "ddos-protection",
-				detail: "Custom rules, rate limiting, automatic mitigation",
+				detail: "Custom rules, rate limiting, zero-day protection",
 				cta: "Harden your app with WAF",
 			},
 			{
-				scenario: "SSL is fragile or misconfigured",
+				scenario: "Encrypt every connection",
 				product: "SSL/TLS",
 				href: "/ssl",
 				icon: "ssl",
@@ -34,11 +34,11 @@ const categories = [
 				cta: "Set up SSL/TLS",
 			},
 			{
-				scenario: "Bots abusing login or forms",
+				scenario: "Replace CAPTCHAs",
 				product: "Turnstile",
 				href: "/turnstile",
 				icon: "turnstile",
-				detail: "Invisible challenge, zero CAPTCHA friction",
+				detail: "Invisible challenge, privacy-preserving verification",
 				cta: "Add Turnstile protection",
 			},
 		],
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8e939bff83599da..2143a9cd6957efb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -219,7 +219,7 @@ const props = {
 	frontmatter: {
 		title: "Cloudflare Developer Docs",
 		description:
-			"Compute, storage, AI, and security on Cloudflare's global network. Deploy serverless applications, secure your infrastructure, and ship without managing complexity.",
+			"Compute, storage, AI, and security on Cloudflare's global network. Ship applications instead of managing and securing infrastructure.",
 		template: "doc",
 		tableOfContents: false,
 	},

From be8dfe9a4553afe0af159a5dd45eab2b2540cf6a Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 28 Apr 2026 10:26:56 +0100
Subject: [PATCH 16/35] style: tweak

---
 src/components/landing/AccelerateSection.astro |  2 +-
 src/components/landing/BuildFromScratch.astro  |  2 +-
 src/components/landing/ChangelogSection.astro  |  2 +-
 src/components/landing/PlatformStats.astro     | 12 ++++++------
 src/components/landing/SecureSection.astro     |  2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index 63adebbc7828bb6..20e93bbbab187bc 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -115,7 +115,7 @@ const phases = [
 >
 	<!-- Section header -->
 	<div class="mb-3">
-		<span class="text-accent font-mono text-xs tracking-widest uppercase"
+		<span class="text-accent font-mono text-[13px] tracking-widest uppercase"
 			>Accelerate</span
 		>
 	</div>
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index bf48411e084c492..563e19b89e3b83f 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -104,7 +104,7 @@ const primitives = [
 	id="build"
 >
 	<div class="mb-3">
-		<span class="text-accent font-mono text-xs tracking-widest uppercase"
+		<span class="text-accent font-mono text-[13px] tracking-widest uppercase"
 			>Build</span
 		>
 	</div>
diff --git a/src/components/landing/ChangelogSection.astro b/src/components/landing/ChangelogSection.astro
index 72d7f886c116afc..5091275987b6791 100644
--- a/src/components/landing/ChangelogSection.astro
+++ b/src/components/landing/ChangelogSection.astro
@@ -94,7 +94,7 @@ const CORNERS = [
 			<div class="mb-8 flex items-end justify-between max-[600px]:mb-6">
 				<div>
 					<div class="mb-3">
-						<span class="text-accent font-mono text-xs tracking-widest uppercase">
+						<span class="text-accent font-mono text-[13px] tracking-widest uppercase">
 							Changelog
 						</span>
 					</div>
diff --git a/src/components/landing/PlatformStats.astro b/src/components/landing/PlatformStats.astro
index 80720ef3bac1ea4..875760287169f9e 100644
--- a/src/components/landing/PlatformStats.astro
+++ b/src/components/landing/PlatformStats.astro
@@ -40,8 +40,8 @@ const stats = [
 	class={`pt-10 pb-12 max-[900px]:pt-8 max-[900px]:pb-8 ${stagger(0.42)}`}
 	aria-labelledby="stats-heading"
 >
-	<div class="mb-3">
-		<span class="text-accent font-mono text-xs tracking-widest uppercase"
+	<div class="mb-4">
+		<span class="text-accent font-mono text-[13px] tracking-widest uppercase"
 			>Platform at a Glance</span
 		>
 	</div>
@@ -153,7 +153,7 @@ const stats = [
 
 					{/* Index */}
 					<div
-						class="mb-2.5 font-mono text-[10px] text-zinc-400 uppercase tabular-nums select-none dark:text-zinc-600"
+						class="mb-2.5 font-mono text-[11px] text-zinc-400 uppercase tabular-nums select-none dark:text-zinc-600"
 						aria-hidden="true"
 					>
 						{String(i + 1).padStart(2, "0")}
@@ -175,17 +175,17 @@ const stats = [
 					</p>
 
 					{/* Unit */}
-					<p class="text-accent mb-3 font-mono text-xs tracking-wide uppercase">
+					<p class="text-accent mb-3 font-mono text-[12px] tracking-wide uppercase">
 						{stat.unit}
 					</p>
 
 					{/* Label + detail */}
 					<div class="border-t border-dashed border-[#e8e8e8] pt-3 dark:border-[#2a2a2a]">
 						<div class="space-y-0.5">
-							<p class="text-sm leading-tight font-medium text-zinc-900 dark:text-zinc-50">
+							<p class="text-[15px] leading-snug font-medium text-pretty text-zinc-900 dark:text-zinc-50">
 								{stat.label}
 							</p>
-							<p class="text-xs text-zinc-500 dark:text-zinc-400">
+							<p class="text-[13px] leading-snug text-pretty text-zinc-500 dark:text-zinc-400">
 								{stat.detail}
 							</p>
 						</div>
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index 2364208d86e1232..e0ca20fa153e715 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -81,7 +81,7 @@ const categories = [
 	id="secure"
 >
 	<div class="mb-3">
-		<span class="text-accent font-mono text-xs tracking-widest uppercase"
+		<span class="text-accent font-mono text-[13px] tracking-widest uppercase"
 			>Secure</span
 		>
 	</div>

From eddd736ee394bf7075aa57cd19b72774fe8275b6 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Wed, 29 Apr 2026 17:21:15 +0100
Subject: [PATCH 17/35] chore: clean up

---
 .../landing/AccelerateSection.astro           |  32 +--
 src/components/landing/AgentSetup.astro       | 231 ++++++++++++++++++
 src/components/landing/BuildFromScratch.astro |  79 +-----
 src/components/landing/ChangelogSection.astro |  55 +++--
 src/components/landing/CommandBlock.astro     | 146 +++++++++++
 src/components/landing/FullPageLines.astro    |   2 +-
 src/components/landing/Hero.astro             |  18 +-
 src/components/landing/PlatformStats.astro    |  16 +-
 src/components/landing/ProductCard.astro      |   2 +-
 src/components/landing/ProductCardGrid.astro  |   2 +-
 src/components/landing/ProtectSection.astro   |  14 +-
 src/components/landing/SecureSection.astro    |   4 +-
 src/components/landing/StructuralGrid.astro   |   2 +-
 src/components/overrides/Footer.astro         |   8 +-
 src/components/overrides/Sidebar.astro        |   4 +-
 src/pages/index.astro                         |   7 +-
 16 files changed, 473 insertions(+), 149 deletions(-)
 create mode 100644 src/components/landing/AgentSetup.astro
 create mode 100644 src/components/landing/CommandBlock.astro

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index 20e93bbbab187bc..a99be398bf5111f 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -134,7 +134,7 @@ const phases = [
 
 	<!-- Toggle: Without / With Cloudflare -->
 	<div
-		class="mb-5 flex flex-wrap items-center justify-between gap-4 max-[600px]:gap-3"
+		class="mb-5 flex flex-wrap items-center justify-between gap-3 sm:gap-4"
 		role="radiogroup"
 		aria-label="Comparison mode"
 	>
@@ -151,7 +151,7 @@ const phases = [
 				role="radio"
 				aria-checked="true"
 				tabindex="0"
-				class="wf-toggle-btn wf-toggle-active focus-visible:outline-accent relative z-10 flex min-h-[40px] cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:-outline-offset-2 max-[600px]:px-2.5"
+				class="wf-toggle-btn wf-toggle-active focus-visible:outline-accent relative z-10 flex min-h-[40px] cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:-outline-offset-2 sm:px-4"
 			>
 				<span
 					class="wf-toggle-dot size-2 shrink-0 rounded-full transition-colors duration-200"
@@ -164,7 +164,7 @@ const phases = [
 				role="radio"
 				aria-checked="false"
 				tabindex="-1"
-				class="wf-toggle-btn focus-visible:outline-accent relative z-10 flex min-h-[40px] cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:-outline-offset-2 max-[600px]:px-2.5"
+				class="wf-toggle-btn focus-visible:outline-accent relative z-10 flex min-h-[40px] cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:-outline-offset-2 sm:px-4"
 			>
 				<span
 					class="wf-toggle-dot size-2 shrink-0 rounded-full transition-colors duration-200"
@@ -225,8 +225,7 @@ const phases = [
 
 		<!-- Timescale ruler — uses the same grid as waterfall rows so ticks align with bars -->
 		<div
-			class="bg-l-card dark:bg-l-card-dark grid h-7 items-end gap-4 border-b border-zinc-200 px-5 max-[600px]:hidden dark:border-[#2a2a2a]"
-			style="grid-template-columns: minmax(220px, 1.1fr) minmax(0, 3fr) auto;"
+			class="bg-l-card dark:bg-l-card-dark hidden h-7 items-end gap-4 border-b border-zinc-200 px-5 sm:grid sm:grid-cols-[minmax(220px,1.1fr)_minmax(0,3fr)_auto] dark:border-[#2a2a2a]"
 			aria-hidden="true"
 		>
 			<div></div>
@@ -258,13 +257,12 @@ const phases = [
 				<a
 					href={p.href}
 					class:list={[
-						"wf-row group relative grid items-center gap-4 px-5 py-3 no-underline transition-colors duration-150",
+						"wf-row group relative grid grid-cols-[1fr] items-center gap-2 px-3 py-3 no-underline transition-colors duration-150",
+						"sm:grid-cols-[minmax(220px,1.1fr)_minmax(0,3fr)_auto] sm:gap-4 sm:px-5",
 						"bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark",
 						"focus-visible:outline-accent focus-visible:outline-2 focus-visible:-outline-offset-2",
-						"max-[600px]:grid-cols-[1fr] max-[600px]:gap-2 max-[600px]:px-3 max-[600px]:py-3",
 						i > 0 && "border-t border-zinc-200 dark:border-[#2a2a2a]",
 					]}
-					style="grid-template-columns: minmax(220px, 1.1fr) minmax(0, 3fr) auto;"
 					data-phase={p.id}
 				>
 					{/* Accent bar — bottom reveal on hover */}
@@ -274,7 +272,7 @@ const phases = [
 					/>
 
 					{/* Left: phase name + product */}
-					<div class="flex min-w-0 items-center gap-3 max-[600px]:gap-2">
+					<div class="flex min-w-0 items-center gap-2 sm:gap-3">
 						<span class="group-hover:border-accent/30 group-hover:bg-accent/5 group-hover:text-accent flex size-8 shrink-0 items-center justify-center rounded border border-zinc-200 bg-zinc-100 text-zinc-400 transition-colors duration-150 dark:border-[#2a2a2a] dark:bg-zinc-800 dark:text-zinc-500">
 							<Icon name={p.icon} size="16px" />
 						</span>
@@ -289,7 +287,7 @@ const phases = [
 					</div>
 
 					{/* Center: waterfall bar visualization */}
-					<div class="relative self-stretch max-[600px]:h-5" aria-hidden="true">
+					<div class="relative h-5 sm:h-auto sm:self-stretch" aria-hidden="true">
 						{/* Background track */}
 						<div class="absolute inset-0 rounded bg-zinc-100/80 dark:bg-zinc-800/40" />
 
@@ -310,14 +308,14 @@ const phases = [
 							data-offset-after={p.after.offset}
 							data-width-after={p.after.width}
 						>
-							<span class="wf-bar-label absolute top-1/2 right-2 -translate-y-1/2 font-mono text-[10px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm max-[456px]:hidden">
+							<span class="wf-bar-label absolute top-1/2 right-2 hidden -translate-y-1/2 font-mono text-[10px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm sm:inline">
 								{Math.round(p.after.width * 16)}ms
 							</span>
 						</div>
 					</div>
 
 					{/* Right: arrow */}
-					<div class="group-hover:text-accent flex items-center text-zinc-300 transition-colors duration-150 max-[600px]:hidden dark:text-zinc-600">
+					<div class="group-hover:text-accent hidden items-center text-zinc-300 transition-colors duration-150 sm:flex dark:text-zinc-600">
 						<svg
 							width="14"
 							height="14"
@@ -352,7 +350,7 @@ const phases = [
 				>
 					<span class="tracking-widest uppercase">Total latency</span>
 					<div
-						class="relative h-1.5 w-48 overflow-hidden rounded-full bg-zinc-100 max-[600px]:w-28 dark:bg-zinc-800/60"
+						class="relative h-1.5 w-28 overflow-hidden rounded-full bg-zinc-100 sm:w-48 dark:bg-zinc-800/60"
 						role="presentation"
 					>
 						<div
@@ -369,7 +367,7 @@ const phases = [
 				}
 				<div
 					id="wf-savings-group"
-					class="flex items-baseline gap-2 font-mono text-xs text-zinc-500 tabular-nums transition-opacity duration-300 max-[500px]:hidden dark:text-zinc-400"
+					class="hidden items-baseline gap-2 font-mono text-xs text-zinc-500 tabular-nums transition-opacity duration-300 sm:flex dark:text-zinc-400"
 				>
 					<span class="tracking-widest uppercase">Savings</span>
 					<span
@@ -536,12 +534,6 @@ const phases = [
 		}
 	}
 
-	/* Responsive: on mobile, switch waterfall row to stacked layout */
-	@media (max-width: 600px) {
-		.wf-row {
-			grid-template-columns: 1fr !important;
-		}
-	}
 </style>
 
 <script>
diff --git a/src/components/landing/AgentSetup.astro b/src/components/landing/AgentSetup.astro
new file mode 100644
index 000000000000000..4b92acd74f38039
--- /dev/null
+++ b/src/components/landing/AgentSetup.astro
@@ -0,0 +1,231 @@
+---
+
+import CommandBlock from "./CommandBlock.astro";
+
+const PROMPT = "Fetch https://developers.cloudflare.com/agent-setup/prompt.md";
+
+const ALL_GUIDES_HREF = "/agent-setup/";
+
+const AGENTS = [
+	{ id: "claude", label: "Claude Code", href: "/agent-setup/claude-code/" },
+	{ id: "codex", label: "Codex", href: "/agent-setup/codex/" },
+	{ id: "cursor", label: "Cursor", href: "/agent-setup/cursor/" },
+	{ id: "opencode", label: "OpenCode", href: "/agent-setup/opencode/" },
+	{
+		id: "copilot",
+		label: "GitHub Copilot",
+		href: "/agent-setup/github-copilot/",
+	},
+	{ id: "windsurf", label: "Windsurf", href: "/agent-setup/windsurf/" },
+];
+
+const CORNERS = [
+	"-top-[5.5px] -left-[5.5px]",
+	"-top-[5.5px] -right-[5.5px]",
+	"-bottom-[5.5px] -left-[5.5px]",
+	"-right-[5.5px] -bottom-[5.5px]",
+];
+---
+
+<section
+	id="agents"
+	class="pt-10 pb-6 lg:pt-14"
+	aria-labelledby="agents-heading"
+>
+	<div class="mb-5">
+		<span class="text-accent font-mono text-[13px] tracking-[0.18em] uppercase">
+			Agents
+		</span>
+	</div>
+
+	<div class="relative border border-zinc-200 dark:border-[#2a2a2a]">
+		{
+			CORNERS.map((pos) => (
+				<svg
+					width="10"
+					height="10"
+					viewBox="0 0 10 10"
+					class={`pointer-events-none absolute ${pos} z-10`}
+					aria-hidden="true"
+				>
+					<line
+						x1="0"
+						y1="5"
+						x2="10"
+						y2="5"
+						stroke-width="1"
+						class="l-corner-stroke"
+					/>
+					<line
+						x1="5"
+						y1="0"
+						x2="5"
+						y2="10"
+						stroke-width="1"
+						class="l-corner-stroke"
+					/>
+				</svg>
+			))
+		}
+
+		<div class="grid grid-cols-12 gap-px bg-zinc-200 dark:bg-[#2a2a2a]">
+			<div
+				class="bg-l-card dark:bg-l-card-dark col-span-12 flex min-w-0 flex-col gap-3 p-8 lg:col-span-8"
+			>
+				<h2
+					id="agents-heading"
+					class="mb-1 text-2xl leading-[1.1] font-medium -tracking-[0.035em] text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
+				>
+					Build with your favorite AI agent
+				</h2>
+				<p
+					class="mt-0 mb-2 max-w-[50ch] text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400"
+				>
+					Paste this prompt into any AI coding agent to install Cloudflare's
+					official tooling.
+				</p>
+				<CommandBlock
+					id="agents-setup-prompt"
+					command={PROMPT}
+					rounded
+					class="mt-auto min-w-0"
+				/>
+			</div>
+
+			{/* Top row, cols 9-12: CTA */}
+			<a
+				href={ALL_GUIDES_HREF}
+				class="agent-setup-cta bg-l-card dark:bg-l-card-dark hover:bg-l-card-hover dark:hover:bg-l-card-hover-dark group relative col-span-12 flex min-w-0 flex-row items-center justify-between overflow-hidden px-8 py-6 no-underline transition-colors duration-150 focus-visible:outline-none lg:col-span-4 lg:flex-col lg:items-stretch lg:p-8"
+			>
+				<div class="relative z-[1] flex flex-col gap-2.5">
+					<span
+						class="font-mono text-xs tracking-[0.18em] text-zinc-500 uppercase dark:text-zinc-400"
+					>
+						More
+					</span>
+					<span
+						class="max-w-[12ch] text-base leading-tight font-medium -tracking-[0.018em] text-zinc-900 md:text-xl dark:text-zinc-50"
+					>
+						Browse all setup guides
+					</span>
+				</div>
+				<svg
+					class="agent-setup-cta-arrow absolute right-3 top-1/2 aspect-square h-[78%] -translate-y-1/2 text-zinc-200 dark:text-[#2a2a2a] lg:right-4 lg:h-auto lg:w-1/2"
+					viewBox="-0.293 -0.501 102 102"
+					fill="#FFF"
+					stroke="currentColor"
+					stroke-width="1.25"
+					stroke-linejoin="miter"
+					stroke-linecap="butt"
+					aria-hidden="true"
+				>
+					<path
+						vector-effect="non-scaling-stroke"
+						d="M0.707092 79.3255L21.97 100.489L70.7071 51.5225L70.7071 100.499L100.707 100.499L100.707 0.499451L0.707149 0.499448L0.707145 30.4994L49.3046 30.4994L0.707092 79.3255Z"
+					></path>
+				</svg>
+			</a>
+
+			{/* Bottom row: 6 agent tiles */}
+			{
+				AGENTS.map((agent) => (
+					<a
+						href={agent.href}
+						class="agent-setup-tile bg-l-card dark:bg-l-card-dark hover:bg-l-card-hover dark:hover:bg-l-card-hover-dark group relative col-span-6 flex min-h-[9.5rem] min-w-0 flex-col items-start justify-between gap-5 px-5 py-6 no-underline transition-colors duration-150 focus-visible:outline-none sm:col-span-4 lg:col-span-2"
+						aria-label={`${agent.label} setup guide`}
+					>
+						<span
+							class="inline-flex h-8 w-8 items-center justify-center"
+							aria-hidden="true"
+						>
+							<img
+								src={`/icons/agents/${agent.id}/light.svg`}
+								alt=""
+								class="block h-full w-full object-contain dark:hidden"
+								loading="lazy"
+								decoding="async"
+							/>
+							<img
+								src={`/icons/agents/${agent.id}/dark.svg`}
+								alt=""
+								class="hidden h-full w-full object-contain dark:block"
+								loading="lazy"
+								decoding="async"
+							/>
+						</span>
+						<div class="flex flex-col gap-1">
+							<span class="text-[15px] leading-snug font-medium -tracking-[0.012em] text-zinc-900 dark:text-zinc-50">
+								{agent.label}
+							</span>
+						</div>
+						<svg
+							class="absolute top-5 right-5 text-zinc-300 transition duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:translate-x-[2px] group-hover:text-zinc-900 group-focus-visible:translate-x-[2px] group-focus-visible:text-zinc-900 motion-reduce:transition-none dark:text-zinc-600 dark:group-hover:text-zinc-50 dark:group-focus-visible:text-zinc-50"
+							width="14"
+							height="14"
+							viewBox="0 0 24 24"
+							fill="none"
+							aria-hidden="true"
+						>
+							<polyline
+								points="9 6 15 12 9 18"
+								stroke="currentColor"
+								stroke-width="1.7"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</a>
+				))
+			}
+		</div>
+	</div>
+</section>
+
+<style>
+	/*
+	 * Hide the decorative diagonal arrow between 1024px and 1399px.
+	 * In that range the CTA card is in flex-col mode but the column is
+	 * narrow enough that the arrow either crowds the text or sits in
+	 * awkward whitespace. Below 1024px the card is in flex-row mode
+	 * (arrow is height-sized and looks balanced); at 1400px+ the
+	 * column is wide enough for the half-width decoration to land
+	 * cleanly. Using a plain @media rule here so the cascade is
+	 * predictable regardless of Tailwind utility ordering.
+	 */
+	@media (min-width: 1024px) and (max-width: 1399.98px) {
+		.agent-setup-cta-arrow {
+			display: none;
+		}
+	}
+
+	/*
+	 * Hover affordance — a 1px accent rail along the bottom edge of each
+	 * cell that grows from centre on hover or focus-visible. Reuses the
+	 * rail vocabulary already used in AccelerateSection so this section
+	 * speaks the same hover language as the rest of the landing page.
+	 */
+	.agent-setup-tile::after,
+	.agent-setup-cta::after {
+		content: "";
+		position: absolute;
+		inset: auto 0 0 0;
+		height: 1px;
+		background: var(--color-accent, #f56500);
+		transform: scaleX(0);
+		transform-origin: center;
+		transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1);
+		pointer-events: none;
+	}
+	.agent-setup-tile:hover::after,
+	.agent-setup-tile:focus-visible::after,
+	.agent-setup-cta:hover::after,
+	.agent-setup-cta:focus-visible::after {
+		transform: scaleX(1);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.agent-setup-tile::after,
+		.agent-setup-cta::after {
+			transition: none;
+		}
+	}
+</style>
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index 563e19b89e3b83f..9673074cdaf96c2 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -1,18 +1,6 @@
 ---
-/**
- * Steelmanned Minimal Tabs
- *
- * Improvements over base:
- * - Icons restored in tab bar (product identity)
- * - Tab bar has subtle background differentiation from panel
- * - Active tab gets bg fill, not just underline
- * - Command block has segmented $ | command | copy layout (matching PlatformStats precision)
- * - CTA is a bordered button, not naked text
- * - Tags rendered as low-contrast text links (less noise)
- * - Plus marks on outer container (structural language from PlatformStats)
- * - Consistent border/bg tokens throughout
- */
 import { Icon } from "astro-icon/components";
+import CommandBlock from "./CommandBlock.astro";
 
 const primitives = [
 	{
@@ -24,7 +12,7 @@ const primitives = [
 		iconBgDark: "rgba(10, 149, 255, 0.16)",
 		heading: "Deploy with one command",
 		description:
-			"Deploy serverless functions and full-stack apps on Cloudflare's global network. No servers to manage. No cold starts or region complexity. Run code in 330+ cities around the world, within 50ms of 95% of the world's population.",
+			"Deploy serverless functions and full-stack apps on Cloudflare's global network. No servers to manage. No cold starts or region complexity.",
 		command: "npx wrangler init my-app",
 		cta: {
 			label: "Create your first Worker",
@@ -99,7 +87,7 @@ const primitives = [
 ---
 
 <section
-	class="pt-14 pb-6 max-[900px]:pt-10 max-[900px]:pb-6"
+	class="pt-10 pb-6 lg:pt-14"
 	aria-labelledby="build-heading"
 	id="build"
 >
@@ -197,7 +185,7 @@ const primitives = [
 					id={`build-panel-${p.id}`}
 					aria-labelledby={`build-tab-${p.id}`}
 					hidden={i !== 0}
-					class="bg-l-card dark:bg-l-card-dark p-8 max-[600px]:p-5"
+					class="bg-l-card dark:bg-l-card-dark p-5 sm:p-8"
 				>
 					<div class="w-full">
 						<div class="mb-4 flex items-center gap-3">
@@ -215,35 +203,16 @@ const primitives = [
 							{p.description}
 						</p>
 
-						{/* Command block — segmented */}
-						<div class="mb-6 flex max-w-[680px] items-stretch overflow-hidden rounded border border-zinc-200 dark:border-[#2a2a2a]">
-							<code
-								id={`build-cmd-${p.id}`}
-								class="bg-l-card dark:bg-l-card-dark min-w-0 flex-1 truncate px-3 py-4 font-mono text-sm leading-none text-zinc-700 select-all dark:text-zinc-300"
-							>
-								{p.command}
-							</code>
-							<button
-								type="button"
-								data-copy-target={`build-cmd-${p.id}`}
-								aria-label="Copy to clipboard"
-								class="build-copy-btn focus-visible:outline-accent flex w-10 shrink-0 cursor-pointer items-center justify-center border-l border-zinc-200 text-zinc-500 transition-colors duration-150 hover:bg-zinc-200 hover:text-zinc-700 focus-visible:outline-2 focus-visible:-outline-offset-2 dark:border-[#2a2a2a] dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-100"
-							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									width="18"
-									height="18"
-									fill="currentColor"
-									viewBox="0 0 256 256"
-									aria-hidden="true"
-								>
-									<path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z" />
-								</svg>
-							</button>
-						</div>
+						{/* Command block — shared CommandBlock component */}
+						<CommandBlock
+							id={`build-cmd-${p.id}`}
+							command={p.command}
+							rounded
+							class="mb-6 max-w-[680px]"
+						/>
 
 						{/* CTA + tags row */}
-						<div class="flex w-full items-center gap-6 max-[600px]:flex-col max-[600px]:items-start max-[600px]:gap-4">
+						<div class="flex w-full flex-col items-start gap-4 sm:flex-row sm:items-center sm:gap-6">
 							<a
 								href={p.cta.href}
 								class="focus-visible:outline-accent inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-md bg-[#18181b] px-4 py-2 text-sm font-medium text-white no-underline transition-colors duration-150 hover:bg-[#f56500] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-[#fafafa] dark:text-[#09090b] dark:hover:bg-[#e4e4e7] dark:hover:text-[#09090b]"
@@ -374,27 +343,5 @@ const primitives = [
 			});
 		});
 	}
-
-	// Copy buttons
-	document
-		.querySelectorAll<HTMLButtonElement>(".build-copy-btn")
-		.forEach((btn) => {
-			btn.addEventListener("click", async () => {
-				const targetId = btn.dataset.copyTarget;
-				if (!targetId) return;
-				const codeEl = document.getElementById(targetId);
-				if (!codeEl) return;
-				const text = codeEl.textContent?.trim() ?? "";
-				try {
-					await navigator.clipboard.writeText(text);
-				} catch {
-					return;
-				}
-				const prev = btn.innerHTML;
-				btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34Z"/></svg>`;
-				setTimeout(() => {
-					btn.innerHTML = prev;
-				}, 1500);
-			});
-		});
+	// Copy behavior is now owned by CommandBlock.astro — see ./CommandBlock.astro
 </script>
diff --git a/src/components/landing/ChangelogSection.astro b/src/components/landing/ChangelogSection.astro
index 5091275987b6791..ba6d248c15ca2ca 100644
--- a/src/components/landing/ChangelogSection.astro
+++ b/src/components/landing/ChangelogSection.astro
@@ -87,11 +87,11 @@ const CORNERS = [
 	entries.length > 0 && (
 		<section
 			id="changelog"
-			class="pt-14 pb-12 max-[900px]:pt-10 max-[900px]:pb-10"
+			class="pt-10 pb-10 lg:pt-14 lg:pb-12"
 			aria-labelledby="cl-heading"
 		>
 			{/* ── Header ─────────────────────────────────────────── */}
-			<div class="mb-8 flex items-end justify-between max-[600px]:mb-6">
+			<div class="mb-6 flex items-end justify-between sm:mb-8">
 				<div>
 					<div class="mb-3">
 						<span class="text-accent font-mono text-[13px] tracking-widest uppercase">
@@ -175,9 +175,6 @@ const CORNERS = [
 									<span class="cl-ring cl-ring--delay" />
 									<span class="cl-core" />
 								</span>
-								<span class="text-accent font-mono text-xs font-medium tracking-widest uppercase">
-									Latest
-								</span>
 								<time class="font-mono text-xs text-zinc-500 tabular-nums dark:text-zinc-400">
 									{featured.dateFormatted}
 								</time>
@@ -302,44 +299,50 @@ const CORNERS = [
 }
 
 <style>
-	/* ── Grid layout ───────────────────────────────────────────────── */
+	/* ── Grid layout (mobile-first) ────────────────────────────────── */
 	.cl-grid {
-		grid-template-columns: 5fr 3fr 3fr;
+		grid-template-columns: 1fr;
 	}
 	.cl-featured {
-		grid-row: 1 / 3;
+		grid-row: auto;
 		text-decoration: none;
 	}
 	.cl-grid > a:not(.cl-featured) {
 		text-decoration: none;
 	}
 
-	/* Hover: CTA goes accent + underline (small cards) — mirrors ProductCard */
-	.cl-card:hover .group\/cta,
-	.cl-card:focus-within .group\/cta {
-		color: var(--color-accent);
-		text-decoration: underline;
-		text-underline-offset: 4px;
-		text-decoration-color: color-mix(in srgb, #f56500 40%, transparent);
-	}
-
-	/* Hover: CTA text goes accent + underline (featured card) */
-	.cl-featured:hover .group\/cta {
-		color: var(--color-accent);
-		text-decoration: underline;
-		text-underline-offset: 4px;
-		text-decoration-color: color-mix(in srgb, #f56500 40%, transparent);
+	/* Medium: featured full-width, smaller cards in 2 columns */
+	@media (min-width: 768px) {
+		.cl-grid {
+			grid-template-columns: 1fr 1fr;
+		}
+		.cl-featured {
+			grid-column: 1 / -1;
+		}
 	}
 
-	@media (max-width: 768px) {
+	/* Large: 3-column bento with featured spanning 2 rows */
+	@media (min-width: 1200px) {
 		.cl-grid {
-			grid-template-columns: 1fr;
+			grid-template-columns: 5fr 3fr 3fr;
 		}
 		.cl-featured {
-			grid-row: auto;
+			grid-column: auto;
+			grid-row: 1 / 3;
 		}
 	}
 
+	/* Hover: CTA gets underline on card hover — mirrors ProductCard.
+	 * Colour intentionally stays zinc so it matches the canonical inline-link
+	 * pattern (BuildFromScratch tags, Hero nav). Underline-only on hover. */
+	.cl-card:hover .group\/cta,
+	.cl-card:focus-within .group\/cta,
+	.cl-featured:hover .group\/cta,
+	.cl-featured:focus-within .group\/cta {
+		text-decoration: underline;
+		text-underline-offset: 4px;
+	}
+
 	/* ── Broadcast ring animation ──────────────────────────────────── */
 	.cl-broadcast {
 		position: relative;
diff --git a/src/components/landing/CommandBlock.astro b/src/components/landing/CommandBlock.astro
new file mode 100644
index 000000000000000..9b90aa039542120
--- /dev/null
+++ b/src/components/landing/CommandBlock.astro
@@ -0,0 +1,146 @@
+---
+/**
+ * CommandBlock — segmented `$ | code | copy` (or `code | copy`) command block
+ * shared across landing-page sections.
+ *
+ * Used by:
+ *   - BuildFromScratch (no prompt, rounded corners, max-width 680px)
+ *   - AgentSetup       (with $ prompt, sharp corners, fills cell)
+ *
+ * The copy button is class `cmd-copy-btn`. The script at the bottom of this
+ * file is hoisted once per page by Astro and binds copy behavior to every
+ * instance via `data-copy-target` (the id of the matching `<code>` block).
+ *
+ * Props:
+ *   id          unique DOM id used by the copy button to find the code text
+ *   command     the literal command string shown and copied
+ *   showPrompt  prepend a `$` prompt cell in the accent color (default false)
+ *   rounded     round the outer corners (default false — sharp, matches the
+ *               page's CAD aesthetic; BuildFromScratch passes true)
+ *   class       extra classes appended to the outer wrapper
+ */
+interface Props {
+	id: string;
+	command: string;
+	showPrompt?: boolean;
+	rounded?: boolean;
+	class?: string;
+}
+
+const {
+	id,
+	command,
+	showPrompt = false,
+	rounded = false,
+	class: className = "",
+} = Astro.props;
+---
+
+<div
+	class:list={[
+		"flex items-stretch overflow-hidden border border-zinc-200 dark:border-[#2a2a2a]",
+		rounded && "rounded",
+		className,
+	]}
+>
+	{
+		showPrompt && (
+			<span
+				class="bg-l-card dark:bg-l-card-dark flex shrink-0 items-center border-r border-zinc-200 px-3 font-mono text-sm leading-none text-accent select-none dark:border-[#2a2a2a]"
+				aria-hidden="true"
+			>
+				$
+			</span>
+		)
+	}
+
+	<code
+		id={id}
+		class="bg-l-card dark:bg-l-card-dark min-w-0 flex-1 truncate px-3 py-4 font-mono text-sm leading-none text-zinc-700 select-all dark:text-zinc-300"
+	>
+		{command}
+	</code>
+
+	<button
+		type="button"
+		data-copy-target={id}
+		aria-label="Copy to clipboard"
+		class="cmd-copy-btn focus-visible:outline-accent flex w-10 shrink-0 cursor-pointer items-center justify-center border-l border-zinc-200 text-zinc-500 transition-colors duration-150 hover:bg-zinc-200 hover:text-zinc-700 focus-visible:outline-2 focus-visible:-outline-offset-2 dark:border-[#2a2a2a] dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-100"
+	>
+		<svg
+			class="cmd-copy-default"
+			xmlns="http://www.w3.org/2000/svg"
+			width="18"
+			height="18"
+			fill="currentColor"
+			viewBox="0 0 256 256"
+			aria-hidden="true"
+		>
+			<path
+				d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"
+			></path>
+		</svg>
+		<svg
+			class="cmd-copy-done"
+			xmlns="http://www.w3.org/2000/svg"
+			width="18"
+			height="18"
+			fill="currentColor"
+			viewBox="0 0 256 256"
+			aria-hidden="true"
+		>
+			<path
+				d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34Z"
+			></path>
+		</svg>
+	</button>
+</div>
+
+<style>
+	.cmd-copy-default {
+		display: block;
+	}
+	.cmd-copy-done {
+		display: none;
+	}
+	.cmd-copy-btn[data-copied="true"] .cmd-copy-default {
+		display: none;
+	}
+	.cmd-copy-btn[data-copied="true"] .cmd-copy-done {
+		display: block;
+		color: #10a37f;
+	}
+</style>
+
+<script>
+	function bindCommandCopy() {
+		document
+			.querySelectorAll<HTMLButtonElement>(".cmd-copy-btn")
+			.forEach((btn) => {
+				if (btn.dataset.bound === "true") return;
+				btn.dataset.bound = "true";
+
+				btn.addEventListener("click", async () => {
+					const targetId = btn.dataset.copyTarget;
+					if (!targetId) return;
+					const codeEl = document.getElementById(targetId);
+					if (!codeEl) return;
+					const text = codeEl.textContent?.trim() ?? "";
+					try {
+						await navigator.clipboard.writeText(text);
+					} catch {
+						return;
+					}
+					btn.dataset.copied = "true";
+					btn.setAttribute("aria-label", "Copied");
+					setTimeout(() => {
+						delete btn.dataset.copied;
+						btn.setAttribute("aria-label", "Copy to clipboard");
+					}, 1500);
+				});
+			});
+	}
+
+	bindCommandCopy();
+	document.addEventListener("astro:page-load", bindCommandCopy);
+</script>
diff --git a/src/components/landing/FullPageLines.astro b/src/components/landing/FullPageLines.astro
index d82cc7fbff33e94..84cca418ef58381 100644
--- a/src/components/landing/FullPageLines.astro
+++ b/src/components/landing/FullPageLines.astro
@@ -23,7 +23,7 @@ const lineBase = "absolute top-0 left-1/2 -translate-x-1/2";
 ---
 
 <div
-	class="pointer-events-none absolute inset-x-0 top-0 z-0 max-[1024px]:hidden"
+	class="pointer-events-none absolute inset-x-0 top-0 z-0 hidden lg:block"
 	style="height: calc(100% + 25rem)"
 	aria-hidden="true"
 >
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
index 6c495b40712d05e..0d34046ca93c702 100644
--- a/src/components/landing/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -3,7 +3,7 @@ import { Icon } from "@astrojs/starlight/components";
 import { stagger } from "./constants";
 ---
 
-<section id="hero" class="pb-16 max-[900px]:pb-12 md:pt-6">
+<section id="hero" class="pb-12 md:pt-6 lg:pb-16">
 	<h1
 		class={`text-[clamp(2.75rem,5vw,3.5rem)] font-medium -tracking-[0.04em] leading-[1.05] text-balance mb-4 text-primary dark:text-white ${stagger(0.05)}`}
 	>
@@ -11,46 +11,46 @@ import { stagger } from "./constants";
 	</h1>
 
 	<p
-		class={`text-lg text-pretty max-w-[480px] leading-relaxed mb-8 max-[480px]:text-base max-[480px]:mb-6 text-[#52525b] dark:text-[#a1a1aa] ${stagger(0.1)}`}
+		class={`text-base text-pretty max-w-[480px] leading-relaxed mb-6 sm:text-lg sm:mb-8 text-[#52525b] dark:text-[#a1a1aa] ${stagger(0.1)}`}
 	>
 		Compute, storage, AI, and security — ship applications instead of managing
 		and securing infrastructure
 	</p>
 
 	<div
-		class={`flex items-center gap-5 text-sm max-[480px]:flex-wrap max-[480px]:gap-3 ${stagger(0.16)}`}
+		class={`flex flex-wrap items-center gap-3 text-sm sm:flex-nowrap sm:gap-5 ${stagger(0.16)}`}
 	>
 		<a
 			href="/fundamentals"
-			class="focus-visible:outline-accent inline-flex h-10 shrink-0 cursor-pointer items-center gap-2 rounded-lg rounded-md bg-[#18181b] px-4 text-base font-medium whitespace-nowrap text-white no-underline transition-colors duration-150 hover:bg-[#f56500] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 max-[480px]:h-9 max-[480px]:px-3 max-[480px]:text-sm dark:bg-[#fafafa] dark:text-[#09090b] dark:hover:bg-[#e4e4e7] dark:hover:text-[#09090b]"
+			class="focus-visible:outline-accent inline-flex h-9 shrink-0 cursor-pointer items-center gap-2 rounded-lg rounded-md bg-[#18181b] px-3 text-sm font-medium whitespace-nowrap text-white no-underline transition-colors duration-150 hover:bg-[#f56500] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 sm:h-10 sm:px-4 sm:text-base dark:bg-[#fafafa] dark:text-[#09090b] dark:hover:bg-[#e4e4e7] dark:hover:text-[#09090b]"
 		>
 			Get started
 			<Icon name="right-arrow" size="0.75rem" />
 		</a>
 		<span
-			class="h-4 w-px bg-black/10 max-[480px]:hidden dark:bg-white/10"
+			class="hidden h-4 w-px bg-black/10 sm:block dark:bg-white/10"
 			aria-hidden="true"></span>
 		<a
 			href="#build"
-			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
+			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8]"
 		>
 			Build
 		</a>
 		<a
 			href="#secure"
-			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
+			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8]"
 		>
 			Secure
 		</a>
 		<a
 			href="#accelerate"
-			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
+			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8]"
 		>
 			Accelerate
 		</a>
 		<a
 			href="#changelog"
-			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline transition-colors duration-150 hover:text-[#f56500] focus-visible:outline-2 focus-visible:outline-offset-2 max-[480px]:hidden dark:text-[#d4d4d8] dark:hover:text-[#f56500]"
+			class="focus-visible:outline-accent hidden cursor-pointer text-[#52525b] no-underline hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 sm:inline dark:text-[#d4d4d8]"
 		>
 			Changelog
 		</a>
diff --git a/src/components/landing/PlatformStats.astro b/src/components/landing/PlatformStats.astro
index 875760287169f9e..2b957428ddbccc6 100644
--- a/src/components/landing/PlatformStats.astro
+++ b/src/components/landing/PlatformStats.astro
@@ -1,8 +1,6 @@
 ---
 import { stagger } from "./constants";
 
-// Copy mirrors workers.cloudflare.com verbatim where the slot allows.
-// See `landing-stats-decisions.md` at the repo root for sourcing rationale.
 const stats = [
 	{
 		value: 330,
@@ -37,7 +35,7 @@ const stats = [
 
 <section
 	id="platform"
-	class={`pt-10 pb-12 max-[900px]:pt-8 max-[900px]:pb-8 ${stagger(0.42)}`}
+	class={`pt-8 pb-8 lg:pt-10 lg:pb-12 ${stagger(0.42)}`}
 	aria-labelledby="stats-heading"
 >
 	<div class="mb-4">
@@ -47,12 +45,12 @@ const stats = [
 	</div>
 
 	<div
-		class="grid grid-cols-4 gap-px overflow-visible border border-[#e8e8e8] bg-[#e8e8e8] max-[768px]:grid-cols-2 dark:border-[#2a2a2a] dark:bg-[#2a2a2a]"
+		class="grid grid-cols-2 lg:grid-cols-4 gap-px overflow-visible border border-[#e8e8e8] bg-[#e8e8e8] dark:border-[#2a2a2a] dark:bg-[#2a2a2a]"
 		id="stats-grid"
 	>
 		{
 			stats.map((stat, i) => (
-				<div class="bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark relative flex flex-col justify-between px-5 py-5 transition-colors duration-150">
+				<div class="stat-card bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark relative flex flex-col px-4 py-4 transition-colors duration-150 sm:px-5 sm:py-5">
 					{/* Corner plus marks — all four corners */}
 					<svg
 						width="10"
@@ -174,15 +172,15 @@ const stats = [
 						</span>
 					</p>
 
-					{/* Unit */}
-					<p class="text-accent mb-3 font-mono text-[12px] tracking-wide uppercase">
+					{/* Unit — min-h reserves 2-line height so the divider below lands at the same Y across all cards. text-balance prevents awkward orphan wraps like "REQUESTS/SE | C". */}
+					<p class="text-accent stat-unit mb-3 min-h-[2.4em] text-balance font-mono text-[12px] tracking-wide uppercase">
 						{stat.unit}
 					</p>
 
-					{/* Label + detail */}
+					{/* Label + detail. text-balance on the (1-3 word) label balances the wrap evenly; text-pretty on the longer detail prevents orphans without rebalancing. */}
 					<div class="border-t border-dashed border-[#e8e8e8] pt-3 dark:border-[#2a2a2a]">
 						<div class="space-y-0.5">
-							<p class="text-[15px] leading-snug font-medium text-pretty text-zinc-900 dark:text-zinc-50">
+							<p class="text-[15px] leading-snug font-medium text-balance text-zinc-900 dark:text-zinc-50">
 								{stat.label}
 							</p>
 							<p class="text-[13px] leading-snug text-pretty text-zinc-500 dark:text-zinc-400">
diff --git a/src/components/landing/ProductCard.astro b/src/components/landing/ProductCard.astro
index 8d6a8a3c7e42c6f..826dbb843d23d4f 100644
--- a/src/components/landing/ProductCard.astro
+++ b/src/components/landing/ProductCard.astro
@@ -157,7 +157,7 @@ const iconHoverPalette = getIconHoverPalette(product);
 
 	{/* CTA — visual only; the whole card is the link */}
 	<span
-		class="pc-cta group-hover/product-card:text-accent inline-flex w-fit items-center gap-2 text-sm font-medium text-zinc-600 underline-offset-4 transition-colors duration-150 group-hover/product-card:underline dark:text-zinc-300"
+		class="pc-cta inline-flex w-fit items-center gap-2 text-sm font-medium text-zinc-600 underline-offset-4 group-hover/product-card:underline dark:text-zinc-300"
 	>
 		{cta}
 		<svg
diff --git a/src/components/landing/ProductCardGrid.astro b/src/components/landing/ProductCardGrid.astro
index a9a59d8c7ec3d13..ad23d85693e680b 100644
--- a/src/components/landing/ProductCardGrid.astro
+++ b/src/components/landing/ProductCardGrid.astro
@@ -30,7 +30,7 @@ const { label } = Astro.props;
 		)
 	}
 	<div
-		class="relative grid grid-cols-3 gap-px overflow-visible border border-zinc-200 bg-zinc-200 max-[768px]:grid-cols-1 dark:border-[#2a2a2a] dark:bg-[#2a2a2a]"
+		class="relative grid grid-cols-1 gap-px overflow-visible border border-zinc-200 bg-zinc-200 lg:grid-cols-3 dark:border-[#2a2a2a] dark:bg-[#2a2a2a]"
 	>
 		{/* Plus marks on the four corners */}
 		{
diff --git a/src/components/landing/ProtectSection.astro b/src/components/landing/ProtectSection.astro
index 8453cabc0723fe0..5b8ccd323848f6f 100644
--- a/src/components/landing/ProtectSection.astro
+++ b/src/components/landing/ProtectSection.astro
@@ -82,12 +82,12 @@ const quickLinks = [
 ---
 
 <section
-	class="px-8 pt-16 pb-12 max-[900px]:px-4 max-[900px]:pt-10"
+	class="px-4 pt-10 pb-12 lg:px-8 lg:pt-16"
 	aria-labelledby="protect-heading"
 >
 	<!-- Section header -->
 	<div
-		class="mb-10 flex items-end justify-between gap-6 max-[600px]:flex-col max-[600px]:items-start max-[600px]:gap-4"
+		class="mb-10 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end sm:gap-6"
 	>
 		<div>
 			<div class="mb-3 flex items-center gap-2">
@@ -113,7 +113,7 @@ const quickLinks = [
 		</div>
 		<a
 			href="/cloudflare-one/"
-			class="inline-flex shrink-0 items-center gap-2 rounded-lg border border-black/10 bg-black/2 px-4 py-2 font-mono text-[0.625rem] tracking-widest text-[#6b6b74] uppercase no-underline transition-colors duration-100 hover:bg-black/5 hover:text-[#1a1a1e] max-[600px]:hidden"
+			class="hidden shrink-0 items-center gap-2 rounded-lg border border-black/10 bg-black/2 px-4 py-2 font-mono text-[0.625rem] tracking-widest text-[#6b6b74] uppercase no-underline transition-colors duration-100 hover:bg-black/5 hover:text-[#1a1a1e] sm:inline-flex"
 		>
 			Explore Zero Trust
 			<svg
@@ -139,7 +139,7 @@ const quickLinks = [
 			products.map((p) => (
 				<a
 					href={p.href}
-					class="group focus-visible:outline-accent relative flex items-center gap-6 bg-white/90 px-6 py-5 text-inherit no-underline transition-colors duration-100 hover:bg-zinc-50 focus-visible:outline-2 focus-visible:-outline-offset-2 max-[600px]:flex-col max-[600px]:items-start max-[600px]:gap-2 max-[600px]:px-4 max-[600px]:py-4"
+					class="group focus-visible:outline-accent relative flex flex-col items-start gap-2 bg-white/90 px-4 py-4 text-inherit no-underline transition-colors duration-100 hover:bg-zinc-50 focus-visible:outline-2 focus-visible:-outline-offset-2 sm:flex-row sm:items-center sm:gap-6 sm:px-6 sm:py-5"
 				>
 					{/* Left accent reveal */}
 					<span
@@ -148,7 +148,7 @@ const quickLinks = [
 					/>
 
 					{/* Product name */}
-					<div class="w-[140px] shrink-0 max-[600px]:w-auto">
+					<div class="w-auto shrink-0 sm:w-[140px]">
 						<span class="text-[0.9375rem] leading-tight font-medium text-[#1a1a1e]">
 							{p.name}
 						</span>
@@ -160,12 +160,12 @@ const quickLinks = [
 					</p>
 
 					{/* Detail tags */}
-					<div class="max-w-[200px] shrink-0 text-right font-mono text-[0.5625rem] leading-relaxed tracking-wide text-[#9b9ba4] max-[900px]:hidden">
+					<div class="hidden max-w-[200px] shrink-0 text-right font-mono text-[0.5625rem] leading-relaxed tracking-wide text-[#9b9ba4] lg:block">
 						{p.detail}
 					</div>
 
 					{/* Arrow */}
-					<div class="flex shrink-0 -translate-x-1 items-center opacity-0 transition-[opacity,transform] duration-100 group-hover:translate-x-0 group-hover:opacity-100 max-[600px]:hidden">
+					<div class="hidden shrink-0 -translate-x-1 items-center opacity-0 transition-[opacity,transform] duration-100 group-hover:translate-x-0 group-hover:opacity-100 sm:flex">
 						<svg
 							width="11"
 							height="11"
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index e0ca20fa153e715..1f149cb6f352046 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -1,7 +1,5 @@
 ---
 /**
- * S6: Categorized grid with flair
- *
  * Two categories, three cards each. Cards have:
  * - Large product icon as the visual anchor
  * - Bold scenario text
@@ -76,7 +74,7 @@ const categories = [
 ---
 
 <section
-	class="pt-14 pb-12 max-[900px]:pt-10 max-[900px]:pb-10"
+	class="pt-10 pb-10 lg:pt-14 lg:pb-12"
 	aria-labelledby="s6-heading"
 	id="secure"
 >
diff --git a/src/components/landing/StructuralGrid.astro b/src/components/landing/StructuralGrid.astro
index 7291f813ba8ee04..e97d359e10c3c85 100644
--- a/src/components/landing/StructuralGrid.astro
+++ b/src/components/landing/StructuralGrid.astro
@@ -42,7 +42,7 @@ const marks =
 
 <!-- Plus marks at line intersections -->
 <div
-	class="pointer-events-none absolute inset-0 z-1 [contain:layout_style_paint] max-[1024px]:hidden"
+	class="pointer-events-none absolute inset-0 z-1 hidden [contain:layout_style_paint] lg:block"
 	aria-hidden="true"
 >
 	<!-- Plus marks at each line tier intersection -->
diff --git a/src/components/overrides/Footer.astro b/src/components/overrides/Footer.astro
index 09cd2e7930d02b4..37d8f8ea6ffa912 100644
--- a/src/components/overrides/Footer.astro
+++ b/src/components/overrides/Footer.astro
@@ -21,6 +21,7 @@ const groups = Object.entries({
 			href: "/sponsorships/",
 		},
 		{ text: "Open Source", href: "https://github.com/cloudflare" },
+		{ text: "Cloudflare Research", href: "https://research.cloudflare.com/" },
 	],
 	Support: [
 		{ text: "Help Center", href: "https://support.cloudflare.com/" },
@@ -38,12 +39,17 @@ const groups = Object.entries({
 	],
 	Tools: [
 		{ text: "Cloudflare Radar", href: "https://radar.cloudflare.com/" },
+		{ text: "Cloudflare Labs", href: "https://labs.cloudflare.dev/" },
 		{ text: "Speed Test", href: "https://speed.cloudflare.com/" },
 		{ text: "Is BGP Safe Yet?", href: "https://isbgpsafeyet.com/" },
-		{ text: "RPKI Toolkit", href: "https://rpki.cloudflare.com/" },
 		{ text: "Certificate Transparency", href: "https://ct.cloudflare.com/" },
 	],
 	Community: [
+		{
+			text: "Community forum",
+			href: "https://community.cloudflare.com/",
+			icon: "cloudflare",
+		},
 		{ text: "X", href: "https://x.com/cloudflare", icon: "x.com" },
 		{
 			text: "Discord",
diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index b0488b6a2254f7d..b1ba66a45f82946 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -59,7 +59,7 @@ const productTitle = isHomepage
 			<div class="border-b border-[var(--sidebar-border)] pb-3">
 				<a
 					href="/"
-					class="flex min-h-[2.125rem] w-full cursor-pointer items-center gap-2 rounded-lg bg-[var(--sidebar-hover-bg)] px-3 text-sm font-medium text-[var(--sidebar-text-strong)] no-underline transition-colors hover:bg-[color:var(--sidebar-hover-bg)]/80"
+					class="flex min-h-[2.125rem] w-full cursor-pointer items-center gap-2 rounded-lg px-3 text-sm font-medium text-[var(--sidebar-text-strong)] no-underline transition-colors hover:bg-[color:var(--sidebar-hover-bg)]/80"
 				>
 					<svg
 						width="16"
@@ -71,7 +71,7 @@ const productTitle = isHomepage
 					>
 						<path d="M232,200a8,8,0,0,1-16,0,88.1,88.1,0,0,0-88-88H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,61.66L51.31,96H128A104.11,104.11,0,0,1,232,200Z" />
 					</svg>
-					<span class="truncate">Overview</span>
+					<span class="truncate">Home</span>
 				</a>
 			</div>
 		)
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2143a9cd6957efb..882db013e18393c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,6 +8,7 @@ import PlatformStats from "../components/landing/PlatformStats.astro";
 import BuildFromScratch from "../components/landing/BuildFromScratch.astro";
 import SecureSection from "../components/landing/SecureSection.astro";
 import AccelerateSection from "../components/landing/AccelerateSection.astro";
+import AgentSetup from "../components/landing/AgentSetup.astro";
 import ChangelogSection from "../components/landing/ChangelogSection.astro";
 import "../styles/landing.css";
 
@@ -42,7 +43,7 @@ const sidebar = [
 				collapsed: true,
 				items: [
 					{ label: "Learning paths", link: "/learning-paths/" },
-					{ label: "Directory", link: "/directory/" },
+					{ label: "Use cases", link: "/use-cases/" },
 					{ label: "Terraform", link: "/terraform/" },
 					{ label: "Pulumi", link: "/pulumi/" },
 					{ label: "Reference architecture", link: "/reference-architecture/" },
@@ -242,13 +243,15 @@ const props = {
 				style="padding-inline: var(--l-section-pad); padding-top: var(--l-pad-top);"
 			>
 				<Hero />
-				<PlatformStats />
 
 				<BuildFromScratch />
 
+				<AgentSetup />
+
 				<SecureSection />
 
 				<AccelerateSection />
+				<PlatformStats />
 
 				<ChangelogSection />
 			</main>

From eb7f929032d68bd141300771eba65ecd8e13b2ab Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Wed, 29 Apr 2026 17:36:29 +0100
Subject: [PATCH 18/35] chore: arrow

---
 src/components/landing/AgentSetup.astro       | 5 ++---
 src/components/landing/BuildFromScratch.astro | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/landing/AgentSetup.astro b/src/components/landing/AgentSetup.astro
index 4b92acd74f38039..455f9c4a0f2c92b 100644
--- a/src/components/landing/AgentSetup.astro
+++ b/src/components/landing/AgentSetup.astro
@@ -110,9 +110,9 @@ const CORNERS = [
 					</span>
 				</div>
 				<svg
-					class="agent-setup-cta-arrow absolute right-3 top-1/2 aspect-square h-[78%] -translate-y-1/2 text-zinc-200 dark:text-[#2a2a2a] lg:right-4 lg:h-auto lg:w-1/2"
+					class="agent-setup-cta-arrow absolute right-3 top-1/2 aspect-square h-[78%] text-zinc-200 dark:text-[#2a2a2a] -translate-y-1/2 lg:right-4 lg:h-auto lg:w-1/2"
 					viewBox="-0.293 -0.501 102 102"
-					fill="#FFF"
+					fill="none"
 					stroke="currentColor"
 					stroke-width="1.25"
 					stroke-linejoin="miter"
@@ -210,7 +210,6 @@ const CORNERS = [
 		position: absolute;
 		inset: auto 0 0 0;
 		height: 1px;
-		background: var(--color-accent, #f56500);
 		transform: scaleX(0);
 		transform-origin: center;
 		transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1);
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index 9673074cdaf96c2..d0b313223bfd22d 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -215,7 +215,7 @@ const primitives = [
 						<div class="flex w-full flex-col items-start gap-4 sm:flex-row sm:items-center sm:gap-6">
 							<a
 								href={p.cta.href}
-								class="focus-visible:outline-accent inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-md bg-[#18181b] px-4 py-2 text-sm font-medium text-white no-underline transition-colors duration-150 hover:bg-[#f56500] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-[#fafafa] dark:text-[#09090b] dark:hover:bg-[#e4e4e7] dark:hover:text-[#09090b]"
+								class="focus-visible:outline-accent inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-md border border-zinc-300 bg-transparent px-4 py-2 text-sm font-medium text-zinc-900 no-underline transition-colors duration-150 hover:border-zinc-900 hover:bg-zinc-50 focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-zinc-700 dark:text-zinc-50 dark:hover:border-zinc-300 dark:hover:bg-zinc-900"
 							>
 								{p.cta.label}
 								<svg

From 308d82c0ede05a7de77623d95df51f41fa9fe85e Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Sun, 3 May 2026 13:42:10 +0100
Subject: [PATCH 19/35] style: rework

---
 astro.config.ts                               |  16 +-
 public/pattern.png                            | Bin 0 -> 55714 bytes
 .../landing/AccelerateSection.astro           | 589 ++++++------------
 src/components/landing/AgentSetup.astro       | 175 +-----
 src/components/landing/BuildFromScratch.astro | 246 ++------
 src/components/landing/Button.astro           |  92 +++
 src/components/landing/ChangelogSection.astro | 314 ++--------
 src/components/landing/CommandBlock.astro     |  26 +-
 src/components/landing/CommunityGrid.astro    |  87 +++
 src/components/landing/CornerMarks.astro      |  47 ++
 src/components/landing/Eyebrow.astro          |  28 +
 src/components/landing/FullPageLines.astro    |  12 -
 .../landing/HalftoneBackground.astro          |  44 ++
 src/components/landing/Hero.astro             |  78 +--
 src/components/landing/PlatformStats.astro    | 127 +---
 src/components/landing/ProductCard.astro      | 151 +----
 src/components/landing/ProductCardGrid.astro  |  57 +-
 src/components/landing/ProtectSection.astro   | 207 ------
 src/components/landing/RightArrow.astro       |  52 ++
 src/components/landing/SectionHeading.astro   |  18 +
 src/components/landing/SecureSection.astro    |  53 +-
 src/components/landing/StructuralGrid.astro   |  20 -
 src/components/landing/TabBar.astro           | 287 +++++++++
 src/components/landing/ViewAllLink.astro      |  26 +
 src/components/landing/constants.ts           |   2 -
 src/components/overrides/Head.astro           |   2 +
 src/components/overrides/Header.astro         |  65 +-
 src/components/overrides/Sidebar.astro        |  36 +-
 src/components/overrides/SidebarSublist.astro |   6 +-
 src/pages/index.astro                         |  36 +-
 src/styles/landing.css                        | 173 +++--
 31 files changed, 1347 insertions(+), 1725 deletions(-)
 create mode 100644 public/pattern.png
 create mode 100644 src/components/landing/Button.astro
 create mode 100644 src/components/landing/CommunityGrid.astro
 create mode 100644 src/components/landing/CornerMarks.astro
 create mode 100644 src/components/landing/Eyebrow.astro
 create mode 100644 src/components/landing/HalftoneBackground.astro
 delete mode 100644 src/components/landing/ProtectSection.astro
 create mode 100644 src/components/landing/RightArrow.astro
 create mode 100644 src/components/landing/SectionHeading.astro
 create mode 100644 src/components/landing/TabBar.astro
 create mode 100644 src/components/landing/ViewAllLink.astro

diff --git a/astro.config.ts b/astro.config.ts
index 9b9723730c84ece..7a36e58bd467801 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from "astro/config";
+import { defineConfig, fontProviders } from "astro/config";
 import starlight from "@astrojs/starlight";
 import starlightDocSearch from "@astrojs/starlight-docsearch";
 import starlightImageZoom from "starlight-image-zoom";
@@ -120,6 +120,20 @@ export default defineConfig({
 	experimental: {
 		contentIntellisense: true,
 	},
+	fonts: [
+		{
+			provider: fontProviders.google(),
+			name: "Inter Tight",
+			cssVariable: "--font-inter-tight",
+			// Variable axis — covers every weight referenced in landing.css
+			// (400/500/600/700/800/900). Astro requests the variable file from
+			// Google Fonts when given a range string.
+			weights: ["100 900"],
+			styles: ["normal"],
+			subsets: ["latin"],
+			fallbacks: ["sans-serif"],
+		},
+	],
 	server: {
 		port: 1111,
 	},
diff --git a/public/pattern.png b/public/pattern.png
new file mode 100644
index 0000000000000000000000000000000000000000..d82422818cbaf33c25473ce374f166dd9c72ebbb
GIT binary patch
literal 55714
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

literal 0
HcmV?d00001

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index a99be398bf5111f..1257fb3e151534d 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -1,13 +1,13 @@
 ---
 import { Icon } from "astro-icon/components";
+import CornerMarks from "./CornerMarks.astro";
+import Eyebrow from "./Eyebrow.astro";
 import ProductCard from "./ProductCard.astro";
 import ProductCardGrid from "./ProductCardGrid.astro";
+import RightArrow from "./RightArrow.astro";
+import SectionHeading from "./SectionHeading.astro";
+import ViewAllLink from "./ViewAllLink.astro";
 
-/**
- * Scale: 100% = 1600 ms → 1% = 16 ms.
- * All offsets are 0 so bar widths map directly to the ruler:
- *   400 ms tick = 25%, 800 ms = 50%, 1200 ms = 75%, 1600 ms = 100%.
- */
 const phases = [
 	{
 		id: "dns",
@@ -17,7 +17,7 @@ const phases = [
 		product: "DNS",
 		icon: "dns",
 		href: "/dns/",
-		outcome: "Fastest, most resilient query responses",
+		outcome: "Get the fastest, most resilient query responses",
 		detail:
 			"The world's fastest and most reliable DNS — 11ms average. DNSSEC, wildcard records, proxy control.",
 		cta: "Set up Authoritative DNS",
@@ -49,7 +49,7 @@ const phases = [
 		product: "CDN",
 		icon: "cache",
 		href: "/cache/get-started/",
-		outcome: "Serve from cache, not from origin",
+		outcome: "Make your site faster and stop paying for bandwidth",
 		detail:
 			"CDN caches content in 330+ cities worldwide with cache rules, tiered caching, and zero-configuration setup.",
 		cta: "Set up Cache Rules",
@@ -72,6 +72,7 @@ const phases = [
 		tags: ["Connection Pooling", "Query Caching"],
 		color: "bg-lime-500",
 		colorMuted: "bg-lime-500/20",
+		category: "storage" as const,
 	},
 	{
 		id: "assets",
@@ -81,13 +82,15 @@ const phases = [
 		product: "Images",
 		icon: "images",
 		href: "/images/",
-		outcome: "Streamlined image infrastructure built for scale",
+		outcome:
+			"Easily store, resize, optimize, and serve images all in one place",
 		detail:
 			"Global low-latency delivery, resizing, and AI-powered optimization from 330+ cities.",
 		cta: "Optimize image delivery",
 		tags: ["Transform", "Polish", "WebP/AVIF"],
 		color: "bg-teal-500",
 		colorMuted: "bg-teal-500/20",
+		category: "media" as const,
 	},
 	{
 		id: "scripts",
@@ -97,7 +100,7 @@ const phases = [
 		product: "Zaraz",
 		icon: "zaraz",
 		href: "/zaraz/",
-		outcome: "Move third-party scripts off the main thread",
+		outcome: "Load third-party tools without weighing down web apps",
 		detail:
 			"Load analytics, ads, and pixels server-side. Fewer network requests, faster page loads.",
 		cta: "Move scripts with Zaraz",
@@ -106,56 +109,94 @@ const phases = [
 		colorMuted: "bg-sky-500/20",
 	},
 ];
+
+const CATEGORY_COLOR: Record<string, string> = {
+	compute: "#0a95ff",
+	ai: "#19e306",
+	storage: "#ee0ddb",
+	media: "#9616ff",
+};
+
+const phaseColor = (p: (typeof phases)[number]) =>
+	p.category ? CATEGORY_COLOR[p.category] : "var(--color-accent-100)";
+
+// Two consolidated cross-highlight rules: one for row tint, one for the icon
+// shell on the matching product card. Per-phase colors flow through the
+// `--phase-color` custom property set inline on each element below.
+const rowSelectors = phases
+	.map(
+		(p) =>
+			`.wf-section:has([data-phase="${p.id}"]:hover) [data-phase="${p.id}"].wf-row`,
+	)
+	.join(",\n");
+
+const shellSelectors = phases
+	.map(
+		(p) =>
+			`.wf-section:has([data-phase="${p.id}"]:hover) [data-phase="${p.id}"] .pc-icon-shell`,
+	)
+	.join(",\n");
+
+const crossHighlightCss = `
+${rowSelectors} {
+	background-color: color-mix(in srgb, var(--color-accent-100) 5%, transparent);
+}
+${shellSelectors} {
+	border-color: var(--phase-color);
+	border-style: dashed;
+	background-color: color-mix(in srgb, var(--phase-color) 10%, transparent);
+	color: var(--phase-color);
+}`;
 ---
 
 <section
-	class="pt-10 pb-10"
+	class="wf-section group/wf pt-10 pb-10"
 	aria-labelledby="accelerate-heading"
 	id="accelerate"
+	data-mode="after"
 >
-	<!-- Section header -->
-	<div class="mb-3">
-		<span class="text-accent font-mono text-[13px] tracking-widest uppercase"
-			>Accelerate</span
-		>
-	</div>
-	<h2
-		id="accelerate-heading"
-		class="mb-2 text-2xl leading-[1.1] font-medium -tracking-[0.035em] text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
-	>
-		See where the milliseconds go
-	</h2>
-	<p
-		class="mb-6 text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400"
+	<Eyebrow>Accelerate</Eyebrow>
+	<div
+		class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between sm:gap-6"
 	>
-		Every request is a waterfall of latency. Hover a phase to see which product
-		eliminates it, and toggle to see the compound effect.
-	</p>
+		<div class="min-w-0 flex-1">
+			<SectionHeading id="accelerate-heading" class="mb-2">
+				See where the milliseconds go
+			</SectionHeading>
+			<p
+				class="text-foreground-muted text-sm leading-relaxed text-pretty md:text-lg"
+			>
+				Every request is a waterfall of latency. Hover a phase to see which
+				product eliminates it, and toggle to see the compound effect.
+			</p>
+		</div>
+	</div>
 
-	<!-- Toggle: Without / With Cloudflare -->
 	<div
 		class="mb-5 flex flex-wrap items-center justify-between gap-3 sm:gap-4"
 		role="radiogroup"
 		aria-label="Comparison mode"
 	>
 		<div
-			class="wf-toggle-track relative inline-flex rounded-lg border border-zinc-200 bg-zinc-100 p-1 dark:border-[#2a2a2a] dark:bg-zinc-800/80"
+			class="wf-toggle-track border-border-100 bg-background pointer-events-auto relative z-20 inline-grid shrink-0 grid-cols-2 items-center rounded-full border p-1"
 		>
 			<span
-				id="wf-toggle-slider"
-				class="wf-toggle-slider absolute top-1 bottom-1 left-1 rounded-lg transition-[left,width,background-color] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]"
-				aria-hidden="true"></span>
+				aria-hidden="true"
+				class="group-data-[mode=after]/wf:bg-accent-100 group-data-[mode=before]/wf:border-border-100 pointer-events-none absolute top-1 left-1 h-[calc(100%-8px)] w-[calc(50%-4px)] rounded-full border border-transparent transition-[transform_300ms_cubic-bezier(0.16,1,0.3,1),background-color_500ms_ease-in-out,border-color_500ms_ease-in-out,box-shadow_500ms_ease-in-out] group-data-[mode=after]/wf:translate-x-0 group-data-[mode=after]/wf:shadow-[0_1px_2px_rgba(0,0,0,0.06),0_4px_12px_rgba(0,0,0,0.08)] group-data-[mode=before]/wf:translate-x-full group-data-[mode=before]/wf:bg-transparent group-data-[mode=before]/wf:shadow-none motion-reduce:transition-none"
+			></span>
+
 			<button
 				type="button"
 				id="wf-toggle-after"
 				role="radio"
 				aria-checked="true"
 				tabindex="0"
-				class="wf-toggle-btn wf-toggle-active focus-visible:outline-accent relative z-10 flex min-h-[40px] cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:-outline-offset-2 sm:px-4"
+				class="group/btn focus-visible:outline-accent-100 text-foreground-muted aria-checked:text-light-foreground relative z-10 flex h-10 cursor-pointer items-center justify-center gap-2 rounded-full px-3.5 py-2.5 font-medium -tracking-[0.01em] whitespace-nowrap transition-colors duration-300 ease-out focus-visible:outline-2 focus-visible:outline-offset-2"
 			>
 				<span
-					class="wf-toggle-dot size-2 shrink-0 rounded-full transition-colors duration-200"
-					aria-hidden="true"></span>
+					aria-hidden="true"
+					class="bg-accent-100 group-aria-checked/btn:bg-light-foreground/90 size-2 shrink-0 rounded-full transition-colors duration-300"
+				></span>
 				With Cloudflare
 			</button>
 			<button
@@ -164,68 +205,36 @@ const phases = [
 				role="radio"
 				aria-checked="false"
 				tabindex="-1"
-				class="wf-toggle-btn focus-visible:outline-accent relative z-10 flex min-h-[40px] cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors duration-200 focus-visible:outline-2 focus-visible:-outline-offset-2 sm:px-4"
+				class="group/btn focus-visible:outline-accent-100 hover:bg-foreground/5 text-foreground-muted aria-checked:text-foreground relative z-10 flex h-10 cursor-pointer items-center justify-center gap-2 rounded-full px-3.5 py-2.5 font-medium -tracking-[0.01em] whitespace-nowrap transition-colors duration-300 ease-out focus-visible:outline-2 focus-visible:outline-offset-2"
 			>
 				<span
-					class="wf-toggle-dot size-2 shrink-0 rounded-full transition-colors duration-200"
-					aria-hidden="true"></span>
+					aria-hidden="true"
+					class="bg-foreground-subtle group-aria-checked/btn:bg-foreground size-2 shrink-0 rounded-full transition-colors duration-300"
+				></span>
 				Without Cloudflare
 			</button>
 		</div>
 		<div
-			class="wf-total-label flex items-baseline gap-2 font-mono text-xs text-zinc-500 tabular-nums transition-opacity duration-300 dark:text-zinc-400"
+			class="wf-total-label text-foreground-muted flex items-baseline gap-2 font-mono text-xs tabular-nums transition-opacity duration-300"
 		>
 			<span class="tracking-widest uppercase">Total</span>
-			<span
-				id="wf-total-value"
-				class="font-medium text-zinc-900 tabular-nums dark:text-zinc-100"
-				>~300 ms</span
-			>
+			<span class="text-foreground font-medium tabular-nums">
+				<span class="group-data-[mode=before]/wf:hidden" data-mode-only="after"
+					>~300 ms</span
+				>
+				<span
+					class="hidden group-data-[mode=before]/wf:inline"
+					data-mode-only="before">~2,300 ms</span
+				>
+			</span>
 		</div>
 	</div>
 
-	<!-- Main waterfall container -->
-	<div
-		class="relative overflow-visible border border-zinc-200 dark:border-[#2a2a2a]"
-	>
-		<!-- Corner plus marks -->
-		{
-			[
-				"-top-[5.5px] -left-[5.5px]",
-				"-top-[5.5px] -right-[5.5px]",
-				"-bottom-[5.5px] -left-[5.5px]",
-				"-right-[5.5px] -bottom-[5.5px]",
-			].map((pos) => (
-				<svg
-					width="10"
-					height="10"
-					viewBox="0 0 10 10"
-					class={`pointer-events-none absolute ${pos} z-10`}
-					aria-hidden="true"
-				>
-					<line
-						x1="0"
-						y1="5"
-						x2="10"
-						y2="5"
-						stroke-width="1"
-						class="l-corner-stroke"
-					/>
-					<line
-						x1="5"
-						y1="0"
-						x2="5"
-						y2="10"
-						stroke-width="1"
-						class="l-corner-stroke"
-					/>
-				</svg>
-			))
-		}
+	<div class="border-border-100 relative overflow-visible border">
+		<CornerMarks />
 
-		<!-- Timescale ruler — uses the same grid as waterfall rows so ticks align with bars -->
 		<div
-			class="bg-l-card dark:bg-l-card-dark hidden h-7 items-end gap-4 border-b border-zinc-200 px-5 sm:grid sm:grid-cols-[minmax(220px,1.1fr)_minmax(0,3fr)_auto] dark:border-[#2a2a2a]"
+			class="bg-background border-border-100 hidden h-7 items-end gap-4 border-b px-5 sm:grid sm:grid-cols-[minmax(220px,1.1fr)_minmax(0,3fr)_auto]"
 			aria-hidden="true"
 		>
 			<div></div>
@@ -237,143 +246,127 @@ const phases = [
 							style={`left: ${(ms / 1600) * 100}%`}
 						>
 							<span
-								class="wf-ruler-label mb-1 font-mono text-[9px] tracking-wider text-zinc-400 tabular-nums dark:text-zinc-500"
+								class="wf-ruler-label text-foreground-subtle mb-1 font-mono text-[9px] tracking-wider tabular-nums"
 								data-ms={ms}
 							>
 								{ms === 0 ? "0" : `${ms}ms`}
 							</span>
-							<span class="h-1.5 w-px bg-zinc-200 dark:bg-zinc-700" />
+							<span class="bg-border-100 h-1.5 w-px" />
 						</div>
 					))
 				}
 			</div>
-			<!-- Spacer matching the arrow column width in data rows so ticks align with bars -->
 			<div class="w-3.5"></div>
 		</div>
 
-		<!-- Waterfall rows -->
 		{
 			phases.map((p, i) => (
 				<a
 					href={p.href}
+					aria-label={`${p.phase} — eliminate with ${p.product}`}
 					class:list={[
 						"wf-row group relative grid grid-cols-[1fr] items-center gap-2 px-3 py-3 no-underline transition-colors duration-150",
 						"sm:grid-cols-[minmax(220px,1.1fr)_minmax(0,3fr)_auto] sm:gap-4 sm:px-5",
-						"bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark",
-						"focus-visible:outline-accent focus-visible:outline-2 focus-visible:-outline-offset-2",
-						i > 0 && "border-t border-zinc-200 dark:border-[#2a2a2a]",
+						"bg-background hover:bg-accent-100/5",
+						"focus-visible:outline-accent-100 focus-visible:outline-2 focus-visible:-outline-offset-2",
+						i > 0 && "border-border-100 border-t",
 					]}
 					data-phase={p.id}
+					style={`--phase-color: ${phaseColor(p)};`}
 				>
-					{/* Accent bar — bottom reveal on hover */}
 					<span
-						class="bg-accent pointer-events-none absolute bottom-0 left-0 h-px w-0 transition-[width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:w-full"
+						class="bg-accent-100 pointer-events-none absolute bottom-0 left-0 h-px w-0 transition-[width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:w-full"
 						aria-hidden="true"
 					/>
 
-					{/* Left: phase name + product */}
 					<div class="flex min-w-0 items-center gap-2 sm:gap-3">
-						<span class="group-hover:border-accent/30 group-hover:bg-accent/5 group-hover:text-accent flex size-8 shrink-0 items-center justify-center rounded border border-zinc-200 bg-zinc-100 text-zinc-400 transition-colors duration-150 dark:border-[#2a2a2a] dark:bg-zinc-800 dark:text-zinc-500">
+						<span class="border-border-100 bg-background-muted text-foreground-subtle group-hover:border-accent-100/30 group-hover:bg-accent-100/5 group-hover:text-accent-100 flex size-8 shrink-0 items-center justify-center rounded border transition-colors duration-150">
 							<Icon name={p.icon} size="16px" />
 						</span>
 						<div class="min-w-0">
-							<p class="text-sm leading-tight font-medium text-zinc-800 dark:text-zinc-100">
+							<p class="text-foreground text-sm leading-tight font-medium">
 								{p.phase}
 							</p>
-							<p class="wf-product-label text-accent font-mono text-[11px] tracking-widest uppercase opacity-100 transition-opacity duration-300">
+							<p class="text-accent-100 m-0 max-h-6 overflow-hidden font-mono text-[11px] tracking-widest uppercase opacity-100 transition-[max-height,opacity] duration-300 ease-out group-data-[mode=before]/wf:max-h-0 group-data-[mode=before]/wf:opacity-0 motion-reduce:transition-none">
 								{p.product}
 							</p>
 						</div>
 					</div>
 
-					{/* Center: waterfall bar visualization */}
-					<div class="relative h-5 sm:h-auto sm:self-stretch" aria-hidden="true">
-						{/* Background track */}
-						<div class="absolute inset-0 rounded bg-zinc-100/80 dark:bg-zinc-800/40" />
+					<div
+						class="relative h-5 sm:h-auto sm:self-stretch"
+						aria-hidden="true"
+					>
+						<div class="bg-background-muted absolute inset-0 rounded" />
 
-						{/* Time markers (behind the bar) */}
 						{[25, 50, 75].map((pct) => (
 							<div
-								class="absolute inset-y-0 border-l border-dashed border-zinc-200/50 dark:border-zinc-700/30"
+								class="border-border-100/50 absolute inset-y-0 border-l border-dashed"
 								style={`left: ${pct}%`}
 							/>
 						))}
 
-						{/* Colored bar — full row height */}
 						<div
-							class={`wf-bar wf-bar-before absolute inset-y-0 rounded transition-[left,width,box-shadow] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] ${p.color}`}
-							style={`left: ${p.after.offset}%; width: ${p.after.width}%;`}
-							data-offset-before={p.before.offset}
-							data-width-before={p.before.width}
-							data-offset-after={p.after.offset}
-							data-width-after={p.after.width}
+							class={`wf-bar absolute inset-y-0 rounded transition-[left,width,box-shadow] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] data-[shrunk=true]:animate-[wf-shrink-pulse_0.6s_ease-out] motion-reduce:!transition-none motion-reduce:data-[shrunk=true]:animate-none ${p.color}`}
+							style={`--off-before: ${p.before.offset}%; --w-before: ${p.before.width}%; --off-after: ${p.after.offset}%; --w-after: ${p.after.width}%;`}
+							data-shrunk="false"
 						>
-							<span class="wf-bar-label absolute top-1/2 right-2 hidden -translate-y-1/2 font-mono text-[10px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm sm:inline">
+							<span
+								class:list={[
+									"absolute top-1/2 right-2 hidden -translate-y-1/2 font-mono text-[10px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm group-data-[mode=after]/wf:sm:inline",
+									p.after.width < 6 && "opacity-0",
+								]}
+							>
 								{Math.round(p.after.width * 16)}ms
 							</span>
+							<span
+								class:list={[
+									"absolute top-1/2 right-2 hidden -translate-y-1/2 font-mono text-[10px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm group-data-[mode=before]/wf:sm:inline",
+									p.before.width < 6 && "opacity-0",
+								]}
+							>
+								{Math.round(p.before.width * 16)}ms
+							</span>
 						</div>
 					</div>
 
-					{/* Right: arrow */}
-					<div class="group-hover:text-accent hidden items-center text-zinc-300 transition-colors duration-150 sm:flex dark:text-zinc-600">
-						<svg
-							width="14"
-							height="14"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="1.5"
-							stroke-linecap="round"
-							stroke-linejoin="round"
+					<div class="text-foreground-subtle group-hover:text-accent-100 hidden items-center transition-colors duration-150 sm:flex">
+						<RightArrow
+							strokeWidth={1.5}
 							class="transition-transform duration-150 group-hover:translate-x-0.5"
-							aria-hidden="true"
-						>
-							<line x1="5" y1="12" x2="19" y2="12" />
-							<polyline points="12 5 19 12 12 19" />
-						</svg>
+						/>
 					</div>
 				</a>
 			))
 		}
 
-		<!-- Total bar / savings summary row -->
 		<div
-			class="wf-summary bg-l-card dark:bg-l-card-dark border-t border-zinc-200 px-5 py-3 dark:border-[#2a2a2a]"
+			class="wf-summary bg-background border-border-100 border-t px-5 py-3"
 			aria-live="polite"
 		>
 			<div class="flex items-center justify-between gap-4">
-				{
-					/* Left: label + bar — same mono, uppercase, muted grey as the top "Total" label */
-				}
 				<div
-					class="flex items-center gap-3 font-mono text-xs text-zinc-500 tabular-nums dark:text-zinc-400"
+					class="text-foreground-muted flex items-center gap-3 font-mono text-xs tabular-nums"
 				>
 					<span class="tracking-widest uppercase">Total latency</span>
 					<div
-						class="relative h-1.5 w-28 overflow-hidden rounded-full bg-zinc-100 sm:w-48 dark:bg-zinc-800/60"
+						class="bg-background-muted relative h-1.5 w-28 overflow-hidden rounded-full sm:w-48"
 						role="presentation"
 					>
 						<div
-							id="wf-total-bar"
-							class="bg-accent absolute inset-y-0 left-0 rounded-full transition-[width] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]"
-							style="width: 12%;"
+							class="bg-accent-100 absolute inset-y-0 left-0 w-[12%] rounded-full transition-[width] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-data-[mode=before]/wf:w-[96%]"
 						>
 						</div>
 					</div>
 				</div>
 
-				{
-					/* Right: savings — mirrors the top's `TOTAL ~300 ms` label+value rhythm */
-				}
 				<div
 					id="wf-savings-group"
-					class="hidden items-baseline gap-2 font-mono text-xs text-zinc-500 tabular-nums transition-opacity duration-300 sm:flex dark:text-zinc-400"
+					aria-hidden="false"
+					class="text-foreground-muted hidden items-baseline gap-2 font-mono text-xs tabular-nums transition-opacity duration-300 group-data-[mode=before]/wf:pointer-events-none group-data-[mode=before]/wf:opacity-0 motion-reduce:transition-none sm:flex"
 				>
 					<span class="tracking-widest uppercase">Savings</span>
-					<span
-						id="wf-savings-badge"
-						class="font-medium text-zinc-900 tabular-nums dark:text-zinc-100"
-					>
+					<span class="text-foreground font-medium tabular-nums">
 						87% faster
 					</span>
 				</div>
@@ -381,20 +374,22 @@ const phases = [
 		</div>
 	</div>
 
-	<!-- Section bridge — connects waterfall to product cards -->
-	<h3
-		class="not-content mb-6 pt-12 text-lg font-medium -tracking-tight text-zinc-900 dark:text-zinc-100"
-	>
-		Explore by product
-	</h3>
+	<div class="mb-6 flex items-end justify-between gap-4 pt-12">
+		<h3
+			class="not-content text-foreground text-lg font-medium -tracking-tight"
+		>
+			Explore by product
+		</h3>
+		<ViewAllLink href="/directory/">View all</ViewAllLink>
+	</div>
 
-	<!-- Product detail cards -->
 	<ProductCardGrid>
 		{
 			phases.map((p) => (
 				<div
-					class="wf-product-card flex transition-[background-color] duration-200"
+					class="wf-product-card flex"
 					data-phase={p.id}
+					style={`--phase-color: ${phaseColor(p)};`}
 				>
 					<ProductCard
 						icon={p.icon}
@@ -403,6 +398,7 @@ const phases = [
 						detail={p.detail}
 						href={p.href}
 						cta={p.cta}
+						category={p.category}
 					/>
 				</div>
 			))
@@ -410,255 +406,87 @@ const phases = [
 	</ProductCardGrid>
 </section>
 
-<style>
-	/* Sliding background indicator */
-	.wf-toggle-slider {
-		background: white;
-		box-shadow:
-			inset 0 0 0 1px rgba(0, 0, 0, 0.06),
-			0 1px 2px rgba(0, 0, 0, 0.08);
-	}
-	:root[data-theme="dark"] .wf-toggle-slider {
-		background: #2a2a2a;
-		box-shadow:
-			inset 0 0 0 1px rgba(255, 255, 255, 0.06),
-			0 1px 2px rgba(0, 0, 0, 0.3);
-	}
-
-	/* Toggle button states */
-	.wf-toggle-btn {
-		color: var(--color-zinc-500, #71717a);
-		background: transparent;
-	}
-	:root[data-theme="dark"] .wf-toggle-btn {
-		color: #71717a;
-	}
-	.wf-toggle-btn .wf-toggle-dot {
-		background-color: var(--color-zinc-300, #d4d4d8);
-	}
-	:root[data-theme="dark"] .wf-toggle-btn .wf-toggle-dot {
-		background-color: #52525b;
-	}
-	.wf-toggle-btn.wf-toggle-active {
-		color: var(--color-zinc-900, #18181b);
-	}
-	:root[data-theme="dark"] .wf-toggle-btn.wf-toggle-active {
-		color: var(--color-zinc-100, #f4f4f5);
-	}
-	/* Only the "With Cloudflare" button gets the accent dot */
-	#wf-toggle-after.wf-toggle-active .wf-toggle-dot {
-		background-color: color-mix(in srgb, white 88%, transparent);
-	}
-	#wf-toggle-after.wf-toggle-active {
-		background: var(--color-accent, #f56500);
-		color: white;
-		box-shadow:
-			inset 0 0 0 1px rgba(0, 0, 0, 0.12),
-			0 1px 2px rgba(0, 0, 0, 0.1);
-	}
-	#wf-toggle-before.wf-toggle-active .wf-toggle-dot {
-		background-color: var(--color-zinc-500, #71717a);
-	}
-	:root[data-theme="dark"] #wf-toggle-before.wf-toggle-active .wf-toggle-dot {
-		background-color: #a1a1aa;
-	}
-
-	/* Waterfall row highlight when hovered — also highlights the matching product card */
-	.wf-row[data-highlighted="true"] {
-		background: color-mix(in srgb, var(--color-accent, #f56500) 3%, white);
-	}
-	:root[data-theme="dark"] .wf-row[data-highlighted="true"] {
-		background: color-mix(in srgb, var(--color-accent, #f56500) 5%, #1d1d1d);
-	}
-
-	.wf-product-card:hover,
-	.wf-product-card[data-highlighted="true"] {
-		background: color-mix(in srgb, var(--color-accent, #f56500) 3%, white);
-	}
-	:root[data-theme="dark"] .wf-product-card:hover,
-	:root[data-theme="dark"] .wf-product-card[data-highlighted="true"] {
-		background: color-mix(in srgb, var(--color-accent, #f56500) 5%, #1d1d1d);
-	}
-
-	:global(.wf-product-card .pc-icon-shell) {
-		border-style: solid;
-	}
-	:global(.wf-product-card[data-highlighted="true"] .pc-icon-shell) {
-		background: var(--pc-hover-bg, rgba(245, 101, 0, 0.1));
-		border-color: var(--pc-hover-color, #f56500);
-		border-style: dashed;
-		color: var(--pc-hover-color, #f56500);
-	}
-	:global(
-		:root[data-theme="dark"]
-			.wf-product-card[data-highlighted="true"]
-			.pc-icon-shell
-	) {
-		background: var(--pc-hover-bg-dark, rgba(245, 101, 0, 0.16));
-		border-color: var(--pc-hover-color, #f56500);
-		color: var(--pc-hover-color, #f56500);
-	}
-
-	/* Bar label visibility — hide label if bar is too narrow */
-	.wf-bar .wf-bar-label {
-		opacity: 1;
-		transition: opacity 0.3s ease;
-	}
-
-	/* Pulse on the bar when entering "after" state */
-	.wf-bar.wf-bar-shrunk {
-		animation: wf-shrink-pulse 0.6s ease-out;
-	}
-
+<style
+	is:global
+	set:html={`
 	@keyframes wf-shrink-pulse {
 		0% {
 			box-shadow: 0 0 0 0
-				color-mix(in srgb, var(--color-accent, #f56500) 30%, transparent);
+				color-mix(in srgb, var(--color-accent-100) 30%, transparent);
 		}
 		70% {
 			box-shadow: 0 0 0 4px
-				color-mix(in srgb, var(--color-accent, #f56500) 0%, transparent);
+				color-mix(in srgb, var(--color-accent-100) 0%, transparent);
 		}
 		100% {
 			box-shadow: 0 0 0 0
-				color-mix(in srgb, var(--color-accent, #f56500) 0%, transparent);
+				color-mix(in srgb, var(--color-accent-100) 0%, transparent);
 		}
 	}
 
-	@media (prefers-reduced-motion: reduce) {
-		.wf-bar {
-			transition-duration: 0.01ms !important;
-		}
-		.wf-bar.wf-bar-shrunk {
-			animation: none !important;
-		}
+	.wf-bar {
+		left: var(--off-after);
+		width: var(--w-after);
+	}
+	.wf-section[data-mode="before"] .wf-bar {
+		left: var(--off-before);
+		width: var(--w-before);
 	}
 
-</style>
+	${crossHighlightCss}
+`}
+></style>
 
 <script>
 	function initWaterfall() {
-		const section = document.getElementById("accelerate");
-		if (!section) return;
+		const root = document.getElementById("accelerate");
+		if (!root) return;
+
+		if (root.dataset.wfInit === "true") return;
+		root.dataset.wfInit = "true";
+
 		const prefersReducedMotion = window.matchMedia(
 			"(prefers-reduced-motion: reduce)",
 		).matches;
 
-		// Guard against double-init
-		if (section.dataset.wfInit === "true") return;
-		section.dataset.wfInit = "true";
-
-		const btnBefore = section.querySelector(
-			"#wf-toggle-before",
-		) as HTMLButtonElement | null;
-		const btnAfter = section.querySelector(
-			"#wf-toggle-after",
-		) as HTMLButtonElement | null;
-		const slider = section.querySelector(
-			"#wf-toggle-slider",
-		) as HTMLElement | null;
-		const totalValue = section.querySelector(
-			"#wf-total-value",
-		) as HTMLElement | null;
-		const totalBar = section.querySelector(
-			"#wf-total-bar",
-		) as HTMLElement | null;
-		const savingsBadge = section.querySelector(
-			"#wf-savings-badge",
-		) as HTMLElement | null;
-		const savingsGroup = section.querySelector(
-			"#wf-savings-group",
-		) as HTMLElement | null;
-		const bars = section.querySelectorAll<HTMLElement>(".wf-bar-before");
-		const productLabels =
-			section.querySelectorAll<HTMLElement>(".wf-product-label");
-		const rows = section.querySelectorAll<HTMLElement>(".wf-row");
-		const cards = section.querySelectorAll<HTMLElement>(".wf-product-card");
+		const btnBefore =
+			root.querySelector<HTMLButtonElement>("#wf-toggle-before");
+		const btnAfter = root.querySelector<HTMLButtonElement>("#wf-toggle-after");
+		const savingsGroup = root.querySelector<HTMLElement>("#wf-savings-group");
+		const bars = root.querySelectorAll<HTMLElement>(".wf-bar");
+		const totalParts = root.querySelectorAll<HTMLElement>("[data-mode-only]");
 
 		let isAfter = true;
 
-		/** Position the sliding indicator behind the active button */
-		function positionSlider(activeBtn: HTMLElement | null) {
-			if (!slider || !activeBtn) return;
-			const track = slider.parentElement;
-			if (!track) return;
-			const trackRect = track.getBoundingClientRect();
-			const btnRect = activeBtn.getBoundingClientRect();
-			slider.style.left = `${btnRect.left - trackRect.left}px`;
-			slider.style.width = `${btnRect.width}px`;
-		}
-
-		// Set initial slider position
-		requestAnimationFrame(() => positionSlider(btnAfter));
-
-		function setMode(after: boolean) {
+		const setMode = (after: boolean) => {
 			isAfter = after;
 
-			// Update toggle buttons
+			root.dataset.mode = after ? "after" : "before";
+
 			if (btnBefore && btnAfter) {
-				btnBefore.classList.toggle("wf-toggle-active", !after);
-				btnAfter.classList.toggle("wf-toggle-active", after);
 				btnBefore.setAttribute("aria-checked", String(!after));
 				btnAfter.setAttribute("aria-checked", String(after));
 				btnBefore.setAttribute("tabindex", after ? "-1" : "0");
 				btnAfter.setAttribute("tabindex", after ? "0" : "-1");
-				positionSlider(after ? btnAfter : btnBefore);
 			}
 
-			// Show product names only in "With Cloudflare" state
-			productLabels.forEach((label) => {
-				if (after) {
-					label.style.display = "block";
-					label.style.opacity = "1";
-				} else {
-					label.style.display = "none";
-					label.style.opacity = "0";
-				}
+			if (savingsGroup) {
+				savingsGroup.setAttribute("aria-hidden", String(!after));
+			}
+
+			totalParts.forEach((el) => {
+				const active = el.dataset.modeOnly === (after ? "after" : "before");
+				el.setAttribute("aria-hidden", String(!active));
 			});
 
-			// Animate bars
 			bars.forEach((bar) => {
-				const offset = after
-					? bar.dataset.offsetAfter
-					: bar.dataset.offsetBefore;
-				const width = after ? bar.dataset.widthAfter : bar.dataset.widthBefore;
-				bar.style.left = `${offset}%`;
-				bar.style.width = `${width}%`;
-
-				// Update label text
-				const label = bar.querySelector(".wf-bar-label");
-				if (label && width) {
-					const ms = Math.round(parseFloat(width) * 16);
-					label.textContent = `${ms}ms`;
-					// Hide label if bar too narrow
-					(label as HTMLElement).style.opacity =
-						parseFloat(width) < 6 ? "0" : "1";
-				}
-
-				// Pulse effect on shrink
+				bar.dataset.shrunk = "false";
+				void bar.offsetWidth;
 				if (after && !prefersReducedMotion) {
-					bar.classList.remove("wf-bar-shrunk");
-					void bar.offsetWidth; // force reflow
-					bar.classList.add("wf-bar-shrunk");
-				} else {
-					bar.classList.remove("wf-bar-shrunk");
+					bar.dataset.shrunk = "true";
 				}
 			});
-
-			// Update total bar + label
-			if (totalBar) {
-				totalBar.style.width = after ? "12%" : "96%";
-			}
-			if (totalValue) {
-				totalValue.textContent = after ? "~300 ms" : "~2,300 ms";
-			}
-			if (savingsBadge) {
-				savingsBadge.textContent = "87% faster";
-			}
-			if (savingsGroup) {
-				savingsGroup.classList.toggle("hidden", !after);
-			}
-		}
+		};
 
 		const onBeforeClick = () => setMode(false);
 		const onAfterClick = () => setMode(true);
@@ -700,43 +528,9 @@ const phases = [
 
 		setMode(true);
 
-		// Cross-highlight: hovering a waterfall row highlights the matching product card and vice versa
-		function highlightPhase(phaseId: string | null) {
-			rows.forEach((row) => {
-				const match = row.dataset.phase === phaseId;
-				row.setAttribute("data-highlighted", String(match && phaseId !== null));
-			});
-			cards.forEach((card) => {
-				const match = card.dataset.phase === phaseId;
-				card.setAttribute(
-					"data-highlighted",
-					String(match && phaseId !== null),
-				);
-			});
-		}
-
-		rows.forEach((row) => {
-			row.addEventListener("mouseenter", () =>
-				highlightPhase(row.dataset.phase ?? null),
-			);
-			row.addEventListener("mouseleave", () => highlightPhase(null));
-		});
-		cards.forEach((card) => {
-			card.addEventListener("mouseenter", () =>
-				highlightPhase(card.dataset.phase ?? null),
-			);
-			card.addEventListener("mouseleave", () => highlightPhase(null));
-		});
-
-		// Re-position slider on resize
-		const onResize = () => positionSlider(isAfter ? btnAfter : btnBefore);
-		window.addEventListener("resize", onResize);
-
-		// Cleanup on page leave (for Astro view transitions)
 		document.addEventListener(
 			"astro:before-swap",
 			() => {
-				window.removeEventListener("resize", onResize);
 				btnBefore?.removeEventListener("click", onBeforeClick);
 				btnAfter?.removeEventListener("click", onAfterClick);
 				btnBefore?.removeEventListener("keydown", onToggleKeyDown);
@@ -746,7 +540,6 @@ const phases = [
 		);
 	}
 
-	// Initialize on both DOMContentLoaded and astro:page-load to cover all scenarios
 	if (document.readyState === "loading") {
 		document.addEventListener("DOMContentLoaded", initWaterfall);
 	} else {
diff --git a/src/components/landing/AgentSetup.astro b/src/components/landing/AgentSetup.astro
index 455f9c4a0f2c92b..b58b72c62d5e392 100644
--- a/src/components/landing/AgentSetup.astro
+++ b/src/components/landing/AgentSetup.astro
@@ -1,6 +1,10 @@
 ---
-
+import { Icon } from "@astrojs/starlight/components";
 import CommandBlock from "./CommandBlock.astro";
+import CornerMarks from "./CornerMarks.astro";
+import HalftoneBackground from "./HalftoneBackground.astro";
+import RightArrow from "./RightArrow.astro";
+import SectionHeading from "./SectionHeading.astro";
 
 const PROMPT = "Fetch https://developers.cloudflare.com/agent-setup/prompt.md";
 
@@ -18,71 +22,28 @@ const AGENTS = [
 	},
 	{ id: "windsurf", label: "Windsurf", href: "/agent-setup/windsurf/" },
 ];
-
-const CORNERS = [
-	"-top-[5.5px] -left-[5.5px]",
-	"-top-[5.5px] -right-[5.5px]",
-	"-bottom-[5.5px] -left-[5.5px]",
-	"-right-[5.5px] -bottom-[5.5px]",
-];
 ---
 
 <section
-	id="agents"
+	id="agent-setup"
 	class="pt-10 pb-6 lg:pt-14"
 	aria-labelledby="agents-heading"
 >
-	<div class="mb-5">
-		<span class="text-accent font-mono text-[13px] tracking-[0.18em] uppercase">
-			Agents
-		</span>
-	</div>
+	<div class="border-border-100 relative overflow-visible border">
+		<CornerMarks />
 
-	<div class="relative border border-zinc-200 dark:border-[#2a2a2a]">
-		{
-			CORNERS.map((pos) => (
-				<svg
-					width="10"
-					height="10"
-					viewBox="0 0 10 10"
-					class={`pointer-events-none absolute ${pos} z-10`}
-					aria-hidden="true"
-				>
-					<line
-						x1="0"
-						y1="5"
-						x2="10"
-						y2="5"
-						stroke-width="1"
-						class="l-corner-stroke"
-					/>
-					<line
-						x1="5"
-						y1="0"
-						x2="5"
-						y2="10"
-						stroke-width="1"
-						class="l-corner-stroke"
-					/>
-				</svg>
-			))
-		}
-
-		<div class="grid grid-cols-12 gap-px bg-zinc-200 dark:bg-[#2a2a2a]">
+		<div class="bg-border-100 grid grid-cols-12 gap-px">
 			<div
-				class="bg-l-card dark:bg-l-card-dark col-span-12 flex min-w-0 flex-col gap-3 p-8 lg:col-span-8"
+				class="bg-background col-span-12 flex min-w-0 flex-col gap-3 p-8 lg:col-span-8"
 			>
-				<h2
-					id="agents-heading"
-					class="mb-1 text-2xl leading-[1.1] font-medium -tracking-[0.035em] text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
-				>
+				<SectionHeading id="agents-heading">
 					Build with your favorite AI agent
-				</h2>
+				</SectionHeading>
+
 				<p
-					class="mt-0 mb-2 max-w-[50ch] text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400"
+					class="text-foreground-muted mt-0 mb-2 max-w-[50ch] text-sm leading-relaxed text-pretty md:text-base"
 				>
-					Paste this prompt into any AI coding agent to install Cloudflare's
-					official tooling.
+					Paste into any AI coding agent to install Cloudflare agent tooling:
 				</p>
 				<CommandBlock
 					id="agents-setup-prompt"
@@ -91,47 +52,38 @@ const CORNERS = [
 					class="mt-auto min-w-0"
 				/>
 			</div>
-
-			{/* Top row, cols 9-12: CTA */}
 			<a
 				href={ALL_GUIDES_HREF}
-				class="agent-setup-cta bg-l-card dark:bg-l-card-dark hover:bg-l-card-hover dark:hover:bg-l-card-hover-dark group relative col-span-12 flex min-w-0 flex-row items-center justify-between overflow-hidden px-8 py-6 no-underline transition-colors duration-150 focus-visible:outline-none lg:col-span-4 lg:flex-col lg:items-stretch lg:p-8"
+				class="bg-background focus-visible:outline-accent-100 relative col-span-12 flex min-w-0 flex-row items-center justify-between overflow-hidden px-8 py-6 no-underline transition-colors duration-150 focus-visible:bg-[#FCEDE0] focus-visible:outline-2 focus-visible:-outline-offset-2 lg:col-span-4 lg:flex-col lg:items-stretch lg:p-8 dark:focus-visible:bg-[#2A2118]"
 			>
+				<HalftoneBackground />
+
 				<div class="relative z-[1] flex flex-col gap-2.5">
 					<span
-						class="font-mono text-xs tracking-[0.18em] text-zinc-500 uppercase dark:text-zinc-400"
+						class="text-accent-100 hidden font-mono text-[11px] tracking-widest uppercase lg:block"
 					>
-						More
+						All agents
 					</span>
 					<span
-						class="max-w-[12ch] text-base leading-tight font-medium -tracking-[0.018em] text-zinc-900 md:text-xl dark:text-zinc-50"
+						class="text-foreground max-w-[14ch] text-lg leading-tight font-medium md:text-xl"
 					>
 						Browse all setup guides
 					</span>
 				</div>
-				<svg
-					class="agent-setup-cta-arrow absolute right-3 top-1/2 aspect-square h-[78%] text-zinc-200 dark:text-[#2a2a2a] -translate-y-1/2 lg:right-4 lg:h-auto lg:w-1/2"
-					viewBox="-0.293 -0.501 102 102"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="1.25"
-					stroke-linejoin="miter"
-					stroke-linecap="butt"
+
+				<span
+					class="bg-accent-100 text-light-foreground relative z-[1] inline-flex shrink-0 items-center justify-center gap-2 rounded-full px-4 py-2 text-sm font-medium lg:self-end"
 					aria-hidden="true"
 				>
-					<path
-						vector-effect="non-scaling-stroke"
-						d="M0.707092 79.3255L21.97 100.489L70.7071 51.5225L70.7071 100.499L100.707 100.499L100.707 0.499451L0.707149 0.499448L0.707145 30.4994L49.3046 30.4994L0.707092 79.3255Z"
-					></path>
-				</svg>
+					View all
+					<Icon name="right-arrow" size="1rem" />
+				</span>
 			</a>
-
-			{/* Bottom row: 6 agent tiles */}
 			{
 				AGENTS.map((agent) => (
 					<a
 						href={agent.href}
-						class="agent-setup-tile bg-l-card dark:bg-l-card-dark hover:bg-l-card-hover dark:hover:bg-l-card-hover-dark group relative col-span-6 flex min-h-[9.5rem] min-w-0 flex-col items-start justify-between gap-5 px-5 py-6 no-underline transition-colors duration-150 focus-visible:outline-none sm:col-span-4 lg:col-span-2"
+						class="agent-setup-tile bg-background focus-visible:bg-background-subtle focus-visible:outline-accent-100 group relative col-span-6 flex min-h-[9.5rem] min-w-0 flex-col items-start justify-between gap-5 px-5 py-6 no-underline transition-colors duration-150 focus-visible:outline-2 focus-visible:-outline-offset-2 sm:col-span-4 lg:col-span-2"
 						aria-label={`${agent.label} setup guide`}
 					>
 						<span
@@ -154,77 +106,18 @@ const CORNERS = [
 							/>
 						</span>
 						<div class="flex flex-col gap-1">
-							<span class="text-[15px] leading-snug font-medium -tracking-[0.012em] text-zinc-900 dark:text-zinc-50">
+							<span class="text-foreground text-[15px] leading-snug font-medium -tracking-[0.012em]">
 								{agent.label}
 							</span>
 						</div>
-						<svg
-							class="absolute top-5 right-5 text-zinc-300 transition duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:translate-x-[2px] group-hover:text-zinc-900 group-focus-visible:translate-x-[2px] group-focus-visible:text-zinc-900 motion-reduce:transition-none dark:text-zinc-600 dark:group-hover:text-zinc-50 dark:group-focus-visible:text-zinc-50"
-							width="14"
-							height="14"
-							viewBox="0 0 24 24"
-							fill="none"
-							aria-hidden="true"
-						>
-							<polyline
-								points="9 6 15 12 9 18"
-								stroke="currentColor"
-								stroke-width="1.7"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg>
+						<RightArrow
+							variant="chevron"
+							strokeWidth={1.7}
+							class="text-foreground-subtle group-hover:text-foreground group-focus-visible:text-foreground absolute top-5 right-5 transition duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:translate-x-[2px] group-focus-visible:translate-x-[2px] motion-reduce:transition-none"
+						/>
 					</a>
 				))
 			}
 		</div>
 	</div>
 </section>
-
-<style>
-	/*
-	 * Hide the decorative diagonal arrow between 1024px and 1399px.
-	 * In that range the CTA card is in flex-col mode but the column is
-	 * narrow enough that the arrow either crowds the text or sits in
-	 * awkward whitespace. Below 1024px the card is in flex-row mode
-	 * (arrow is height-sized and looks balanced); at 1400px+ the
-	 * column is wide enough for the half-width decoration to land
-	 * cleanly. Using a plain @media rule here so the cascade is
-	 * predictable regardless of Tailwind utility ordering.
-	 */
-	@media (min-width: 1024px) and (max-width: 1399.98px) {
-		.agent-setup-cta-arrow {
-			display: none;
-		}
-	}
-
-	/*
-	 * Hover affordance — a 1px accent rail along the bottom edge of each
-	 * cell that grows from centre on hover or focus-visible. Reuses the
-	 * rail vocabulary already used in AccelerateSection so this section
-	 * speaks the same hover language as the rest of the landing page.
-	 */
-	.agent-setup-tile::after,
-	.agent-setup-cta::after {
-		content: "";
-		position: absolute;
-		inset: auto 0 0 0;
-		height: 1px;
-		transform: scaleX(0);
-		transform-origin: center;
-		transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1);
-		pointer-events: none;
-	}
-	.agent-setup-tile:hover::after,
-	.agent-setup-tile:focus-visible::after,
-	.agent-setup-cta:hover::after,
-	.agent-setup-cta:focus-visible::after {
-		transform: scaleX(1);
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.agent-setup-tile::after,
-		.agent-setup-cta::after {
-			transition: none;
-		}
-	}
-</style>
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index d0b313223bfd22d..cc164dff62aaa39 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -1,6 +1,12 @@
 ---
 import { Icon } from "astro-icon/components";
 import CommandBlock from "./CommandBlock.astro";
+import CornerMarks from "./CornerMarks.astro";
+import Button from "./Button.astro";
+import Eyebrow from "./Eyebrow.astro";
+import RightArrow from "./RightArrow.astro";
+import SectionHeading from "./SectionHeading.astro";
+import TabBar from "./TabBar.astro";
 
 const primitives = [
 	{
@@ -20,9 +26,8 @@ const primitives = [
 		},
 		tags: [
 			{ label: "Workers", href: "/workers/" },
-			{ label: "Pages", href: "/pages/" },
 			{ label: "Containers", href: "/containers/" },
-			{ label: "Workflows", href: "/workflows/" },
+			{ label: "Durable Objects", href: "/durable-objects/" },
 			{ label: "Queues", href: "/queues/" },
 		],
 	},
@@ -41,7 +46,7 @@ const primitives = [
 		tags: [
 			{ label: "Workers AI", href: "/workers-ai/" },
 			{ label: "AI Gateway", href: "/ai-gateway/" },
-			{ label: "AI Agents", href: "/agents/" },
+			{ label: "Agents", href: "/agents/" },
 			{ label: "Vectorize", href: "/vectorize/" },
 			{ label: "Browser Rendering", href: "/browser-rendering/" },
 		],
@@ -59,6 +64,7 @@ const primitives = [
 		command: "npx wrangler d1 create my-database",
 		cta: { label: "Get started with D1", href: "/d1/get-started/" },
 		tags: [
+			{ label: "R2", href: "/r2/" },
 			{ label: "D1", href: "/d1/" },
 			{ label: "KV", href: "/kv/" },
 			{ label: "Hyperdrive", href: "/hyperdrive/" },
@@ -71,13 +77,16 @@ const primitives = [
 		iconColor: "#9616ff",
 		iconBg: "rgba(150, 22, 255, 0.1)",
 		iconBgDark: "rgba(150, 22, 255, 0.22)",
-		heading: "Store anything, serve everywhere",
+		heading: "Build media pipelines without infrastructure headaches",
 		description:
-			"Scalable, durable, affordable object storage without egress fees, image optimization, and live and on-demand video streaming — store, transform, and deliver from Cloudflare's network.",
-		command: "npx wrangler r2 bucket create my-bucket",
-		cta: { label: "Get started with R2", href: "/r2/get-started/" },
+			"Cloudflare Images helps teams build scalable, reliable media pipelines to store, optimize, and deliver images.",
+		command:
+			"curl --request POST https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1",
+		cta: {
+			label: "Get started with Images",
+			href: "/images/get-started/introduction/",
+		},
 		tags: [
-			{ label: "R2", href: "/r2/" },
 			{ label: "Images", href: "/images/" },
 			{ label: "Stream", href: "/stream/" },
 			{ label: "Realtime", href: "/realtime/" },
@@ -86,106 +95,32 @@ const primitives = [
 ];
 ---
 
-<section
-	class="pt-10 pb-6 lg:pt-14"
-	aria-labelledby="build-heading"
-	id="build"
->
-	<div class="mb-3">
-		<span class="text-accent font-mono text-[13px] tracking-widest uppercase"
-			>Build</span
-		>
-	</div>
-	<h2
-		id="build-heading"
-		class="mb-8 text-2xl leading-[1.1] font-medium -tracking-[0.035em] text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
-	>
+<section class="pt-10 pb-6 lg:pt-14" aria-labelledby="build-heading" id="build">
+	<Eyebrow>Build</Eyebrow>
+	<SectionHeading id="build-heading" class="mb-8">
 		Powerful primitives, seamlessly integrated
-	</h2>
+	</SectionHeading>
 
-	<div
-		class="relative overflow-visible border border-zinc-200 dark:border-[#2a2a2a]"
-		id="build-tabs-root"
-	>
-		<!-- Corner plus marks -->
-		{
-			[
-				"-top-[5.5px] -left-[5.5px]",
-				"-top-[5.5px] -right-[5.5px]",
-				"-bottom-[5.5px] -left-[5.5px]",
-				"-right-[5.5px] -bottom-[5.5px]",
-			].map((pos) => (
-				<svg
-					width="10"
-					height="10"
-					viewBox="0 0 10 10"
-					class={`pointer-events-none absolute ${pos} z-10`}
-					aria-hidden="true"
-				>
-					<line
-						x1="0"
-						y1="5"
-						x2="10"
-						y2="5"
-						stroke-width="1"
-						class="l-corner-stroke"
-					/>
-					<line
-						x1="5"
-						y1="0"
-						x2="5"
-						y2="10"
-						stroke-width="1"
-						class="l-corner-stroke"
-					/>
-				</svg>
-			))
-		}
+	<div class="border-border-100 relative overflow-visible border">
+		<CornerMarks />
 
-		<!-- Tab bar -->
-		<div
-			class="flex border-b border-zinc-200 bg-zinc-100/80 dark:border-[#2a2a2a] dark:bg-zinc-900/60"
-			role="tablist"
+		<TabBar
+			name="build"
+			variant="underline"
 			aria-label="Build primitives"
-		>
-			{
-				primitives.map((p, i) => (
-					<button
-						role="tab"
-						type="button"
-						aria-selected={i === 0 ? "true" : "false"}
-						aria-controls={`build-panel-${p.id}`}
-						id={`build-tab-${p.id}`}
-						class={[
-							"build-tab group relative flex shrink-0 items-center gap-2 px-5 py-3",
-							"text-sm font-medium -tracking-[0.005em]",
-							"cursor-pointer transition-colors duration-150 select-none",
-							"border-r border-zinc-200 last:border-r-0 dark:border-[#2a2a2a]",
-							"focus-visible:outline-accent focus-visible:outline-2 focus-visible:-outline-offset-2",
-							i === 0
-								? "build-tab-active dark:text-accent text-zinc-900"
-								: "build-tab-inactive",
-						].join(" ")}
-					>
-						{p.label}
-						<span
-							class={`bg-accent pointer-events-none absolute bottom-0 left-0 h-0.5 transition-[width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] ${i === 0 ? "w-full" : "w-0"}`}
-							aria-hidden="true"
-						/>
-					</button>
-				))
-			}
-		</div>
+			tabs={primitives.map((p) => ({ id: p.id, label: p.label }))}
+		/>
 
-		<!-- Panels -->
 		{
 			primitives.map((p, i) => (
 				<div
 					role="tabpanel"
 					id={`build-panel-${p.id}`}
 					aria-labelledby={`build-tab-${p.id}`}
+					data-tabbar="build"
+					data-tab-id={p.id}
 					hidden={i !== 0}
-					class="bg-l-card dark:bg-l-card-dark p-5 sm:p-8"
+					class="bg-background p-5 sm:p-8"
 				>
 					<div class="w-full">
 						<div class="mb-4 flex items-center gap-3">
@@ -195,15 +130,14 @@ const primitives = [
 							>
 								<Icon name={p.icon} size="16px" />
 							</div>
-							<h3 class="text-base leading-snug font-medium text-zinc-900 md:text-lg dark:text-zinc-50">
+							<h3 class="text-foreground text-base leading-snug font-medium md:text-lg">
 								{p.heading}
 							</h3>
 						</div>
-						<p class="mb-6 text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400">
+						<p class="text-foreground-muted mb-6 text-sm leading-relaxed md:text-base">
 							{p.description}
 						</p>
 
-						{/* Command block — shared CommandBlock component */}
 						<CommandBlock
 							id={`build-cmd-${p.id}`}
 							command={p.command}
@@ -211,45 +145,24 @@ const primitives = [
 							class="mb-6 max-w-[680px]"
 						/>
 
-						{/* CTA + tags row */}
 						<div class="flex w-full flex-col items-start gap-4 sm:flex-row sm:items-center sm:gap-6">
-							<a
-								href={p.cta.href}
-								class="focus-visible:outline-accent inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-md border border-zinc-300 bg-transparent px-4 py-2 text-sm font-medium text-zinc-900 no-underline transition-colors duration-150 hover:border-zinc-900 hover:bg-zinc-50 focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-zinc-700 dark:text-zinc-50 dark:hover:border-zinc-300 dark:hover:bg-zinc-900"
-							>
-								{p.cta.label}
-								<svg
-									width="12"
-									height="12"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									class="shrink-0"
-									aria-hidden="true"
-								>
-									<>
-										<line x1="5" y1="12" x2="19" y2="12" />
-										<polyline points="12 5 19 12 12 19" />
-									</>
-								</svg>
-							</a>
-							<p class="relative top-px min-w-0 flex-1 text-sm text-zinc-500 dark:text-zinc-400">
+							<Button href={p.cta.href} variant="secondary" size="md">
+								<span class="inline-flex items-center gap-2">
+									{p.cta.label}
+									<RightArrow size={12} />
+								</span>
+							</Button>
+							<p class="text-foreground-muted relative top-px min-w-0 flex-1 text-sm">
 								{p.tags.map((tag, idx) => (
 									<span class="inline-flex items-center">
 										<a
 											href={tag.href}
-											class="text-zinc-600 no-underline hover:underline hover:underline-offset-4 dark:text-zinc-300"
+											class="text-foreground no-underline hover:underline hover:underline-offset-4"
 										>
 											{tag.label}
 										</a>
 										{idx < p.tags.length - 1 && (
-											<span
-												class="mx-1.5 text-zinc-300 dark:text-zinc-600"
-												aria-hidden="true"
-											>
+											<span class="text-border-100 mx-1.5" aria-hidden="true">
 												·
 											</span>
 										)}
@@ -264,84 +177,13 @@ const primitives = [
 	</div>
 </section>
 
-<style is:global>
-	.build-tab-active {
-		background: var(--color-l-card);
-	}
-	.build-tab-inactive {
-		background: transparent;
-		color: #52525b;
-	}
-	:root[data-theme="dark"] .build-tab-inactive {
-		color: #a1a1aa;
-	}
-	.build-tab-inactive:hover {
-		background: var(--color-l-card);
-		color: #18181b;
-	}
-	:root[data-theme="dark"] .build-tab-active {
-		background: var(--color-l-card-dark);
-	}
-	:root[data-theme="dark"] .build-tab-inactive:hover {
-		background: var(--color-l-card-dark);
-		color: #fafafa;
-	}
-
+<style>
 	.build-panel-icon {
 		color: var(--build-icon-color);
 		border-color: var(--build-icon-color);
 		background: var(--build-icon-bg);
 	}
-	:root[data-theme="dark"] .build-panel-icon {
+	:global(:root[data-theme="dark"]) .build-panel-icon {
 		background: var(--build-icon-bg-dark);
 	}
 </style>
-
-<script>
-	const root = document.getElementById("build-tabs-root");
-	if (root) {
-		const tabs = Array.from(
-			root.querySelectorAll<HTMLButtonElement>("[role=tab]"),
-		);
-		const panels = Array.from(
-			root.querySelectorAll<HTMLElement>("[role=tabpanel]"),
-		);
-		function activate(idx: number) {
-			tabs.forEach((tab, i) => {
-				const active = i === idx;
-				tab.setAttribute("aria-selected", String(active));
-				tab.classList.toggle("build-tab-active", active);
-				tab.classList.toggle("text-zinc-900", active);
-				tab.classList.toggle("dark:text-accent", active);
-				tab.classList.toggle("build-tab-inactive", !active);
-				const bar = tab.querySelector("span:last-child") as HTMLElement | null;
-				if (bar) {
-					bar.classList.toggle("w-full", active);
-					bar.classList.toggle("w-0", !active);
-				}
-			});
-			panels.forEach((p, i) => {
-				if (i === idx) p.removeAttribute("hidden");
-				else p.setAttribute("hidden", "");
-			});
-		}
-		tabs.forEach((tab, i) => {
-			tab.addEventListener("click", () => activate(i));
-			tab.addEventListener("keydown", (e: KeyboardEvent) => {
-				if (e.key === "ArrowRight") {
-					e.preventDefault();
-					const n = (i + 1) % tabs.length;
-					activate(n);
-					tabs[n].focus();
-				}
-				if (e.key === "ArrowLeft") {
-					e.preventDefault();
-					const n = (i - 1 + tabs.length) % tabs.length;
-					activate(n);
-					tabs[n].focus();
-				}
-			});
-		});
-	}
-	// Copy behavior is now owned by CommandBlock.astro — see ./CommandBlock.astro
-</script>
diff --git a/src/components/landing/Button.astro b/src/components/landing/Button.astro
new file mode 100644
index 000000000000000..ee006b8a12fdf79
--- /dev/null
+++ b/src/components/landing/Button.astro
@@ -0,0 +1,92 @@
+---
+type Variant = "primary" | "secondary" | "ghost";
+type Size = "lg" | "md" | "sm";
+
+interface Props {
+	href?: string;
+	variant?: Variant;
+	size?: Size;
+	id?: string;
+	type?: "button" | "submit" | "reset";
+	class?: string;
+	target?: string;
+	rel?: string;
+	"aria-label"?: string;
+}
+
+const {
+	href,
+	variant = "primary",
+	size = "md",
+	id,
+	type = "button",
+	class: className = "",
+	target,
+	rel,
+	"aria-label": ariaLabel,
+} = Astro.props;
+
+const base = [
+	"relative shrink-0 isolate inline-flex items-center justify-center",
+	"origin-center gap-2 whitespace-nowrap font-medium no-underline",
+	"outline-1 outline-transparent outline-offset-2",
+	"transition-[scale,translate] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] duration-[160ms]",
+	"focus-visible:ring-[3px] focus-visible:ring-accent-100/50",
+	"disabled:pointer-events-none disabled:opacity-50",
+	"before:content-[''] before:absolute before:-inset-[1px] before:opacity-0 before:rounded-[inherit] before:pointer-events-none before:z-[3]",
+	"before:bg-current before:transition-opacity before:duration-[160ms] before:ease-[cubic-bezier(0.55,0.085,0.68,0.53)]",
+	"active:before:opacity-[0.26] active:before:transition-none",
+	"after:content-[''] after:absolute after:-inset-[1px] after:opacity-0 after:rounded-[inherit] after:pointer-events-none after:z-[2]",
+	"after:border after:border-current",
+	"after:transition-opacity after:duration-[600ms] after:delay-[100ms] after:ease-[cubic-bezier(0.25,0.46,0.45,0.94)]",
+	"active:after:opacity-100 active:after:transition-none",
+	"active:translate-y-[1px] active:scale-[0.98]",
+	"hover:opacity-95",
+	"[&>*]:relative [&>*]:z-[4]",
+	"rounded-full",
+];
+
+const variantClasses: Record<Variant, string> = {
+	primary: [
+		"bg-accent-100 text-light-foreground",
+		"hover:bg-accent-100 hover:text-light-foreground",
+		"hover:before:opacity-[0.18] focus-visible:before:opacity-[0.18]",
+	].join(" "),
+	secondary: [
+		"text-foreground border-border-100",
+		"border dark:border-light-foreground/40 border-foreground",
+		"hover:before:opacity-[0.04] focus-visible:before:opacity-[0.04]",
+	].join(" "),
+	ghost: [
+		"bg-transparent text-foreground-muted border-transparent",
+		"hover:text-foreground",
+	].join(" "),
+};
+
+const sizeClasses: Record<Size, string> = {
+	lg: "px-6 py-3 md:text-lg",
+	md: "px-4 py-2 text-sm",
+	sm: "px-3 py-1.5 text-xs",
+};
+
+const cls = [
+	...base,
+	variantClasses[variant],
+	sizeClasses[size],
+	className,
+].join(" ");
+
+const Tag = href ? "a" : "button";
+---
+
+<Tag
+	href={href}
+	id={id}
+	class={cls}
+	target={target}
+	rel={rel}
+	aria-label={ariaLabel}
+	type={href ? undefined : type}
+>
+	<slot />
+</Tag>
diff --git a/src/components/landing/ChangelogSection.astro b/src/components/landing/ChangelogSection.astro
index ba6d248c15ca2ca..40eab015810bcd2 100644
--- a/src/components/landing/ChangelogSection.astro
+++ b/src/components/landing/ChangelogSection.astro
@@ -1,22 +1,14 @@
 ---
-/**
- * ChangelogSection — Broadcast-grid changelog for the landing page.
- *
- * Asymmetric bento grid: the latest entry is a large featured card
- * spanning 2 rows with a broadcast-ring pulse; remaining entries fill
- * a 3-column gap-px grid with product-category colour accents.
- * Plus-mark corner flair on the outer container.
- *
- * Hover states mirror ProductCard.astro:
- *   - card bg shifts (bg-l-card → bg-l-card-hover)
- *   - CTA text goes accent + underline, arrow shifts right
- *   - titles do NOT change colour on hover
- */
 import { getChangelogs } from "~/util/changelog";
 import { getEntries } from "astro:content";
 import { format } from "date-fns";
+import CornerMarks from "./CornerMarks.astro";
+import Eyebrow from "./Eyebrow.astro";
+import HalftoneBackground from "./HalftoneBackground.astro";
+import RightArrow from "./RightArrow.astro";
+import SectionHeading from "./SectionHeading.astro";
+import ViewAllLink from "./ViewAllLink.astro";
 
-/* ── Product-category palette (mirrors ProductCard.astro) ───────── */
 const COMPUTE = new Set([
 	"workers",
 	"pages",
@@ -48,7 +40,6 @@ function catColor(id: string) {
 	return "#f56500";
 }
 
-/* ── Data ────────────────────────────────────────────────────────── */
 const all = await getChangelogs({
 	filter: (e) => !e.data.hidden,
 });
@@ -73,14 +64,6 @@ const entries = await Promise.all(
 
 const featured = entries[0];
 const grid = entries.slice(1);
-
-/* ── Plus-mark corner positions ──────────────────────────────────── */
-const CORNERS = [
-	"-top-[5.5px] -left-[5.5px]",
-	"-top-[5.5px] -right-[5.5px]",
-	"-bottom-[5.5px] -left-[5.5px]",
-	"-right-[5.5px] -bottom-[5.5px]",
-];
 ---
 
 {
@@ -88,305 +71,104 @@ const CORNERS = [
 		<section
 			id="changelog"
 			class="pt-10 pb-10 lg:pt-14 lg:pb-12"
-			aria-labelledby="cl-heading"
+			aria-labelledby="changelog-heading"
 		>
-			{/* ── Header ─────────────────────────────────────────── */}
 			<div class="mb-6 flex items-end justify-between sm:mb-8">
 				<div>
-					<div class="mb-3">
-						<span class="text-accent font-mono text-[13px] tracking-widest uppercase">
-							Changelog
-						</span>
-					</div>
-					<h2
-						id="cl-heading"
-						class="mb-2 text-2xl leading-[1.1] font-medium -tracking-[0.035em] text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
-					>
-						What we've shipped
-					</h2>
-					<p class="max-w-[600px] text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400">
+					<Eyebrow>Changelog</Eyebrow>
+					<SectionHeading id="changelog-heading" class="mb-2">
+						What's new
+					</SectionHeading>
+					<p class="text-foreground-muted max-w-[600px] text-sm leading-relaxed text-pretty md:text-lg">
 						The latest features and improvements shipping across Cloudflare.
 					</p>
 				</div>
-				<a
-					href="/changelog/"
-					class="group text-accent decoration-accent/40 hidden shrink-0 items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline md:inline-flex"
-				>
+				<ViewAllLink href="/changelog/" class="hidden md:inline-flex">
 					View all
-					<svg
-						width="12"
-						height="12"
-						viewBox="0 0 12 12"
-						class="transition-transform duration-150 group-hover:translate-x-0.5"
-						aria-hidden="true"
-					>
-						<path
-							d="M4.5 2.5L8 6L4.5 9.5"
-							stroke="currentColor"
-							stroke-width="1.2"
-							fill="none"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</svg>
-				</a>
+				</ViewAllLink>
 			</div>
+			<div class="border-border-100 bg-border-100 relative grid grid-cols-1 gap-px overflow-visible border md:grid-cols-2 xl:grid-cols-[5fr_3fr_3fr]">
+				<CornerMarks />
 
-			{/* ── Grid ───────────────────────────────────────────── */}
-			<div class="cl-grid relative grid gap-px border border-zinc-200 bg-zinc-200 dark:border-[#2a2a2a] dark:bg-[#2a2a2a]">
-				{CORNERS.map((pos) => (
-					<svg
-						width="10"
-						height="10"
-						viewBox="0 0 10 10"
-						class={`pointer-events-none absolute ${pos} z-10`}
-						aria-hidden="true"
-					>
-						<line
-							x1="0"
-							y1="5"
-							x2="10"
-							y2="5"
-							stroke-width="1"
-							class="l-corner-stroke"
-						/>
-						<line
-							x1="5"
-							y1="0"
-							x2="5"
-							y2="10"
-							stroke-width="1"
-							class="l-corner-stroke"
-						/>
-					</svg>
-				))}
-
-				{/* ── Featured (latest) — same spacing rhythm as ProductCard ── */}
 				{featured && (
 					<a
 						href={featured.url}
-						class="cl-featured bg-l-card dark:bg-l-card-dark hover:bg-l-card-hover dark:hover:bg-l-card-hover-dark flex flex-col p-6 transition-colors duration-150"
+						class="group/card bg-background relative flex flex-col overflow-hidden p-6 no-underline md:col-span-full xl:col-auto xl:row-span-2"
 					>
-						{/* Header — date left, product label right (matching small cards) */}
-						<div class="mb-4 flex items-center justify-between">
+						<HalftoneBackground />
+
+						<div class="relative z-10 mb-4 flex items-center justify-between">
 							<div class="flex items-center gap-2.5">
-								<span class="cl-broadcast" aria-hidden="true">
-									<span class="cl-ring" />
-									<span class="cl-ring cl-ring--delay" />
-									<span class="cl-core" />
+								<span
+									class="relative inline-flex size-3 shrink-0 items-center justify-center"
+									aria-hidden="true"
+								>
+									<span class="border-accent-100 animate-cl-pulse absolute size-3 rounded-full border will-change-[transform,opacity] motion-reduce:animate-none motion-reduce:opacity-25" />
+									<span class="border-accent-100 animate-cl-pulse absolute size-3 rounded-full border will-change-[transform,opacity] [animation-delay:1.5s] motion-reduce:animate-none motion-reduce:opacity-25" />
+									<span class="bg-accent-100 absolute size-[5px] rounded-full" />
 								</span>
-								<time class="font-mono text-xs text-zinc-500 tabular-nums dark:text-zinc-400">
+								<time class="text-foreground-muted font-mono text-xs tabular-nums">
 									{featured.dateFormatted}
 								</time>
 							</div>
 							{featured.products[0] && (
-								<span class="text-accent font-mono text-xs tracking-wide uppercase">
+								<span class="text-accent-100 font-mono text-xs tracking-widest uppercase">
 									{featured.products[0].name}
 								</span>
 							)}
 						</div>
 
-						{/* Title — mirrors ProductCard scenario (mb-2) */}
-						<div class="mb-9 flex-1 pt-4">
-							<h3 class="mb-2 text-xl leading-snug font-medium text-zinc-900 md:text-2xl dark:text-zinc-50">
+						<div class="relative z-10 mb-9 flex-1 pt-4">
+							<h3 class="text-foreground mb-2 text-xl leading-snug font-medium md:text-2xl">
 								{featured.title}
 							</h3>
 
-							{/* Description — mirrors ProductCard detail (mb-6 flex-1) */}
-							<p class="max-w-[480px] text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400">
+							<p class="text-foreground-muted max-w-[480px] text-sm leading-relaxed md:text-base">
 								{featured.description}
 							</p>
 						</div>
 
-						{/* CTA — mirrors ProductCard CTA */}
-						<span class="group/cta inline-flex w-fit items-center gap-2 text-sm font-medium text-zinc-600 dark:text-zinc-300">
+						<span class="text-foreground-muted relative z-10 inline-flex w-fit items-center gap-2 text-sm font-medium underline-offset-4 group-focus-within/card:underline group-hover/card:underline">
 							Read update
-							<svg
-								width="14"
-								height="14"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								class="transition-transform duration-150 group-hover/cta:translate-x-0.5"
-								aria-hidden="true"
-							>
-								<line x1="5" y1="12" x2="19" y2="12" />
-								<polyline points="12 5 19 12 12 19" />
-							</svg>
+							<RightArrow class="transition-transform duration-150 group-hover/card:translate-x-0.5" />
 						</span>
 					</a>
 				)}
 
-				{/* ── Smaller cards (mirrors ProductCard anatomy) ── */}
 				{grid.map((entry) => (
 					<a
 						href={entry.url}
-						class="cl-card bg-l-card dark:bg-l-card-dark hover:bg-l-card-hover dark:hover:bg-l-card-hover-dark flex flex-col p-6 transition-colors duration-150"
+						class="group/card bg-background flex flex-col p-6 no-underline"
 					>
-						{/* Header: date + product label — mirrors ProductCard icon + label row */}
 						<div class="mb-4 flex items-center justify-between">
-							<time class="font-mono text-xs text-zinc-500 tabular-nums dark:text-zinc-400">
+							<time class="text-foreground-muted font-mono text-xs tabular-nums">
 								{entry.dateShort}
 							</time>
-							<span class="text-accent font-mono text-xs tracking-wide uppercase">
+							<span class="text-accent-100 font-mono text-xs tracking-widest uppercase">
 								{entry.products[0]?.name}
 							</span>
 						</div>
+						<div class="mb-6 flex-1">
+							<p class="text-foreground mb-2 line-clamp-2 text-base leading-snug font-medium md:text-lg">
+								{entry.title}
+							</p>
 
-						{/* Title — matches ProductCard scenario */}
-						<p class="mb-2 line-clamp-2 text-base leading-snug font-medium text-zinc-900 md:text-lg dark:text-zinc-50">
-							{entry.title}
-						</p>
-
-						{/* Description — matches ProductCard detail */}
-						<p class="mb-6 line-clamp-2 flex-1 text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400">
-							{entry.description}
-						</p>
+							<p class="text-foreground-muted line-clamp-2 text-sm leading-relaxed md:text-base">
+								{entry.description}
+							</p>
+						</div>
 
-						{/* CTA — matches ProductCard CTA */}
-						<span class="group/cta inline-flex w-fit items-center gap-2 text-sm font-medium text-zinc-600 dark:text-zinc-300">
+						<span class="text-foreground-muted inline-flex w-fit items-center gap-2 text-sm font-medium underline-offset-4 group-focus-within/card:underline group-hover/card:underline">
 							Read more
-							<svg
-								width="14"
-								height="14"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								class="transition-transform duration-150 group-hover/cta:translate-x-0.5"
-								aria-hidden="true"
-							>
-								<line x1="5" y1="12" x2="19" y2="12" />
-								<polyline points="12 5 19 12 12 19" />
-							</svg>
+							<RightArrow class="transition-transform duration-150 group-hover/card:translate-x-0.5" />
 						</span>
 					</a>
 				))}
 			</div>
 
-			{/* ── Mobile CTA ─────────────────────────────────────── */}
 			<div class="mt-6 md:hidden">
-				<a
-					href="/changelog/"
-					class="group text-accent decoration-accent/40 inline-flex items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline"
-				>
-					View all updates
-					<svg
-						width="12"
-						height="12"
-						viewBox="0 0 12 12"
-						class="transition-transform duration-150 group-hover:translate-x-0.5"
-						aria-hidden="true"
-					>
-						<path
-							d="M4.5 2.5L8 6L4.5 9.5"
-							stroke="currentColor"
-							stroke-width="1.2"
-							fill="none"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</svg>
-				</a>
+				<ViewAllLink href="/changelog/">View all updates</ViewAllLink>
 			</div>
 		</section>
 	)
 }
-
-<style>
-	/* ── Grid layout (mobile-first) ────────────────────────────────── */
-	.cl-grid {
-		grid-template-columns: 1fr;
-	}
-	.cl-featured {
-		grid-row: auto;
-		text-decoration: none;
-	}
-	.cl-grid > a:not(.cl-featured) {
-		text-decoration: none;
-	}
-
-	/* Medium: featured full-width, smaller cards in 2 columns */
-	@media (min-width: 768px) {
-		.cl-grid {
-			grid-template-columns: 1fr 1fr;
-		}
-		.cl-featured {
-			grid-column: 1 / -1;
-		}
-	}
-
-	/* Large: 3-column bento with featured spanning 2 rows */
-	@media (min-width: 1200px) {
-		.cl-grid {
-			grid-template-columns: 5fr 3fr 3fr;
-		}
-		.cl-featured {
-			grid-column: auto;
-			grid-row: 1 / 3;
-		}
-	}
-
-	/* Hover: CTA gets underline on card hover — mirrors ProductCard.
-	 * Colour intentionally stays zinc so it matches the canonical inline-link
-	 * pattern (BuildFromScratch tags, Hero nav). Underline-only on hover. */
-	.cl-card:hover .group\/cta,
-	.cl-card:focus-within .group\/cta,
-	.cl-featured:hover .group\/cta,
-	.cl-featured:focus-within .group\/cta {
-		text-decoration: underline;
-		text-underline-offset: 4px;
-	}
-
-	/* ── Broadcast ring animation ──────────────────────────────────── */
-	.cl-broadcast {
-		position: relative;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 12px;
-		height: 12px;
-		flex-shrink: 0;
-	}
-	.cl-core {
-		position: absolute;
-		width: 5px;
-		height: 5px;
-		border-radius: 50%;
-		background: var(--color-accent);
-	}
-	.cl-ring {
-		position: absolute;
-		width: 12px;
-		height: 12px;
-		border-radius: 50%;
-		border: 1px solid var(--color-accent);
-		animation: cl-pulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
-		will-change: transform, opacity;
-	}
-	.cl-ring--delay {
-		animation-delay: 1.5s;
-	}
-	@keyframes cl-pulse {
-		0% {
-			transform: scale(0.4);
-			opacity: 0.6;
-		}
-		100% {
-			transform: scale(1.6);
-			opacity: 0;
-		}
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.cl-ring {
-			animation: none;
-			opacity: 0.25;
-			transform: scale(1);
-		}
-	}
-</style>
diff --git a/src/components/landing/CommandBlock.astro b/src/components/landing/CommandBlock.astro
index 9b90aa039542120..7c148d92694650a 100644
--- a/src/components/landing/CommandBlock.astro
+++ b/src/components/landing/CommandBlock.astro
@@ -1,24 +1,4 @@
 ---
-/**
- * CommandBlock — segmented `$ | code | copy` (or `code | copy`) command block
- * shared across landing-page sections.
- *
- * Used by:
- *   - BuildFromScratch (no prompt, rounded corners, max-width 680px)
- *   - AgentSetup       (with $ prompt, sharp corners, fills cell)
- *
- * The copy button is class `cmd-copy-btn`. The script at the bottom of this
- * file is hoisted once per page by Astro and binds copy behavior to every
- * instance via `data-copy-target` (the id of the matching `<code>` block).
- *
- * Props:
- *   id          unique DOM id used by the copy button to find the code text
- *   command     the literal command string shown and copied
- *   showPrompt  prepend a `$` prompt cell in the accent color (default false)
- *   rounded     round the outer corners (default false — sharp, matches the
- *               page's CAD aesthetic; BuildFromScratch passes true)
- *   class       extra classes appended to the outer wrapper
- */
 interface Props {
 	id: string;
 	command: string;
@@ -46,7 +26,7 @@ const {
 	{
 		showPrompt && (
 			<span
-				class="bg-l-card dark:bg-l-card-dark flex shrink-0 items-center border-r border-zinc-200 px-3 font-mono text-sm leading-none text-accent select-none dark:border-[#2a2a2a]"
+				class="bg-background text-accent flex shrink-0 items-center border-r border-zinc-200 px-3 font-mono text-sm leading-none select-none dark:border-[#2a2a2a]"
 				aria-hidden="true"
 			>
 				$
@@ -56,7 +36,7 @@ const {
 
 	<code
 		id={id}
-		class="bg-l-card dark:bg-l-card-dark min-w-0 flex-1 truncate px-3 py-4 font-mono text-sm leading-none text-zinc-700 select-all dark:text-zinc-300"
+		class="bg-background min-w-0 flex-1 truncate px-3 py-4 font-mono text-sm leading-none text-zinc-700 select-all dark:text-zinc-300"
 	>
 		{command}
 	</code>
@@ -65,7 +45,7 @@ const {
 		type="button"
 		data-copy-target={id}
 		aria-label="Copy to clipboard"
-		class="cmd-copy-btn focus-visible:outline-accent flex w-10 shrink-0 cursor-pointer items-center justify-center border-l border-zinc-200 text-zinc-500 transition-colors duration-150 hover:bg-zinc-200 hover:text-zinc-700 focus-visible:outline-2 focus-visible:-outline-offset-2 dark:border-[#2a2a2a] dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-100"
+		class="cmd-copy-btn focus-visible:outline-accent flex w-10 shrink-0 cursor-pointer items-center justify-center border-l border-zinc-200 text-zinc-500 transition-colors duration-150 hover:bg-zinc-100 hover:text-zinc-700 focus-visible:outline-2 focus-visible:-outline-offset-2 dark:border-[#2a2a2a] dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-100"
 	>
 		<svg
 			class="cmd-copy-default"
diff --git a/src/components/landing/CommunityGrid.astro b/src/components/landing/CommunityGrid.astro
new file mode 100644
index 000000000000000..b9589ffc9083cfc
--- /dev/null
+++ b/src/components/landing/CommunityGrid.astro
@@ -0,0 +1,87 @@
+---
+import CornerMarks from "./CornerMarks.astro";
+import Eyebrow from "./Eyebrow.astro";
+import SectionHeading from "./SectionHeading.astro";
+
+const cards = [
+	{
+		label: "Community",
+		heading: "Join the conversation",
+		desc: "Share ideas, answers, and code with the Cloudflare community.",
+		links: [
+			{ label: "Discord", href: "https://discord.cloudflare.com/" },
+			{ label: "X", href: "https://x.com/cloudflare" },
+			{ label: "Forum", href: "https://community.cloudflare.com/" },
+		],
+	},
+	{
+		label: "Open Source",
+		heading: "View the source",
+		desc: "Cloudflare contributes to the open-source ecosystem in a variety of ways, including:",
+		links: [
+			{ label: "GitHub", href: "https://github.com/cloudflare" },
+			{ label: "Sponsors", href: "https://github.com/sponsors/cloudflare" },
+			{ label: "Style guide", href: "/style-guide/" },
+		],
+	},
+	{
+		label: "Blog",
+		heading: "Read the latest",
+		desc: "Get the latest news on Cloudflare products, technologies, and culture.",
+		links: [
+			{ label: "blog.cloudflare.com", href: "https://blog.cloudflare.com/" },
+		],
+	},
+];
+---
+
+<section
+	id="community"
+	class="pt-10 pb-10 lg:pt-14 lg:pb-12"
+	aria-labelledby="community-heading"
+>
+	<div class="mb-6 sm:mb-8">
+		<Eyebrow>Community & Resources</Eyebrow>
+		<SectionHeading id="community-heading" class="mb-2">
+			Connect with Cloudflare
+		</SectionHeading>
+		<p
+			class="text-foreground-muted max-w-[600px] text-sm leading-relaxed text-pretty md:text-lg"
+		>
+			Find community, read the blog, and explore open source projects.
+		</p>
+	</div>
+
+	<div
+		class="border-border-100 bg-border-100 relative grid grid-cols-1 gap-px overflow-visible border md:grid-cols-3"
+	>
+		<CornerMarks />
+
+		{
+			cards.map((card) => (
+				<div class="community-card bg-background flex flex-col p-6">
+					<span class="text-accent-100 font-mono text-xs tracking-widest uppercase">
+						{card.label}
+					</span>
+					<h3 class="text-foreground mt-3 mb-2 text-base leading-snug font-medium md:text-lg">
+						{card.heading}
+					</h3>
+					<p class="text-foreground-muted mb-6 flex-1 text-sm leading-relaxed md:text-base">
+						{card.desc}
+					</p>
+
+					<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+						{card.links.map((link) => (
+							<a
+								href={link.href}
+								class="text-foreground-muted inline-flex w-fit items-center text-sm font-medium underline-offset-4 hover:underline"
+							>
+								{link.label}
+							</a>
+						))}
+					</div>
+				</div>
+			))
+		}
+	</div>
+</section>
diff --git a/src/components/landing/CornerMarks.astro b/src/components/landing/CornerMarks.astro
new file mode 100644
index 000000000000000..39d06cd4f6d77aa
--- /dev/null
+++ b/src/components/landing/CornerMarks.astro
@@ -0,0 +1,47 @@
+---
+type Corner = "tl" | "tr" | "bl" | "br";
+type Tone = "neutral" | "accent";
+
+interface Props {
+	corners?: Corner[];
+	size?: number;
+	offset?: number;
+	tone?: Tone;
+	class?: string;
+}
+
+const {
+	corners = ["tl", "tr", "bl", "br"] as Corner[],
+	size = 14,
+	offset = -7,
+	tone = "neutral",
+	class: className = "",
+} = Astro.props;
+
+const positions: Record<Corner, string> = {
+	tl: `left:${offset}px;top:${offset}px;`,
+	tr: `right:${offset}px;top:${offset}px;`,
+	bl: `left:${offset}px;bottom:${offset}px;`,
+	br: `right:${offset}px;bottom:${offset}px;`,
+};
+
+const borderColor =
+	tone === "accent" ? "rgba(255, 251, 245, 0.32)" : "var(--color-border-100)";
+
+const baseStyle = `width:${size}px;height:${size}px;border:1px solid ${borderColor};border-radius:3px;`;
+
+const fillClasses =
+	tone === "accent"
+		? "bg-accent-100"
+		: "bg-background dark:bg-background-muted";
+---
+
+{
+	corners.map((c) => (
+		<div
+			class={`pointer-events-none absolute z-30 ${fillClasses} ${className}`}
+			style={`${baseStyle}${positions[c]}`}
+			aria-hidden="true"
+		/>
+	))
+}
diff --git a/src/components/landing/Eyebrow.astro b/src/components/landing/Eyebrow.astro
new file mode 100644
index 000000000000000..4dc8f8ac2362e03
--- /dev/null
+++ b/src/components/landing/Eyebrow.astro
@@ -0,0 +1,28 @@
+---
+type Size = "sm" | "md";
+
+interface Props {
+	size?: Size;
+	id?: string;
+	class?: string;
+}
+
+const { size = "md", id, class: className = "" } = Astro.props;
+
+const sizeClasses: Record<Size, string> = {
+	sm: "text-[11px]",
+	md: "text-[13px]",
+};
+---
+
+<div class:list={["mb-3", className]}>
+	<span
+		id={id}
+		class:list={[
+			"text-accent-100 font-mono tracking-widest uppercase",
+			sizeClasses[size],
+		]}
+	>
+		<slot />
+	</span>
+</div>
diff --git a/src/components/landing/FullPageLines.astro b/src/components/landing/FullPageLines.astro
index 84cca418ef58381..129843a393d575f 100644
--- a/src/components/landing/FullPageLines.astro
+++ b/src/components/landing/FullPageLines.astro
@@ -1,14 +1,4 @@
 ---
-/**
- * Full-page vertical container lines.
- *
- * Positioned absolutely within the same relative parent as StructuralGrid
- * so the lines share the same coordinate system as the plus marks and
- * corner brackets. Uses 100lvh height to extend beyond the content area;
- * parent containers have overflow:visible so the lines are not clipped.
- *
- * Uses the same container widths and responsive margin logic as StructuralGrid.
- */
 const CONTAINERS = [1400, 1280, 720, 400];
 
 const MIN_MARGINS = [0, 48, 120, 200];
@@ -27,13 +17,11 @@ const lineBase = "absolute top-0 left-1/2 -translate-x-1/2";
 	style="height: calc(100% + 25rem)"
 	aria-hidden="true"
 >
-	<!-- Center line -->
 	<div
 		class="absolute top-0 left-1/2 h-full w-0 border-l border-dotted border-black/[0.06] dark:border-white/[0.04]"
 	>
 	</div>
 
-	<!-- Container lines -->
 	{
 		CONTAINERS.map((w) => (
 			<div
diff --git a/src/components/landing/HalftoneBackground.astro b/src/components/landing/HalftoneBackground.astro
new file mode 100644
index 000000000000000..c62e10fc5b6b68c
--- /dev/null
+++ b/src/components/landing/HalftoneBackground.astro
@@ -0,0 +1,44 @@
+---
+interface Props {
+	class?: string;
+}
+
+const { class: className = "" } = Astro.props;
+---
+
+<div
+	class:list={[
+		"halftone-bg pointer-events-none absolute inset-0 z-0 select-none",
+		className,
+	]}
+	aria-hidden="true"
+>
+</div>
+
+<style>
+	.halftone-bg {
+		background-image: url("/pattern.png"), url("/pattern.png");
+		background-repeat: no-repeat;
+		background-position:
+			right bottom,
+			right bottom;
+		background-size: cover, cover;
+		-webkit-mask-image: linear-gradient(
+			to top,
+			black 15%,
+			rgba(0, 0, 0, 0.55) 50%,
+			transparent 85%
+		);
+		mask-image: linear-gradient(
+			to top,
+			black 15%,
+			rgba(0, 0, 0, 0.55) 50%,
+			transparent 85%
+		);
+	}
+
+	:global([data-theme="dark"]) .halftone-bg {
+		mix-blend-mode: screen;
+		filter: brightness(1.4) saturate(1.3);
+	}
+</style>
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
index 0d34046ca93c702..a34dddda96df811 100644
--- a/src/components/landing/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -1,58 +1,62 @@
 ---
 import { Icon } from "@astrojs/starlight/components";
 import { stagger } from "./constants";
+import Button from "./Button.astro";
+
+interface Anchor {
+	href: string;
+	label: string;
+	hideMobile?: boolean;
+}
+
+const anchors: Anchor[] = [
+	{ href: "#build", label: "Build" },
+	{ href: "#agent-setup", label: "Agent Setup" },
+	{ href: "#secure", label: "Secure" },
+	{ href: "#accelerate", label: "Accelerate" },
+	{ href: "#changelog", label: "Changelog", hideMobile: true },
+];
+
+const anchorClass =
+	"focus-visible:outline-accent-100 text-foreground-muted hover:text-foreground cursor-pointer text-base no-underline hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2";
 ---
 
 <section id="hero" class="pb-12 md:pt-6 lg:pb-16">
 	<h1
-		class={`text-[clamp(2.75rem,5vw,3.5rem)] font-medium -tracking-[0.04em] leading-[1.05] text-balance mb-4 text-primary dark:text-white ${stagger(0.05)}`}
+		class={`text-[clamp(2.75rem,5vw,3.5rem)] font-medium text-balance mb-4 text-foreground ${stagger(0.05)}`}
 	>
 		Cloudflare Developer Docs
 	</h1>
 
 	<p
-		class={`text-base text-pretty max-w-[480px] leading-relaxed mb-6 sm:text-lg sm:mb-8 text-[#52525b] dark:text-[#a1a1aa] ${stagger(0.1)}`}
+		class={`text-base text-pretty max-w-[480px] leading-relaxed mb-6 sm:text-lg sm:mb-8 text-foreground-muted ${stagger(0.1)}`}
 	>
 		Compute, storage, AI, and security — ship applications instead of managing
 		and securing infrastructure
 	</p>
 
 	<div
-		class={`flex flex-wrap items-center gap-3 text-sm sm:flex-nowrap sm:gap-5 ${stagger(0.16)}`}
+		class={`flex flex-wrap items-center gap-x-5 gap-y-3 text-sm lg:flex-nowrap ${stagger(0.16)}`}
 	>
-		<a
-			href="/fundamentals"
-			class="focus-visible:outline-accent inline-flex h-9 shrink-0 cursor-pointer items-center gap-2 rounded-lg rounded-md bg-[#18181b] px-3 text-sm font-medium whitespace-nowrap text-white no-underline transition-colors duration-150 hover:bg-[#f56500] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 sm:h-10 sm:px-4 sm:text-base dark:bg-[#fafafa] dark:text-[#09090b] dark:hover:bg-[#e4e4e7] dark:hover:text-[#09090b]"
-		>
-			Get started
-			<Icon name="right-arrow" size="0.75rem" />
-		</a>
-		<span
-			class="hidden h-4 w-px bg-black/10 sm:block dark:bg-white/10"
-			aria-hidden="true"></span>
-		<a
-			href="#build"
-			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8]"
-		>
-			Build
-		</a>
-		<a
-			href="#secure"
-			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8]"
-		>
-			Secure
-		</a>
-		<a
-			href="#accelerate"
-			class="focus-visible:outline-accent cursor-pointer text-[#52525b] no-underline hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-[#d4d4d8]"
-		>
-			Accelerate
-		</a>
-		<a
-			href="#changelog"
-			class="focus-visible:outline-accent hidden cursor-pointer text-[#52525b] no-underline hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 sm:inline dark:text-[#d4d4d8]"
-		>
-			Changelog
-		</a>
+		<Button href="/fundamentals/" variant="primary" size="md">
+			<span class="inline-flex items-center gap-2 text-base font-medium">
+				Get started
+				<Icon name="right-arrow" size="1rem" />
+			</span>
+		</Button>
+
+		<span class="bg-border-100 hidden h-4 w-px sm:block" aria-hidden="true"
+		></span>
+
+		{
+			anchors.map((a) => (
+				<a
+					href={a.href}
+					class:list={[anchorClass, a.hideMobile && "hidden sm:inline"]}
+				>
+					{a.label}
+				</a>
+			))
+		}
 	</div>
 </section>
diff --git a/src/components/landing/PlatformStats.astro b/src/components/landing/PlatformStats.astro
index 2b957428ddbccc6..bd2c97558ee82c3 100644
--- a/src/components/landing/PlatformStats.astro
+++ b/src/components/landing/PlatformStats.astro
@@ -1,4 +1,6 @@
 ---
+import CornerMarks from "./CornerMarks.astro";
+import Eyebrow from "./Eyebrow.astro";
 import { stagger } from "./constants";
 
 const stats = [
@@ -38,128 +40,25 @@ const stats = [
 	class={`pt-8 pb-8 lg:pt-10 lg:pb-12 ${stagger(0.42)}`}
 	aria-labelledby="stats-heading"
 >
-	<div class="mb-4">
-		<span class="text-accent font-mono text-[13px] tracking-widest uppercase"
-			>Platform at a Glance</span
-		>
-	</div>
+	<Eyebrow id="stats-heading" class="mb-4">Platform at a Glance</Eyebrow>
 
 	<div
-		class="grid grid-cols-2 lg:grid-cols-4 gap-px overflow-visible border border-[#e8e8e8] bg-[#e8e8e8] dark:border-[#2a2a2a] dark:bg-[#2a2a2a]"
 		id="stats-grid"
+		class="border-border-100 bg-border-100 relative grid grid-cols-2 gap-px overflow-visible border lg:grid-cols-4"
 	>
+		<CornerMarks />
 		{
 			stats.map((stat, i) => (
-				<div class="stat-card bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark relative flex flex-col px-4 py-4 transition-colors duration-150 sm:px-5 sm:py-5">
-					{/* Corner plus marks — all four corners */}
-					<svg
-						width="10"
-						height="10"
-						viewBox="0 0 10 10"
-						class="pointer-events-none absolute -top-[5.5px] -left-[5.5px] z-10"
-						aria-hidden="true"
-					>
-						<line
-							x1="0"
-							y1="5"
-							x2="10"
-							y2="5"
-							stroke-width="1"
-							class="l-corner-stroke"
-						/>
-						<line
-							x1="5"
-							y1="0"
-							x2="5"
-							y2="10"
-							stroke-width="1"
-							class="l-corner-stroke"
-						/>
-					</svg>
-					<svg
-						width="10"
-						height="10"
-						viewBox="0 0 10 10"
-						class="pointer-events-none absolute -top-[5.5px] -right-[5.5px] z-10"
-						aria-hidden="true"
-					>
-						<line
-							x1="0"
-							y1="5"
-							x2="10"
-							y2="5"
-							stroke-width="1"
-							class="l-corner-stroke"
-						/>
-						<line
-							x1="5"
-							y1="0"
-							x2="5"
-							y2="10"
-							stroke-width="1"
-							class="l-corner-stroke"
-						/>
-					</svg>
-					<svg
-						width="10"
-						height="10"
-						viewBox="0 0 10 10"
-						class="pointer-events-none absolute -bottom-[5.5px] -left-[5.5px] z-10"
-						aria-hidden="true"
-					>
-						<line
-							x1="0"
-							y1="5"
-							x2="10"
-							y2="5"
-							stroke-width="1"
-							class="l-corner-stroke"
-						/>
-						<line
-							x1="5"
-							y1="0"
-							x2="5"
-							y2="10"
-							stroke-width="1"
-							class="l-corner-stroke"
-						/>
-					</svg>
-					<svg
-						width="10"
-						height="10"
-						viewBox="0 0 10 10"
-						class="pointer-events-none absolute -right-[5.5px] -bottom-[5.5px] z-10"
-						aria-hidden="true"
-					>
-						<line
-							x1="0"
-							y1="5"
-							x2="10"
-							y2="5"
-							stroke-width="1"
-							class="l-corner-stroke"
-						/>
-						<line
-							x1="5"
-							y1="0"
-							x2="5"
-							y2="10"
-							stroke-width="1"
-							class="l-corner-stroke"
-						/>
-					</svg>
-
-					{/* Index */}
+				<div class="stat-card bg-background relative flex flex-col px-4 py-4 transition-colors duration-150 sm:px-5 sm:py-5">
 					<div
-						class="mb-2.5 font-mono text-[11px] text-zinc-400 uppercase tabular-nums select-none dark:text-zinc-600"
+						class="text-foreground-subtle mb-2.5 font-mono text-[11px] uppercase tabular-nums select-none"
 						aria-hidden="true"
 					>
 						{String(i + 1).padStart(2, "0")}
 					</div>
 
-					{/* Stat value */}
 					<p class="mb-1">
-						<span class="stat-counter inline-flex items-baseline font-mono text-3xl leading-none font-medium -tracking-tight text-zinc-900 tabular-nums dark:text-white">
+						<span class="stat-counter text-foreground inline-flex items-baseline font-mono text-3xl leading-none font-medium -tracking-tight tabular-nums">
 							<span
 								class="stat-counter-value inline-block"
 								data-target={stat.value}
@@ -172,18 +71,16 @@ const stats = [
 						</span>
 					</p>
 
-					{/* Unit — min-h reserves 2-line height so the divider below lands at the same Y across all cards. text-balance prevents awkward orphan wraps like "REQUESTS/SE | C". */}
-					<p class="text-accent stat-unit mb-3 min-h-[2.4em] text-balance font-mono text-[12px] tracking-wide uppercase">
+					<p class="text-accent-100 stat-unit mb-3 min-h-[2.4em] font-mono text-[12px] tracking-wide text-balance uppercase">
 						{stat.unit}
 					</p>
 
-					{/* Label + detail. text-balance on the (1-3 word) label balances the wrap evenly; text-pretty on the longer detail prevents orphans without rebalancing. */}
-					<div class="border-t border-dashed border-[#e8e8e8] pt-3 dark:border-[#2a2a2a]">
+					<div class="border-border-100 border-t border-dashed pt-3">
 						<div class="space-y-0.5">
-							<p class="text-[15px] leading-snug font-medium text-balance text-zinc-900 dark:text-zinc-50">
+							<p class="text-foreground text-[15px] leading-snug font-medium text-balance">
 								{stat.label}
 							</p>
-							<p class="text-[13px] leading-snug text-pretty text-zinc-500 dark:text-zinc-400">
+							<p class="text-foreground-muted text-[13px] leading-snug text-pretty">
 								{stat.detail}
 							</p>
 						</div>
diff --git a/src/components/landing/ProductCard.astro b/src/components/landing/ProductCard.astro
index 826dbb843d23d4f..4043ce0aa5da652 100644
--- a/src/components/landing/ProductCard.astro
+++ b/src/components/landing/ProductCard.astro
@@ -1,17 +1,8 @@
 ---
-/**
- * ProductCard — Reusable card for showcasing a product with icon, scenario, detail, and CTA.
- *
- * Props:
- * - icon: Icon name from the astro-icon set
- * - product: Short product label (e.g. "WAF", "SSL/TLS")
- * - scenario: Bold heading text describing the use case
- * - detail: Supporting description text
- * - href: Link destination for the CTA
- * - cta: CTA button text (defaults to "Get started")
- */
 import { Icon } from "astro-icon/components";
 
+type Category = "compute" | "ai" | "storage" | "media";
+
 interface Props {
 	icon: string;
 	product: string;
@@ -19,97 +10,9 @@ interface Props {
 	detail: string;
 	href: string;
 	cta?: string;
+	category?: Category;
 }
 
-const BLUE = "#0a95ff";
-const MAGENTA = "#ee0ddb";
-const AI_GREEN = "#19e306";
-const AI_BG = "#f2f5e1";
-const MEDIA_PURPLE = "#9616ff";
-const MEDIA_BG = "rgba(150, 22, 255, 0.1)";
-const ACCENT = "#f56500";
-
-const computeProducts = new Set([
-	"workers",
-	"containers",
-	"sandbox",
-	"sandboxes",
-	"durable objects",
-	"browser rendering",
-	"workflows",
-]);
-
-const storageProducts = new Set([
-	"r2",
-	"data platform",
-	"hyperdrive",
-	"d1",
-	"kv",
-	"queues",
-]);
-
-const aiProducts = new Set([
-	"workers ai",
-	"agents",
-	"ai agents",
-	"ai gateway",
-	"vectorize",
-	"ai search",
-]);
-
-const mediaProducts = new Set([
-	"images",
-	"stream",
-	"screem",
-	"realtime",
-	"realtimekit",
-	"realtime kit",
-	"turn",
-	"sfu",
-	"turn / sfu",
-	"turn/sfu",
-]);
-
-const normalizeProduct = (value: string) =>
-	value.toLowerCase().replace(/[-_]/g, " ").replace(/\s+/g, " ").trim();
-
-const getIconHoverPalette = (value: string) => {
-	const normalized = normalizeProduct(value);
-	if (storageProducts.has(normalized)) {
-		return {
-			color: MAGENTA,
-			bg: "color-mix(in srgb, #ee0ddb 10%, transparent)",
-			bgDark: "color-mix(in srgb, #ee0ddb 16%, transparent)",
-		};
-	}
-	if (aiProducts.has(normalized)) {
-		return {
-			color: AI_GREEN,
-			bg: AI_BG,
-			bgDark: "color-mix(in srgb, #19e306 22%, transparent)",
-		};
-	}
-	if (mediaProducts.has(normalized)) {
-		return {
-			color: MEDIA_PURPLE,
-			bg: MEDIA_BG,
-			bgDark: "rgba(150, 22, 255, 0.22)",
-		};
-	}
-	if (computeProducts.has(normalized)) {
-		return {
-			color: BLUE,
-			bg: "color-mix(in srgb, #0a95ff 10%, transparent)",
-			bgDark: "color-mix(in srgb, #0a95ff 16%, transparent)",
-		};
-	}
-	return {
-		color: ACCENT,
-		bg: "color-mix(in srgb, #f56500 10%, transparent)",
-		bgDark: "color-mix(in srgb, #f56500 16%, transparent)",
-	};
-};
-
 const {
 	icon,
 	product,
@@ -117,20 +20,32 @@ const {
 	detail,
 	href,
 	cta = "Get started",
+	category,
 } = Astro.props;
 
-const iconHoverPalette = getIconHoverPalette(product);
+const CATEGORY_COLOR: Record<Category, string> = {
+	compute: "#0a95ff",
+	ai: "#19e306",
+	storage: "#ee0ddb",
+	media: "#9616ff",
+};
+
+// Per-card accent: category color when set, otherwise the brand accent.
+// Flows into hover + cross-highlight states via the `--card-color` custom
+// property — collapses ~50 lines of permuted Tailwind classes into one rule.
+const cardColor = category
+	? CATEGORY_COLOR[category]
+	: "var(--color-accent-100)";
 ---
 
 <a
 	href={href}
-	class="pc-card group/product-card bg-l-card hover:bg-l-card-hover dark:bg-l-card-dark dark:hover:bg-l-card-hover-dark focus-visible:outline-accent relative flex flex-1 flex-col p-6 no-underline transition-colors duration-150 focus-visible:outline-2 focus-visible:-outline-offset-2"
-	style={`--pc-hover-color: ${iconHoverPalette.color}; --pc-hover-bg: ${iconHoverPalette.bg}; --pc-hover-bg-dark: ${iconHoverPalette.bgDark};`}
+	style={`--card-color: ${cardColor};`}
+	class="group/product-card bg-background hover:bg-background/90 focus-visible:outline-accent-100 relative flex flex-1 flex-col p-6 no-underline focus-visible:outline-2 focus-visible:-outline-offset-2"
 >
-	{/* Header: icon + product label */}
 	<div class="mb-4 flex items-center justify-between">
 		<span
-			class="pc-icon-shell relative flex size-11 items-center justify-center rounded-md border border-zinc-200 bg-zinc-100 text-zinc-400 transition-[background-color,border-color,color] duration-200 dark:border-[#2a2a2a] dark:bg-zinc-800 dark:text-zinc-500"
+			class="pc-icon-shell border-border-100 bg-background-muted text-foreground-subtle relative flex size-11 items-center justify-center rounded-md border transition-[background-color,border-color,color] duration-200"
 		>
 			<Icon
 				name={icon}
@@ -138,26 +53,24 @@ const iconHoverPalette = getIconHoverPalette(product);
 				class="pc-icon transition-colors duration-200"
 			/>
 		</span>
-		<span class="text-accent font-mono text-xs tracking-wide uppercase">
+		<span class="text-accent-100 font-mono text-xs tracking-widest uppercase">
 			{product}
 		</span>
 	</div>
 
-	{/* Scenario */}
 	<p
-		class="mb-2 text-base leading-snug font-medium text-zinc-900 md:text-lg dark:text-zinc-50"
+		class="text-foreground mb-2 text-base leading-snug font-medium md:text-lg"
 	>
 		{scenario}
 	</p>
 	<p
-		class="mb-6 flex-1 text-sm leading-relaxed text-zinc-500 md:text-base dark:text-zinc-400"
+		class="text-foreground-muted mb-6 flex-1 text-sm leading-relaxed md:text-base"
 	>
 		{detail}
 	</p>
 
-	{/* CTA — visual only; the whole card is the link */}
 	<span
-		class="pc-cta inline-flex w-fit items-center gap-2 text-sm font-medium text-zinc-600 underline-offset-4 group-hover/product-card:underline dark:text-zinc-300"
+		class="pc-cta text-foreground-muted inline-flex w-fit items-center gap-2 text-sm font-medium underline-offset-4 group-hover/product-card:underline"
 	>
 		{cta}
 		<svg
@@ -179,17 +92,9 @@ const iconHoverPalette = getIconHoverPalette(product);
 </a>
 
 <style>
-	.pc-card:hover .pc-icon-shell,
-	.pc-card:focus-within .pc-icon-shell {
-		background: var(--pc-hover-bg, rgba(245, 101, 0, 0.1));
-		border-color: var(--pc-hover-color, #f56500);
-		border-style: dashed;
-		color: var(--pc-hover-color, #f56500);
-	}
-
-	:root[data-theme="dark"] .pc-card:hover .pc-icon-shell,
-	:root[data-theme="dark"] .pc-card:focus-within .pc-icon-shell {
-		background: var(--pc-hover-bg-dark, rgba(245, 101, 0, 0.16));
-		color: var(--pc-hover-color, #f56500);
+	.group\/product-card:hover .pc-icon-shell {
+		border-color: color-mix(in srgb, var(--card-color) 30%, transparent);
+		background-color: color-mix(in srgb, var(--card-color) 5%, transparent);
+		color: var(--card-color);
 	}
 </style>
diff --git a/src/components/landing/ProductCardGrid.astro b/src/components/landing/ProductCardGrid.astro
index ad23d85693e680b..748ec9961eef584 100644
--- a/src/components/landing/ProductCardGrid.astro
+++ b/src/components/landing/ProductCardGrid.astro
@@ -1,19 +1,6 @@
 ---
-/**
- * ProductCardGrid — Reusable grid wrapper with plus-mark corner flair.
- *
- * Renders a 3-column (1-column on mobile) grid with 1px gap borders
- * and decorative plus marks on the four outer corners.
- *
- * Props:
- * - label: Optional category label shown above the grid
- *
- * Usage:
- *   <ProductCardGrid label="Network & Application">
- *     <ProductCard ... />
- *     <ProductCard ... />
- *   </ProductCardGrid>
- */
+import CornerMarks from "./CornerMarks.astro";
+
 interface Props {
 	label?: string;
 }
@@ -24,49 +11,15 @@ const { label } = Astro.props;
 <div>
 	{
 		label && (
-			<p class="mb-4 font-mono text-xs tracking-wide text-zinc-500 uppercase dark:text-zinc-400">
+			<p class="text-foreground-muted mb-4 font-mono text-xs tracking-widest uppercase">
 				{label}
 			</p>
 		)
 	}
 	<div
-		class="relative grid grid-cols-1 gap-px overflow-visible border border-zinc-200 bg-zinc-200 lg:grid-cols-3 dark:border-[#2a2a2a] dark:bg-[#2a2a2a]"
+		class="border-border-100 bg-border-100 relative grid grid-cols-1 gap-px overflow-visible border lg:grid-cols-3"
 	>
-		{/* Plus marks on the four corners */}
-		{
-			[
-				"-top-[5.5px] -left-[5.5px]",
-				"-top-[5.5px] -right-[5.5px]",
-				"-bottom-[5.5px] -left-[5.5px]",
-				"-right-[5.5px] -bottom-[5.5px]",
-			].map((pos) => (
-				<svg
-					width="10"
-					height="10"
-					viewBox="0 0 10 10"
-					class={`pointer-events-none absolute ${pos} z-10`}
-					aria-hidden="true"
-				>
-					<line
-						x1="0"
-						y1="5"
-						x2="10"
-						y2="5"
-						stroke-width="1"
-						class="l-corner-stroke"
-					/>
-					<line
-						x1="5"
-						y1="0"
-						x2="5"
-						y2="10"
-						stroke-width="1"
-						class="l-corner-stroke"
-					/>
-				</svg>
-			))
-		}
-
+		<CornerMarks />
 		<slot />
 	</div>
 </div>
diff --git a/src/components/landing/ProtectSection.astro b/src/components/landing/ProtectSection.astro
deleted file mode 100644
index 5b8ccd323848f6f..000000000000000
--- a/src/components/landing/ProtectSection.astro
+++ /dev/null
@@ -1,207 +0,0 @@
----
-const products = [
-	{
-		name: "WAF",
-		description:
-			"Custom firewall rules, managed rulesets, and rate limiting. Block threats at the edge before they reach your origin.",
-		detail: "Custom rules · Managed rulesets · Analytics",
-		href: "/waf/",
-	},
-	{
-		name: "Rate Limiting",
-		description:
-			"Protect APIs and pages from abuse. Configurable thresholds, fingerprinting, and response actions.",
-		detail: "Per-IP · Per-session · Sliding window",
-		href: "/waf/rate-limiting-rules/",
-	},
-	{
-		name: "DDoS Protection",
-		description:
-			"Always-on, unmetered mitigation for L3–L7 attacks. Automatic detection with tunable sensitivity.",
-		detail: "L3 · L4 · L7 · Unmetered",
-		href: "/ddos-protection/",
-	},
-	{
-		name: "Cloudflare Tunnel",
-		description:
-			"Expose private services to the internet without opening firewall ports. One command to create a secure outbound-only connection.",
-		detail: "No inbound ports · Remote config · API",
-		href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
-	},
-	{
-		name: "Access",
-		description:
-			"Zero Trust access control for any application. SSO, identity provider integration, and per-request policy enforcement.",
-		detail: "SSO · IdP integrations · Policies",
-		href: "/cloudflare-one/access-controls/policies/",
-	},
-	{
-		name: "Gateway",
-		description:
-			"DNS, HTTP, and network filtering for your team's traffic. Block malware, phishing, and unwanted sites without a VPN.",
-		detail: "DNS filtering · HTTP inspection · L4",
-		href: "/cloudflare-one/traffic-policies/",
-	},
-	{
-		name: "Bot Management",
-		description:
-			"Detect and block automated traffic. Behavioral analysis, challenge flows, and bot score APIs built into every request.",
-		detail: "ML scoring · Challenge · JS detection",
-		href: "/bots/",
-	},
-	{
-		name: "Turnstile",
-		description:
-			"CAPTCHA-free bot detection for your frontend. Drop-in widget that challenges bots invisibly, never your users.",
-		detail: "Invisible · Managed · Non-interactive",
-		href: "/turnstile/",
-	},
-	{
-		name: "SSL/TLS",
-		description:
-			"Universal SSL by default, with full control over cipher suites, certificate authorities, and origin authentication.",
-		detail: "Universal · Advanced · mTLS · Origin CA",
-		href: "/ssl/",
-	},
-];
-
-const quickLinks = [
-	{
-		label: "Tunnel get started",
-		href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/get-started/create-remote-tunnel/",
-	},
-	{ label: "IP access rules", href: "/waf/tools/ip-access-rules/" },
-	{
-		label: "Turnstile troubleshooting",
-		href: "/turnstile/troubleshooting/client-side-errors/error-codes/",
-	},
-	{ label: "WAF security events", href: "/waf/analytics/security-events/" },
-	{ label: "Cloudflare One setup", href: "/cloudflare-one/setup/" },
-	{ label: "WARP Client", href: "/warp-client/" },
-];
----
-
-<section
-	class="px-4 pt-10 pb-12 lg:px-8 lg:pt-16"
-	aria-labelledby="protect-heading"
->
-	<!-- Section header -->
-	<div
-		class="mb-10 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end sm:gap-6"
-	>
-		<div>
-			<div class="mb-3 flex items-center gap-2">
-				<span
-					class="text-accent font-mono text-[0.5625rem] tracking-[0.2em] uppercase"
-				>
-					Protect
-				</span>
-				<span class="bg-accent/40 h-px w-8"></span>
-			</div>
-			<h2
-				id="protect-heading"
-				class="text-[clamp(1.5rem,3vw,2rem)] leading-tight font-normal -tracking-[0.03em] text-[#18181b]"
-			>
-				Secure what you're building
-			</h2>
-			<p
-				class="mt-3 max-w-[480px] text-[0.9375rem] leading-relaxed text-[#6b6b74]"
-			>
-				Layer security, access control, and bot protection onto any app or
-				infrastructure — without re-architecting anything.
-			</p>
-		</div>
-		<a
-			href="/cloudflare-one/"
-			class="hidden shrink-0 items-center gap-2 rounded-lg border border-black/10 bg-black/2 px-4 py-2 font-mono text-[0.625rem] tracking-widest text-[#6b6b74] uppercase no-underline transition-colors duration-100 hover:bg-black/5 hover:text-[#1a1a1e] sm:inline-flex"
-		>
-			Explore Zero Trust
-			<svg
-				width="10"
-				height="10"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				aria-hidden="true"
-			>
-				<line x1="5" y1="12" x2="19" y2="12"></line>
-				<polyline points="12 5 19 12 12 19"></polyline>
-			</svg>
-		</a>
-	</div>
-
-	<!-- Products list -->
-	<div class="divide-y divide-black/6 overflow-hidden border border-black/6">
-		{
-			products.map((p) => (
-				<a
-					href={p.href}
-					class="group focus-visible:outline-accent relative flex flex-col items-start gap-2 bg-white/90 px-4 py-4 text-inherit no-underline transition-colors duration-100 hover:bg-zinc-50 focus-visible:outline-2 focus-visible:-outline-offset-2 sm:flex-row sm:items-center sm:gap-6 sm:px-6 sm:py-5"
-				>
-					{/* Left accent reveal */}
-					<span
-						class="bg-accent pointer-events-none absolute top-0 left-0 h-0 w-[2px] transition-[height] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:h-full"
-						aria-hidden="true"
-					/>
-
-					{/* Product name */}
-					<div class="w-auto shrink-0 sm:w-[140px]">
-						<span class="text-[0.9375rem] leading-tight font-medium text-[#1a1a1e]">
-							{p.name}
-						</span>
-					</div>
-
-					{/* Description */}
-					<p class="m-0 flex-1 text-[0.8125rem] leading-normal text-[#6b6b74]">
-						{p.description}
-					</p>
-
-					{/* Detail tags */}
-					<div class="hidden max-w-[200px] shrink-0 text-right font-mono text-[0.5625rem] leading-relaxed tracking-wide text-[#9b9ba4] lg:block">
-						{p.detail}
-					</div>
-
-					{/* Arrow */}
-					<div class="hidden shrink-0 -translate-x-1 items-center opacity-0 transition-[opacity,transform] duration-100 group-hover:translate-x-0 group-hover:opacity-100 sm:flex">
-						<svg
-							width="11"
-							height="11"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2.5"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							class="text-accent"
-							aria-hidden="true"
-						>
-							<line x1="5" y1="12" x2="19" y2="12" />
-							<polyline points="12 5 19 12 12 19" />
-						</svg>
-					</div>
-				</a>
-			))
-		}
-	</div>
-
-	<!-- Quick links footer -->
-	<div class="mt-4 flex flex-wrap items-center gap-2">
-		<span
-			class="mr-1 font-mono text-[0.5rem] tracking-[0.2em] text-[#9b9ba4] uppercase"
-			>Also:</span
-		>
-		{
-			quickLinks.map((l) => (
-				<a
-					href={l.href}
-					class="hover:text-accent hover:border-accent border-b border-dashed border-black/15 pb-px font-mono text-[0.5625rem] tracking-wide text-[#6b6b74] no-underline transition-colors duration-100"
-				>
-					{l.label}
-				</a>
-			))
-		}
-	</div>
-</section>
diff --git a/src/components/landing/RightArrow.astro b/src/components/landing/RightArrow.astro
new file mode 100644
index 000000000000000..0a98a910a5a1406
--- /dev/null
+++ b/src/components/landing/RightArrow.astro
@@ -0,0 +1,52 @@
+---
+type Variant = "line" | "chevron";
+
+interface Props {
+	variant?: Variant;
+	size?: number;
+	strokeWidth?: number;
+	class?: string;
+}
+
+const {
+	variant = "line",
+	size = 14,
+	strokeWidth = variant === "chevron" ? 1.5 : 2,
+	class: className = "",
+} = Astro.props;
+---
+
+{
+	variant === "line" ? (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width={strokeWidth}
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class:list={["shrink-0", className]}
+			aria-hidden="true"
+		>
+			<line x1="5" y1="12" x2="19" y2="12" />
+			<polyline points="12 5 19 12 12 19" />
+		</svg>
+	) : (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width={strokeWidth}
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class:list={["shrink-0", className]}
+			aria-hidden="true"
+		>
+			<polyline points="9 6 15 12 9 18" />
+		</svg>
+	)
+}
diff --git a/src/components/landing/SectionHeading.astro b/src/components/landing/SectionHeading.astro
new file mode 100644
index 000000000000000..d39eea68d8a1e8a
--- /dev/null
+++ b/src/components/landing/SectionHeading.astro
@@ -0,0 +1,18 @@
+---
+interface Props {
+	id?: string;
+	class?: string;
+}
+
+const { id, class: className = "" } = Astro.props;
+---
+
+<h2
+	id={id}
+	class:list={[
+		"text-foreground text-2xl leading-[1.1] font-medium text-balance md:text-3xl",
+		className,
+	]}
+>
+	<slot />
+</h2>
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index 1f149cb6f352046..7df31bc1b3d8f87 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -1,32 +1,25 @@
 ---
-/**
- * Two categories, three cards each. Cards have:
- * - Large product icon as the visual anchor
- * - Bold scenario text
- * - Product name as accent mono label
- * - CTA button links to product docs
- * - Plus marks on the outer grid corners
- * - gap-px grid technique from PlatformStats
- */
+import Eyebrow from "./Eyebrow.astro";
 import ProductCard from "./ProductCard.astro";
 import ProductCardGrid from "./ProductCardGrid.astro";
+import SectionHeading from "./SectionHeading.astro";
 
 const categories = [
 	{
-		label: "Network & Application",
+		label: "Public websites & apps",
 		threats: [
 			{
-				scenario: "Protect your applications",
+				scenario: "Block the latest attacks",
 				product: "WAF",
-				href: "/waf",
+				href: "/waf/",
 				icon: "ddos-protection",
 				detail: "Custom rules, rate limiting, zero-day protection",
 				cta: "Harden your app with WAF",
 			},
 			{
-				scenario: "Encrypt every connection",
+				scenario: "Protect users and data",
 				product: "SSL/TLS",
-				href: "/ssl",
+				href: "/ssl/",
 				icon: "ssl",
 				detail: "Automatic certificates, strict mode, mTLS",
 				cta: "Set up SSL/TLS",
@@ -34,7 +27,7 @@ const categories = [
 			{
 				scenario: "Replace CAPTCHAs",
 				product: "Turnstile",
-				href: "/turnstile",
+				href: "/turnstile/",
 				icon: "turnstile",
 				detail: "Invisible challenge, privacy-preserving verification",
 				cta: "Add Turnstile protection",
@@ -42,26 +35,27 @@ const categories = [
 		],
 	},
 	{
-		label: "Access & Identity",
+		label: "Corporate and home networks",
 		threats: [
 			{
-				scenario: "Expose internal services safely",
+				scenario: "Replace legacy VPNs",
 				product: "Tunnel",
-				href: "/cloudflare-one/networks/connectors/cloudflare-tunnel",
+				href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
 				icon: "tunnel",
 				detail: "Outbound-only encrypted tunnels, no open ports",
 				cta: "Create a secure Tunnel",
 			},
 			{
-				scenario: "Secure access to internal tools",
+				scenario: "Manage access across your internal environment",
 				product: "Zero Trust",
 				href: "/cloudflare-one/",
 				icon: "access",
-				detail: "Identity-aware access, device posture checks",
+				detail:
+					"Identity-first, quantum-safe access with device posture checks",
 				cta: "Set up Zero Trust access",
 			},
 			{
-				scenario: "Filter outbound traffic network-wide",
+				scenario: "Protect employee Internet browsing",
 				product: "Gateway",
 				href: "/cloudflare-one/traffic-policies/",
 				icon: "gateway",
@@ -75,22 +69,15 @@ const categories = [
 
 <section
 	class="pt-10 pb-10 lg:pt-14 lg:pb-12"
-	aria-labelledby="s6-heading"
+	aria-labelledby="secure-heading"
 	id="secure"
 >
-	<div class="mb-3">
-		<span class="text-accent font-mono text-[13px] tracking-widest uppercase"
-			>Secure</span
-		>
-	</div>
-	<h2
-		id="s6-heading"
-		class="mb-2 text-2xl leading-[1.1] font-medium -tracking-[0.035em] text-balance text-zinc-900 md:text-3xl dark:text-zinc-50"
-	>
+	<Eyebrow>Secure</Eyebrow>
+	<SectionHeading id="secure-heading" class="mb-2">
 		Secure what you already have
-	</h2>
+	</SectionHeading>
 	<p
-		class="mb-8 max-w-[600px] text-sm leading-relaxed text-pretty text-zinc-500 md:text-lg dark:text-zinc-400"
+		class="text-foreground-muted mb-8 max-w-[600px] text-sm leading-relaxed text-pretty md:text-lg"
 	>
 		Add Cloudflare in front of what is already running, no rebuild required.
 	</p>
diff --git a/src/components/landing/StructuralGrid.astro b/src/components/landing/StructuralGrid.astro
index e97d359e10c3c85..bdcb45f20e80fa9 100644
--- a/src/components/landing/StructuralGrid.astro
+++ b/src/components/landing/StructuralGrid.astro
@@ -1,20 +1,4 @@
 ---
-/**
- * Structural grid overlay — dot grid + intersection markers.
- *
- * Works with FullPageLines.astro which draws the vertical lines.
- * This component adds:
- * 1. The dot grid background (full page)
- * 2. Plus marks at line intersections (where vertical lines meet the top)
- *
- * The plus marks are placed at the same widths as FullPageLines tiers:
- * - 1400px (outer scaffold)
- * - 1280px (content container)
- * - 1216px (content padding edge — where text starts)
- * - 720px  (inner scaffold)
- */
-
-/** Must match FullPageLines tier widths exactly */
 const LINE_TIERS = [
 	{ width: "min(1400px, 100%)", accent: false },
 	{ width: "min(1280px, calc(100% - 48px))", accent: true },
@@ -26,8 +10,6 @@ const marks =
 	"absolute -top-0 left-1/2 -translate-x-1/2 h-full pointer-events-none";
 ---
 
-<!-- Dot grid — extends beyond content to reach the footer divider.
-     The footer's opaque background-color covers any overshoot. -->
 <div
 	class="pointer-events-none absolute inset-x-0 top-0 z-0"
 	style="height: calc(100% + 25rem)"
@@ -40,12 +22,10 @@ const marks =
 	</div>
 </div>
 
-<!-- Plus marks at line intersections -->
 <div
 	class="pointer-events-none absolute inset-0 z-1 hidden [contain:layout_style_paint] lg:block"
 	aria-hidden="true"
 >
-	<!-- Plus marks at each line tier intersection -->
 	{
 		LINE_TIERS.map((tier) => {
 			const stroke = tier.accent
diff --git a/src/components/landing/TabBar.astro b/src/components/landing/TabBar.astro
new file mode 100644
index 000000000000000..83c083e3183e74a
--- /dev/null
+++ b/src/components/landing/TabBar.astro
@@ -0,0 +1,287 @@
+---
+import { Icon } from "astro-icon/components";
+
+export interface Tab {
+	id: string;
+	label: string;
+	icon?: string;
+}
+
+export type TabBarVariant = "pill" | "underline";
+
+interface Props {
+	name: string;
+	tabs: Tab[];
+	activeId?: string;
+	variant?: TabBarVariant;
+	"aria-label"?: string;
+	class?: string;
+}
+
+const {
+	name,
+	tabs,
+	activeId = tabs[0]?.id,
+	variant = "pill",
+	"aria-label": ariaLabel,
+	class: className = "",
+} = Astro.props;
+
+interface VariantStyles {
+	tablist: string;
+	indicator: string;
+	tab: { base: string; active: string; inactive: string };
+}
+
+const variantStyles: Record<TabBarVariant, VariantStyles> = {
+	pill: {
+		tablist: [
+			"pointer-events-auto relative z-20 inline-flex items-center gap-1",
+			"border-border-100 bg-background shrink-0 overflow-x-auto rounded-full border p-1",
+			"scrollbar-hide max-w-full md:max-w-none md:overflow-x-visible",
+		].join(" "),
+		indicator: [
+			"bg-accent-100 pointer-events-none absolute top-1",
+			"h-[calc(100%-8px)] rounded-full",
+			"shadow-[0_1px_2px_rgba(0,0,0,0.06),0_4px_12px_rgba(0,0,0,0.08)]",
+			"opacity-0",
+		].join(" "),
+		tab: {
+			base: [
+				"relative z-10 flex h-10 cursor-pointer items-center gap-2",
+				"rounded-full px-3.5 py-2.5 font-medium -tracking-[0.01em]",
+				"whitespace-nowrap transition-colors duration-300 ease-out",
+				"focus-visible:outline-accent-100 focus-visible:outline-2 focus-visible:outline-offset-2",
+			].join(" "),
+			active: "text-light-foreground",
+			inactive:
+				"text-foreground-muted hover:bg-foreground/5 hover:text-foreground",
+		},
+	},
+	underline: {
+		tablist: [
+			"border-border-100 bg-background-muted relative flex border-b",
+			"scrollbar-hide overflow-x-auto md:overflow-x-visible",
+		].join(" "),
+		indicator: [
+			"bg-accent-100 pointer-events-none absolute bottom-[-1px] h-px",
+			"opacity-0",
+		].join(" "),
+		tab: {
+			base: [
+				"relative z-10 flex shrink-0 cursor-pointer items-center gap-2",
+				"px-5 py-3 text-sm font-medium -tracking-[0.01em] whitespace-nowrap",
+				"border-r border-border-100 last:border-r-0",
+				"transition-colors duration-200 ease-out",
+				"focus-visible:outline-accent-100 focus-visible:outline-2 focus-visible:-outline-offset-2",
+			].join(" "),
+			active: "text-foreground bg-background",
+			inactive:
+				"text-foreground-muted hover:bg-background hover:text-foreground",
+		},
+	},
+};
+
+const v = variantStyles[variant];
+---
+
+<div
+	data-tabbar={name}
+	data-tabbar-variant={variant}
+	role="tablist"
+	aria-label={ariaLabel ?? `${name} tabs`}
+	class:list={[v.tablist, className]}
+>
+	<div class:list={["tabbar-indicator", v.indicator]} aria-hidden="true"></div>
+
+	{
+		tabs.map((t) => {
+			const active = t.id === activeId;
+			return (
+				<button
+					type="button"
+					role="tab"
+					id={`${name}-tab-${t.id}`}
+					data-tab-id={t.id}
+					aria-selected={active ? "true" : "false"}
+					aria-controls={`${name}-panel-${t.id}`}
+					tabindex={active ? 0 : -1}
+					class:list={[v.tab.base, active ? v.tab.active : v.tab.inactive]}
+				>
+					{t.icon && (
+						<Icon name={t.icon} class="size-5 shrink-0" aria-hidden="true" />
+					)}
+					<span>{t.label}</span>
+				</button>
+			);
+		})
+	}
+</div>
+
+<script>
+	type TabBarRoot = HTMLElement;
+	type Variant = "pill" | "underline";
+
+	function initAllTabbars() {
+		document
+			.querySelectorAll<TabBarRoot>("[data-tabbar][role=tablist]")
+			.forEach(initTabbar);
+	}
+
+	function initTabbar(root: TabBarRoot) {
+		if (root.dataset.tabbarInit === "1") return;
+		root.dataset.tabbarInit = "1";
+
+		const name = root.dataset.tabbar!;
+		const variant = (root.dataset.tabbarVariant ?? "pill") as Variant;
+		const tabs = Array.from(
+			root.querySelectorAll<HTMLButtonElement>("[role=tab]"),
+		);
+		const indicator = root.querySelector<HTMLElement>(".tabbar-indicator");
+		const panels = Array.from(
+			document.querySelectorAll<HTMLElement>(
+				`[role=tabpanel][data-tabbar="${CSS.escape(name)}"]`,
+			),
+		);
+		if (!indicator || tabs.length === 0) return;
+
+		const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+
+		const activeClasses =
+			variant === "pill"
+				? ["text-light-foreground"]
+				: ["text-foreground", "bg-background"];
+		const inactiveClasses =
+			variant === "pill"
+				? [
+						"text-foreground-muted",
+						"hover:bg-foreground/5",
+						"hover:text-foreground",
+					]
+				: [
+						"text-foreground-muted",
+						"hover:bg-background",
+						"hover:text-foreground",
+					];
+
+		const FAST_MS = 180;
+		const SLOW_MS = 340;
+		const EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+		let lastIdx = -1;
+
+		function moveIndicatorTo(idx: number, animate: boolean) {
+			const tab = tabs[idx];
+			if (!tab || !indicator) return;
+
+			const newLeft = tab.offsetLeft;
+			const newRight = root.clientWidth - tab.offsetLeft - tab.offsetWidth;
+
+			if (!animate || reduceMotion.matches) {
+				const prev = indicator.style.transition;
+				indicator.style.transition = "none";
+				indicator.style.left = `${newLeft}px`;
+				indicator.style.right = `${newRight}px`;
+				indicator.style.opacity = "1";
+				void indicator.offsetWidth;
+				indicator.style.transition = prev;
+				lastIdx = idx;
+				return;
+			}
+
+			const movingRight = lastIdx === -1 || idx > lastIdx;
+			const transition = movingRight
+				? `right ${FAST_MS}ms ${EASE}, left ${SLOW_MS}ms ${EASE}, opacity 200ms ease-out`
+				: `left ${FAST_MS}ms ${EASE}, right ${SLOW_MS}ms ${EASE}, opacity 200ms ease-out`;
+
+			indicator.style.transition = transition;
+			indicator.style.left = `${newLeft}px`;
+			indicator.style.right = `${newRight}px`;
+			indicator.style.opacity = "1";
+
+			lastIdx = idx;
+		}
+
+		function setTabState(tab: HTMLButtonElement, active: boolean) {
+			tab.setAttribute("aria-selected", String(active));
+			tab.setAttribute("tabindex", active ? "0" : "-1");
+			activeClasses.forEach((c) => tab.classList.toggle(c, active));
+			inactiveClasses.forEach((c) => tab.classList.toggle(c, !active));
+		}
+
+		function activate(idx: number, opts: { focus?: boolean } = {}) {
+			const target = tabs[idx];
+			if (!target) return;
+			const targetId = target.dataset.tabId;
+
+			tabs.forEach((tab, i) => setTabState(tab, i === idx));
+
+			panels.forEach((p) => {
+				if (p.dataset.tabId === targetId) p.removeAttribute("hidden");
+				else p.setAttribute("hidden", "");
+			});
+
+			moveIndicatorTo(idx, true);
+			if (opts.focus) target.focus();
+
+			if (root.scrollWidth > root.clientWidth) {
+				target.scrollIntoView({
+					behavior: reduceMotion.matches ? "auto" : "smooth",
+					block: "nearest",
+					inline: "nearest",
+				});
+			}
+		}
+
+		tabs.forEach((tab, i) => {
+			tab.addEventListener("click", () => activate(i));
+			tab.addEventListener("keydown", (e: KeyboardEvent) => {
+				let next = -1;
+				switch (e.key) {
+					case "ArrowRight":
+					case "ArrowDown":
+						next = (i + 1) % tabs.length;
+						break;
+					case "ArrowLeft":
+					case "ArrowUp":
+						next = (i - 1 + tabs.length) % tabs.length;
+						break;
+					case "Home":
+						next = 0;
+						break;
+					case "End":
+						next = tabs.length - 1;
+						break;
+					default:
+						return;
+				}
+				e.preventDefault();
+				activate(next, { focus: true });
+			});
+		});
+
+		const initialIdx = Math.max(
+			0,
+			tabs.findIndex((t) => t.getAttribute("aria-selected") === "true"),
+		);
+		requestAnimationFrame(() => moveIndicatorTo(initialIdx, false));
+
+		let pendingFrame = 0;
+		window.addEventListener("resize", () => {
+			cancelAnimationFrame(pendingFrame);
+			pendingFrame = requestAnimationFrame(() => {
+				const idx = Math.max(
+					0,
+					tabs.findIndex((t) => t.getAttribute("aria-selected") === "true"),
+				);
+				moveIndicatorTo(idx, false);
+			});
+		});
+	}
+
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", initAllTabbars);
+	} else {
+		initAllTabbars();
+	}
+	document.addEventListener("astro:page-load", initAllTabbars);
+</script>
diff --git a/src/components/landing/ViewAllLink.astro b/src/components/landing/ViewAllLink.astro
new file mode 100644
index 000000000000000..c4a57154d3039dc
--- /dev/null
+++ b/src/components/landing/ViewAllLink.astro
@@ -0,0 +1,26 @@
+---
+import RightArrow from "./RightArrow.astro";
+
+interface Props {
+	href: string;
+	class?: string;
+}
+
+const { href, class: className = "" } = Astro.props;
+---
+
+<a
+	href={href}
+	class:list={[
+		"group text-accent-100 decoration-accent-100/40 inline-flex shrink-0 items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline",
+		className,
+	]}
+>
+	<slot />
+	<RightArrow
+		variant="chevron"
+		size={12}
+		strokeWidth={1.2}
+		class="transition-transform duration-150 group-hover:translate-x-0.5"
+	/>
+</a>
diff --git a/src/components/landing/constants.ts b/src/components/landing/constants.ts
index 110e9d50ca9b6fd..173879a775f7de4 100644
--- a/src/components/landing/constants.ts
+++ b/src/components/landing/constants.ts
@@ -1,5 +1,3 @@
-export const ACCENT = "#f56500";
-
 export function stagger(delay: number) {
 	return `animate-[v27-enter_0.6s_cubic-bezier(0.16,1,0.3,1)_${delay}s_both] motion-reduce:animate-none`;
 }
diff --git a/src/components/overrides/Head.astro b/src/components/overrides/Head.astro
index 2cd6df1d203db58..258127439de4a7c 100644
--- a/src/components/overrides/Head.astro
+++ b/src/components/overrides/Head.astro
@@ -1,5 +1,6 @@
 ---
 import Default from "@astrojs/starlight/components/Head.astro";
+import { Font } from "astro:assets";
 import { differenceInCalendarDays } from "date-fns";
 import "tippy.js/dist/tippy.css";
 
@@ -271,6 +272,7 @@ metaTags.map((attrs) => {
 });
 ---
 
+<Font cssVariable="--font-inter-tight" />
 <script src="src/scripts/footnotes.ts"></script>
 <script src="src/scripts/mermaid.ts"></script>
 <script src="src/scripts/analytics.ts"></script>
diff --git a/src/components/overrides/Header.astro b/src/components/overrides/Header.astro
index d088348c5a486ad..56a9f42bbff9882 100644
--- a/src/components/overrides/Header.astro
+++ b/src/components/overrides/Header.astro
@@ -24,7 +24,7 @@ import AgentDirective from "../AgentDirective.astro";
 			<a
 				id="header-login-button"
 				href="https://dash.cloudflare.com/"
-				class="header-login btn-soft"
+				class="header-login"
 			>
 				Log in
 			</a>
@@ -63,30 +63,66 @@ import AgentDirective from "../AgentDirective.astro";
 		flex-shrink: 0;
 	}
 
+	/*
+	 * Header CTA — mirrors the visual identity of the landing page's
+	 * "Get started" button (src/components/landing/Button.astro, primary).
+	 *
+	 * Colour values match the landing-root override of `--color-accent-100`
+	 * (#ff4801) and `--color-light-foreground` (#fffbf5). They're hard-coded
+	 * here because those tokens are only defined inside `.landing-root` —
+	 * starlight-tailwind sets `--color-accent-100` to indigo site-wide,
+	 * which would render the header CTA blue.
+	 *
+	 * Press feel (opacity hover, translate-y + scale on active, accent
+	 * focus ring) replicates Button.astro without the inset before/after
+	 * pseudo-element overlays — those are a marketing-grade flourish that
+	 * reads as noise at header scale.
+	 */
 	.header-login {
-		display: flex;
+		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		height: 2.25rem;
-		padding: 0 0.875rem;
-		border-radius: 0.5rem;
-		border: 1px solid transparent;
+		padding: 0 1rem;
+		border-radius: 9999px;
 		font-size: 0.875rem;
 		font-weight: 500;
 		line-height: 1;
 		white-space: nowrap;
 		text-decoration: none;
-		transition: color 150ms, background-color 150ms, border-color 150ms;
+		background-color: #ff4801;
+		color: #fffbf5;
+		transform: translateZ(
+			0
+		); /* promote to its own layer for crisp transforms */
+		transition:
+			opacity 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+			transform 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+			box-shadow 160ms ease-out;
 	}
 
-	.header-login {
-		background-color: var(--color-header-fill);
-		color: var(--color-header-text);
+	.header-login:hover {
+		color: #fffbf5;
+		opacity: 0.95;
 	}
 
-	.header-login:hover {
-		background-color: var(--color-header-line);
-		color: var(--color-header-hover-text);
+	.header-login:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px rgb(255 72 1 / 0.5);
+	}
+
+	.header-login:active {
+		transform: translateY(1px) scale(0.98);
+		transition-duration: 60ms;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.header-login {
+			transition: none;
+		}
+		.header-login:active {
+			transform: none;
+		}
 	}
 
 	:global(.site-title) {
@@ -151,7 +187,10 @@ import AgentDirective from "../AgentDirective.astro";
 			height: 2.25rem;
 			border-color: var(--color-header-line);
 			color: var(--color-header-text-subtle);
-			transition: color 150ms, background-color 150ms, border-color 150ms;
+			transition:
+				color 150ms,
+				background-color 150ms,
+				border-color 150ms;
 		}
 
 		#docsearch :global(.DocSearch-Button:hover) {
diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index b1ba66a45f82946..bb5bbc83c1c1356 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -11,7 +11,9 @@ const productTitle = isHomepage
 	: await lookupProductTitle(product, module);
 ---
 
-<div class="sidebar-header sticky top-0 z-[1] flex flex-col gap-2 bg-[var(--sl-color-black)] py-3.5 min-[50rem]:bg-[var(--sl-color-bg-sidebar)]">
+<div
+	class="sidebar-header sticky top-0 z-[1] flex flex-col gap-2 bg-[var(--sl-color-black)] py-3.5 min-[50rem]:bg-[var(--sl-color-bg-sidebar)]"
+>
 	{
 		!isHomepage && (
 			<div class="sidebar-product-title">
@@ -56,24 +58,22 @@ const productTitle = isHomepage
 
 	{
 		!isHomepage && (
-			<div class="border-b border-[var(--sidebar-border)] pb-3">
-				<a
-					href="/"
-					class="flex min-h-[2.125rem] w-full cursor-pointer items-center gap-2 rounded-lg px-3 text-sm font-medium text-[var(--sidebar-text-strong)] no-underline transition-colors hover:bg-[color:var(--sidebar-hover-bg)]/80"
+			<a
+				href="/"
+				class="flex min-h-[2.125rem] items-start gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-[var(--sidebar-text)] no-underline outline-2 outline-offset-[-2px] outline-transparent transition-colors duration-150 hover:bg-[color:var(--sidebar-hover-bg)]/80 hover:text-[var(--sidebar-hover-text)] focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400"
+			>
+				<svg
+					width="16"
+					height="16"
+					fill="currentColor"
+					viewBox="0 0 256 256"
+					class="mt-0.5 shrink-0 opacity-50"
+					aria-hidden="true"
 				>
-					<svg
-						width="16"
-						height="16"
-						fill="currentColor"
-						viewBox="0 0 256 256"
-						class="shrink-0 opacity-50"
-						aria-hidden="true"
-					>
-						<path d="M232,200a8,8,0,0,1-16,0,88.1,88.1,0,0,0-88-88H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,61.66L51.31,96H128A104.11,104.11,0,0,1,232,200Z" />
-					</svg>
-					<span class="truncate">Home</span>
-				</a>
-			</div>
+					<path d="M232,200a8,8,0,0,1-16,0,88.1,88.1,0,0,0-88-88H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,61.66L51.31,96H128A104.11,104.11,0,0,1,232,200Z" />
+				</svg>
+				<span>Home</span>
+			</a>
 		)
 	}
 </div>
diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro
index c8853cadf54345e..bbc81e549b6bd2d 100644
--- a/src/components/overrides/SidebarSublist.astro
+++ b/src/components/overrides/SidebarSublist.astro
@@ -95,7 +95,11 @@ const restoreIndices = sublist.map((entry) =>
 						>
 							<span class="group-label">
 								{entry.badge?.class?.includes("sidebar-group-icon") && (
-									<AstroIcon name={entry.badge.text} size="16px" class="group-icon shrink-0" />
+									<AstroIcon
+										name={entry.badge.text}
+										size="16px"
+										class="group-icon shrink-0"
+									/>
 								)}
 								<span class:list={[!nested && "large"]}>{entry.label}</span>
 								{entry.badge && (
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 882db013e18393c..5cec4697260e799 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -10,6 +10,7 @@ import SecureSection from "../components/landing/SecureSection.astro";
 import AccelerateSection from "../components/landing/AccelerateSection.astro";
 import AgentSetup from "../components/landing/AgentSetup.astro";
 import ChangelogSection from "../components/landing/ChangelogSection.astro";
+import CommunityGrid from "../components/landing/CommunityGrid.astro";
 import "../styles/landing.css";
 
 const heading = (icon: string) => ({
@@ -31,13 +32,9 @@ const sidebar = [
 		badge: heading("heading-get-started"),
 		items: [
 			{ label: "Overview", link: "/" },
-			{ label: "Fundamentals", link: "/fundamentals/" },
-			{ label: "API reference", link: "/api/" },
+			{ label: "API", link: "/api/" },
+			{ label: "Agent Setup", link: "/agent-setup/" },
 			{ label: "Directory", link: "/directory/" },
-			{
-				label: "Troubleshooting",
-				link: "/support/troubleshooting/http-status-codes/",
-			},
 			{
 				label: "Resources",
 				collapsed: true,
@@ -50,6 +47,17 @@ const sidebar = [
 					{ label: "Support", link: "/support/" },
 				],
 			},
+			{
+				label: "API & IaC",
+				collapsed: true,
+				items: [
+					{ label: "API reference", link: "/api/" },
+					{ label: "Terraform", link: "/terraform/" },
+					{ label: "Pulumi", link: "/pulumi/" },
+					{ label: "SDKs", link: "/fundamentals/api/reference/sdks/" },
+				],
+			},
+			{ label: "Support", link: "/support/" },
 		],
 	},
 	{
@@ -63,17 +71,18 @@ const sidebar = [
 				badge: groupIcon("workers"),
 				items: [
 					{ label: "Workers", link: "/workers/" },
-					{ label: "Pages", link: "/pages/" },
 					{ label: "Containers", link: "/containers/" },
-					{ label: "Workflows", link: "/workflows/" },
 					{ label: "Durable Objects", link: "/durable-objects/" },
 					{ label: "Queues", link: "/queues/" },
+					{ label: "Workflows", link: "/workflows/" },
+					{ label: "Browser Run", link: "/browser-run/" },
 					{ label: "Pipelines", link: "/pipelines/" },
+					{ label: "Workers VPC", link: "/workers-vpc/" },
 					{
 						label: "Cloudflare for Platforms",
 						link: "/cloudflare-for-platforms/",
 					},
-					{ label: "Workers VPC", link: "/workers-vpc/" },
+					{ label: "Email Service", link: "/email-service/" },
 				],
 			},
 			{
@@ -83,10 +92,8 @@ const sidebar = [
 				items: [
 					{ label: "Workers AI", link: "/workers-ai/" },
 					{ label: "AI Gateway", link: "/ai-gateway/" },
-					{ label: "AI Search", link: "/ai-search/" },
-					{ label: "AI Agents", link: "/agents/" },
 					{ label: "Vectorize", link: "/vectorize/" },
-					{ label: "Browser Rendering", link: "/browser-rendering/" },
+					{ label: "AI Search", link: "/ai-search/" },
 					{ label: "AI Crawl Control", link: "/ai-crawl-control/" },
 				],
 			},
@@ -95,8 +102,8 @@ const sidebar = [
 				collapsed: true,
 				badge: groupIcon("kv"),
 				items: [
-					{ label: "D1", link: "/d1/" },
 					{ label: "R2", link: "/r2/" },
+					{ label: "D1", link: "/d1/" },
 					{ label: "KV", link: "/kv/" },
 					{ label: "Hyperdrive", link: "/hyperdrive/" },
 				],
@@ -251,9 +258,12 @@ const props = {
 				<SecureSection />
 
 				<AccelerateSection />
+
 				<PlatformStats />
 
 				<ChangelogSection />
+
+				<CommunityGrid />
 			</main>
 		</div>
 	</div>
diff --git a/src/styles/landing.css b/src/styles/landing.css
index d4218e3f6dfbc0c..1090744bc4ef1de 100644
--- a/src/styles/landing.css
+++ b/src/styles/landing.css
@@ -2,10 +2,13 @@
 
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
-@font-face {
-	font-family: "Inter Tight";
-	font-display: swap;
-}
+/*
+ * Inter Tight is loaded via Astro's Fonts API (configured in astro.config.ts
+ * and injected as <Font> in src/components/overrides/Head.astro). The
+ * `--font-inter-tight` variable resolves to the loaded family plus an
+ * auto-generated metric-matched fallback, so we use it directly instead of
+ * declaring our own @font-face.
+ */
 
 @media (prefers-reduced-motion: no-preference) {
 	html {
@@ -14,13 +17,48 @@
 }
 
 @theme {
-	--color-accent: #f56500;
-
-	/* Shared landing card surfaces — used across Stats, Build, Secure */
-	--color-l-card: #fff;
-	--color-l-card-dark: #1d1d1d;
-	--color-l-card-hover: #fafafa;
-	--color-l-card-hover-dark: #252525;
+	/*
+	 * Semantic colour tokens for the landing page.
+	 *
+	 * Naming convention is **role-based, not luminance-based**:
+	 *   - `background`        — canonical page / panel surface
+	 *   - `background-muted`  — recessed surface (tab strip, inset card)
+	 *   - `background-subtle` — deepest recess (hover/pressed surface)
+	 *   - `foreground`        — primary text
+	 *   - `foreground-muted`  — body / detail text
+	 *   - `foreground-subtle` — captions / eyebrows
+	 *
+	 * Brightness flips between light and dark themes — the role does
+	 * not. `foreground` is always the most prominent text colour
+	 * regardless of theme; in light mode that's near-black, in dark
+	 * mode it's near-white. Don't read the names as a luminance scale.
+	 *
+	 * Brand orange lives on `accent-100` (canonical) + `accent-200`
+	 * (lighter / hover). `accent-100` is used as both a fill (CTA
+	 * panels, primary buttons) and a foreground (eyebrows, links,
+	 * focus rings) — there is no separate "fill" alias.
+	 *
+	 * Theme switching is handled via the .landing-root scope further
+	 * below.
+	 */
+	--color-background: #ffffff;
+	--color-background-muted: #fafafa;
+	--color-background-subtle: #f4f4f5;
+	--color-foreground: #18181b;
+	--color-foreground-muted: #52525b;
+	--color-foreground-subtle: #71717a;
+	--color-accent-100: #ff4801;
+	--color-accent-200: #ff7038;
+	--color-light-foreground: #fffbf5;
+	--color-border-100: #e4e4e7;
+
+	/*
+	 * Selection — borrowed from workers.cloudflare.com. Peach background +
+	 * deep-orange text in light mode, dark-brown background + lighter-orange
+	 * text in dark. Applied via the `::selection` rule on `.landing-root`.
+	 */
+	--color-selection-bg: #ffe9e0;
+	--color-selection-text: #ff500a;
 
 	@keyframes v27-enter {
 		from {
@@ -43,10 +81,37 @@
 			transform: translate(-50%, -50%) scale(2);
 		}
 	}
+
+	/*
+	 * Changelog "live" pulse — used by ChangelogSection.astro on the
+	 * featured card date dot. Registered as a Tailwind v4 animation
+	 * token so it can be applied via `animate-cl-pulse` (with
+	 * `motion-reduce:animate-none` for the reduced-motion fallback).
+	 */
+	--animate-cl-pulse: cl-pulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+
+	@keyframes cl-pulse {
+		0% {
+			transform: scale(0.4);
+			opacity: 0.6;
+		}
+		100% {
+			transform: scale(1.6);
+			opacity: 0;
+		}
+	}
 }
 
-@utility l-corner-stroke {
-	stroke: var(--l-corner-mark, rgba(24, 24, 27, 0.28));
+/*
+ * scrollbar-hide — for horizontally-scrollable strips (TabBar, etc.).
+ * Visually hides the scrollbar while preserving keyboard/touch scroll.
+ */
+@utility scrollbar-hide {
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+	&::-webkit-scrollbar {
+		display: none;
+	}
 }
 
 @utility v27-broadcast {
@@ -80,12 +145,6 @@
 		--tw-accent-900: var(--orange-accent-900);
 	}
 
-	:root[data-theme="dark"] {
-		--tw-accent-200: var(--orange-accent-200);
-		--tw-accent-600: var(--orange-accent-600);
-		--tw-accent-900: var(--orange-accent-900);
-	}
-
 	* {
 		-webkit-tap-highlight-color: transparent;
 	}
@@ -109,41 +168,53 @@
 /*
  * Landing page root — font and layout only.
  * StructuralGrid CSS variables live here because they need
- * complex values (radial-gradient, mask-image) with no Tailwind equivalent.
+ * complex values (radial-gradient backgrounds) with no Tailwind equivalent.
  */
 .landing-root {
+	/*
+	 * Token overrides — these MUST live on `.landing-root` (not in @theme)
+	 * because starlight-tailwind declares `--color-accent-100` etc. in an
+	 * UNLAYERED `:root` block, which outranks anything inside @layer theme.
+	 * `.landing-root` is more specific than `:root, :host` so wins.
+	 */
+	--color-background: #ffffff;
+	--color-background-muted: #fafafa;
+	--color-background-subtle: #f4f4f5;
+	--color-foreground: #18181b;
+	--color-foreground-muted: #52525b;
+	--color-foreground-subtle: #71717a;
+	--color-accent-100: #ff4801;
+	--color-accent-200: #ff7038;
+	--color-light-foreground: #fffbf5;
+	--color-border-100: #e4e4e7;
+	--color-selection-bg: #ffe9e0;
+	--color-selection-text: #ff500a;
+
 	--l-section-pad: max(2rem, 4vw);
 	--l-pad-top: var(--l-section-pad);
 	overflow-x: clip;
-	font-family:
-		"Inter Tight",
-		Inter,
-		-apple-system,
-		sans-serif;
+	/*
+	 * IMPORTANT: must be `var(--font-inter-tight)`, not the bare "Inter Tight"
+	 * family name. Astro's Fonts API registers the loaded font under a hashed
+	 * family name (e.g. "Inter Tight-5c4decf53c0bfa89") and only exposes it
+	 * through this CSS variable — using "Inter Tight" directly silently falls
+	 * back to the system font and collapses weights ≥ 600 to bold.
+	 */
+	font-family: var(--font-inter-tight);
 	line-height: normal;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	color: #18181b;
+	color: var(--color-foreground);
 
 	--l-dot-color: #efeff1;
 	--l-dot-size: 18px 18px;
-	--l-dot-mask: radial-gradient(
-		ellipse 50% 50% at 50% 50%,
-		#000 60%,
-		transparent 100%
-	);
 	--l-grid-mark: rgba(0, 0, 0, 0.08);
 	--l-grid-mark-accent: rgba(0, 0, 0, 0.12);
-	/* Corner plus marks on cards/grids — subdued, solid grey like the Workers site */
-	--l-corner-mark: #d4d4d8;
-	--l-h-line: rgba(0, 0, 0, 0.05);
-	--l-h-line-fine: rgba(0, 0, 0, 0.025);
 }
 
-@media (max-width: 1439px) {
-	.landing-root {
-		--l-section-pad: max(2rem, 4vw);
-	}
+.landing-root ::selection {
+	background-color: var(--color-selection-bg);
+	color: var(--color-selection-text);
 }
 
 @media (max-width: 800px) {
@@ -153,17 +224,23 @@
 }
 
 :root[data-theme="dark"] .landing-root {
-	color: #fafafa;
+	/* Dark-mode token overrides — keeps original neutral docs palette */
+	--color-background: #1d1d1d;
+	--color-background-muted: #252525;
+	--color-background-subtle: #2a2a2a;
+	--color-foreground: #fafafa;
+	--color-foreground-muted: #a1a1aa;
+	--color-foreground-subtle: #71717a;
+	--color-accent-100: #ff4801;
+	--color-accent-200: #ff7038;
+	--color-light-foreground: #fffbf5;
+	--color-border-100: #2a2a2a;
+	--color-selection-bg: #3d1f0f;
+	--color-selection-text: #ff7038;
+
+	color: var(--color-foreground);
 	--l-dot-color: rgba(255, 255, 255, 0.05);
 	--l-dot-size: 22px 22px;
-	--l-dot-mask: radial-gradient(
-		ellipse 45% 45% at 50% 50%,
-		#000 40%,
-		transparent 100%
-	);
 	--l-grid-mark: rgba(255, 255, 255, 0.1);
 	--l-grid-mark-accent: rgba(255, 255, 255, 0.16);
-	--l-corner-mark: #52525b;
-	--l-h-line: rgba(255, 255, 255, 0.06);
-	--l-h-line-fine: rgba(255, 255, 255, 0.03);
 }

From f78d853540aa3a480c5b166817dcfd0e1dd21ee9 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Mon, 4 May 2026 19:59:14 +0100
Subject: [PATCH 20/35] style: secondary button

---
 src/components/landing/Button.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/landing/Button.astro b/src/components/landing/Button.astro
index ee006b8a12fdf79..e80dead0d944daf 100644
--- a/src/components/landing/Button.astro
+++ b/src/components/landing/Button.astro
@@ -54,7 +54,7 @@ const variantClasses: Record<Variant, string> = {
 	].join(" "),
 	secondary: [
 		"text-foreground border-border-100",
-		"border dark:border-light-foreground/40 border-foreground",
+		"border border-zinc-200 dark:border-[#2a2a2a]",
 		"hover:before:opacity-[0.04] focus-visible:before:opacity-[0.04]",
 	].join(" "),
 	ghost: [

From f58d677606455069e9acdc03b77d0d628ba3402e Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Mon, 4 May 2026 22:53:58 +0100
Subject: [PATCH 21/35] chore: update copy

---
 .../landing/AccelerateSection.astro           | 19 +++++++------
 src/components/landing/BuildFromScratch.astro |  2 +-
 src/components/landing/SecureSection.astro    | 27 ++++++++++---------
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index 1257fb3e151534d..dcfbce4fff7da2e 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -33,10 +33,10 @@ const phases = [
 		product: "Argo Smart Routing",
 		icon: "argo-smart-routing",
 		href: "/argo-smart-routing/",
-		outcome: "Route around congestion automatically",
+		outcome: "Make web apps faster with intelligent routing",
 		detail:
-			"Real-time network intelligence — typically 30% faster than public internet.",
-		cta: "Turn on Argo Smart Routing",
+			"Detects and routes around real-time network congestion. On average, makes web applications 30% faster.",
+		cta: "Integrate Argo Smart Routing",
 		tags: ["Smart Routing", "Tiered Caching"],
 		color: "bg-amber-500",
 		colorMuted: "bg-amber-500/20",
@@ -49,7 +49,7 @@ const phases = [
 		product: "CDN",
 		icon: "cache",
 		href: "/cache/get-started/",
-		outcome: "Make your site faster and stop paying for bandwidth",
+		outcome: "Make your site faster and stop overpaying for bandwidth",
 		detail:
 			"CDN caches content in 330+ cities worldwide with cache rules, tiered caching, and zero-configuration setup.",
 		cta: "Set up Cache Rules",
@@ -82,11 +82,10 @@ const phases = [
 		product: "Images",
 		icon: "images",
 		href: "/images/",
-		outcome:
-			"Easily store, resize, optimize, and serve images all in one place",
+		outcome: "Streamlined image infrastructure built for scale",
 		detail:
-			"Global low-latency delivery, resizing, and AI-powered optimization from 330+ cities.",
-		cta: "Optimize image delivery",
+			"Build scalable, reliable media pipelines to store, optimize, and deliver images.",
+		cta: "Upload and optimize images",
 		tags: ["Transform", "Polish", "WebP/AVIF"],
 		color: "bg-teal-500",
 		colorMuted: "bg-teal-500/20",
@@ -102,8 +101,8 @@ const phases = [
 		href: "/zaraz/",
 		outcome: "Load third-party tools without weighing down web apps",
 		detail:
-			"Load analytics, ads, and pixels server-side. Fewer network requests, faster page loads.",
-		cta: "Move scripts with Zaraz",
+			"Load analytics tools, advertising pixels, widgets, and other third-party tools without slowing down your applications.",
+		cta: "Improve page load with minimal effort",
 		tags: ["Server-side Tags", "Consent Mgmt"],
 		color: "bg-sky-500",
 		colorMuted: "bg-sky-500/20",
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index cc164dff62aaa39..9a495104bb00a9b 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -38,7 +38,7 @@ const primitives = [
 		iconColor: "#19e306",
 		iconBg: "#f2f5e1",
 		iconBgDark: "rgba(25, 227, 6, 0.16)",
-		heading: "Add intelligence to anything you build",
+		heading: "The AI inference platform",
 		description:
 			"Run AI inference globally with one API call, build agents, and search across your data — no GPUs to manage, no capacity planning.",
 		command: "npx wrangler ai models",
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index 7df31bc1b3d8f87..cc9408be44798e7 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -9,27 +9,29 @@ const categories = [
 		label: "Public websites & apps",
 		threats: [
 			{
-				scenario: "Block the latest attacks",
+				scenario: "Protect your applications without sacrificing performance",
 				product: "WAF",
 				href: "/waf/",
 				icon: "ddos-protection",
-				detail: "Custom rules, rate limiting, zero-day protection",
+				detail:
+					"Identify and block malicious payloads before they can compromise your application",
 				cta: "Harden your app with WAF",
 			},
 			{
-				scenario: "Protect users and data",
+				scenario: "Encrypt your site in minutes",
 				product: "SSL/TLS",
 				href: "/ssl/",
 				icon: "ssl",
-				detail: "Automatic certificates, strict mode, mTLS",
+				detail: "Streamline TLS Certificate Management",
 				cta: "Set up SSL/TLS",
 			},
 			{
-				scenario: "Replace CAPTCHAs",
+				scenario: "Verify visitors without CAPTCHA",
 				product: "Turnstile",
 				href: "/turnstile/",
 				icon: "turnstile",
-				detail: "Invisible challenge, privacy-preserving verification",
+				detail:
+					"Confirm web visitors are real and block unwanted bots without slowing down web experiences for real users",
 				cta: "Add Turnstile protection",
 			},
 		],
@@ -38,7 +40,7 @@ const categories = [
 		label: "Corporate and home networks",
 		threats: [
 			{
-				scenario: "Replace legacy VPNs",
+				scenario: "Securely connect origins with post-quantum encrypted tunnels",
 				product: "Tunnel",
 				href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
 				icon: "tunnel",
@@ -51,15 +53,16 @@ const categories = [
 				href: "/cloudflare-one/",
 				icon: "access",
 				detail:
-					"Identity-first, quantum-safe access with device posture checks",
+					"Identity-first, quantum-safe access to private applications and infrastructure",
 				cta: "Set up Zero Trust access",
 			},
 			{
-				scenario: "Protect employee Internet browsing",
+				scenario: "Secure Internet browsing without disruptions",
 				product: "Gateway",
 				href: "/cloudflare-one/traffic-policies/",
 				icon: "gateway",
-				detail: "DNS filtering, HTTP policies, network controls",
+				detail:
+					"Cloud-native Secure Web Gateway (SWG) that inspects browser traffic without disruption",
 				cta: "Create Gateway policies",
 			},
 		],
@@ -74,12 +77,12 @@ const categories = [
 >
 	<Eyebrow>Secure</Eyebrow>
 	<SectionHeading id="secure-heading" class="mb-2">
-		Secure what you already have
+		Block exploits, bots, and DDoS attacks in seconds.
 	</SectionHeading>
 	<p
 		class="text-foreground-muted mb-8 max-w-[600px] text-sm leading-relaxed text-pretty md:text-lg"
 	>
-		Add Cloudflare in front of what is already running, no rebuild required.
+		Everything you need to secure applications, APIs, and infrastructure.
 	</p>
 
 	<div class="space-y-8">

From 22f56b9f9cb1554c8089b069349c3101d5d11d2c Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 5 May 2026 11:37:34 +0100
Subject: [PATCH 22/35] chore: rework

---
 .../landing/AccelerateSection.astro           | 30 +-----
 src/components/landing/AgentSetup.astro       | 72 +-------------
 src/components/landing/BuildFromScratch.astro |  2 -
 src/components/landing/Button.astro           |  5 +-
 src/components/landing/ChangelogSection.astro |  2 -
 src/components/landing/CommunityGrid.astro    |  2 -
 src/components/landing/CopyPromptButton.astro | 96 +++++++++++++++++++
 src/components/landing/Eyebrow.astro          | 28 ------
 src/components/landing/Hero.astro             | 36 +------
 src/components/landing/PlatformStats.astro    |  7 +-
 src/components/landing/SecureSection.astro    |  5 +-
 src/components/landing/constants.ts           | 28 ++++++
 src/pages/index.astro                         |  6 +-
 13 files changed, 143 insertions(+), 176 deletions(-)
 create mode 100644 src/components/landing/CopyPromptButton.astro
 delete mode 100644 src/components/landing/Eyebrow.astro

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index dcfbce4fff7da2e..d90d20dab0b5c49 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -154,7 +154,6 @@ ${shellSelectors} {
 	id="accelerate"
 	data-mode="after"
 >
-	<Eyebrow>Accelerate</Eyebrow>
 	<div
 		class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between sm:gap-6"
 	>
@@ -213,20 +212,6 @@ ${shellSelectors} {
 				Without Cloudflare
 			</button>
 		</div>
-		<div
-			class="wf-total-label text-foreground-muted flex items-baseline gap-2 font-mono text-xs tabular-nums transition-opacity duration-300"
-		>
-			<span class="tracking-widest uppercase">Total</span>
-			<span class="text-foreground font-medium tabular-nums">
-				<span class="group-data-[mode=before]/wf:hidden" data-mode-only="after"
-					>~300 ms</span
-				>
-				<span
-					class="hidden group-data-[mode=before]/wf:inline"
-					data-mode-only="before">~2,300 ms</span
-				>
-			</span>
-		</div>
 	</div>
 
 	<div class="border-border-100 relative overflow-visible border">
@@ -358,25 +343,12 @@ ${shellSelectors} {
 						</div>
 					</div>
 				</div>
-
-				<div
-					id="wf-savings-group"
-					aria-hidden="false"
-					class="text-foreground-muted hidden items-baseline gap-2 font-mono text-xs tabular-nums transition-opacity duration-300 group-data-[mode=before]/wf:pointer-events-none group-data-[mode=before]/wf:opacity-0 motion-reduce:transition-none sm:flex"
-				>
-					<span class="tracking-widest uppercase">Savings</span>
-					<span class="text-foreground font-medium tabular-nums">
-						87% faster
-					</span>
-				</div>
 			</div>
 		</div>
 	</div>
 
 	<div class="mb-6 flex items-end justify-between gap-4 pt-12">
-		<h3
-			class="not-content text-foreground text-lg font-medium -tracking-tight"
-		>
+		<h3 class="not-content text-foreground text-lg font-medium -tracking-tight">
 			Explore by product
 		</h3>
 		<ViewAllLink href="/directory/">View all</ViewAllLink>
diff --git a/src/components/landing/AgentSetup.astro b/src/components/landing/AgentSetup.astro
index b58b72c62d5e392..1f896aa0811e914 100644
--- a/src/components/landing/AgentSetup.astro
+++ b/src/components/landing/AgentSetup.astro
@@ -1,27 +1,11 @@
 ---
 import { Icon } from "@astrojs/starlight/components";
-import CommandBlock from "./CommandBlock.astro";
 import CornerMarks from "./CornerMarks.astro";
 import HalftoneBackground from "./HalftoneBackground.astro";
-import RightArrow from "./RightArrow.astro";
 import SectionHeading from "./SectionHeading.astro";
-
-const PROMPT = "Fetch https://developers.cloudflare.com/agent-setup/prompt.md";
+import CopyPromptButton from "./CopyPromptButton.astro";
 
 const ALL_GUIDES_HREF = "/agent-setup/";
-
-const AGENTS = [
-	{ id: "claude", label: "Claude Code", href: "/agent-setup/claude-code/" },
-	{ id: "codex", label: "Codex", href: "/agent-setup/codex/" },
-	{ id: "cursor", label: "Cursor", href: "/agent-setup/cursor/" },
-	{ id: "opencode", label: "OpenCode", href: "/agent-setup/opencode/" },
-	{
-		id: "copilot",
-		label: "GitHub Copilot",
-		href: "/agent-setup/github-copilot/",
-	},
-	{ id: "windsurf", label: "Windsurf", href: "/agent-setup/windsurf/" },
-];
 ---
 
 <section
@@ -45,29 +29,18 @@ const AGENTS = [
 				>
 					Paste into any AI coding agent to install Cloudflare agent tooling:
 				</p>
-				<CommandBlock
-					id="agents-setup-prompt"
-					command={PROMPT}
-					rounded
-					class="mt-auto min-w-0"
-				/>
+				<CopyPromptButton class="mr-auto" />
 			</div>
 			<a
 				href={ALL_GUIDES_HREF}
 				class="bg-background focus-visible:outline-accent-100 relative col-span-12 flex min-w-0 flex-row items-center justify-between overflow-hidden px-8 py-6 no-underline transition-colors duration-150 focus-visible:bg-[#FCEDE0] focus-visible:outline-2 focus-visible:-outline-offset-2 lg:col-span-4 lg:flex-col lg:items-stretch lg:p-8 dark:focus-visible:bg-[#2A2118]"
 			>
 				<HalftoneBackground />
-
 				<div class="relative z-[1] flex flex-col gap-2.5">
-					<span
-						class="text-accent-100 hidden font-mono text-[11px] tracking-widest uppercase lg:block"
-					>
-						All agents
-					</span>
 					<span
 						class="text-foreground max-w-[14ch] text-lg leading-tight font-medium md:text-xl"
 					>
-						Browse all setup guides
+						Browse all agent setup guides
 					</span>
 				</div>
 
@@ -79,45 +52,6 @@ const AGENTS = [
 					<Icon name="right-arrow" size="1rem" />
 				</span>
 			</a>
-			{
-				AGENTS.map((agent) => (
-					<a
-						href={agent.href}
-						class="agent-setup-tile bg-background focus-visible:bg-background-subtle focus-visible:outline-accent-100 group relative col-span-6 flex min-h-[9.5rem] min-w-0 flex-col items-start justify-between gap-5 px-5 py-6 no-underline transition-colors duration-150 focus-visible:outline-2 focus-visible:-outline-offset-2 sm:col-span-4 lg:col-span-2"
-						aria-label={`${agent.label} setup guide`}
-					>
-						<span
-							class="inline-flex h-8 w-8 items-center justify-center"
-							aria-hidden="true"
-						>
-							<img
-								src={`/icons/agents/${agent.id}/light.svg`}
-								alt=""
-								class="block h-full w-full object-contain dark:hidden"
-								loading="lazy"
-								decoding="async"
-							/>
-							<img
-								src={`/icons/agents/${agent.id}/dark.svg`}
-								alt=""
-								class="hidden h-full w-full object-contain dark:block"
-								loading="lazy"
-								decoding="async"
-							/>
-						</span>
-						<div class="flex flex-col gap-1">
-							<span class="text-foreground text-[15px] leading-snug font-medium -tracking-[0.012em]">
-								{agent.label}
-							</span>
-						</div>
-						<RightArrow
-							variant="chevron"
-							strokeWidth={1.7}
-							class="text-foreground-subtle group-hover:text-foreground group-focus-visible:text-foreground absolute top-5 right-5 transition duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:translate-x-[2px] group-focus-visible:translate-x-[2px] motion-reduce:transition-none"
-						/>
-					</a>
-				))
-			}
 		</div>
 	</div>
 </section>
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index 9a495104bb00a9b..f95db66cd490d85 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -3,7 +3,6 @@ import { Icon } from "astro-icon/components";
 import CommandBlock from "./CommandBlock.astro";
 import CornerMarks from "./CornerMarks.astro";
 import Button from "./Button.astro";
-import Eyebrow from "./Eyebrow.astro";
 import RightArrow from "./RightArrow.astro";
 import SectionHeading from "./SectionHeading.astro";
 import TabBar from "./TabBar.astro";
@@ -96,7 +95,6 @@ const primitives = [
 ---
 
 <section class="pt-10 pb-6 lg:pt-14" aria-labelledby="build-heading" id="build">
-	<Eyebrow>Build</Eyebrow>
 	<SectionHeading id="build-heading" class="mb-8">
 		Powerful primitives, seamlessly integrated
 	</SectionHeading>
diff --git a/src/components/landing/Button.astro b/src/components/landing/Button.astro
index e80dead0d944daf..7b54c626b65d2c4 100644
--- a/src/components/landing/Button.astro
+++ b/src/components/landing/Button.astro
@@ -35,11 +35,10 @@ const base = [
 	"disabled:pointer-events-none disabled:opacity-50",
 	"before:content-[''] before:absolute before:-inset-[1px] before:opacity-0 before:rounded-[inherit] before:pointer-events-none before:z-[3]",
 	"before:bg-current before:transition-opacity before:duration-[160ms] before:ease-[cubic-bezier(0.55,0.085,0.68,0.53)]",
-	"active:before:opacity-[0.26] active:before:transition-none",
 	"after:content-[''] after:absolute after:-inset-[1px] after:opacity-0 after:rounded-[inherit] after:pointer-events-none after:z-[2]",
 	"after:border after:border-current",
 	"after:transition-opacity after:duration-[600ms] after:delay-[100ms] after:ease-[cubic-bezier(0.25,0.46,0.45,0.94)]",
-	"active:after:opacity-100 active:after:transition-none",
+	"active:after:transition-none",
 	"active:translate-y-[1px] active:scale-[0.98]",
 	"hover:opacity-95",
 	"[&>*]:relative [&>*]:z-[4]",
@@ -53,7 +52,7 @@ const variantClasses: Record<Variant, string> = {
 		"hover:before:opacity-[0.18] focus-visible:before:opacity-[0.18]",
 	].join(" "),
 	secondary: [
-		"text-foreground border-border-100",
+		"text-foreground border-border-100 bg-background",
 		"border border-zinc-200 dark:border-[#2a2a2a]",
 		"hover:before:opacity-[0.04] focus-visible:before:opacity-[0.04]",
 	].join(" "),
diff --git a/src/components/landing/ChangelogSection.astro b/src/components/landing/ChangelogSection.astro
index 40eab015810bcd2..37b1f3005bc3746 100644
--- a/src/components/landing/ChangelogSection.astro
+++ b/src/components/landing/ChangelogSection.astro
@@ -3,7 +3,6 @@ import { getChangelogs } from "~/util/changelog";
 import { getEntries } from "astro:content";
 import { format } from "date-fns";
 import CornerMarks from "./CornerMarks.astro";
-import Eyebrow from "./Eyebrow.astro";
 import HalftoneBackground from "./HalftoneBackground.astro";
 import RightArrow from "./RightArrow.astro";
 import SectionHeading from "./SectionHeading.astro";
@@ -75,7 +74,6 @@ const grid = entries.slice(1);
 		>
 			<div class="mb-6 flex items-end justify-between sm:mb-8">
 				<div>
-					<Eyebrow>Changelog</Eyebrow>
 					<SectionHeading id="changelog-heading" class="mb-2">
 						What's new
 					</SectionHeading>
diff --git a/src/components/landing/CommunityGrid.astro b/src/components/landing/CommunityGrid.astro
index b9589ffc9083cfc..c4e2699202fde8f 100644
--- a/src/components/landing/CommunityGrid.astro
+++ b/src/components/landing/CommunityGrid.astro
@@ -1,6 +1,5 @@
 ---
 import CornerMarks from "./CornerMarks.astro";
-import Eyebrow from "./Eyebrow.astro";
 import SectionHeading from "./SectionHeading.astro";
 
 const cards = [
@@ -41,7 +40,6 @@ const cards = [
 	aria-labelledby="community-heading"
 >
 	<div class="mb-6 sm:mb-8">
-		<Eyebrow>Community & Resources</Eyebrow>
 		<SectionHeading id="community-heading" class="mb-2">
 			Connect with Cloudflare
 		</SectionHeading>
diff --git a/src/components/landing/CopyPromptButton.astro b/src/components/landing/CopyPromptButton.astro
new file mode 100644
index 000000000000000..f0b7529c9eeaeb5
--- /dev/null
+++ b/src/components/landing/CopyPromptButton.astro
@@ -0,0 +1,96 @@
+---
+import { AGENTS, type AgentId } from "./constants";
+import Button from "./Button.astro";
+
+interface Props {
+	/**
+	 * Agent ids to feature in the icon row, in order. Defaults to a
+	 * recognizable 4-agent subset; the AgentSetup section below the hero
+	 * still surfaces all six.
+	 */
+	agentIds?: readonly AgentId[];
+	/**
+	 * Optional class hooks merged onto the underlying secondary Button.
+	 */
+	class?: string;
+}
+
+const {
+	agentIds = ["claude", "cursor", "codex", "opencode"] as const,
+	class: className = "",
+} = Astro.props;
+
+const featuredAgents = AGENTS.filter((a) =>
+	(agentIds as readonly string[]).includes(a.id),
+);
+---
+
+<Button
+	class:list={["copy-prompt-btn group/copy cursor-pointer", className]}
+	variant="secondary"
+	size="md"
+	type="button"
+>
+	<span class="inline-flex items-center gap-2.5 text-base font-medium">
+		<span
+			class="relative flex h-5 shrink-0 items-center justify-start gap-[3px]"
+			aria-hidden="true"
+		>
+			{
+				featuredAgents.map((agent) => (
+					<>
+						<img
+							src={`/icons/agents/${agent.id}/light.svg`}
+							alt={agent.id}
+							class="block h-5 w-5 dark:hidden"
+							loading="lazy"
+							decoding="async"
+						/>
+						<img
+							src={`/icons/agents/${agent.id}/dark.svg`}
+							alt={agent.id}
+							class="hidden h-5 w-5 dark:block"
+							loading="lazy"
+							decoding="async"
+						/>
+					</>
+				))
+			}
+		</span>
+		<span class="group-data-[copied=true]/copy:hidden">Copy Prompt</span>
+		<span class="hidden group-data-[copied=true]/copy:inline">
+			Prompt Copied!
+		</span>
+	</span>
+</Button>
+
+<script>
+	import { AGENT_SETUP_PROMPT } from "./constants";
+
+	// Mirrors the CommandBlock pattern: class-based selector binds every
+	// CopyPromptButton instance on the page (in case the component ever
+	// appears more than once). On click, write the prompt to the clipboard
+	// and toggle data-copied="true" for 1500ms — the label swap is handled
+	// entirely in markup via Tailwind's group-data variant.
+	function bindCopyPromptButtons() {
+		document
+			.querySelectorAll<HTMLButtonElement>(".copy-prompt-btn")
+			.forEach((btn) => {
+				if (btn.dataset.bound === "true") return;
+				btn.dataset.bound = "true";
+
+				btn.addEventListener("click", async () => {
+					try {
+						await navigator.clipboard.writeText(AGENT_SETUP_PROMPT);
+					} catch {
+						return;
+					}
+					btn.dataset.copied = "true";
+					setTimeout(() => delete btn.dataset.copied, 1500);
+				});
+			});
+	}
+
+	bindCopyPromptButtons();
+	document.addEventListener("astro:page-load", bindCopyPromptButtons);
+</script>
diff --git a/src/components/landing/Eyebrow.astro b/src/components/landing/Eyebrow.astro
deleted file mode 100644
index 4dc8f8ac2362e03..000000000000000
--- a/src/components/landing/Eyebrow.astro
+++ /dev/null
@@ -1,28 +0,0 @@
----
-type Size = "sm" | "md";
-
-interface Props {
-	size?: Size;
-	id?: string;
-	class?: string;
-}
-
-const { size = "md", id, class: className = "" } = Astro.props;
-
-const sizeClasses: Record<Size, string> = {
-	sm: "text-[11px]",
-	md: "text-[13px]",
-};
----
-
-<div class:list={["mb-3", className]}>
-	<span
-		id={id}
-		class:list={[
-			"text-accent-100 font-mono tracking-widest uppercase",
-			sizeClasses[size],
-		]}
-	>
-		<slot />
-	</span>
-</div>
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
index a34dddda96df811..a74d35a10cb31bc 100644
--- a/src/components/landing/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -2,23 +2,7 @@
 import { Icon } from "@astrojs/starlight/components";
 import { stagger } from "./constants";
 import Button from "./Button.astro";
-
-interface Anchor {
-	href: string;
-	label: string;
-	hideMobile?: boolean;
-}
-
-const anchors: Anchor[] = [
-	{ href: "#build", label: "Build" },
-	{ href: "#agent-setup", label: "Agent Setup" },
-	{ href: "#secure", label: "Secure" },
-	{ href: "#accelerate", label: "Accelerate" },
-	{ href: "#changelog", label: "Changelog", hideMobile: true },
-];
-
-const anchorClass =
-	"focus-visible:outline-accent-100 text-foreground-muted hover:text-foreground cursor-pointer text-base no-underline hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2";
+import CopyPromptButton from "./CopyPromptButton.astro";
 ---
 
 <section id="hero" class="pb-12 md:pt-6 lg:pb-16">
@@ -35,9 +19,7 @@ const anchorClass =
 		and securing infrastructure
 	</p>
 
-	<div
-		class={`flex flex-wrap items-center gap-x-5 gap-y-3 text-sm lg:flex-nowrap ${stagger(0.16)}`}
-	>
+	<div class={`flex flex-wrap items-center gap-x-3 gap-y-3 ${stagger(0.16)}`}>
 		<Button href="/fundamentals/" variant="primary" size="md">
 			<span class="inline-flex items-center gap-2 text-base font-medium">
 				Get started
@@ -45,18 +27,6 @@ const anchorClass =
 			</span>
 		</Button>
 
-		<span class="bg-border-100 hidden h-4 w-px sm:block" aria-hidden="true"
-		></span>
-
-		{
-			anchors.map((a) => (
-				<a
-					href={a.href}
-					class:list={[anchorClass, a.hideMobile && "hidden sm:inline"]}
-				>
-					{a.label}
-				</a>
-			))
-		}
+		<CopyPromptButton />
 	</div>
 </section>
diff --git a/src/components/landing/PlatformStats.astro b/src/components/landing/PlatformStats.astro
index bd2c97558ee82c3..293ea6ec0b7d2c4 100644
--- a/src/components/landing/PlatformStats.astro
+++ b/src/components/landing/PlatformStats.astro
@@ -1,6 +1,5 @@
 ---
 import CornerMarks from "./CornerMarks.astro";
-import Eyebrow from "./Eyebrow.astro";
 import { stagger } from "./constants";
 
 const stats = [
@@ -40,7 +39,11 @@ const stats = [
 	class={`pt-8 pb-8 lg:pt-10 lg:pb-12 ${stagger(0.42)}`}
 	aria-labelledby="stats-heading"
 >
-	<Eyebrow id="stats-heading" class="mb-4">Platform at a Glance</Eyebrow>
+	<div class="mb-3">
+		<span class="text-accent-100 font-mono text-xs tracking-widest uppercase">
+			Platform at a Glance
+		</span>
+	</div>
 
 	<div
 		id="stats-grid"
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index cc9408be44798e7..2d6020126ccd692 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -1,5 +1,4 @@
 ---
-import Eyebrow from "./Eyebrow.astro";
 import ProductCard from "./ProductCard.astro";
 import ProductCardGrid from "./ProductCardGrid.astro";
 import SectionHeading from "./SectionHeading.astro";
@@ -40,7 +39,8 @@ const categories = [
 		label: "Corporate and home networks",
 		threats: [
 			{
-				scenario: "Securely connect origins with post-quantum encrypted tunnels",
+				scenario:
+					"Securely connect origins with post-quantum encrypted tunnels",
 				product: "Tunnel",
 				href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
 				icon: "tunnel",
@@ -75,7 +75,6 @@ const categories = [
 	aria-labelledby="secure-heading"
 	id="secure"
 >
-	<Eyebrow>Secure</Eyebrow>
 	<SectionHeading id="secure-heading" class="mb-2">
 		Block exploits, bots, and DDoS attacks in seconds.
 	</SectionHeading>
diff --git a/src/components/landing/constants.ts b/src/components/landing/constants.ts
index 173879a775f7de4..2ca3da0dc4da92a 100644
--- a/src/components/landing/constants.ts
+++ b/src/components/landing/constants.ts
@@ -1,3 +1,31 @@
 export function stagger(delay: number) {
 	return `animate-[v27-enter_0.6s_cubic-bezier(0.16,1,0.3,1)_${delay}s_both] motion-reduce:animate-none`;
 }
+
+/**
+ * Prompt copied to the clipboard by the hero "Copy Prompt" CTA and shown
+ * verbatim in the AgentSetup section's command block. Single source of truth
+ * — both surfaces import from here so they can never drift.
+ */
+export const AGENT_SETUP_PROMPT =
+	"Fetch https://developers.cloudflare.com/agent-setup/prompt.md";
+
+/**
+ * Agents featured in the AgentSetup section grid and (a subset/all of) the
+ * hero "Copy Prompt" button icon row. Each id maps to SVG assets at
+ * `/icons/agents/{id}/{light,dark}.svg`.
+ */
+export const AGENTS = [
+	{ id: "claude", label: "Claude Code", href: "/agent-setup/claude-code/" },
+	{ id: "codex", label: "Codex", href: "/agent-setup/codex/" },
+	{ id: "cursor", label: "Cursor", href: "/agent-setup/cursor/" },
+	{ id: "opencode", label: "OpenCode", href: "/agent-setup/opencode/" },
+	{
+		id: "copilot",
+		label: "GitHub Copilot",
+		href: "/agent-setup/github-copilot/",
+	},
+	{ id: "windsurf", label: "Windsurf", href: "/agent-setup/windsurf/" },
+] as const;
+
+export type AgentId = (typeof AGENTS)[number]["id"];
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5cec4697260e799..d87554ee998270f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -255,13 +255,13 @@ const props = {
 
 				<AgentSetup />
 
-				<SecureSection />
+				<ChangelogSection />
 
-				<AccelerateSection />
+				<SecureSection />
 
 				<PlatformStats />
 
-				<ChangelogSection />
+				<AccelerateSection />
 
 				<CommunityGrid />
 			</main>

From 8bf4c56e2b80abdeba1da856748db677f49ba087 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 5 May 2026 13:33:22 +0100
Subject: [PATCH 23/35] chore: more changes

---
 astro.config.ts                                | 16 +---------------
 src/components/landing/AccelerateSection.astro |  5 ++---
 src/components/landing/AgentSetup.astro        | 10 ++++++----
 src/components/overrides/Head.astro            |  3 ---
 src/styles/landing.css                         | 16 ----------------
 5 files changed, 9 insertions(+), 41 deletions(-)

diff --git a/astro.config.ts b/astro.config.ts
index c9a0d483979c24c..93e9610242a4862 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig, fontProviders } from "astro/config";
+import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 import starlightDocSearch from "@astrojs/starlight-docsearch";
 import starlightImageZoom from "starlight-image-zoom";
@@ -120,20 +120,6 @@ export default defineConfig({
 	experimental: {
 		contentIntellisense: true,
 	},
-	fonts: [
-		{
-			provider: fontProviders.google(),
-			name: "Inter Tight",
-			cssVariable: "--font-inter-tight",
-			// Variable axis — covers every weight referenced in landing.css
-			// (400/500/600/700/800/900). Astro requests the variable file from
-			// Google Fonts when given a range string.
-			weights: ["100 900"],
-			styles: ["normal"],
-			subsets: ["latin"],
-			fallbacks: ["sans-serif"],
-		},
-	],
 	server: {
 		port: 1111,
 	},
diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index d90d20dab0b5c49..5363b6880e46ce4 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -1,7 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
 import CornerMarks from "./CornerMarks.astro";
-import Eyebrow from "./Eyebrow.astro";
 import ProductCard from "./ProductCard.astro";
 import ProductCardGrid from "./ProductCardGrid.astro";
 import RightArrow from "./RightArrow.astro";
@@ -77,8 +76,8 @@ const phases = [
 	{
 		id: "assets",
 		phase: "Asset Optimization",
-		before: { offset: 0, width: 16.88 },
-		after: { offset: 0, width: 8.75 },
+		before: { offset: 0, width: 17.5 },
+		after: { offset: 0, width: 9.06 },
 		product: "Images",
 		icon: "images",
 		href: "/images/",
diff --git a/src/components/landing/AgentSetup.astro b/src/components/landing/AgentSetup.astro
index 1f896aa0811e914..8a754feed80e4a2 100644
--- a/src/components/landing/AgentSetup.astro
+++ b/src/components/landing/AgentSetup.astro
@@ -13,12 +13,14 @@ const ALL_GUIDES_HREF = "/agent-setup/";
 	class="pt-10 pb-6 lg:pt-14"
 	aria-labelledby="agents-heading"
 >
-	<div class="border-border-100 relative overflow-visible border">
+	<div
+		class="border-accent-100/20 bg-accent-100/20 relative overflow-visible border"
+	>
 		<CornerMarks />
 
-		<div class="bg-border-100 grid grid-cols-12 gap-px">
+		<div class="bg-accent-100/20 grid grid-cols-12 gap-px">
 			<div
-				class="bg-background col-span-12 flex min-w-0 flex-col gap-3 p-8 lg:col-span-8"
+				class="bg-background/90 col-span-12 flex min-w-0 flex-col gap-3 p-8 lg:col-span-8"
 			>
 				<SectionHeading id="agents-heading">
 					Build with your favorite AI agent
@@ -33,7 +35,7 @@ const ALL_GUIDES_HREF = "/agent-setup/";
 			</div>
 			<a
 				href={ALL_GUIDES_HREF}
-				class="bg-background focus-visible:outline-accent-100 relative col-span-12 flex min-w-0 flex-row items-center justify-between overflow-hidden px-8 py-6 no-underline transition-colors duration-150 focus-visible:bg-[#FCEDE0] focus-visible:outline-2 focus-visible:-outline-offset-2 lg:col-span-4 lg:flex-col lg:items-stretch lg:p-8 dark:focus-visible:bg-[#2A2118]"
+				class="bg-background/90 focus-visible:outline-accent-100 relative col-span-12 flex min-w-0 flex-row items-center justify-between overflow-hidden px-8 py-6 no-underline transition-colors duration-150 focus-visible:bg-[#FCEDE0] focus-visible:outline-2 focus-visible:-outline-offset-2 lg:col-span-4 lg:flex-col lg:items-stretch lg:p-8 dark:focus-visible:bg-[#2A2118]"
 			>
 				<HalftoneBackground />
 				<div class="relative z-[1] flex flex-col gap-2.5">
diff --git a/src/components/overrides/Head.astro b/src/components/overrides/Head.astro
index 544ec9a97651515..3dc7772de790ecb 100644
--- a/src/components/overrides/Head.astro
+++ b/src/components/overrides/Head.astro
@@ -1,6 +1,5 @@
 ---
 import Default from "@astrojs/starlight/components/Head.astro";
-import { Font } from "astro:assets";
 import { differenceInCalendarDays } from "date-fns";
 import "tippy.js/dist/tippy.css";
 import "~/styles/tippy.css";
@@ -273,8 +272,6 @@ metaTags.map((attrs) => {
 });
 ---
 
-
-<Font cssVariable="--font-inter-tight" />
 <script src="src/scripts/footnotes.ts"></script>
 <script src="src/scripts/mermaid.ts"></script>
 <script src="src/scripts/analytics.ts"></script>
diff --git a/src/styles/landing.css b/src/styles/landing.css
index 1090744bc4ef1de..b1c9c7d5daea39c 100644
--- a/src/styles/landing.css
+++ b/src/styles/landing.css
@@ -2,14 +2,6 @@
 
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
-/*
- * Inter Tight is loaded via Astro's Fonts API (configured in astro.config.ts
- * and injected as <Font> in src/components/overrides/Head.astro). The
- * `--font-inter-tight` variable resolves to the loaded family plus an
- * auto-generated metric-matched fallback, so we use it directly instead of
- * declaring our own @font-face.
- */
-
 @media (prefers-reduced-motion: no-preference) {
 	html {
 		scroll-behavior: smooth;
@@ -193,14 +185,6 @@
 	--l-section-pad: max(2rem, 4vw);
 	--l-pad-top: var(--l-section-pad);
 	overflow-x: clip;
-	/*
-	 * IMPORTANT: must be `var(--font-inter-tight)`, not the bare "Inter Tight"
-	 * family name. Astro's Fonts API registers the loaded font under a hashed
-	 * family name (e.g. "Inter Tight-5c4decf53c0bfa89") and only exposes it
-	 * through this CSS variable — using "Inter Tight" directly silently falls
-	 * back to the system font and collapses weights ≥ 600 to bold.
-	 */
-	font-family: var(--font-inter-tight);
 	line-height: normal;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;

From 61febb1f3aec041c60b99b12dd19e1939eea5769 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 5 May 2026 17:11:25 +0100
Subject: [PATCH 24/35] chore: clean up

---
 src/components/landing/AccelerateSection.astro | 12 ++++++------
 src/components/landing/AgentSetup.astro        |  6 +++---
 src/components/landing/ChangelogSection.astro  |  8 +-------
 src/components/landing/ProductCard.astro       | 11 ++++++-----
 src/components/landing/SecureSection.astro     |  2 ++
 src/components/overrides/Sidebar.astro         |  2 +-
 6 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index 5363b6880e46ce4..a338db9fd104ad9 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -179,7 +179,7 @@ ${shellSelectors} {
 		>
 			<span
 				aria-hidden="true"
-				class="group-data-[mode=after]/wf:bg-accent-100 group-data-[mode=before]/wf:border-border-100 pointer-events-none absolute top-1 left-1 h-[calc(100%-8px)] w-[calc(50%-4px)] rounded-full border border-transparent transition-[transform_300ms_cubic-bezier(0.16,1,0.3,1),background-color_500ms_ease-in-out,border-color_500ms_ease-in-out,box-shadow_500ms_ease-in-out] group-data-[mode=after]/wf:translate-x-0 group-data-[mode=after]/wf:shadow-[0_1px_2px_rgba(0,0,0,0.06),0_4px_12px_rgba(0,0,0,0.08)] group-data-[mode=before]/wf:translate-x-full group-data-[mode=before]/wf:bg-transparent group-data-[mode=before]/wf:shadow-none motion-reduce:transition-none"
+				class="bg-accent-100 pointer-events-none absolute top-1 left-1 h-[calc(100%-8px)] w-[calc(50%-4px)] rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.06),0_4px_12px_rgba(0,0,0,0.08)] transition-transform duration-200 ease-in-out group-data-[mode=after]/wf:translate-x-0 group-data-[mode=before]/wf:translate-x-full motion-reduce:transition-none"
 			></span>
 
 			<button
@@ -188,11 +188,11 @@ ${shellSelectors} {
 				role="radio"
 				aria-checked="true"
 				tabindex="0"
-				class="group/btn focus-visible:outline-accent-100 text-foreground-muted aria-checked:text-light-foreground relative z-10 flex h-10 cursor-pointer items-center justify-center gap-2 rounded-full px-3.5 py-2.5 font-medium -tracking-[0.01em] whitespace-nowrap transition-colors duration-300 ease-out focus-visible:outline-2 focus-visible:outline-offset-2"
+				class="group/btn focus-visible:outline-accent-100 text-foreground-muted aria-checked:text-light-foreground relative z-10 flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-xs font-medium -tracking-[0.01em] whitespace-nowrap transition-colors duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 sm:h-10 sm:gap-2 sm:px-3.5 sm:py-2.5 sm:text-sm"
 			>
 				<span
 					aria-hidden="true"
-					class="bg-accent-100 group-aria-checked/btn:bg-light-foreground/90 size-2 shrink-0 rounded-full transition-colors duration-300"
+					class="bg-foreground-subtle group-aria-checked/btn:bg-light-foreground/90 size-1.5 shrink-0 rounded-full transition-colors duration-200 ease-in-out sm:size-2"
 				></span>
 				With Cloudflare
 			</button>
@@ -202,11 +202,11 @@ ${shellSelectors} {
 				role="radio"
 				aria-checked="false"
 				tabindex="-1"
-				class="group/btn focus-visible:outline-accent-100 hover:bg-foreground/5 text-foreground-muted aria-checked:text-foreground relative z-10 flex h-10 cursor-pointer items-center justify-center gap-2 rounded-full px-3.5 py-2.5 font-medium -tracking-[0.01em] whitespace-nowrap transition-colors duration-300 ease-out focus-visible:outline-2 focus-visible:outline-offset-2"
+				class="group/btn focus-visible:outline-accent-100 hover:bg-foreground/5 text-foreground-muted aria-checked:text-light-foreground relative z-10 flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-xs font-medium -tracking-[0.01em] whitespace-nowrap transition-colors duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 sm:h-10 sm:gap-2 sm:px-3.5 sm:py-2.5 sm:text-sm"
 			>
 				<span
 					aria-hidden="true"
-					class="bg-foreground-subtle group-aria-checked/btn:bg-foreground size-2 shrink-0 rounded-full transition-colors duration-300"
+					class="bg-foreground-subtle group-aria-checked/btn:bg-light-foreground/90 size-1.5 shrink-0 rounded-full transition-colors duration-200 ease-in-out sm:size-2"
 				></span>
 				Without Cloudflare
 			</button>
@@ -350,7 +350,7 @@ ${shellSelectors} {
 		<h3 class="not-content text-foreground text-lg font-medium -tracking-tight">
 			Explore by product
 		</h3>
-		<ViewAllLink href="/directory/">View all</ViewAllLink>
+		<ViewAllLink href="/directory/">Explore Directory</ViewAllLink>
 	</div>
 
 	<ProductCardGrid>
diff --git a/src/components/landing/AgentSetup.astro b/src/components/landing/AgentSetup.astro
index 8a754feed80e4a2..4df304d30c4dc50 100644
--- a/src/components/landing/AgentSetup.astro
+++ b/src/components/landing/AgentSetup.astro
@@ -20,7 +20,7 @@ const ALL_GUIDES_HREF = "/agent-setup/";
 
 		<div class="bg-accent-100/20 grid grid-cols-12 gap-px">
 			<div
-				class="bg-background/90 col-span-12 flex min-w-0 flex-col gap-3 p-8 lg:col-span-8"
+				class="bg-background/90 col-span-12 flex min-w-0 flex-col gap-3 p-5 sm:p-8 lg:col-span-8"
 			>
 				<SectionHeading id="agents-heading">
 					Build with your favorite AI agent
@@ -35,7 +35,7 @@ const ALL_GUIDES_HREF = "/agent-setup/";
 			</div>
 			<a
 				href={ALL_GUIDES_HREF}
-				class="bg-background/90 focus-visible:outline-accent-100 relative col-span-12 flex min-w-0 flex-row items-center justify-between overflow-hidden px-8 py-6 no-underline transition-colors duration-150 focus-visible:bg-[#FCEDE0] focus-visible:outline-2 focus-visible:-outline-offset-2 lg:col-span-4 lg:flex-col lg:items-stretch lg:p-8 dark:focus-visible:bg-[#2A2118]"
+				class="bg-background/90 focus-visible:outline-accent-100 relative col-span-12 flex min-w-0 flex-row items-center justify-between overflow-hidden p-5 no-underline transition-colors duration-150 focus-visible:bg-[#FCEDE0] focus-visible:outline-2 focus-visible:-outline-offset-2 sm:p-8 lg:col-span-4 lg:flex-col lg:items-stretch dark:focus-visible:bg-[#2A2118]"
 			>
 				<HalftoneBackground />
 				<div class="relative z-[1] flex flex-col gap-2.5">
@@ -50,7 +50,7 @@ const ALL_GUIDES_HREF = "/agent-setup/";
 					class="bg-accent-100 text-light-foreground relative z-[1] inline-flex shrink-0 items-center justify-center gap-2 rounded-full px-4 py-2 text-sm font-medium lg:self-end"
 					aria-hidden="true"
 				>
-					View all
+					All agents
 					<Icon name="right-arrow" size="1rem" />
 				</span>
 			</a>
diff --git a/src/components/landing/ChangelogSection.astro b/src/components/landing/ChangelogSection.astro
index 37b1f3005bc3746..f8a31955699358c 100644
--- a/src/components/landing/ChangelogSection.astro
+++ b/src/components/landing/ChangelogSection.astro
@@ -81,9 +81,7 @@ const grid = entries.slice(1);
 						The latest features and improvements shipping across Cloudflare.
 					</p>
 				</div>
-				<ViewAllLink href="/changelog/" class="hidden md:inline-flex">
-					View all
-				</ViewAllLink>
+				<ViewAllLink href="/changelog/">View Changelog</ViewAllLink>
 			</div>
 			<div class="border-border-100 bg-border-100 relative grid grid-cols-1 gap-px overflow-visible border md:grid-cols-2 xl:grid-cols-[5fr_3fr_3fr]">
 				<CornerMarks />
@@ -163,10 +161,6 @@ const grid = entries.slice(1);
 					</a>
 				))}
 			</div>
-
-			<div class="mt-6 md:hidden">
-				<ViewAllLink href="/changelog/">View all updates</ViewAllLink>
-			</div>
 		</section>
 	)
 }
diff --git a/src/components/landing/ProductCard.astro b/src/components/landing/ProductCard.astro
index 4043ce0aa5da652..e3780f2b189c1ce 100644
--- a/src/components/landing/ProductCard.astro
+++ b/src/components/landing/ProductCard.astro
@@ -1,7 +1,7 @@
 ---
 import { Icon } from "astro-icon/components";
 
-type Category = "compute" | "ai" | "storage" | "media";
+type Category = "compute" | "ai" | "storage" | "media" | "zero-trust";
 
 interface Props {
 	icon: string;
@@ -28,6 +28,7 @@ const CATEGORY_COLOR: Record<Category, string> = {
 	ai: "#19e306",
 	storage: "#ee0ddb",
 	media: "#9616ff",
+	"zero-trust": "#009788",
 };
 
 // Per-card accent: category color when set, otherwise the brand accent.
@@ -53,14 +54,14 @@ const cardColor = category
 				class="pc-icon transition-colors duration-200"
 			/>
 		</span>
-		<span class="text-accent-100 font-mono text-xs tracking-widest uppercase">
+		<span
+			class="text-accent-100 text-right font-mono text-xs tracking-widest uppercase"
+		>
 			{product}
 		</span>
 	</div>
 
-	<p
-		class="text-foreground mb-2 text-base leading-snug font-medium md:text-lg"
-	>
+	<p class="text-foreground mb-2 text-base leading-snug font-medium md:text-lg">
 		{scenario}
 	</p>
 	<p
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index 2d6020126ccd692..aa469a6732868ca 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -37,6 +37,7 @@ const categories = [
 	},
 	{
 		label: "Corporate and home networks",
+		category: "zero-trust" as const,
 		threats: [
 			{
 				scenario:
@@ -96,6 +97,7 @@ const categories = [
 							detail={t.detail}
 							href={t.href}
 							cta={t.cta}
+							category={"category" in cat ? cat.category : undefined}
 						/>
 					))}
 				</ProductCardGrid>
diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index bb5bbc83c1c1356..5978bb4ddc26a3d 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -12,7 +12,7 @@ const productTitle = isHomepage
 ---
 
 <div
-	class="sidebar-header sticky top-0 z-[1] flex flex-col gap-2 bg-[var(--sl-color-black)] py-3.5 min-[50rem]:bg-[var(--sl-color-bg-sidebar)]"
+	class="sidebar-header sticky top-0 z-[1] flex flex-col gap-2 bg-[var(--sl-color-black)] pt-3.5 pb-2 min-[50rem]:bg-[var(--sl-color-bg-sidebar)]"
 >
 	{
 		!isHomepage && (

From 094d6a1eed4b71e324f01c15cde57c934a028b95 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Thu, 7 May 2026 15:20:59 +0100
Subject: [PATCH 25/35] chore: feedback

---
 .../landing/AccelerateSection.astro           | 467 +-----------------
 src/components/landing/Button.astro           |   3 +
 src/components/landing/ChangelogSection.astro |   2 +-
 src/components/landing/CopyPromptButton.astro |  23 +-
 src/components/landing/CornerMarks.astro      |   4 +-
 src/components/landing/Hero.astro             |   2 +-
 src/components/landing/Waterfall.astro        | 329 ++++++++++++
 src/components/landing/accelerate-data.ts     | 139 ++++++
 src/pages/index.astro                         |  12 +-
 9 files changed, 521 insertions(+), 460 deletions(-)
 create mode 100644 src/components/landing/Waterfall.astro
 create mode 100644 src/components/landing/accelerate-data.ts

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index a338db9fd104ad9..a5ae90c4fddc864 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -1,126 +1,15 @@
 ---
-import { Icon } from "astro-icon/components";
-import CornerMarks from "./CornerMarks.astro";
 import ProductCard from "./ProductCard.astro";
 import ProductCardGrid from "./ProductCardGrid.astro";
-import RightArrow from "./RightArrow.astro";
 import SectionHeading from "./SectionHeading.astro";
 import ViewAllLink from "./ViewAllLink.astro";
+import Waterfall from "./Waterfall.astro";
+import { phases, phaseColor } from "./accelerate-data";
 
-const phases = [
-	{
-		id: "dns",
-		phase: "DNS Lookup",
-		before: { offset: 0, width: 12.5 },
-		after: { offset: 0, width: 0.69 },
-		product: "DNS",
-		icon: "dns",
-		href: "/dns/",
-		outcome: "Get the fastest, most resilient query responses",
-		detail:
-			"The world's fastest and most reliable DNS — 11ms average. DNSSEC, wildcard records, proxy control.",
-		cta: "Set up Authoritative DNS",
-		tags: ["Authoritative DNS", "DNSSEC"],
-		color: "bg-orange-400",
-		colorMuted: "bg-orange-400/20",
-	},
-	{
-		id: "connect",
-		phase: "TCP + TLS",
-		before: { offset: 0, width: 25 },
-		after: { offset: 0, width: 3.06 },
-		product: "Argo Smart Routing",
-		icon: "argo-smart-routing",
-		href: "/argo-smart-routing/",
-		outcome: "Make web apps faster with intelligent routing",
-		detail:
-			"Detects and routes around real-time network congestion. On average, makes web applications 30% faster.",
-		cta: "Integrate Argo Smart Routing",
-		tags: ["Smart Routing", "Tiered Caching"],
-		color: "bg-amber-500",
-		colorMuted: "bg-amber-500/20",
-	},
-	{
-		id: "wait",
-		phase: "Server Wait (TTFB)",
-		before: { offset: 0, width: 31.25 },
-		after: { offset: 0, width: 0.31 },
-		product: "CDN",
-		icon: "cache",
-		href: "/cache/get-started/",
-		outcome: "Make your site faster and stop overpaying for bandwidth",
-		detail:
-			"CDN caches content in 330+ cities worldwide with cache rules, tiered caching, and zero-configuration setup.",
-		cta: "Set up Cache Rules",
-		tags: ["Cache Rules", "Tiered Cache", "Cache Reserve"],
-		color: "bg-yellow-500",
-		colorMuted: "bg-yellow-500/20",
-	},
-	{
-		id: "db",
-		phase: "Database Query",
-		before: { offset: 0, width: 87.5 },
-		after: { offset: 0, width: 14.56 },
-		product: "Hyperdrive",
-		icon: "hyperdrive",
-		href: "/hyperdrive/",
-		outcome: "Make your database feel instant, everywhere",
-		detail:
-			"Connection pooling, query caching, and global routing for PostgreSQL and MySQL databases.",
-		cta: "Make regional databases feel global",
-		tags: ["Connection Pooling", "Query Caching"],
-		color: "bg-lime-500",
-		colorMuted: "bg-lime-500/20",
-		category: "storage" as const,
-	},
-	{
-		id: "assets",
-		phase: "Asset Optimization",
-		before: { offset: 0, width: 17.5 },
-		after: { offset: 0, width: 9.06 },
-		product: "Images",
-		icon: "images",
-		href: "/images/",
-		outcome: "Streamlined image infrastructure built for scale",
-		detail:
-			"Build scalable, reliable media pipelines to store, optimize, and deliver images.",
-		cta: "Upload and optimize images",
-		tags: ["Transform", "Polish", "WebP/AVIF"],
-		color: "bg-teal-500",
-		colorMuted: "bg-teal-500/20",
-		category: "media" as const,
-	},
-	{
-		id: "scripts",
-		phase: "Third-party Scripts",
-		before: { offset: 0, width: 31.25 },
-		after: { offset: 0, width: 0 },
-		product: "Zaraz",
-		icon: "zaraz",
-		href: "/zaraz/",
-		outcome: "Load third-party tools without weighing down web apps",
-		detail:
-			"Load analytics tools, advertising pixels, widgets, and other third-party tools without slowing down your applications.",
-		cta: "Improve page load with minimal effort",
-		tags: ["Server-side Tags", "Consent Mgmt"],
-		color: "bg-sky-500",
-		colorMuted: "bg-sky-500/20",
-	},
-];
-
-const CATEGORY_COLOR: Record<string, string> = {
-	compute: "#0a95ff",
-	ai: "#19e306",
-	storage: "#ee0ddb",
-	media: "#9616ff",
-};
-
-const phaseColor = (p: (typeof phases)[number]) =>
-	p.category ? CATEGORY_COLOR[p.category] : "var(--color-accent-100)";
-
-// Two consolidated cross-highlight rules: one for row tint, one for the icon
-// shell on the matching product card. Per-phase colors flow through the
-// `--phase-color` custom property set inline on each element below.
+// Cross-highlight rules: hovering a waterfall row tints the matching product
+// card icon shell, and vice-versa. Both halves expose a `[data-phase]`
+// attribute and an inline `--phase-color` so a single `:has()` selector
+// rooted at `.wf-section` can wire them together.
 const rowSelectors = phases
 	.map(
 		(p) =>
@@ -153,205 +42,25 @@ ${shellSelectors} {
 	id="accelerate"
 	data-mode="after"
 >
-	<div
-		class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between sm:gap-6"
-	>
-		<div class="min-w-0 flex-1">
+	<div class="mb-6 flex items-center justify-between sm:mb-8">
+		<div>
 			<SectionHeading id="accelerate-heading" class="mb-2">
-				See where the milliseconds go
+				Faster web performance
 			</SectionHeading>
 			<p
-				class="text-foreground-muted text-sm leading-relaxed text-pretty md:text-lg"
+				class="text-foreground-muted max-w-[600px] text-sm leading-relaxed text-pretty md:text-lg"
 			>
-				Every request is a waterfall of latency. Hover a phase to see which
-				product eliminates it, and toggle to see the compound effect.
+				Cloudflare routes traffic through the most reliable paths and delivers
+				assets as close to end users as possible.
 			</p>
 		</div>
+		<ViewAllLink href="/directory/?product-group=Application+performance">
+			Explore Directory
+		</ViewAllLink>
 	</div>
 
-	<div
-		class="mb-5 flex flex-wrap items-center justify-between gap-3 sm:gap-4"
-		role="radiogroup"
-		aria-label="Comparison mode"
-	>
-		<div
-			class="wf-toggle-track border-border-100 bg-background pointer-events-auto relative z-20 inline-grid shrink-0 grid-cols-2 items-center rounded-full border p-1"
-		>
-			<span
-				aria-hidden="true"
-				class="bg-accent-100 pointer-events-none absolute top-1 left-1 h-[calc(100%-8px)] w-[calc(50%-4px)] rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.06),0_4px_12px_rgba(0,0,0,0.08)] transition-transform duration-200 ease-in-out group-data-[mode=after]/wf:translate-x-0 group-data-[mode=before]/wf:translate-x-full motion-reduce:transition-none"
-			></span>
-
-			<button
-				type="button"
-				id="wf-toggle-after"
-				role="radio"
-				aria-checked="true"
-				tabindex="0"
-				class="group/btn focus-visible:outline-accent-100 text-foreground-muted aria-checked:text-light-foreground relative z-10 flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-xs font-medium -tracking-[0.01em] whitespace-nowrap transition-colors duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 sm:h-10 sm:gap-2 sm:px-3.5 sm:py-2.5 sm:text-sm"
-			>
-				<span
-					aria-hidden="true"
-					class="bg-foreground-subtle group-aria-checked/btn:bg-light-foreground/90 size-1.5 shrink-0 rounded-full transition-colors duration-200 ease-in-out sm:size-2"
-				></span>
-				With Cloudflare
-			</button>
-			<button
-				type="button"
-				id="wf-toggle-before"
-				role="radio"
-				aria-checked="false"
-				tabindex="-1"
-				class="group/btn focus-visible:outline-accent-100 hover:bg-foreground/5 text-foreground-muted aria-checked:text-light-foreground relative z-10 flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-xs font-medium -tracking-[0.01em] whitespace-nowrap transition-colors duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 sm:h-10 sm:gap-2 sm:px-3.5 sm:py-2.5 sm:text-sm"
-			>
-				<span
-					aria-hidden="true"
-					class="bg-foreground-subtle group-aria-checked/btn:bg-light-foreground/90 size-1.5 shrink-0 rounded-full transition-colors duration-200 ease-in-out sm:size-2"
-				></span>
-				Without Cloudflare
-			</button>
-		</div>
-	</div>
-
-	<div class="border-border-100 relative overflow-visible border">
-		<CornerMarks />
-
-		<div
-			class="bg-background border-border-100 hidden h-7 items-end gap-4 border-b px-5 sm:grid sm:grid-cols-[minmax(220px,1.1fr)_minmax(0,3fr)_auto]"
-			aria-hidden="true"
-		>
-			<div></div>
-			<div class="relative h-full">
-				{
-					[0, 400, 800, 1200, 1600].map((ms) => (
-						<div
-							class="absolute bottom-0 flex flex-col items-center"
-							style={`left: ${(ms / 1600) * 100}%`}
-						>
-							<span
-								class="wf-ruler-label text-foreground-subtle mb-1 font-mono text-[9px] tracking-wider tabular-nums"
-								data-ms={ms}
-							>
-								{ms === 0 ? "0" : `${ms}ms`}
-							</span>
-							<span class="bg-border-100 h-1.5 w-px" />
-						</div>
-					))
-				}
-			</div>
-			<div class="w-3.5"></div>
-		</div>
-
-		{
-			phases.map((p, i) => (
-				<a
-					href={p.href}
-					aria-label={`${p.phase} — eliminate with ${p.product}`}
-					class:list={[
-						"wf-row group relative grid grid-cols-[1fr] items-center gap-2 px-3 py-3 no-underline transition-colors duration-150",
-						"sm:grid-cols-[minmax(220px,1.1fr)_minmax(0,3fr)_auto] sm:gap-4 sm:px-5",
-						"bg-background hover:bg-accent-100/5",
-						"focus-visible:outline-accent-100 focus-visible:outline-2 focus-visible:-outline-offset-2",
-						i > 0 && "border-border-100 border-t",
-					]}
-					data-phase={p.id}
-					style={`--phase-color: ${phaseColor(p)};`}
-				>
-					<span
-						class="bg-accent-100 pointer-events-none absolute bottom-0 left-0 h-px w-0 transition-[width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:w-full"
-						aria-hidden="true"
-					/>
-
-					<div class="flex min-w-0 items-center gap-2 sm:gap-3">
-						<span class="border-border-100 bg-background-muted text-foreground-subtle group-hover:border-accent-100/30 group-hover:bg-accent-100/5 group-hover:text-accent-100 flex size-8 shrink-0 items-center justify-center rounded border transition-colors duration-150">
-							<Icon name={p.icon} size="16px" />
-						</span>
-						<div class="min-w-0">
-							<p class="text-foreground text-sm leading-tight font-medium">
-								{p.phase}
-							</p>
-							<p class="text-accent-100 m-0 max-h-6 overflow-hidden font-mono text-[11px] tracking-widest uppercase opacity-100 transition-[max-height,opacity] duration-300 ease-out group-data-[mode=before]/wf:max-h-0 group-data-[mode=before]/wf:opacity-0 motion-reduce:transition-none">
-								{p.product}
-							</p>
-						</div>
-					</div>
-
-					<div
-						class="relative h-5 sm:h-auto sm:self-stretch"
-						aria-hidden="true"
-					>
-						<div class="bg-background-muted absolute inset-0 rounded" />
-
-						{[25, 50, 75].map((pct) => (
-							<div
-								class="border-border-100/50 absolute inset-y-0 border-l border-dashed"
-								style={`left: ${pct}%`}
-							/>
-						))}
-
-						<div
-							class={`wf-bar absolute inset-y-0 rounded transition-[left,width,box-shadow] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] data-[shrunk=true]:animate-[wf-shrink-pulse_0.6s_ease-out] motion-reduce:!transition-none motion-reduce:data-[shrunk=true]:animate-none ${p.color}`}
-							style={`--off-before: ${p.before.offset}%; --w-before: ${p.before.width}%; --off-after: ${p.after.offset}%; --w-after: ${p.after.width}%;`}
-							data-shrunk="false"
-						>
-							<span
-								class:list={[
-									"absolute top-1/2 right-2 hidden -translate-y-1/2 font-mono text-[10px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm group-data-[mode=after]/wf:sm:inline",
-									p.after.width < 6 && "opacity-0",
-								]}
-							>
-								{Math.round(p.after.width * 16)}ms
-							</span>
-							<span
-								class:list={[
-									"absolute top-1/2 right-2 hidden -translate-y-1/2 font-mono text-[10px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm group-data-[mode=before]/wf:sm:inline",
-									p.before.width < 6 && "opacity-0",
-								]}
-							>
-								{Math.round(p.before.width * 16)}ms
-							</span>
-						</div>
-					</div>
-
-					<div class="text-foreground-subtle group-hover:text-accent-100 hidden items-center transition-colors duration-150 sm:flex">
-						<RightArrow
-							strokeWidth={1.5}
-							class="transition-transform duration-150 group-hover:translate-x-0.5"
-						/>
-					</div>
-				</a>
-			))
-		}
-
-		<div
-			class="wf-summary bg-background border-border-100 border-t px-5 py-3"
-			aria-live="polite"
-		>
-			<div class="flex items-center justify-between gap-4">
-				<div
-					class="text-foreground-muted flex items-center gap-3 font-mono text-xs tabular-nums"
-				>
-					<span class="tracking-widest uppercase">Total latency</span>
-					<div
-						class="bg-background-muted relative h-1.5 w-28 overflow-hidden rounded-full sm:w-48"
-						role="presentation"
-					>
-						<div
-							class="bg-accent-100 absolute inset-y-0 left-0 w-[12%] rounded-full transition-[width] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-data-[mode=before]/wf:w-[96%]"
-						>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div class="mb-6 flex items-end justify-between gap-4 pt-12">
-		<h3 class="not-content text-foreground text-lg font-medium -tracking-tight">
-			Explore by product
-		</h3>
-		<ViewAllLink href="/directory/">Explore Directory</ViewAllLink>
-	</div>
+	<!-- Leave out till approval -->
+	<!-- <Waterfall phases={phases} /> -->
 
 	<ProductCardGrid>
 		{
@@ -376,144 +85,4 @@ ${shellSelectors} {
 	</ProductCardGrid>
 </section>
 
-<style
-	is:global
-	set:html={`
-	@keyframes wf-shrink-pulse {
-		0% {
-			box-shadow: 0 0 0 0
-				color-mix(in srgb, var(--color-accent-100) 30%, transparent);
-		}
-		70% {
-			box-shadow: 0 0 0 4px
-				color-mix(in srgb, var(--color-accent-100) 0%, transparent);
-		}
-		100% {
-			box-shadow: 0 0 0 0
-				color-mix(in srgb, var(--color-accent-100) 0%, transparent);
-		}
-	}
-
-	.wf-bar {
-		left: var(--off-after);
-		width: var(--w-after);
-	}
-	.wf-section[data-mode="before"] .wf-bar {
-		left: var(--off-before);
-		width: var(--w-before);
-	}
-
-	${crossHighlightCss}
-`}
-></style>
-
-<script>
-	function initWaterfall() {
-		const root = document.getElementById("accelerate");
-		if (!root) return;
-
-		if (root.dataset.wfInit === "true") return;
-		root.dataset.wfInit = "true";
-
-		const prefersReducedMotion = window.matchMedia(
-			"(prefers-reduced-motion: reduce)",
-		).matches;
-
-		const btnBefore =
-			root.querySelector<HTMLButtonElement>("#wf-toggle-before");
-		const btnAfter = root.querySelector<HTMLButtonElement>("#wf-toggle-after");
-		const savingsGroup = root.querySelector<HTMLElement>("#wf-savings-group");
-		const bars = root.querySelectorAll<HTMLElement>(".wf-bar");
-		const totalParts = root.querySelectorAll<HTMLElement>("[data-mode-only]");
-
-		let isAfter = true;
-
-		const setMode = (after: boolean) => {
-			isAfter = after;
-
-			root.dataset.mode = after ? "after" : "before";
-
-			if (btnBefore && btnAfter) {
-				btnBefore.setAttribute("aria-checked", String(!after));
-				btnAfter.setAttribute("aria-checked", String(after));
-				btnBefore.setAttribute("tabindex", after ? "-1" : "0");
-				btnAfter.setAttribute("tabindex", after ? "0" : "-1");
-			}
-
-			if (savingsGroup) {
-				savingsGroup.setAttribute("aria-hidden", String(!after));
-			}
-
-			totalParts.forEach((el) => {
-				const active = el.dataset.modeOnly === (after ? "after" : "before");
-				el.setAttribute("aria-hidden", String(!active));
-			});
-
-			bars.forEach((bar) => {
-				bar.dataset.shrunk = "false";
-				void bar.offsetWidth;
-				if (after && !prefersReducedMotion) {
-					bar.dataset.shrunk = "true";
-				}
-			});
-		};
-
-		const onBeforeClick = () => setMode(false);
-		const onAfterClick = () => setMode(true);
-		btnBefore?.addEventListener("click", onBeforeClick);
-		btnAfter?.addEventListener("click", onAfterClick);
-
-		const onToggleKeyDown = (event: KeyboardEvent) => {
-			if (!btnBefore || !btnAfter) return;
-			const radios = [btnAfter, btnBefore];
-			const currentIndex = isAfter ? 0 : 1;
-			let nextIndex = currentIndex;
-
-			switch (event.key) {
-				case "ArrowRight":
-				case "ArrowDown":
-					nextIndex = (currentIndex + 1) % radios.length;
-					break;
-				case "ArrowLeft":
-				case "ArrowUp":
-					nextIndex = (currentIndex - 1 + radios.length) % radios.length;
-					break;
-				case "Home":
-					nextIndex = 0;
-					break;
-				case "End":
-					nextIndex = radios.length - 1;
-					break;
-				default:
-					return;
-			}
-
-			event.preventDefault();
-			setMode(nextIndex === 0);
-			radios[nextIndex].focus();
-		};
-
-		btnBefore?.addEventListener("keydown", onToggleKeyDown);
-		btnAfter?.addEventListener("keydown", onToggleKeyDown);
-
-		setMode(true);
-
-		document.addEventListener(
-			"astro:before-swap",
-			() => {
-				btnBefore?.removeEventListener("click", onBeforeClick);
-				btnAfter?.removeEventListener("click", onAfterClick);
-				btnBefore?.removeEventListener("keydown", onToggleKeyDown);
-				btnAfter?.removeEventListener("keydown", onToggleKeyDown);
-			},
-			{ once: true },
-		);
-	}
-
-	if (document.readyState === "loading") {
-		document.addEventListener("DOMContentLoaded", initWaterfall);
-	} else {
-		initWaterfall();
-	}
-	document.addEventListener("astro:page-load", initWaterfall);
-</script>
+<style is:global set:html={crossHighlightCss}></style>
diff --git a/src/components/landing/Button.astro b/src/components/landing/Button.astro
index 7b54c626b65d2c4..9657e3f7861a030 100644
--- a/src/components/landing/Button.astro
+++ b/src/components/landing/Button.astro
@@ -12,6 +12,7 @@ interface Props {
 	target?: string;
 	rel?: string;
 	"aria-label"?: string;
+	"data-tooltip"?: string;
 }
 
 const {
@@ -24,6 +25,7 @@ const {
 	target,
 	rel,
 	"aria-label": ariaLabel,
+	"data-tooltip": dataTooltip,
 } = Astro.props;
 
 const base = [
@@ -85,6 +87,7 @@ const Tag = href ? "a" : "button";
 	target={target}
 	rel={rel}
 	aria-label={ariaLabel}
+	data-tooltip={dataTooltip}
 	type={href ? undefined : type}
 >
 	<slot />
diff --git a/src/components/landing/ChangelogSection.astro b/src/components/landing/ChangelogSection.astro
index f8a31955699358c..418d93e09913aeb 100644
--- a/src/components/landing/ChangelogSection.astro
+++ b/src/components/landing/ChangelogSection.astro
@@ -72,7 +72,7 @@ const grid = entries.slice(1);
 			class="pt-10 pb-10 lg:pt-14 lg:pb-12"
 			aria-labelledby="changelog-heading"
 		>
-			<div class="mb-6 flex items-end justify-between sm:mb-8">
+			<div class="mb-6 flex items-center justify-between sm:mb-8">
 				<div>
 					<SectionHeading id="changelog-heading" class="mb-2">
 						What's new
diff --git a/src/components/landing/CopyPromptButton.astro b/src/components/landing/CopyPromptButton.astro
index f0b7529c9eeaeb5..8478404825bd0eb 100644
--- a/src/components/landing/CopyPromptButton.astro
+++ b/src/components/landing/CopyPromptButton.astro
@@ -13,11 +13,18 @@ interface Props {
 	 * Optional class hooks merged onto the underlying secondary Button.
 	 */
 	class?: string;
+	/**
+	 * Optional hover/focus tooltip shown above the button. When omitted, no
+	 * tooltip is rendered (e.g., the duplicate button in the AgentSetup
+	 * section, where the surrounding copy already provides context).
+	 */
+	tooltip?: string;
 }
 
 const {
 	agentIds = ["claude", "cursor", "codex", "opencode"] as const,
 	class: className = "",
+	tooltip,
 } = Astro.props;
 
 const featuredAgents = AGENTS.filter((a) =>
@@ -26,10 +33,11 @@ const featuredAgents = AGENTS.filter((a) =>
 ---
 
 <Button
-	class:list={["copy-prompt-btn group/copy cursor-pointer", className]}
+	class:list={["copy-prompt-btn group/copy cursor-copy", className]}
 	variant="secondary"
 	size="md"
 	type="button"
+	data-tooltip={tooltip}
 >
 	<span class="inline-flex items-center gap-2.5 text-base font-medium">
 		<span
@@ -65,6 +73,7 @@ const featuredAgents = AGENTS.filter((a) =>
 </Button>
 
 <script>
+	import tippy from "tippy.js";
 	import { AGENT_SETUP_PROMPT } from "./constants";
 
 	// Mirrors the CommandBlock pattern: class-based selector binds every
@@ -79,6 +88,18 @@ const featuredAgents = AGENTS.filter((a) =>
 				if (btn.dataset.bound === "true") return;
 				btn.dataset.bound = "true";
 
+				// Wire up the (optional) tooltip — same pattern as PageActions.
+				const tooltip = btn.dataset.tooltip;
+				if (tooltip) {
+					tippy(btn, {
+						content: tooltip,
+						placement: "top",
+						arrow: false,
+						delay: [200, 0],
+						appendTo: () => document.body,
+					});
+				}
+
 				btn.addEventListener("click", async () => {
 					try {
 						await navigator.clipboard.writeText(AGENT_SETUP_PROMPT);
diff --git a/src/components/landing/CornerMarks.astro b/src/components/landing/CornerMarks.astro
index 39d06cd4f6d77aa..2543d3c86becf80 100644
--- a/src/components/landing/CornerMarks.astro
+++ b/src/components/landing/CornerMarks.astro
@@ -31,9 +31,7 @@ const borderColor =
 const baseStyle = `width:${size}px;height:${size}px;border:1px solid ${borderColor};border-radius:3px;`;
 
 const fillClasses =
-	tone === "accent"
-		? "bg-accent-100"
-		: "bg-background dark:bg-background-muted";
+	tone === "accent" ? "bg-accent-100" : "bg-background dark:bg-background";
 ---
 
 {
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
index a74d35a10cb31bc..a57198b1f82ba82 100644
--- a/src/components/landing/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -27,6 +27,6 @@ import CopyPromptButton from "./CopyPromptButton.astro";
 			</span>
 		</Button>
 
-		<CopyPromptButton />
+		<CopyPromptButton tooltip="Sets up your AI agent for Cloudflare" />
 	</div>
 </section>
diff --git a/src/components/landing/Waterfall.astro b/src/components/landing/Waterfall.astro
new file mode 100644
index 000000000000000..4bcb9c0c50e1c19
--- /dev/null
+++ b/src/components/landing/Waterfall.astro
@@ -0,0 +1,329 @@
+---
+/**
+ * Waterfall — interactive request timeline with a "With / Without Cloudflare"
+ * toggle. Renders the toggle, per-phase rows, and the total-latency summary.
+ *
+ * Designed to live inside an ancestor with classes `wf-section group/wf` and a
+ * `data-mode="after"` attribute (see AccelerateSection.astro). The toggle
+ * script reaches up via `closest(".wf-section")` to mutate that mode, which
+ * drives Tailwind `group-data-[mode=*]/wf:` selectors in the rows below.
+ */
+import { Icon } from "astro-icon/components";
+import RightArrow from "./RightArrow.astro";
+import CornerMarks from "./CornerMarks.astro";
+import { phaseColor, type WaterfallPhase } from "./accelerate-data";
+
+interface Props {
+	phases: readonly WaterfallPhase[];
+}
+
+const { phases } = Astro.props;
+---
+
+<div
+	class="mb-5 flex flex-wrap items-center justify-between gap-3 sm:gap-4"
+	role="radiogroup"
+	aria-label="Comparison mode"
+>
+	<div
+		class="wf-toggle-track border-border-100 bg-background pointer-events-auto relative z-20 inline-grid shrink-0 grid-cols-2 items-center rounded-full border p-1"
+	>
+		<span
+			aria-hidden="true"
+			class="bg-accent-100 pointer-events-none absolute top-1 left-1 h-[calc(100%-8px)] w-[calc(50%-4px)] rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.06),0_4px_12px_rgba(0,0,0,0.08)] transition-transform duration-200 ease-in-out group-data-[mode=after]/wf:translate-x-0 group-data-[mode=before]/wf:translate-x-full motion-reduce:transition-none"
+		></span>
+
+		<button
+			type="button"
+			id="wf-toggle-after"
+			role="radio"
+			aria-checked="true"
+			tabindex="0"
+			class="group/btn focus-visible:outline-accent-100 text-foreground-muted aria-checked:text-light-foreground relative z-10 flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-xs font-medium -tracking-[0.01em] whitespace-nowrap transition-colors duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 sm:h-10 sm:gap-2 sm:px-3.5 sm:py-2.5 sm:text-sm"
+		>
+			<span
+				aria-hidden="true"
+				class="bg-foreground-subtle group-aria-checked/btn:bg-light-foreground/90 size-1.5 shrink-0 rounded-full transition-colors duration-200 ease-in-out sm:size-2"
+			></span>
+			With Cloudflare
+		</button>
+		<button
+			type="button"
+			id="wf-toggle-before"
+			role="radio"
+			aria-checked="false"
+			tabindex="-1"
+			class="group/btn focus-visible:outline-accent-100 hover:bg-foreground/5 text-foreground-muted aria-checked:text-light-foreground relative z-10 flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-xs font-medium -tracking-[0.01em] whitespace-nowrap transition-colors duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 sm:h-10 sm:gap-2 sm:px-3.5 sm:py-2.5 sm:text-sm"
+		>
+			<span
+				aria-hidden="true"
+				class="bg-foreground-subtle group-aria-checked/btn:bg-light-foreground/90 size-1.5 shrink-0 rounded-full transition-colors duration-200 ease-in-out sm:size-2"
+			></span>
+			Without Cloudflare
+		</button>
+	</div>
+</div>
+
+<div class="border-border-100 relative overflow-visible border">
+	<CornerMarks />
+
+	<div
+		class="bg-background border-border-100 hidden h-7 items-end gap-4 border-b px-5 sm:grid sm:grid-cols-[minmax(220px,1.1fr)_minmax(0,3fr)_auto]"
+		aria-hidden="true"
+	>
+		<div></div>
+		<div class="relative h-full">
+			{
+				[0, 400, 800, 1200, 1600].map((ms) => (
+					<div
+						class="absolute bottom-0 flex flex-col items-center"
+						style={`left: ${(ms / 1600) * 100}%`}
+					>
+						<span
+							class="wf-ruler-label text-foreground-subtle mb-1 font-mono text-[9px] tracking-wider tabular-nums"
+							data-ms={ms}
+						>
+							{ms === 0 ? "0" : `${ms}ms`}
+						</span>
+						<span class="bg-border-100 h-1.5 w-px" />
+					</div>
+				))
+			}
+		</div>
+		<div class="w-3.5"></div>
+	</div>
+
+	{
+		phases.map((p, i) => (
+			<a
+				href={p.href}
+				aria-label={`${p.phase} — eliminate with ${p.product}`}
+				class:list={[
+					"wf-row group relative grid grid-cols-[1fr] items-center gap-2 px-3 py-3 no-underline transition-colors duration-150",
+					"sm:grid-cols-[minmax(220px,1.1fr)_minmax(0,3fr)_auto] sm:gap-4 sm:px-5",
+					"bg-background hover:bg-accent-100/5",
+					"focus-visible:outline-accent-100 focus-visible:outline-2 focus-visible:-outline-offset-2",
+					i > 0 && "border-border-100 border-t",
+				]}
+				data-phase={p.id}
+				style={`--phase-color: ${phaseColor(p)};`}
+			>
+				<span
+					class="bg-accent-100 pointer-events-none absolute bottom-0 left-0 h-px w-0 transition-[width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:w-full"
+					aria-hidden="true"
+				/>
+
+				<div class="flex min-w-0 items-center gap-2 sm:gap-3">
+					<span class="border-border-100 bg-background-muted text-foreground-subtle group-hover:border-accent-100/30 group-hover:bg-accent-100/5 group-hover:text-accent-100 flex size-8 shrink-0 items-center justify-center rounded border transition-colors duration-150">
+						<Icon name={p.icon} size="16px" />
+					</span>
+					<div class="min-w-0">
+						<p class="text-foreground text-sm leading-tight font-medium">
+							{p.phase}
+						</p>
+						<p class="text-accent-100 m-0 max-h-6 overflow-hidden font-mono text-[11px] tracking-widest uppercase opacity-100 transition-[max-height,opacity] duration-300 ease-out group-data-[mode=before]/wf:max-h-0 group-data-[mode=before]/wf:opacity-0 motion-reduce:transition-none">
+							{p.product}
+						</p>
+					</div>
+				</div>
+
+				<div
+					class="relative h-5 sm:h-auto sm:self-stretch"
+					aria-hidden="true"
+				>
+					<div class="bg-background-muted absolute inset-0 rounded" />
+
+					{[25, 50, 75].map((pct) => (
+						<div
+							class="border-border-100/50 absolute inset-y-0 border-l border-dashed"
+							style={`left: ${pct}%`}
+						/>
+					))}
+
+					<div
+						class={`wf-bar absolute inset-y-0 rounded transition-[left,width,box-shadow] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] data-[shrunk=true]:animate-[wf-shrink-pulse_0.6s_ease-out] motion-reduce:!transition-none motion-reduce:data-[shrunk=true]:animate-none ${p.color}`}
+						style={`--off-before: ${p.before.offset}%; --w-before: ${p.before.width}%; --off-after: ${p.after.offset}%; --w-after: ${p.after.width}%;`}
+						data-shrunk="false"
+					>
+						<span
+							class:list={[
+								"absolute top-1/2 right-2 hidden -translate-y-1/2 font-mono text-[10px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm group-data-[mode=after]/wf:sm:inline",
+								p.after.width < 6 && "opacity-0",
+							]}
+						>
+							{Math.round(p.after.width * 16)}ms
+						</span>
+						<span
+							class:list={[
+								"absolute top-1/2 right-2 hidden -translate-y-1/2 font-mono text-[10px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm group-data-[mode=before]/wf:sm:inline",
+								p.before.width < 6 && "opacity-0",
+							]}
+						>
+							{Math.round(p.before.width * 16)}ms
+						</span>
+					</div>
+				</div>
+
+				<div class="text-foreground-subtle group-hover:text-accent-100 hidden items-center transition-colors duration-150 sm:flex">
+					<RightArrow
+						strokeWidth={1.5}
+						class="transition-transform duration-150 group-hover:translate-x-0.5"
+					/>
+				</div>
+			</a>
+		))
+	}
+
+	<div
+		class="wf-summary bg-background border-border-100 border-t px-5 py-3"
+		aria-live="polite"
+	>
+		<div class="flex items-center justify-between gap-4">
+			<div
+				class="text-foreground-muted flex items-center gap-3 font-mono text-xs tabular-nums"
+			>
+				<span class="tracking-widest uppercase">Total latency</span>
+				<div
+					class="bg-background-muted relative h-1.5 w-28 overflow-hidden rounded-full sm:w-48"
+					role="presentation"
+				>
+					<div
+						class="bg-accent-100 absolute inset-y-0 left-0 w-[12%] rounded-full transition-[width] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-data-[mode=before]/wf:w-[96%]"
+					>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style is:global>
+	@keyframes wf-shrink-pulse {
+		0% {
+			box-shadow: 0 0 0 0
+				color-mix(in srgb, var(--color-accent-100) 30%, transparent);
+		}
+		70% {
+			box-shadow: 0 0 0 4px
+				color-mix(in srgb, var(--color-accent-100) 0%, transparent);
+		}
+		100% {
+			box-shadow: 0 0 0 0
+				color-mix(in srgb, var(--color-accent-100) 0%, transparent);
+		}
+	}
+
+	.wf-bar {
+		left: var(--off-after);
+		width: var(--w-after);
+	}
+	.wf-section[data-mode="before"] .wf-bar {
+		left: var(--off-before);
+		width: var(--w-before);
+	}
+</style>
+
+<script>
+	function initWaterfall() {
+		const btnAfter = document.querySelector<HTMLButtonElement>(
+			"#wf-toggle-after",
+		);
+		const btnBefore = document.querySelector<HTMLButtonElement>(
+			"#wf-toggle-before",
+		);
+		if (!btnAfter || !btnBefore) return;
+
+		// Reach up to the .wf-section ancestor (in AccelerateSection.astro).
+		// That element owns `data-mode` so its `group/wf` data-attribute
+		// selectors apply to all descendants including the rows below.
+		const root = btnAfter.closest<HTMLElement>(".wf-section");
+		if (!root) return;
+
+		if (root.dataset.wfInit === "true") return;
+		root.dataset.wfInit = "true";
+
+		const prefersReducedMotion = window.matchMedia(
+			"(prefers-reduced-motion: reduce)",
+		).matches;
+
+		const bars = root.querySelectorAll<HTMLElement>(".wf-bar");
+
+		let isAfter = true;
+
+		const setMode = (after: boolean) => {
+			isAfter = after;
+
+			root.dataset.mode = after ? "after" : "before";
+
+			btnBefore.setAttribute("aria-checked", String(!after));
+			btnAfter.setAttribute("aria-checked", String(after));
+			btnBefore.setAttribute("tabindex", after ? "-1" : "0");
+			btnAfter.setAttribute("tabindex", after ? "0" : "-1");
+
+			bars.forEach((bar) => {
+				bar.dataset.shrunk = "false";
+				void bar.offsetWidth;
+				if (after && !prefersReducedMotion) {
+					bar.dataset.shrunk = "true";
+				}
+			});
+		};
+
+		const onBeforeClick = () => setMode(false);
+		const onAfterClick = () => setMode(true);
+		btnBefore.addEventListener("click", onBeforeClick);
+		btnAfter.addEventListener("click", onAfterClick);
+
+		const onToggleKeyDown = (event: KeyboardEvent) => {
+			const radios = [btnAfter, btnBefore];
+			const currentIndex = isAfter ? 0 : 1;
+			let nextIndex = currentIndex;
+
+			switch (event.key) {
+				case "ArrowRight":
+				case "ArrowDown":
+					nextIndex = (currentIndex + 1) % radios.length;
+					break;
+				case "ArrowLeft":
+				case "ArrowUp":
+					nextIndex = (currentIndex - 1 + radios.length) % radios.length;
+					break;
+				case "Home":
+					nextIndex = 0;
+					break;
+				case "End":
+					nextIndex = radios.length - 1;
+					break;
+				default:
+					return;
+			}
+
+			event.preventDefault();
+			setMode(nextIndex === 0);
+			radios[nextIndex].focus();
+		};
+
+		btnBefore.addEventListener("keydown", onToggleKeyDown);
+		btnAfter.addEventListener("keydown", onToggleKeyDown);
+
+		setMode(true);
+
+		document.addEventListener(
+			"astro:before-swap",
+			() => {
+				btnBefore.removeEventListener("click", onBeforeClick);
+				btnAfter.removeEventListener("click", onAfterClick);
+				btnBefore.removeEventListener("keydown", onToggleKeyDown);
+				btnAfter.removeEventListener("keydown", onToggleKeyDown);
+			},
+			{ once: true },
+		);
+	}
+
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", initWaterfall);
+	} else {
+		initWaterfall();
+	}
+	document.addEventListener("astro:page-load", initWaterfall);
+</script>
diff --git a/src/components/landing/accelerate-data.ts b/src/components/landing/accelerate-data.ts
new file mode 100644
index 000000000000000..30907484e39b8c4
--- /dev/null
+++ b/src/components/landing/accelerate-data.ts
@@ -0,0 +1,139 @@
+/**
+ * Shared data for the Accelerate section. Consumed by:
+ *   - Waterfall.astro       (toggle + per-phase rows + summary)
+ *   - AccelerateSection.astro (product card grid below the waterfall)
+ *
+ * Both halves share `id` + `--phase-color` so the cross-highlight CSS in
+ * AccelerateSection can tint the matching product card when a waterfall
+ * row is hovered (and vice-versa).
+ */
+
+export type WaterfallPhaseCategory = "compute" | "ai" | "storage" | "media";
+
+export interface WaterfallPhase {
+	id: string;
+	phase: string;
+	before: { offset: number; width: number };
+	after: { offset: number; width: number };
+	product: string;
+	icon: string;
+	href: string;
+	outcome: string;
+	detail: string;
+	cta: string;
+	tags: string[];
+	color: string;
+	colorMuted: string;
+	category?: WaterfallPhaseCategory;
+}
+
+export const phases: readonly WaterfallPhase[] = [
+	{
+		id: "dns",
+		phase: "DNS Lookup",
+		before: { offset: 0, width: 12.5 },
+		after: { offset: 0, width: 0.69 },
+		product: "DNS",
+		icon: "dns",
+		href: "/dns/",
+		outcome: "Get the fastest, most resilient query responses",
+		detail:
+			"The world's fastest and most reliable DNS — 11ms average. DNSSEC, wildcard records, proxy control.",
+		cta: "Set up Authoritative DNS",
+		tags: ["Authoritative DNS", "DNSSEC"],
+		color: "bg-orange-400",
+		colorMuted: "bg-orange-400/20",
+	},
+	{
+		id: "connect",
+		phase: "TCP + TLS",
+		before: { offset: 0, width: 25 },
+		after: { offset: 0, width: 3.06 },
+		product: "Argo Smart Routing",
+		icon: "argo-smart-routing",
+		href: "/argo-smart-routing/",
+		outcome: "Make web apps faster with intelligent routing",
+		detail:
+			"Detects and routes around real-time network congestion. On average, makes web applications 30% faster.",
+		cta: "Integrate Argo Smart Routing",
+		tags: ["Smart Routing", "Tiered Caching"],
+		color: "bg-amber-500",
+		colorMuted: "bg-amber-500/20",
+	},
+	{
+		id: "wait",
+		phase: "Server Wait (TTFB)",
+		before: { offset: 0, width: 31.25 },
+		after: { offset: 0, width: 0.31 },
+		product: "CDN",
+		icon: "cache",
+		href: "/cache/get-started/",
+		outcome: "Make your site faster and stop overpaying for bandwidth",
+		detail:
+			"CDN caches content in 330+ cities worldwide with cache rules, tiered caching, and zero-configuration setup.",
+		cta: "Set up Cache Rules",
+		tags: ["Cache Rules", "Tiered Cache", "Cache Reserve"],
+		color: "bg-yellow-500",
+		colorMuted: "bg-yellow-500/20",
+	},
+	{
+		id: "db",
+		phase: "Database Query",
+		before: { offset: 0, width: 87.5 },
+		after: { offset: 0, width: 14.56 },
+		product: "Hyperdrive",
+		icon: "hyperdrive",
+		href: "/hyperdrive/",
+		outcome: "Make your database feel instant, everywhere",
+		detail:
+			"Connection pooling, query caching, and global routing for PostgreSQL and MySQL databases.",
+		cta: "Make regional databases feel global",
+		tags: ["Connection Pooling", "Query Caching"],
+		color: "bg-lime-500",
+		colorMuted: "bg-lime-500/20",
+		category: "storage",
+	},
+	{
+		id: "assets",
+		phase: "Asset Optimization",
+		before: { offset: 0, width: 17.5 },
+		after: { offset: 0, width: 9.06 },
+		product: "Images",
+		icon: "images",
+		href: "/images/",
+		outcome: "Streamlined image infrastructure built for scale",
+		detail:
+			"Build scalable, reliable media pipelines to store, optimize, and deliver images.",
+		cta: "Upload and optimize images",
+		tags: ["Transform", "Polish", "WebP/AVIF"],
+		color: "bg-teal-500",
+		colorMuted: "bg-teal-500/20",
+		category: "media",
+	},
+	{
+		id: "scripts",
+		phase: "Third-party Scripts",
+		before: { offset: 0, width: 31.25 },
+		after: { offset: 0, width: 0 },
+		product: "Zaraz",
+		icon: "zaraz",
+		href: "/zaraz/",
+		outcome: "Load third-party tools without weighing down web apps",
+		detail:
+			"Load analytics tools, advertising pixels, widgets, and other third-party tools without slowing down your applications.",
+		cta: "Improve page load with minimal effort",
+		tags: ["Server-side Tags", "Consent Mgmt"],
+		color: "bg-sky-500",
+		colorMuted: "bg-sky-500/20",
+	},
+];
+
+export const CATEGORY_COLOR: Record<WaterfallPhaseCategory, string> = {
+	compute: "#0a95ff",
+	ai: "#19e306",
+	storage: "#ee0ddb",
+	media: "#9616ff",
+};
+
+export const phaseColor = (p: WaterfallPhase) =>
+	p.category ? CATEGORY_COLOR[p.category] : "var(--color-accent-100)";
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d87554ee998270f..6aa245b40e63c27 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -39,7 +39,10 @@ const sidebar = [
 				label: "Resources",
 				collapsed: true,
 				items: [
-					{ label: "Learning paths", link: "/learning-paths/" },
+					{
+						label: "Learning paths",
+						link: "/resources/?filter-pcx_content_type=learning-path ",
+					},
 					{ label: "Use cases", link: "/use-cases/" },
 					{ label: "Terraform", link: "/terraform/" },
 					{ label: "Pulumi", link: "/pulumi/" },
@@ -141,11 +144,11 @@ const sidebar = [
 				],
 			},
 			{
-				label: "Zero Trust",
+				label: "Cloudflare One",
 				collapsed: true,
 				badge: groupIcon("cloudflare-one"),
 				items: [
-					{ label: "Cloudflare One", link: "/cloudflare-one/" },
+					{ label: "Overview", link: "/cloudflare-one/" },
 					{
 						label: "Access",
 						link: "/cloudflare-one/access-controls/policies/",
@@ -226,8 +229,7 @@ const sidebar = [
 const props = {
 	frontmatter: {
 		title: "Cloudflare Developer Docs",
-		description:
-			"Compute, storage, AI, and security on Cloudflare's global network. Ship applications instead of managing and securing infrastructure.",
+		description: "Connect, protect, and build everywhere.",
 		template: "doc",
 		tableOfContents: false,
 	},

From 6378618c56817bf92333fb12e79be84370153ef2 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Thu, 7 May 2026 17:00:12 +0100
Subject: [PATCH 26/35] fix: cleanup

---
 .../landing/AccelerateSection.astro           | 32 -------------------
 src/components/landing/BuildFromScratch.astro |  2 +-
 src/components/landing/CopyPromptButton.astro |  4 +--
 src/pages/index.astro                         |  5 +--
 4 files changed, 4 insertions(+), 39 deletions(-)

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index a5ae90c4fddc864..121d2ff0ed4fa3e 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -3,37 +3,7 @@ import ProductCard from "./ProductCard.astro";
 import ProductCardGrid from "./ProductCardGrid.astro";
 import SectionHeading from "./SectionHeading.astro";
 import ViewAllLink from "./ViewAllLink.astro";
-import Waterfall from "./Waterfall.astro";
 import { phases, phaseColor } from "./accelerate-data";
-
-// Cross-highlight rules: hovering a waterfall row tints the matching product
-// card icon shell, and vice-versa. Both halves expose a `[data-phase]`
-// attribute and an inline `--phase-color` so a single `:has()` selector
-// rooted at `.wf-section` can wire them together.
-const rowSelectors = phases
-	.map(
-		(p) =>
-			`.wf-section:has([data-phase="${p.id}"]:hover) [data-phase="${p.id}"].wf-row`,
-	)
-	.join(",\n");
-
-const shellSelectors = phases
-	.map(
-		(p) =>
-			`.wf-section:has([data-phase="${p.id}"]:hover) [data-phase="${p.id}"] .pc-icon-shell`,
-	)
-	.join(",\n");
-
-const crossHighlightCss = `
-${rowSelectors} {
-	background-color: color-mix(in srgb, var(--color-accent-100) 5%, transparent);
-}
-${shellSelectors} {
-	border-color: var(--phase-color);
-	border-style: dashed;
-	background-color: color-mix(in srgb, var(--phase-color) 10%, transparent);
-	color: var(--phase-color);
-}`;
 ---
 
 <section
@@ -84,5 +54,3 @@ ${shellSelectors} {
 		}
 	</ProductCardGrid>
 </section>
-
-<style is:global set:html={crossHighlightCss}></style>
diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index f95db66cd490d85..c1ebf29f77b042c 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -47,7 +47,7 @@ const primitives = [
 			{ label: "AI Gateway", href: "/ai-gateway/" },
 			{ label: "Agents", href: "/agents/" },
 			{ label: "Vectorize", href: "/vectorize/" },
-			{ label: "Browser Rendering", href: "/browser-rendering/" },
+			{ label: "Browser Run", href: "/browser-run/" },
 		],
 	},
 	{
diff --git a/src/components/landing/CopyPromptButton.astro b/src/components/landing/CopyPromptButton.astro
index 8478404825bd0eb..d2632fe7fa41245 100644
--- a/src/components/landing/CopyPromptButton.astro
+++ b/src/components/landing/CopyPromptButton.astro
@@ -49,14 +49,14 @@ const featuredAgents = AGENTS.filter((a) =>
 					<>
 						<img
 							src={`/icons/agents/${agent.id}/light.svg`}
-							alt={agent.id}
+							alt=""
 							class="block h-5 w-5 dark:hidden"
 							loading="lazy"
 							decoding="async"
 						/>
 						<img
 							src={`/icons/agents/${agent.id}/dark.svg`}
-							alt={agent.id}
+							alt=""
 							class="hidden h-5 w-5 dark:block"
 							loading="lazy"
 							decoding="async"
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6aa245b40e63c27..772b0518367e903 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -41,13 +41,10 @@ const sidebar = [
 				items: [
 					{
 						label: "Learning paths",
-						link: "/resources/?filter-pcx_content_type=learning-path ",
+						link: "/resources/?filter-pcx_content_type=learning-path",
 					},
 					{ label: "Use cases", link: "/use-cases/" },
-					{ label: "Terraform", link: "/terraform/" },
-					{ label: "Pulumi", link: "/pulumi/" },
 					{ label: "Reference architecture", link: "/reference-architecture/" },
-					{ label: "Support", link: "/support/" },
 				],
 			},
 			{

From dc973d37f7ad02279106b3a5e0e97ba9dd9e0f8e Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 19 May 2026 11:49:28 +0100
Subject: [PATCH 27/35] style: new colours

---
 public/favicon.png                        | Bin 937 -> 2341 bytes
 public/logo.svg                           |  14 +++++++++++++-
 src/assets/logo.svg                       |  14 +++++++++++++-
 src/components/landing/AgentSetup.astro   |  16 +++++++++-------
 src/components/landing/accelerate-data.ts |   7 ++++---
 src/components/overrides/Header.astro     |   2 +-
 src/styles/landing.css                    |   8 ++++----
 7 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/public/favicon.png b/public/favicon.png
index 8bd0c9b482173af244c3c6b1e0a6bcc66b659113..ddfa0fb1eea556be8347161a303723a00fb89af6 100644
GIT binary patch
literal 2341
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
LNkvXXu0mjfiCaH=

literal 937
zcmV;a16KTrP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XT
z000XT0n*)m`~Uz0TS-JgR9M69mP<%fQ5eT(=7y03(I)7j*U17Qa9J(XanzPALX${>
z2%{EJU`Sb+cTA^D?XeAt+C-%0qq3-|O}l7Qi%6n(w8@QkM(5sneEq+3&z(7rk1~Ze
zbKu8!=iJBt|9#&%_m0Pt8@aK-5pDN-BB3I2%u$8Mc=K9Mq`heAg;f!G>@y8r175RD
z_aOQ(rvdLoH%uCt>z72_%!sqFci!s_VI+Mob@~@6Zs_i@rpyOG7Z?Pi;08DdR`Yo_
zshU`n0aYAPXF=;+5mDDhqVs+SKEB{5ocjs(^R*La3q1=m;q+El`^=?W#>lx67GN=C
zn2Z>@jo)#Q;E1`n)!`V!?>4m(5n09g#f?m#XF0zdyya{WEszozddhT<Lq&Wp!RBN&
z>czd`V$JTWNI%OS2+TB~^w}%pO0W+c2b($4MUlBJgdnVlQY6bnyi*t$i-tGl@$+K0
zwrLR7Tyd*EFw=;eIierD<1Az*oUs{gcZ5vN+L$Iz*+y_pA^{WFqC2ybg|N_x^_5Rs
zWMVJN<A>BOvbDIcQ9RfcS43z|18#K;oua)Z$LyitZL7cH4ul&)zEgn;U-mwC7upIi
z5p^DxR7$%L;wh{Zv$f!rb+`N|J*y!ats;6<MKJIIl!;2P2^J4)X(Ow^ZZH*{Ue4rS
zBCef8wWz0<%$9Za_HghjJ*g&S904&J39^Ye*q+`0X7FoL=`%+*!o76i#TCa^V{8d;
zJ$^65B)Bhz@4-o#<pCP5BpLw^f|R%y5D^C6#IYz{@eb}e-z<fN32DXz*T7}a1HvE#
z&VUo32^;~3<eRVoy<d~H=*mD7XaO&TiTlFDE*39UGEQXmlH`l#2ly`ertnqr1$+jd
zz<bar7TV3Nc@PPK*I*2M1moNSdR)y0df7k=Z#5W*;Vqby3s3Y^##BrxuQeAP&UvwI
z4V|l&4}k%CTH};|*nzXhyv2(W@j4s0LYInZ3gwP>&VthGKOqe8_H8YAY4w#Krsq4H
zo)2XVFv&s8;T%`TeZTKTrnQK5{|fHs$j@jnPpvP--rs^%-vDYs9mMJ^Afoeo4=DWq
zf3f)8&tE<McO$=ki^e>?!DkOvdXcHd$ZtRzWzL)Xlbaj4ksH4OgEIKz?Fimf00000
LNkvXXu0mjfSVpvJ

diff --git a/public/logo.svg b/public/logo.svg
index 4b93dd11b4ad173..f7f592ce23c749c 100644
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -1 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="19" fill="none"><path fill="#F6821F" d="m27.16 18.507.204-.735c.242-.873.152-1.68-.255-2.274-.374-.547-.998-.868-1.755-.906l-14.346-.19a.3.3 0 0 1-.127-.034.3.3 0 0 1-.099-.09.31.31 0 0 1-.03-.27.4.4 0 0 1 .128-.185.37.37 0 0 1 .205-.081l14.479-.192c1.717-.082 3.576-1.536 4.227-3.31l.826-2.25a.55.55 0 0 0 .022-.298C29.702 3.29 25.94 0 21.44 0c-4.146 0-7.667 2.792-8.928 6.673a4.1 4.1 0 0 0-2.978-.86c-1.99.206-3.589 1.877-3.786 3.953a4.6 4.6 0 0 0 .11 1.547C2.605 11.41 0 14.189 0 17.603q0 .459.065.911c.009.07.042.134.093.18.05.047.116.072.183.073l26.485.003h.007a.34.34 0 0 0 .205-.076.36.36 0 0 0 .122-.187"/><path fill="#FBAD41" d="M31.94 8.153q-.2 0-.397.01a.2.2 0 0 0-.062.014.2.2 0 0 0-.091.061.24.24 0 0 0-.054.098l-.564 2.033c-.243.874-.152 1.68.254 2.274.375.547.998.868 1.756.906l3.058.191a.3.3 0 0 1 .123.035.28.28 0 0 1 .142.22.3.3 0 0 1-.015.14.4.4 0 0 1-.128.185.37.37 0 0 1-.205.08l-3.177.192c-1.725.083-3.585 1.536-4.235 3.31l-.23.626a.18.18 0 0 0 .017.16.166.166 0 0 0 .134.08h10.941c.064 0 .126-.021.176-.06a.3.3 0 0 0 .106-.16 8.5 8.5 0 0 0 .291-2.216c0-4.517-3.51-8.18-7.84-8.18"/></svg>
\ No newline at end of file
+<svg width="66" height="30" viewBox="0 0 66 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_746_2)">
+<path d="M53.1202 13.125C60.1167 13.125 65.7884 18.8334 65.7884 25.875C65.7884 27.1302 65.6082 28.3433 65.2725 29.489C65.1823 29.7967 64.8967 30 64.578 30H46.953C46.6917 30 46.5115 29.7362 46.6052 29.4906L46.9421 28.6077C48.0182 25.775 51.0884 23.4544 53.929 23.3185L59.3134 23.041C59.6011 23.0262 59.8269 22.7869 59.8269 22.4971C59.8269 22.2087 59.6034 21.9702 59.3175 21.9533L54.2613 21.654C51.543 21.5148 50.215 19.0948 50.9461 16.5729L51.7875 13.6705C51.873 13.3753 52.129 13.1604 52.434 13.1438C52.6611 13.1314 52.89 13.125 53.1202 13.125Z" fill="#FF9910"/>
+<path d="M35.6085 0C42.9042 0 49.0327 5.02494 50.7661 11.8235C50.8388 12.109 50.8161 12.4103 50.7121 12.6858L49.324 16.3634C48.2479 19.1961 45.4823 21.6525 42.3531 21.6525L18.249 21.9313C17.9581 21.9348 17.724 22.1731 17.7239 22.466C17.7239 22.7585 17.9576 22.9971 18.2483 23.001L42.0129 23.3169C44.7371 23.3169 46.0592 25.8762 45.3285 28.3983L45.0217 29.4594C44.9292 29.7798 44.6377 30 44.3063 30H0.963624C0.592828 30 0.275519 29.7258 0.245826 29.3538C0.223348 29.0721 0.211914 28.7875 0.211914 28.5C0.211914 23.0237 4.37763 18.527 9.69384 18.0436C9.58474 17.5465 9.52682 17.0301 9.52682 16.5C9.52682 12.565 12.6963 9.375 16.6061 9.375C18.1622 9.375 19.6008 9.88056 20.769 10.7369C22.8496 4.49627 28.7073 0 35.6085 0Z" fill="#FF5F08"/>
+<path d="M53.1202 13.125C60.1167 13.125 65.7884 18.8334 65.7884 25.875C65.7884 27.1302 65.6082 28.3433 65.2725 29.489C65.1823 29.7967 64.8967 30 64.578 30H46.953C46.6917 30 46.5115 29.7362 46.6052 29.4906L46.9421 28.6077C48.0182 25.775 51.0884 23.4544 53.929 23.3185L59.3134 23.041C59.6011 23.0262 59.8269 22.7869 59.8269 22.4971C59.8269 22.2087 59.6034 21.9702 59.3175 21.9533L54.2613 21.654C51.543 21.5148 50.215 19.0948 50.9461 16.5729L51.7875 13.6705C51.873 13.3753 52.129 13.1604 52.434 13.1438C52.6611 13.1314 52.89 13.125 53.1202 13.125Z" fill="#FF9910"/>
+<path d="M35.6085 0C42.9042 0 49.0327 5.02494 50.7661 11.8235C50.8388 12.109 50.8161 12.4103 50.7121 12.6858L49.324 16.3634C48.2479 19.1961 45.4823 21.6525 42.3531 21.6525L18.249 21.9313C17.9581 21.9348 17.724 22.1731 17.7239 22.466C17.7239 22.7585 17.9576 22.9971 18.2483 23.001L42.0129 23.3169C44.7371 23.3169 46.0592 25.8762 45.3285 28.3983L45.0217 29.4594C44.9292 29.7798 44.6377 30 44.3063 30H0.963624C0.592828 30 0.275519 29.7258 0.245826 29.3538C0.223348 29.0721 0.211914 28.7875 0.211914 28.5C0.211914 23.0237 4.37763 18.527 9.69384 18.0436C9.58474 17.5465 9.52682 17.0301 9.52682 16.5C9.52682 12.565 12.6963 9.375 16.6061 9.375C18.1622 9.375 19.6008 9.88056 20.769 10.7369C22.8496 4.49627 28.7073 0 35.6085 0Z" fill="#FF5F08"/>
+</g>
+<defs>
+<clipPath id="clip0_746_2">
+<rect width="66" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
index d3758724507c945..f7f592ce23c749c 100644
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="19" fill="none" viewBox="0 0 40 19"><path fill="#f6821f" d="m27.16 18.507.204-.735c.242-.873.152-1.68-.255-2.274-.374-.547-.998-.868-1.755-.906l-14.346-.19a.3.3 0 0 1-.127-.034.3.3 0 0 1-.099-.09.31.31 0 0 1-.03-.27.4.4 0 0 1 .128-.185.37.37 0 0 1 .205-.081l14.479-.192c1.717-.082 3.576-1.536 4.227-3.31l.826-2.25a.55.55 0 0 0 .022-.298C29.702 3.29 25.94 0 21.44 0c-4.146 0-7.667 2.792-8.928 6.673a4.1 4.1 0 0 0-2.978-.86c-1.99.206-3.589 1.877-3.786 3.953a4.6 4.6 0 0 0 .11 1.547C2.605 11.41 0 14.189 0 17.603q0 .459.065.911c.009.07.042.134.093.18.05.047.116.072.183.073l26.485.003h.007a.34.34 0 0 0 .205-.076.36.36 0 0 0 .122-.187"/><path fill="#fbad41" d="M31.94 8.153q-.2 0-.397.01a.2.2 0 0 0-.062.014.2.2 0 0 0-.091.061.24.24 0 0 0-.054.098l-.564 2.033c-.243.874-.152 1.68.254 2.274.375.547.998.868 1.756.906l3.058.191a.3.3 0 0 1 .123.035.28.28 0 0 1 .142.22.3.3 0 0 1-.015.14.4.4 0 0 1-.128.185.37.37 0 0 1-.205.08l-3.177.192c-1.725.083-3.585 1.536-4.235 3.31l-.23.626a.18.18 0 0 0 .017.16.17.17 0 0 0 .134.08h10.941a.3.3 0 0 0 .176-.06.3.3 0 0 0 .106-.16 8.5 8.5 0 0 0 .291-2.216c0-4.517-3.51-8.18-7.84-8.18"/></svg>
\ No newline at end of file
+<svg width="66" height="30" viewBox="0 0 66 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_746_2)">
+<path d="M53.1202 13.125C60.1167 13.125 65.7884 18.8334 65.7884 25.875C65.7884 27.1302 65.6082 28.3433 65.2725 29.489C65.1823 29.7967 64.8967 30 64.578 30H46.953C46.6917 30 46.5115 29.7362 46.6052 29.4906L46.9421 28.6077C48.0182 25.775 51.0884 23.4544 53.929 23.3185L59.3134 23.041C59.6011 23.0262 59.8269 22.7869 59.8269 22.4971C59.8269 22.2087 59.6034 21.9702 59.3175 21.9533L54.2613 21.654C51.543 21.5148 50.215 19.0948 50.9461 16.5729L51.7875 13.6705C51.873 13.3753 52.129 13.1604 52.434 13.1438C52.6611 13.1314 52.89 13.125 53.1202 13.125Z" fill="#FF9910"/>
+<path d="M35.6085 0C42.9042 0 49.0327 5.02494 50.7661 11.8235C50.8388 12.109 50.8161 12.4103 50.7121 12.6858L49.324 16.3634C48.2479 19.1961 45.4823 21.6525 42.3531 21.6525L18.249 21.9313C17.9581 21.9348 17.724 22.1731 17.7239 22.466C17.7239 22.7585 17.9576 22.9971 18.2483 23.001L42.0129 23.3169C44.7371 23.3169 46.0592 25.8762 45.3285 28.3983L45.0217 29.4594C44.9292 29.7798 44.6377 30 44.3063 30H0.963624C0.592828 30 0.275519 29.7258 0.245826 29.3538C0.223348 29.0721 0.211914 28.7875 0.211914 28.5C0.211914 23.0237 4.37763 18.527 9.69384 18.0436C9.58474 17.5465 9.52682 17.0301 9.52682 16.5C9.52682 12.565 12.6963 9.375 16.6061 9.375C18.1622 9.375 19.6008 9.88056 20.769 10.7369C22.8496 4.49627 28.7073 0 35.6085 0Z" fill="#FF5F08"/>
+<path d="M53.1202 13.125C60.1167 13.125 65.7884 18.8334 65.7884 25.875C65.7884 27.1302 65.6082 28.3433 65.2725 29.489C65.1823 29.7967 64.8967 30 64.578 30H46.953C46.6917 30 46.5115 29.7362 46.6052 29.4906L46.9421 28.6077C48.0182 25.775 51.0884 23.4544 53.929 23.3185L59.3134 23.041C59.6011 23.0262 59.8269 22.7869 59.8269 22.4971C59.8269 22.2087 59.6034 21.9702 59.3175 21.9533L54.2613 21.654C51.543 21.5148 50.215 19.0948 50.9461 16.5729L51.7875 13.6705C51.873 13.3753 52.129 13.1604 52.434 13.1438C52.6611 13.1314 52.89 13.125 53.1202 13.125Z" fill="#FF9910"/>
+<path d="M35.6085 0C42.9042 0 49.0327 5.02494 50.7661 11.8235C50.8388 12.109 50.8161 12.4103 50.7121 12.6858L49.324 16.3634C48.2479 19.1961 45.4823 21.6525 42.3531 21.6525L18.249 21.9313C17.9581 21.9348 17.724 22.1731 17.7239 22.466C17.7239 22.7585 17.9576 22.9971 18.2483 23.001L42.0129 23.3169C44.7371 23.3169 46.0592 25.8762 45.3285 28.3983L45.0217 29.4594C44.9292 29.7798 44.6377 30 44.3063 30H0.963624C0.592828 30 0.275519 29.7258 0.245826 29.3538C0.223348 29.0721 0.211914 28.7875 0.211914 28.5C0.211914 23.0237 4.37763 18.527 9.69384 18.0436C9.58474 17.5465 9.52682 17.0301 9.52682 16.5C9.52682 12.565 12.6963 9.375 16.6061 9.375C18.1622 9.375 19.6008 9.88056 20.769 10.7369C22.8496 4.49627 28.7073 0 35.6085 0Z" fill="#FF5F08"/>
+</g>
+<defs>
+<clipPath id="clip0_746_2">
+<rect width="66" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/landing/AgentSetup.astro b/src/components/landing/AgentSetup.astro
index 4df304d30c4dc50..45b13594c3dbf0e 100644
--- a/src/components/landing/AgentSetup.astro
+++ b/src/components/landing/AgentSetup.astro
@@ -4,6 +4,7 @@ import CornerMarks from "./CornerMarks.astro";
 import HalftoneBackground from "./HalftoneBackground.astro";
 import SectionHeading from "./SectionHeading.astro";
 import CopyPromptButton from "./CopyPromptButton.astro";
+import Button from "./Button.astro";
 
 const ALL_GUIDES_HREF = "/agent-setup/";
 ---
@@ -33,8 +34,7 @@ const ALL_GUIDES_HREF = "/agent-setup/";
 				</p>
 				<CopyPromptButton class="mr-auto" />
 			</div>
-			<a
-				href={ALL_GUIDES_HREF}
+			<div
 				class="bg-background/90 focus-visible:outline-accent-100 relative col-span-12 flex min-w-0 flex-row items-center justify-between overflow-hidden p-5 no-underline transition-colors duration-150 focus-visible:bg-[#FCEDE0] focus-visible:outline-2 focus-visible:-outline-offset-2 sm:p-8 lg:col-span-4 lg:flex-col lg:items-stretch dark:focus-visible:bg-[#2A2118]"
 			>
 				<HalftoneBackground />
@@ -46,14 +46,16 @@ const ALL_GUIDES_HREF = "/agent-setup/";
 					</span>
 				</div>
 
-				<span
-					class="bg-accent-100 text-light-foreground relative z-[1] inline-flex shrink-0 items-center justify-center gap-2 rounded-full px-4 py-2 text-sm font-medium lg:self-end"
-					aria-hidden="true"
+				<Button
+					href={ALL_GUIDES_HREF}
+					variant="primary"
+					class="ml-auto"
+					size="md"
 				>
 					All agents
 					<Icon name="right-arrow" size="1rem" />
-				</span>
-			</a>
+				</Button>
+			</div>
 		</div>
 	</div>
 </section>
diff --git a/src/components/landing/accelerate-data.ts b/src/components/landing/accelerate-data.ts
index 30907484e39b8c4..dd00a9821494a7f 100644
--- a/src/components/landing/accelerate-data.ts
+++ b/src/components/landing/accelerate-data.ts
@@ -36,7 +36,7 @@ export const phases: readonly WaterfallPhase[] = [
 		product: "DNS",
 		icon: "dns",
 		href: "/dns/",
-		outcome: "Get the fastest, most resilient query responses",
+		outcome: "Fast, reliable and resilient DNS queries",
 		detail:
 			"The world's fastest and most reliable DNS — 11ms average. DNSSEC, wildcard records, proxy control.",
 		cta: "Set up Authoritative DNS",
@@ -52,7 +52,7 @@ export const phases: readonly WaterfallPhase[] = [
 		product: "Argo Smart Routing",
 		icon: "argo-smart-routing",
 		href: "/argo-smart-routing/",
-		outcome: "Make web apps faster with intelligent routing",
+		outcome: "Durable and fast origin access for APIs and dynamic content",
 		detail:
 			"Detects and routes around real-time network congestion. On average, makes web applications 30% faster.",
 		cta: "Integrate Argo Smart Routing",
@@ -68,7 +68,8 @@ export const phases: readonly WaterfallPhase[] = [
 		product: "CDN",
 		icon: "cache",
 		href: "/cache/get-started/",
-		outcome: "Make your site faster and stop overpaying for bandwidth",
+		outcome:
+			"Clever caching for faster user experiences and lower infrastructure costs",
 		detail:
 			"CDN caches content in 330+ cities worldwide with cache rules, tiered caching, and zero-configuration setup.",
 		cta: "Set up Cache Rules",
diff --git a/src/components/overrides/Header.astro b/src/components/overrides/Header.astro
index 56a9f42bbff9882..5f840bb818b41fc 100644
--- a/src/components/overrides/Header.astro
+++ b/src/components/overrides/Header.astro
@@ -90,7 +90,7 @@ import AgentDirective from "../AgentDirective.astro";
 		line-height: 1;
 		white-space: nowrap;
 		text-decoration: none;
-		background-color: #ff4801;
+		background-color: #ff5e1f;
 		color: #fffbf5;
 		transform: translateZ(
 			0
diff --git a/src/styles/landing.css b/src/styles/landing.css
index b1c9c7d5daea39c..2e9eb6bba9131d4 100644
--- a/src/styles/landing.css
+++ b/src/styles/landing.css
@@ -39,8 +39,8 @@
 	--color-foreground: #18181b;
 	--color-foreground-muted: #52525b;
 	--color-foreground-subtle: #71717a;
-	--color-accent-100: #ff4801;
-	--color-accent-200: #ff7038;
+	--color-accent-100: #ff5e1f; /* primary */
+	--color-accent-200: #ff7038; /* hover/secondary */
 	--color-light-foreground: #fffbf5;
 	--color-border-100: #e4e4e7;
 
@@ -175,8 +175,8 @@
 	--color-foreground: #18181b;
 	--color-foreground-muted: #52525b;
 	--color-foreground-subtle: #71717a;
-	--color-accent-100: #ff4801;
-	--color-accent-200: #ff7038;
+	--color-accent-100: #ff5e1f; /* primary */
+	--color-accent-200: #ff7038; /* hover/secondary */
 	--color-light-foreground: #fffbf5;
 	--color-border-100: #e4e4e7;
 	--color-selection-bg: #ffe9e0;

From 9c0f66aac3a6370bd5a68e4f4bc7c5daac6c64ad Mon Sep 17 00:00:00 2001
From: "ask-bonk[bot]" <ask-bonk[bot]@users.noreply.github.com>
Date: Tue, 19 May 2026 11:31:45 +0000
Subject: [PATCH 28/35] 3 fixes + 3 suggestions on PR #29453

Co-authored-by: MohamedH1998 <MohamedH1998@users.noreply.github.com>
---
 .gitignore                                 |  2 +-
 opencode.jsonc                             | 13 +++++++------
 src/components/landing/SecureSection.astro |  2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index ca1f586cb2930c8..23a8888d5ada851 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,7 +8,7 @@ distllms/
 
 # skills/ is fetched from middlecache via bin/fetch-skills.ts
 skills/
-# .agents/skills/
+!.agents/skills/
 
 # dependencies
 node_modules/
diff --git a/opencode.jsonc b/opencode.jsonc
index 8a58f241bc8a458..8b18847cd07fdc5 100644
--- a/opencode.jsonc
+++ b/opencode.jsonc
@@ -1,12 +1,13 @@
 {
 	"$schema": "https://opencode.ai/config.json",
 	"permission": "allow",
-	"mcp": {
-		"aperture": {
-			"type": "local",
-			"command": ["node", "/Users/mhassan/Documents/dev/tinkering/aperture/build/index.js"],
-			"enabled": true
-		}
+	"experimental": {
+		"continue_loop_on_deny": true,
+	},
+	"instructions": {
+		"documentation": "You are Bonk, a documentation assistant for Cloudflare. You help with documentation-related tasks.",
+	},
+}
 	},
 	"experimental": {
 		"continue_loop_on_deny": true,
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index aa469a6732868ca..5d351f2bccbfa9e 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -77,7 +77,7 @@ const categories = [
 	id="secure"
 >
 	<SectionHeading id="secure-heading" class="mb-2">
-		Block exploits, bots, and DDoS attacks in seconds.
+		Block exploits, bots, and DDoS attacks in seconds
 	</SectionHeading>
 	<p
 		class="text-foreground-muted mb-8 max-w-[600px] text-sm leading-relaxed text-pretty md:text-lg"

From ce8f191a21726057dc91207ca438f87c31c4973d Mon Sep 17 00:00:00 2001
From: Mohamed Hassan <87046460+MohamedH1998@users.noreply.github.com>
Date: Tue, 19 May 2026 12:35:08 +0100
Subject: [PATCH 29/35] Update src/pages/index.astro

Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com>
---
 src/pages/index.astro | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 772b0518367e903..741b3b5343171b4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,16 +1,16 @@
 ---
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import type { StarlightPageProps } from "@astrojs/starlight/props";
-import StructuralGrid from "../components/landing/StructuralGrid.astro";
-import FullPageLines from "../components/landing/FullPageLines.astro";
-import Hero from "../components/landing/Hero.astro";
-import PlatformStats from "../components/landing/PlatformStats.astro";
-import BuildFromScratch from "../components/landing/BuildFromScratch.astro";
-import SecureSection from "../components/landing/SecureSection.astro";
-import AccelerateSection from "../components/landing/AccelerateSection.astro";
-import AgentSetup from "../components/landing/AgentSetup.astro";
-import ChangelogSection from "../components/landing/ChangelogSection.astro";
-import CommunityGrid from "../components/landing/CommunityGrid.astro";
+import StructuralGrid from "~/components/landing/StructuralGrid.astro";
+import FullPageLines from "~/components/landing/FullPageLines.astro";
+import Hero from "~/components/landing/Hero.astro";
+import PlatformStats from "~/components/landing/PlatformStats.astro";
+import BuildFromScratch from "~/components/landing/BuildFromScratch.astro";
+import SecureSection from "~/components/landing/SecureSection.astro";
+import AccelerateSection from "~/components/landing/AccelerateSection.astro";
+import AgentSetup from "~/components/landing/AgentSetup.astro";
+import ChangelogSection from "~/components/landing/ChangelogSection.astro";
+import CommunityGrid from "~/components/landing/CommunityGrid.astro";
 import "../styles/landing.css";
 
 const heading = (icon: string) => ({

From 99e3d79beb729a7a2eb6e3838620fa33c1174add Mon Sep 17 00:00:00 2001
From: Mohamed Hassan <87046460+MohamedH1998@users.noreply.github.com>
Date: Tue, 19 May 2026 12:35:29 +0100
Subject: [PATCH 30/35] Update src/components/landing/BuildFromScratch.astro

Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com>
---
 src/components/landing/BuildFromScratch.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index c1ebf29f77b042c..ff4e5ce7405f83d 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -80,7 +80,7 @@ const primitives = [
 		description:
 			"Cloudflare Images helps teams build scalable, reliable media pipelines to store, optimize, and deliver images.",
 		command:
-			"curl --request POST https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1",
+			"curl --request POST https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/images/v1",
 		cta: {
 			label: "Get started with Images",
 			href: "/images/get-started/introduction/",

From 8eb182e3027d9046fe276f7445afa46e95ad96a4 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 19 May 2026 12:37:10 +0100
Subject: [PATCH 31/35] chore: remove waterfall component

---
 .../landing/AccelerateSection.astro           |   3 -
 src/components/landing/Waterfall.astro        | 329 ------------------
 2 files changed, 332 deletions(-)
 delete mode 100644 src/components/landing/Waterfall.astro

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index 121d2ff0ed4fa3e..9f609c05cbc41b5 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -29,9 +29,6 @@ import { phases, phaseColor } from "./accelerate-data";
 		</ViewAllLink>
 	</div>
 
-	<!-- Leave out till approval -->
-	<!-- <Waterfall phases={phases} /> -->
-
 	<ProductCardGrid>
 		{
 			phases.map((p) => (
diff --git a/src/components/landing/Waterfall.astro b/src/components/landing/Waterfall.astro
deleted file mode 100644
index 4bcb9c0c50e1c19..000000000000000
--- a/src/components/landing/Waterfall.astro
+++ /dev/null
@@ -1,329 +0,0 @@
----
-/**
- * Waterfall — interactive request timeline with a "With / Without Cloudflare"
- * toggle. Renders the toggle, per-phase rows, and the total-latency summary.
- *
- * Designed to live inside an ancestor with classes `wf-section group/wf` and a
- * `data-mode="after"` attribute (see AccelerateSection.astro). The toggle
- * script reaches up via `closest(".wf-section")` to mutate that mode, which
- * drives Tailwind `group-data-[mode=*]/wf:` selectors in the rows below.
- */
-import { Icon } from "astro-icon/components";
-import RightArrow from "./RightArrow.astro";
-import CornerMarks from "./CornerMarks.astro";
-import { phaseColor, type WaterfallPhase } from "./accelerate-data";
-
-interface Props {
-	phases: readonly WaterfallPhase[];
-}
-
-const { phases } = Astro.props;
----
-
-<div
-	class="mb-5 flex flex-wrap items-center justify-between gap-3 sm:gap-4"
-	role="radiogroup"
-	aria-label="Comparison mode"
->
-	<div
-		class="wf-toggle-track border-border-100 bg-background pointer-events-auto relative z-20 inline-grid shrink-0 grid-cols-2 items-center rounded-full border p-1"
-	>
-		<span
-			aria-hidden="true"
-			class="bg-accent-100 pointer-events-none absolute top-1 left-1 h-[calc(100%-8px)] w-[calc(50%-4px)] rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.06),0_4px_12px_rgba(0,0,0,0.08)] transition-transform duration-200 ease-in-out group-data-[mode=after]/wf:translate-x-0 group-data-[mode=before]/wf:translate-x-full motion-reduce:transition-none"
-		></span>
-
-		<button
-			type="button"
-			id="wf-toggle-after"
-			role="radio"
-			aria-checked="true"
-			tabindex="0"
-			class="group/btn focus-visible:outline-accent-100 text-foreground-muted aria-checked:text-light-foreground relative z-10 flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-xs font-medium -tracking-[0.01em] whitespace-nowrap transition-colors duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 sm:h-10 sm:gap-2 sm:px-3.5 sm:py-2.5 sm:text-sm"
-		>
-			<span
-				aria-hidden="true"
-				class="bg-foreground-subtle group-aria-checked/btn:bg-light-foreground/90 size-1.5 shrink-0 rounded-full transition-colors duration-200 ease-in-out sm:size-2"
-			></span>
-			With Cloudflare
-		</button>
-		<button
-			type="button"
-			id="wf-toggle-before"
-			role="radio"
-			aria-checked="false"
-			tabindex="-1"
-			class="group/btn focus-visible:outline-accent-100 hover:bg-foreground/5 text-foreground-muted aria-checked:text-light-foreground relative z-10 flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-xs font-medium -tracking-[0.01em] whitespace-nowrap transition-colors duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 sm:h-10 sm:gap-2 sm:px-3.5 sm:py-2.5 sm:text-sm"
-		>
-			<span
-				aria-hidden="true"
-				class="bg-foreground-subtle group-aria-checked/btn:bg-light-foreground/90 size-1.5 shrink-0 rounded-full transition-colors duration-200 ease-in-out sm:size-2"
-			></span>
-			Without Cloudflare
-		</button>
-	</div>
-</div>
-
-<div class="border-border-100 relative overflow-visible border">
-	<CornerMarks />
-
-	<div
-		class="bg-background border-border-100 hidden h-7 items-end gap-4 border-b px-5 sm:grid sm:grid-cols-[minmax(220px,1.1fr)_minmax(0,3fr)_auto]"
-		aria-hidden="true"
-	>
-		<div></div>
-		<div class="relative h-full">
-			{
-				[0, 400, 800, 1200, 1600].map((ms) => (
-					<div
-						class="absolute bottom-0 flex flex-col items-center"
-						style={`left: ${(ms / 1600) * 100}%`}
-					>
-						<span
-							class="wf-ruler-label text-foreground-subtle mb-1 font-mono text-[9px] tracking-wider tabular-nums"
-							data-ms={ms}
-						>
-							{ms === 0 ? "0" : `${ms}ms`}
-						</span>
-						<span class="bg-border-100 h-1.5 w-px" />
-					</div>
-				))
-			}
-		</div>
-		<div class="w-3.5"></div>
-	</div>
-
-	{
-		phases.map((p, i) => (
-			<a
-				href={p.href}
-				aria-label={`${p.phase} — eliminate with ${p.product}`}
-				class:list={[
-					"wf-row group relative grid grid-cols-[1fr] items-center gap-2 px-3 py-3 no-underline transition-colors duration-150",
-					"sm:grid-cols-[minmax(220px,1.1fr)_minmax(0,3fr)_auto] sm:gap-4 sm:px-5",
-					"bg-background hover:bg-accent-100/5",
-					"focus-visible:outline-accent-100 focus-visible:outline-2 focus-visible:-outline-offset-2",
-					i > 0 && "border-border-100 border-t",
-				]}
-				data-phase={p.id}
-				style={`--phase-color: ${phaseColor(p)};`}
-			>
-				<span
-					class="bg-accent-100 pointer-events-none absolute bottom-0 left-0 h-px w-0 transition-[width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:w-full"
-					aria-hidden="true"
-				/>
-
-				<div class="flex min-w-0 items-center gap-2 sm:gap-3">
-					<span class="border-border-100 bg-background-muted text-foreground-subtle group-hover:border-accent-100/30 group-hover:bg-accent-100/5 group-hover:text-accent-100 flex size-8 shrink-0 items-center justify-center rounded border transition-colors duration-150">
-						<Icon name={p.icon} size="16px" />
-					</span>
-					<div class="min-w-0">
-						<p class="text-foreground text-sm leading-tight font-medium">
-							{p.phase}
-						</p>
-						<p class="text-accent-100 m-0 max-h-6 overflow-hidden font-mono text-[11px] tracking-widest uppercase opacity-100 transition-[max-height,opacity] duration-300 ease-out group-data-[mode=before]/wf:max-h-0 group-data-[mode=before]/wf:opacity-0 motion-reduce:transition-none">
-							{p.product}
-						</p>
-					</div>
-				</div>
-
-				<div
-					class="relative h-5 sm:h-auto sm:self-stretch"
-					aria-hidden="true"
-				>
-					<div class="bg-background-muted absolute inset-0 rounded" />
-
-					{[25, 50, 75].map((pct) => (
-						<div
-							class="border-border-100/50 absolute inset-y-0 border-l border-dashed"
-							style={`left: ${pct}%`}
-						/>
-					))}
-
-					<div
-						class={`wf-bar absolute inset-y-0 rounded transition-[left,width,box-shadow] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] data-[shrunk=true]:animate-[wf-shrink-pulse_0.6s_ease-out] motion-reduce:!transition-none motion-reduce:data-[shrunk=true]:animate-none ${p.color}`}
-						style={`--off-before: ${p.before.offset}%; --w-before: ${p.before.width}%; --off-after: ${p.after.offset}%; --w-after: ${p.after.width}%;`}
-						data-shrunk="false"
-					>
-						<span
-							class:list={[
-								"absolute top-1/2 right-2 hidden -translate-y-1/2 font-mono text-[10px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm group-data-[mode=after]/wf:sm:inline",
-								p.after.width < 6 && "opacity-0",
-							]}
-						>
-							{Math.round(p.after.width * 16)}ms
-						</span>
-						<span
-							class:list={[
-								"absolute top-1/2 right-2 hidden -translate-y-1/2 font-mono text-[10px] font-medium whitespace-nowrap text-white/90 tabular-nums drop-shadow-sm group-data-[mode=before]/wf:sm:inline",
-								p.before.width < 6 && "opacity-0",
-							]}
-						>
-							{Math.round(p.before.width * 16)}ms
-						</span>
-					</div>
-				</div>
-
-				<div class="text-foreground-subtle group-hover:text-accent-100 hidden items-center transition-colors duration-150 sm:flex">
-					<RightArrow
-						strokeWidth={1.5}
-						class="transition-transform duration-150 group-hover:translate-x-0.5"
-					/>
-				</div>
-			</a>
-		))
-	}
-
-	<div
-		class="wf-summary bg-background border-border-100 border-t px-5 py-3"
-		aria-live="polite"
-	>
-		<div class="flex items-center justify-between gap-4">
-			<div
-				class="text-foreground-muted flex items-center gap-3 font-mono text-xs tabular-nums"
-			>
-				<span class="tracking-widest uppercase">Total latency</span>
-				<div
-					class="bg-background-muted relative h-1.5 w-28 overflow-hidden rounded-full sm:w-48"
-					role="presentation"
-				>
-					<div
-						class="bg-accent-100 absolute inset-y-0 left-0 w-[12%] rounded-full transition-[width] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-data-[mode=before]/wf:w-[96%]"
-					>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-
-<style is:global>
-	@keyframes wf-shrink-pulse {
-		0% {
-			box-shadow: 0 0 0 0
-				color-mix(in srgb, var(--color-accent-100) 30%, transparent);
-		}
-		70% {
-			box-shadow: 0 0 0 4px
-				color-mix(in srgb, var(--color-accent-100) 0%, transparent);
-		}
-		100% {
-			box-shadow: 0 0 0 0
-				color-mix(in srgb, var(--color-accent-100) 0%, transparent);
-		}
-	}
-
-	.wf-bar {
-		left: var(--off-after);
-		width: var(--w-after);
-	}
-	.wf-section[data-mode="before"] .wf-bar {
-		left: var(--off-before);
-		width: var(--w-before);
-	}
-</style>
-
-<script>
-	function initWaterfall() {
-		const btnAfter = document.querySelector<HTMLButtonElement>(
-			"#wf-toggle-after",
-		);
-		const btnBefore = document.querySelector<HTMLButtonElement>(
-			"#wf-toggle-before",
-		);
-		if (!btnAfter || !btnBefore) return;
-
-		// Reach up to the .wf-section ancestor (in AccelerateSection.astro).
-		// That element owns `data-mode` so its `group/wf` data-attribute
-		// selectors apply to all descendants including the rows below.
-		const root = btnAfter.closest<HTMLElement>(".wf-section");
-		if (!root) return;
-
-		if (root.dataset.wfInit === "true") return;
-		root.dataset.wfInit = "true";
-
-		const prefersReducedMotion = window.matchMedia(
-			"(prefers-reduced-motion: reduce)",
-		).matches;
-
-		const bars = root.querySelectorAll<HTMLElement>(".wf-bar");
-
-		let isAfter = true;
-
-		const setMode = (after: boolean) => {
-			isAfter = after;
-
-			root.dataset.mode = after ? "after" : "before";
-
-			btnBefore.setAttribute("aria-checked", String(!after));
-			btnAfter.setAttribute("aria-checked", String(after));
-			btnBefore.setAttribute("tabindex", after ? "-1" : "0");
-			btnAfter.setAttribute("tabindex", after ? "0" : "-1");
-
-			bars.forEach((bar) => {
-				bar.dataset.shrunk = "false";
-				void bar.offsetWidth;
-				if (after && !prefersReducedMotion) {
-					bar.dataset.shrunk = "true";
-				}
-			});
-		};
-
-		const onBeforeClick = () => setMode(false);
-		const onAfterClick = () => setMode(true);
-		btnBefore.addEventListener("click", onBeforeClick);
-		btnAfter.addEventListener("click", onAfterClick);
-
-		const onToggleKeyDown = (event: KeyboardEvent) => {
-			const radios = [btnAfter, btnBefore];
-			const currentIndex = isAfter ? 0 : 1;
-			let nextIndex = currentIndex;
-
-			switch (event.key) {
-				case "ArrowRight":
-				case "ArrowDown":
-					nextIndex = (currentIndex + 1) % radios.length;
-					break;
-				case "ArrowLeft":
-				case "ArrowUp":
-					nextIndex = (currentIndex - 1 + radios.length) % radios.length;
-					break;
-				case "Home":
-					nextIndex = 0;
-					break;
-				case "End":
-					nextIndex = radios.length - 1;
-					break;
-				default:
-					return;
-			}
-
-			event.preventDefault();
-			setMode(nextIndex === 0);
-			radios[nextIndex].focus();
-		};
-
-		btnBefore.addEventListener("keydown", onToggleKeyDown);
-		btnAfter.addEventListener("keydown", onToggleKeyDown);
-
-		setMode(true);
-
-		document.addEventListener(
-			"astro:before-swap",
-			() => {
-				btnBefore.removeEventListener("click", onBeforeClick);
-				btnAfter.removeEventListener("click", onAfterClick);
-				btnBefore.removeEventListener("keydown", onToggleKeyDown);
-				btnAfter.removeEventListener("keydown", onToggleKeyDown);
-			},
-			{ once: true },
-		);
-	}
-
-	if (document.readyState === "loading") {
-		document.addEventListener("DOMContentLoaded", initWaterfall);
-	} else {
-		initWaterfall();
-	}
-	document.addEventListener("astro:page-load", initWaterfall);
-</script>

From f347a3fb8cede7bd62d236392b7eba7d8f2f7cda Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 19 May 2026 12:46:41 +0100
Subject: [PATCH 32/35] chore: revert opencode.jsonc change

---
 opencode.jsonc | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/opencode.jsonc b/opencode.jsonc
index 8b18847cd07fdc5..8ed9f40e4817db4 100644
--- a/opencode.jsonc
+++ b/opencode.jsonc
@@ -4,14 +4,6 @@
 	"experimental": {
 		"continue_loop_on_deny": true,
 	},
-	"instructions": {
-		"documentation": "You are Bonk, a documentation assistant for Cloudflare. You help with documentation-related tasks.",
-	},
-}
-	},
-	"experimental": {
-		"continue_loop_on_deny": true,
-	},
 	"provider": {
 		"cloudflare-ai-gateway": {
 			"models": {

From face0f6fc659419694ccb5370e3fba146d3c4a73 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 19 May 2026 14:31:41 +0100
Subject: [PATCH 33/35] chore: feedback

---
 src/components/landing/BuildFromScratch.astro |  2 +-
 src/components/landing/CopyPromptButton.astro |  4 ++--
 src/components/landing/Hero.astro             |  2 +-
 src/components/landing/SecureSection.astro    | 12 ++++++------
 src/components/landing/ViewAllLink.astro      |  2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/landing/BuildFromScratch.astro b/src/components/landing/BuildFromScratch.astro
index ff4e5ce7405f83d..552c47ec3dc1a51 100644
--- a/src/components/landing/BuildFromScratch.astro
+++ b/src/components/landing/BuildFromScratch.astro
@@ -52,7 +52,7 @@ const primitives = [
 	},
 	{
 		id: "storage",
-		label: "Storage",
+		label: "Storage & Databases",
 		icon: "d1",
 		iconColor: "#ee0ddb",
 		iconBg: "rgba(238, 13, 219, 0.1)",
diff --git a/src/components/landing/CopyPromptButton.astro b/src/components/landing/CopyPromptButton.astro
index d2632fe7fa41245..5bd79913158bcdd 100644
--- a/src/components/landing/CopyPromptButton.astro
+++ b/src/components/landing/CopyPromptButton.astro
@@ -65,9 +65,9 @@ const featuredAgents = AGENTS.filter((a) =>
 				))
 			}
 		</span>
-		<span class="group-data-[copied=true]/copy:hidden">Copy Prompt</span>
+		<span class="group-data-[copied=true]/copy:hidden">Copy prompt</span>
 		<span class="hidden group-data-[copied=true]/copy:inline">
-			Prompt Copied!
+			Prompt copied!
 		</span>
 	</span>
 </Button>
diff --git a/src/components/landing/Hero.astro b/src/components/landing/Hero.astro
index a57198b1f82ba82..be38fd1cb5e7963 100644
--- a/src/components/landing/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -20,7 +20,7 @@ import CopyPromptButton from "./CopyPromptButton.astro";
 	</p>
 
 	<div class={`flex flex-wrap items-center gap-x-3 gap-y-3 ${stagger(0.16)}`}>
-		<Button href="/fundamentals/" variant="primary" size="md">
+		<Button href="/fundamentals/get-started/" variant="primary" size="md">
 			<span class="inline-flex items-center gap-2 text-base font-medium">
 				Get started
 				<Icon name="right-arrow" size="1rem" />
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index 5d351f2bccbfa9e..3ecce99dd3142ae 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -13,7 +13,7 @@ const categories = [
 				href: "/waf/",
 				icon: "ddos-protection",
 				detail:
-					"Identify and block malicious payloads before they can compromise your application",
+					"Identify and block malicious payloads before they can compromise your application.",
 				cta: "Harden your app with WAF",
 			},
 			{
@@ -21,7 +21,7 @@ const categories = [
 				product: "SSL/TLS",
 				href: "/ssl/",
 				icon: "ssl",
-				detail: "Streamline TLS Certificate Management",
+				detail: "Streamline TLS Certificate Management.",
 				cta: "Set up SSL/TLS",
 			},
 			{
@@ -30,7 +30,7 @@ const categories = [
 				href: "/turnstile/",
 				icon: "turnstile",
 				detail:
-					"Confirm web visitors are real and block unwanted bots without slowing down web experiences for real users",
+					"Confirm web visitors are real and block unwanted bots without slowing down web experiences for real users.",
 				cta: "Add Turnstile protection",
 			},
 		],
@@ -45,7 +45,7 @@ const categories = [
 				product: "Tunnel",
 				href: "/cloudflare-one/networks/connectors/cloudflare-tunnel/",
 				icon: "tunnel",
-				detail: "Outbound-only encrypted tunnels, no open ports",
+				detail: "Outbound-only encrypted tunnels, no open ports.",
 				cta: "Create a secure Tunnel",
 			},
 			{
@@ -54,7 +54,7 @@ const categories = [
 				href: "/cloudflare-one/",
 				icon: "access",
 				detail:
-					"Identity-first, quantum-safe access to private applications and infrastructure",
+					"Identity-first, quantum-safe access to private applications and infrastructure.",
 				cta: "Set up Zero Trust access",
 			},
 			{
@@ -63,7 +63,7 @@ const categories = [
 				href: "/cloudflare-one/traffic-policies/",
 				icon: "gateway",
 				detail:
-					"Cloud-native Secure Web Gateway (SWG) that inspects browser traffic without disruption",
+					"Cloud-native Secure Web Gateway (SWG) that inspects browser traffic without disruption.",
 				cta: "Create Gateway policies",
 			},
 		],
diff --git a/src/components/landing/ViewAllLink.astro b/src/components/landing/ViewAllLink.astro
index c4a57154d3039dc..91467edf45ac9fa 100644
--- a/src/components/landing/ViewAllLink.astro
+++ b/src/components/landing/ViewAllLink.astro
@@ -12,7 +12,7 @@ const { href, class: className = "" } = Astro.props;
 <a
 	href={href}
 	class:list={[
-		"group text-accent-100 decoration-accent-100/40 inline-flex shrink-0 items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline",
+		"group text-accent-100 decoration-accent-100/40 hidden shrink-0 items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline md:inline-flex",
 		className,
 	]}
 >

From c208bcb00894a079d5d26b0c7b2b111824308ae8 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Thu, 21 May 2026 11:49:31 +0100
Subject: [PATCH 34/35] copy

---
 .../landing/AccelerateSection.astro           |  35 ++---
 src/components/landing/SecureSection.astro    |  10 +-
 src/components/landing/accelerate-data.ts     | 128 +++++-------------
 3 files changed, 54 insertions(+), 119 deletions(-)

diff --git a/src/components/landing/AccelerateSection.astro b/src/components/landing/AccelerateSection.astro
index 9f609c05cbc41b5..8ec99e5ea93cd6f 100644
--- a/src/components/landing/AccelerateSection.astro
+++ b/src/components/landing/AccelerateSection.astro
@@ -3,14 +3,13 @@ import ProductCard from "./ProductCard.astro";
 import ProductCardGrid from "./ProductCardGrid.astro";
 import SectionHeading from "./SectionHeading.astro";
 import ViewAllLink from "./ViewAllLink.astro";
-import { phases, phaseColor } from "./accelerate-data";
+import { products } from "./accelerate-data";
 ---
 
 <section
-	class="wf-section group/wf pt-10 pb-10"
+	class="pt-10 pb-10"
 	aria-labelledby="accelerate-heading"
 	id="accelerate"
-	data-mode="after"
 >
 	<div class="mb-6 flex items-center justify-between sm:mb-8">
 		<div>
@@ -20,8 +19,8 @@ import { phases, phaseColor } from "./accelerate-data";
 			<p
 				class="text-foreground-muted max-w-[600px] text-sm leading-relaxed text-pretty md:text-lg"
 			>
-				Cloudflare routes traffic through the most reliable paths and delivers
-				assets as close to end users as possible.
+				Accelerate websites and applications with Cloudflare CDN caching, image
+				optimization, smart routing, load balancing, and web analytics.
 			</p>
 		</div>
 		<ViewAllLink href="/directory/?product-group=Application+performance">
@@ -31,22 +30,16 @@ import { phases, phaseColor } from "./accelerate-data";
 
 	<ProductCardGrid>
 		{
-			phases.map((p) => (
-				<div
-					class="wf-product-card flex"
-					data-phase={p.id}
-					style={`--phase-color: ${phaseColor(p)};`}
-				>
-					<ProductCard
-						icon={p.icon}
-						product={p.product}
-						scenario={p.outcome}
-						detail={p.detail}
-						href={p.href}
-						cta={p.cta}
-						category={p.category}
-					/>
-				</div>
+			products.map((p) => (
+				<ProductCard
+					icon={p.icon}
+					product={p.product}
+					scenario={p.outcome}
+					detail={p.detail}
+					href={p.href}
+					cta={p.cta}
+					category={p.category}
+				/>
 			))
 		}
 	</ProductCardGrid>
diff --git a/src/components/landing/SecureSection.astro b/src/components/landing/SecureSection.astro
index 3ecce99dd3142ae..a40d8e741cd8be7 100644
--- a/src/components/landing/SecureSection.astro
+++ b/src/components/landing/SecureSection.astro
@@ -49,13 +49,13 @@ const categories = [
 				cta: "Create a secure Tunnel",
 			},
 			{
-				scenario: "Manage access across your internal environment",
-				product: "Zero Trust",
-				href: "/cloudflare-one/",
+				scenario: "Secure internal applications with Cloudflare Access",
+				product: "Access",
+				href: "/cloudflare-one/access-controls/",
 				icon: "access",
 				detail:
 					"Identity-first, quantum-safe access to private applications and infrastructure.",
-				cta: "Set up Zero Trust access",
+				cta: "Set up Cloudflare Access",
 			},
 			{
 				scenario: "Secure Internet browsing without disruptions",
@@ -77,7 +77,7 @@ const categories = [
 	id="secure"
 >
 	<SectionHeading id="secure-heading" class="mb-2">
-		Block exploits, bots, and DDoS attacks in seconds
+		Security that scales
 	</SectionHeading>
 	<p
 		class="text-foreground-muted mb-8 max-w-[600px] text-sm leading-relaxed text-pretty md:text-lg"
diff --git a/src/components/landing/accelerate-data.ts b/src/components/landing/accelerate-data.ts
index dd00a9821494a7f..cac2ee47a1fd016 100644
--- a/src/components/landing/accelerate-data.ts
+++ b/src/components/landing/accelerate-data.ts
@@ -1,140 +1,82 @@
 /**
- * Shared data for the Accelerate section. Consumed by:
- *   - Waterfall.astro       (toggle + per-phase rows + summary)
- *   - AccelerateSection.astro (product card grid below the waterfall)
- *
- * Both halves share `id` + `--phase-color` so the cross-highlight CSS in
- * AccelerateSection can tint the matching product card when a waterfall
- * row is hovered (and vice-versa).
+ * Product data for the Accelerate section. Consumed by
+ * AccelerateSection.astro to render a grid of product cards.
  */
 
-export type WaterfallPhaseCategory = "compute" | "ai" | "storage" | "media";
+export type ProductCategory = "compute" | "ai" | "storage" | "media";
 
-export interface WaterfallPhase {
+export interface AccelerateProduct {
 	id: string;
-	phase: string;
-	before: { offset: number; width: number };
-	after: { offset: number; width: number };
 	product: string;
 	icon: string;
 	href: string;
 	outcome: string;
 	detail: string;
 	cta: string;
-	tags: string[];
-	color: string;
-	colorMuted: string;
-	category?: WaterfallPhaseCategory;
+	category?: ProductCategory;
 }
 
-export const phases: readonly WaterfallPhase[] = [
+export const products: readonly AccelerateProduct[] = [
 	{
 		id: "dns",
-		phase: "DNS Lookup",
-		before: { offset: 0, width: 12.5 },
-		after: { offset: 0, width: 0.69 },
 		product: "DNS",
 		icon: "dns",
 		href: "/dns/",
 		outcome: "Fast, reliable and resilient DNS queries",
 		detail:
-			"The world's fastest and most reliable DNS — 11ms average. DNSSEC, wildcard records, proxy control.",
+			"World's fastest authoritative DNS, consistently ranked #1 by DNSPerf; free, fully API-managed, DNSSEC supported.",
 		cta: "Set up Authoritative DNS",
-		tags: ["Authoritative DNS", "DNSSEC"],
-		color: "bg-orange-400",
-		colorMuted: "bg-orange-400/20",
 	},
 	{
-		id: "connect",
-		phase: "TCP + TLS",
-		before: { offset: 0, width: 25 },
-		after: { offset: 0, width: 3.06 },
-		product: "Argo Smart Routing",
-		icon: "argo-smart-routing",
-		href: "/argo-smart-routing/",
-		outcome: "Durable and fast origin access for APIs and dynamic content",
+		id: "smart-shield",
+		product: "Smart Shield",
+		icon: "smart-shield",
+		href: "/smart-shield/",
+		outcome: "Minimize origin load and accelerate dynamic content",
 		detail:
-			"Detects and routes around real-time network congestion. On average, makes web applications 30% faster.",
-		cta: "Integrate Argo Smart Routing",
-		tags: ["Smart Routing", "Tiered Caching"],
-		color: "bg-amber-500",
-		colorMuted: "bg-amber-500/20",
+			"Intelligently manage traffic, optimize content delivery, and safeguard origin infrastructure.",
+		cta: "Enable Smart Shield",
 	},
 	{
-		id: "wait",
-		phase: "Server Wait (TTFB)",
-		before: { offset: 0, width: 31.25 },
-		after: { offset: 0, width: 0.31 },
+		id: "cdn",
 		product: "CDN",
 		icon: "cache",
 		href: "/cache/get-started/",
 		outcome:
-			"Clever caching for faster user experiences and lower infrastructure costs",
+			"Default caching for static assets, with cache rules for full control",
 		detail:
-			"CDN caches content in 330+ cities worldwide with cache rules, tiered caching, and zero-configuration setup.",
+			"Caches content in 330+ cities worldwide, with instant purging and granular Cache Rules.",
 		cta: "Set up Cache Rules",
-		tags: ["Cache Rules", "Tiered Cache", "Cache Reserve"],
-		color: "bg-yellow-500",
-		colorMuted: "bg-yellow-500/20",
 	},
 	{
-		id: "db",
-		phase: "Database Query",
-		before: { offset: 0, width: 87.5 },
-		after: { offset: 0, width: 14.56 },
-		product: "Hyperdrive",
-		icon: "hyperdrive",
-		href: "/hyperdrive/",
-		outcome: "Make your database feel instant, everywhere",
+		id: "speed",
+		product: "Speed",
+		icon: "speed",
+		href: "/speed/",
+		outcome: "Assess your site speed and apply recommended optimizations",
 		detail:
-			"Connection pooling, query caching, and global routing for PostgreSQL and MySQL databases.",
-		cta: "Make regional databases feel global",
-		tags: ["Connection Pooling", "Query Caching"],
-		color: "bg-lime-500",
-		colorMuted: "bg-lime-500/20",
-		category: "storage",
+			"Application delivery optimizations including minification, Brotli compression, Early Hints, and HTTP/3.",
+		cta: "Improve your site speed",
 	},
 	{
-		id: "assets",
-		phase: "Asset Optimization",
-		before: { offset: 0, width: 17.5 },
-		after: { offset: 0, width: 9.06 },
+		id: "images",
 		product: "Images",
 		icon: "images",
 		href: "/images/",
-		outcome: "Streamlined image infrastructure built for scale",
+		outcome: "Transform, optimize, and deliver images worldwide",
 		detail:
-			"Build scalable, reliable media pipelines to store, optimize, and deliver images.",
-		cta: "Upload and optimize images",
-		tags: ["Transform", "Polish", "WebP/AVIF"],
-		color: "bg-teal-500",
-		colorMuted: "bg-teal-500/20",
+			"Cloudflare Images handles format conversion, responsive sizing, and intelligent caching.",
+		cta: "Optimize image delivery",
 		category: "media",
 	},
 	{
-		id: "scripts",
-		phase: "Third-party Scripts",
-		before: { offset: 0, width: 31.25 },
-		after: { offset: 0, width: 0 },
-		product: "Zaraz",
-		icon: "zaraz",
-		href: "/zaraz/",
-		outcome: "Load third-party tools without weighing down web apps",
+		id: "web-analytics",
+		product: "Web Analytics",
+		icon: "web-analytics",
+		href: "/web-analytics/",
+		outcome: "Understand the performance of your web pages",
 		detail:
-			"Load analytics tools, advertising pixels, widgets, and other third-party tools without slowing down your applications.",
-		cta: "Improve page load with minimal effort",
-		tags: ["Server-side Tags", "Consent Mgmt"],
-		color: "bg-sky-500",
-		colorMuted: "bg-sky-500/20",
+			"Cloudflare Web Analytics collects Core Web Vitals and performance data from 100% of page views without cookies or sampling.",
+		cta: "Track real user metrics",
 	},
 ];
-
-export const CATEGORY_COLOR: Record<WaterfallPhaseCategory, string> = {
-	compute: "#0a95ff",
-	ai: "#19e306",
-	storage: "#ee0ddb",
-	media: "#9616ff",
-};
-
-export const phaseColor = (p: WaterfallPhase) =>
-	p.category ? CATEGORY_COLOR[p.category] : "var(--color-accent-100)";

From bb902c1cb36b89e4ab402e4aa780dca7f712b2cb Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Thu, 21 May 2026 12:41:09 +0100
Subject: [PATCH 35/35] chore: remove stats

---
 src/components/landing/PlatformStats.astro | 186 ---------------------
 src/pages/index.astro                      |   3 -
 2 files changed, 189 deletions(-)
 delete mode 100644 src/components/landing/PlatformStats.astro

diff --git a/src/components/landing/PlatformStats.astro b/src/components/landing/PlatformStats.astro
deleted file mode 100644
index 293ea6ec0b7d2c4..000000000000000
--- a/src/components/landing/PlatformStats.astro
+++ /dev/null
@@ -1,186 +0,0 @@
----
-import CornerMarks from "./CornerMarks.astro";
-import { stagger } from "./constants";
-
-const stats = [
-	{
-		value: 330,
-		suffix: "+",
-		unit: "cities",
-		label: "Run everywhere",
-		detail: "Around the world",
-	},
-	{
-		value: 100,
-		suffix: "+",
-		unit: "products",
-		label: "Powerful primitives",
-		detail: "Seamlessly integrated",
-	},
-	{
-		value: 81,
-		suffix: "M+",
-		unit: "HTTP requests/sec",
-		label: "Run at massive scale",
-		detail: "On Cloudflare's infrastructure",
-	},
-	{
-		value: 20,
-		suffix: "%",
-		unit: "of the Internet",
-		label: "Internet scale",
-		detail: "1 in 5 sites on the Internet",
-	},
-];
----
-
-<section
-	id="platform"
-	class={`pt-8 pb-8 lg:pt-10 lg:pb-12 ${stagger(0.42)}`}
-	aria-labelledby="stats-heading"
->
-	<div class="mb-3">
-		<span class="text-accent-100 font-mono text-xs tracking-widest uppercase">
-			Platform at a Glance
-		</span>
-	</div>
-
-	<div
-		id="stats-grid"
-		class="border-border-100 bg-border-100 relative grid grid-cols-2 gap-px overflow-visible border lg:grid-cols-4"
-	>
-		<CornerMarks />
-		{
-			stats.map((stat, i) => (
-				<div class="stat-card bg-background relative flex flex-col px-4 py-4 transition-colors duration-150 sm:px-5 sm:py-5">
-					<div
-						class="text-foreground-subtle mb-2.5 font-mono text-[11px] uppercase tabular-nums select-none"
-						aria-hidden="true"
-					>
-						{String(i + 1).padStart(2, "0")}
-					</div>
-
-					<p class="mb-1">
-						<span class="stat-counter text-foreground inline-flex items-baseline font-mono text-3xl leading-none font-medium -tracking-tight tabular-nums">
-							<span
-								class="stat-counter-value inline-block"
-								data-target={stat.value}
-								data-decimals={stat.value % 1 !== 0 ? "2" : "0"}
-								style={`min-width: ${(stat.value % 1 !== 0 ? stat.value.toFixed(2) : String(stat.value)).length}ch;`}
-							>
-								{stat.value % 1 !== 0 ? stat.value.toFixed(2) : stat.value}
-							</span>
-							<span class="stat-counter-suffix">{stat.suffix}</span>
-						</span>
-					</p>
-
-					<p class="text-accent-100 stat-unit mb-3 min-h-[2.4em] font-mono text-[12px] tracking-wide text-balance uppercase">
-						{stat.unit}
-					</p>
-
-					<div class="border-border-100 border-t border-dashed pt-3">
-						<div class="space-y-0.5">
-							<p class="text-foreground text-[15px] leading-snug font-medium text-balance">
-								{stat.label}
-							</p>
-							<p class="text-foreground-muted text-[13px] leading-snug text-pretty">
-								{stat.detail}
-							</p>
-						</div>
-					</div>
-				</div>
-			))
-		}
-	</div>
-</section>
-
-<script>
-	function easeOutCubic(t: number): number {
-		return 1 - Math.pow(1 - t, 3);
-	}
-
-	function animateCounter(el: HTMLElement) {
-		if (el.dataset.animated === "true") return;
-
-		const target = parseFloat(el.dataset.target ?? "0");
-		const decimals = parseInt(el.dataset.decimals ?? "0", 10);
-		const scale = 10 ** decimals;
-		const targetScaled = Math.round(target * scale);
-		const prefersReducedMotion = window.matchMedia(
-			"(prefers-reduced-motion: reduce)",
-		).matches;
-
-		if (prefersReducedMotion) {
-			el.textContent = target.toFixed(decimals);
-			el.dataset.animated = "true";
-			return;
-		}
-
-		const duration = 1250;
-		const start = performance.now();
-		let lastScaled = -1;
-
-		function tick(now: number) {
-			const elapsed = now - start;
-			const progress = Math.min(elapsed / duration, 1);
-			const eased = easeOutCubic(progress);
-			const nextScaled = Math.min(
-				targetScaled,
-				Math.floor(targetScaled * eased),
-			);
-
-			if (nextScaled !== lastScaled) {
-				el.textContent = (nextScaled / scale).toFixed(decimals);
-				lastScaled = nextScaled;
-			}
-
-			if (progress < 1) {
-				requestAnimationFrame(tick);
-			} else {
-				el.textContent = target.toFixed(decimals);
-				el.dataset.animated = "true";
-			}
-		}
-
-		requestAnimationFrame(tick);
-	}
-
-	function initPlatformStatsCounters() {
-		const counters = document.querySelectorAll<HTMLElement>(
-			".stat-counter-value",
-		);
-
-		if ("IntersectionObserver" in window) {
-			const observer = new IntersectionObserver(
-				(entries) => {
-					entries.forEach((entry) => {
-						if (entry.isIntersecting) {
-							animateCounter(entry.target as HTMLElement);
-							observer.unobserve(entry.target);
-						}
-					});
-				},
-				{ threshold: 0.35 },
-			);
-			counters.forEach((el) => observer.observe(el));
-		} else {
-			counters.forEach((el) => {
-				const target = parseFloat(el.dataset.target ?? "0");
-				const decimals = parseInt(el.dataset.decimals ?? "0", 10);
-				el.textContent = target.toFixed(decimals);
-				el.dataset.animated = "true";
-			});
-		}
-	}
-
-	initPlatformStatsCounters();
-	if (
-		!(window as Window & { __platformStatsCountersBound?: boolean })
-			.__platformStatsCountersBound
-	) {
-		document.addEventListener("astro:page-load", initPlatformStatsCounters);
-		(
-			window as Window & { __platformStatsCountersBound?: boolean }
-		).__platformStatsCountersBound = true;
-	}
-</script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 741b3b5343171b4..3fc006c3118b168 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,7 +4,6 @@ import type { StarlightPageProps } from "@astrojs/starlight/props";
 import StructuralGrid from "~/components/landing/StructuralGrid.astro";
 import FullPageLines from "~/components/landing/FullPageLines.astro";
 import Hero from "~/components/landing/Hero.astro";
-import PlatformStats from "~/components/landing/PlatformStats.astro";
 import BuildFromScratch from "~/components/landing/BuildFromScratch.astro";
 import SecureSection from "~/components/landing/SecureSection.astro";
 import AccelerateSection from "~/components/landing/AccelerateSection.astro";
@@ -258,8 +257,6 @@ const props = {
 
 				<SecureSection />
 
-				<PlatformStats />
-
 				<AccelerateSection />
 
 				<CommunityGrid />