diff --git a/src/pages/index.astro b/src/pages/index.astro
index b824c55..d170fdc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,4 +1,7 @@
 ---
+/** Per-request hostname selects featured product — must not prerender to static HTML. */
+export const prerender = false;
+
 import BaseLayout from '../layouts/BaseLayout.astro';
 import LayoutCurrent from '../components/LayoutCurrent.astro';
 import LayoutA from '../components/LayoutA.astro';
@@ -6,12 +9,26 @@ import LayoutB from '../components/LayoutB.astro';
 import LayoutC from '../components/LayoutC.astro';
 
 const hostname = Astro.url.hostname;
+const hostLower = hostname.toLowerCase();
 const featuredParam = Astro.url.searchParams.get('featured');
 const layoutParam = Astro.url.searchParams.get('layout');
+const protoGate = Astro.url.searchParams.get('proto') === '1';
+
+/** Dev / preview, or production opt-in via ?proto=1 — hide on canonical marketing domains otherwise */
+const showProtoSwitcher =
+	import.meta.env.DEV ||
+	protoGate ||
+	hostLower === 'localhost' ||
+	hostLower.startsWith('127.') ||
+	hostLower.endsWith('.workers.dev') ||
+	hostLower.endsWith('.pages.dev');
+
+/** On git-rain hosts, hostname already picks rain — hide Domain row when bar is open */
+const showProtoDomainGroup = showProtoSwitcher && !hostLower.includes('git-rain');
 
 const featured: 'fire' | 'rain' = featuredParam === 'rain' ? 'rain'
 	: featuredParam === 'fire' ? 'fire'
-	: hostname.includes('git-rain') ? 'rain'
+	: hostLower.includes('git-rain') ? 'rain'
 	: 'fire';
 
 const layout: 'current' | 'a' | 'b' | 'c' = layoutParam === 'a' ? 'a'
@@ -26,10 +43,12 @@ const description = featured === 'rain'
 	: 'Multi-repo checkpoint with git-fire, reverse sync with git-rain, plus git-testkit and git-harness for serious Git automation and tests.';
 
 function protoUrl(f: string, l: string): string {
-	const parts: string[] = [];
-	if (f !== 'fire') parts.push(`featured=${f}`);
-	if (l !== 'current') parts.push(`layout=${l}`);
-	return parts.length ? `?${parts.join('&')}` : '?';
+	const params = new URLSearchParams();
+	if (f !== 'fire') params.set('featured', f);
+	if (l !== 'current') params.set('layout', l);
+	if (protoGate) params.set('proto', '1');
+	const qs = params.toString();
+	return qs ? `?${qs}` : '?';
 }
 ---
 
@@ -39,21 +58,27 @@ function protoUrl(f: string, l: string): string {
 	{layout === 'c' && <LayoutC featured={featured} />}
 	{layout === 'current' && <LayoutCurrent featured={featured} />}
 
-	<div class="proto-toggle" aria-label="Prototype switcher">
-		<div class="proto-toggle__group">
-			<span class="proto-toggle__label">Domain</span>
-			<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': featured === 'fire' }]} href={protoUrl('fire', layout)}>fire.*</a>
-			<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': featured === 'rain' }]} href={protoUrl('rain', layout)}>rain.*</a>
-		</div>
-		<div class="proto-toggle__sep"></div>
-		<div class="proto-toggle__group">
-			<span class="proto-toggle__label">Layout</span>
-			<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'current' }]} href={protoUrl(featured, 'current')}>now</a>
-			<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'a' }]} href={protoUrl(featured, 'a')}>A</a>
-			<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'b' }]} href={protoUrl(featured, 'b')}>B</a>
-			<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'c' }]} href={protoUrl(featured, 'c')}>C</a>
+	{showProtoSwitcher && (
+		<div class="proto-toggle" aria-label="Prototype switcher">
+			{showProtoDomainGroup && (
+				<>
+					<div class="proto-toggle__group">
+						<span class="proto-toggle__label">Domain</span>
+						<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': featured === 'fire' }]} href={protoUrl('fire', layout)}>fire.*</a>
+						<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': featured === 'rain' }]} href={protoUrl('rain', layout)}>rain.*</a>
+					</div>
+					<div class="proto-toggle__sep" aria-hidden="true"></div>
+				</>
+			)}
+			<div class="proto-toggle__group">
+				<span class="proto-toggle__label">Layout</span>
+				<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'current' }]} href={protoUrl(featured, 'current')}>now</a>
+				<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'a' }]} href={protoUrl(featured, 'a')}>A</a>
+				<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'b' }]} href={protoUrl(featured, 'b')}>B</a>
+				<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'c' }]} href={protoUrl(featured, 'c')}>C</a>
+			</div>
 		</div>
-	</div>
+	)}
 
 	<script>
 		import { initInstallPickers } from '../scripts/install-pickers.ts';
diff --git a/src/styles/global.css b/src/styles/global.css
index deb6675..50c3e94 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -381,6 +381,19 @@ a:hover {
 	scroll-margin-top: 5.5rem;
 }
 
+/* Library sections — top stripe + tinted dividers (same tokens as .site-nav a[data-project]) */
+#testkit.section,
+#testkit.feature-row {
+	border-top: 3px solid var(--color-testkit);
+	border-bottom-color: color-mix(in srgb, var(--color-testkit) 45%, var(--color-border));
+}
+
+#harness.section,
+#harness.feature-row {
+	border-top: 3px solid var(--color-harness);
+	border-bottom-color: color-mix(in srgb, var(--color-harness) 45%, var(--color-border));
+}
+
 .js [data-reveal] {
 	opacity: 0;
 	transform: translateY(14px);
@@ -804,9 +817,8 @@ a:hover {
 	.section--rich .wrap { grid-template-columns: 1fr; }
 }
 
-/* Prototype switcher — hidden in production; re-enable by removing display:none */
+/* Prototype switcher — only in DOM when enabled server-side (see index.astro) */
 .proto-toggle {
-	display: none;
 	position: fixed;
 	bottom: var(--space-lg);
 	left: 50%;