diff --git a/apps/playwright-www/tests/responsive.test.ts b/apps/playwright-www/tests/responsive.test.ts
index 98b3e5d3e..533ab5b85 100644
--- a/apps/playwright-www/tests/responsive.test.ts
+++ b/apps/playwright-www/tests/responsive.test.ts
@@ -25,4 +25,45 @@ test.describe("Responsive Design", () => {
 			expect(bodyWidth).toBeLessThanOrEqual(viewportWidth);
 		});
 	}
+
+	test("automatic coercion showcase adapts layout between mobile and desktop", async ({
+		page,
+	}) => {
+		// Mobile viewport (375px) — direct single wire visible, desktop gate and split wires hidden
+		await page.setViewportSize({ width: 375, height: 812 });
+		await page.goto("/");
+		await page.waitForLoadState("networkidle");
+
+		const directWireMobile = page.locator(
+			".home-aurora__payload-row--port .home-aurora__payload-wire--direct",
+		);
+		const gateMobile = page.locator(
+			".home-aurora__payload-row--port .home-aurora__payload-gate",
+		);
+		const wire1Mobile = page.locator(
+			".home-aurora__payload-row--port .home-aurora__payload-wire--1",
+		);
+
+		await expect(directWireMobile).toHaveCSS("display", "flex");
+		await expect(gateMobile).toHaveCSS("display", "none");
+		await expect(wire1Mobile).toHaveCSS("display", "none");
+
+		// Desktop viewport (1280px) — desktop gate and split wires visible, direct wire hidden
+		await page.setViewportSize({ width: 1280, height: 900 });
+		await page.waitForLoadState("networkidle");
+
+		const directWireDesktop = page.locator(
+			".home-aurora__payload-row--port .home-aurora__payload-wire--direct",
+		);
+		const gateDesktop = page.locator(
+			".home-aurora__payload-row--port .home-aurora__payload-gate",
+		);
+		const wire1Desktop = page.locator(
+			".home-aurora__payload-row--port .home-aurora__payload-wire--1",
+		);
+
+		await expect(directWireDesktop).toHaveCSS("display", "none");
+		await expect(gateDesktop).toHaveCSS("display", "flex");
+		await expect(wire1Desktop).toHaveCSS("display", "flex");
+	});
 });
diff --git a/apps/www/app/(home)/aurora.css b/apps/www/app/(home)/aurora.css
index b4afe923d..a6b77f96a 100644
--- a/apps/www/app/(home)/aurora.css
+++ b/apps/www/app/(home)/aurora.css
@@ -1710,6 +1710,8 @@
 	box-shadow: none !important;
 	overflow: visible;
 	box-sizing: border-box;
+	container-type: inline-size;
+	container-name: stream-stage;
 }
 
 .home-aurora__stream-stage {
@@ -1733,7 +1735,7 @@
 .home-aurora__payload-col {
 	display: flex;
 	align-items: center;
-	min-width: 4.5rem;
+	min-width: 3.5rem;
 }
 
 .home-aurora__payload-col--left {
@@ -1752,7 +1754,6 @@
 }
 
 .home-aurora__payload-gate {
-	display: flex;
 	align-items: center;
 	justify-content: center;
 	padding: 0 0.5rem;
@@ -1781,13 +1782,42 @@
 /* Wires & Traveling Payload Tokens */
 .home-aurora__payload-wire {
 	position: relative;
-	display: flex;
 	align-items: center;
 	flex: 1;
 	height: 20px;
 	overflow: visible;
 }
 
+/* Responsive display: Direct wire on mobile/narrow (< 28rem), 2-wire + gate on desktop */
+.home-aurora__payload-wire--direct {
+	display: flex;
+}
+
+.home-aurora__payload-wire--1,
+.home-aurora__payload-gate,
+.home-aurora__payload-wire--2 {
+	display: none;
+}
+
+/* Responsive display: Governed purely by container query. Direct single wire on
+ * narrow stages (< 28rem / 448px); restores the 5-column schema gate once stage
+ * width has sufficient runway for dual wires and chips. */
+@container stream-stage (min-width: 28rem) {
+	.home-aurora__payload-col {
+		min-width: 4.5rem;
+	}
+
+	.home-aurora__payload-wire--direct {
+		display: none;
+	}
+
+	.home-aurora__payload-wire--1,
+	.home-aurora__payload-gate,
+	.home-aurora__payload-wire--2 {
+		display: flex;
+	}
+}
+
 .home-aurora__payload-wire .home-aurora__stream-wire-svg {
 	width: 100%;
 	height: 100%;
@@ -1853,7 +1883,7 @@
 	animation: port-travel-coerced 8s cubic-bezier(0.25, 1, 0.5, 1) infinite 0s;
 }
 .home-aurora__payload-row--port .home-aurora__payload-dock {
-	animation: port-dock-pulse 8s cubic-bezier(0.25, 1, 0.5, 1) infinite 0s;
+	animation: port-dock-pulse-mobile 4s cubic-bezier(0.2, 0.8, 0.25, 1) infinite 0s;
 }
 
 /* Row 2 Alternating Cadence (8s cycle) */
@@ -1873,7 +1903,79 @@
 	animation: debug-schema-flash 8s cubic-bezier(0.25, 1, 0.5, 1) infinite 0s;
 }
 .home-aurora__payload-row--debug .home-aurora__payload-dock {
-	animation: debug-dock-pulse 8s cubic-bezier(0.25, 1, 0.5, 1) infinite 0s;
+	animation: debug-dock-pulse-mobile 8s cubic-bezier(0.2, 0.8, 0.25, 1) infinite 0s;
+}
+
+@container stream-stage (min-width: 28rem) {
+	.home-aurora__payload-row--port .home-aurora__payload-dock {
+		animation: port-dock-pulse 8s cubic-bezier(0.25, 1, 0.5, 1) infinite 0s;
+	}
+	.home-aurora__payload-row--debug .home-aurora__payload-dock {
+		animation: debug-dock-pulse 8s cubic-bezier(0.25, 1, 0.5, 1) infinite 0s;
+	}
+}
+
+/* Mobile direct wire carrier and tokens */
+.home-aurora__payload-carrier {
+	position: absolute;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	display: inline-grid;
+	place-items: center;
+	pointer-events: none;
+	font-family: var(--font-mono, ui-monospace, monospace);
+	font-size: 0.8125rem;
+	font-weight: 500;
+	white-space: nowrap;
+	line-height: 1;
+	opacity: 0;
+	will-change: transform, opacity, left;
+}
+
+.home-aurora__payload-val {
+	grid-area: 1 / 1 / 2 / 2;
+	white-space: nowrap;
+}
+
+.home-aurora__payload-val--raw {
+	color: var(--color-ink);
+	text-shadow: 0 0 8px color-mix(in oklch, var(--color-ink) 40%, transparent);
+}
+
+.home-aurora__payload-val--coerced {
+	color: var(--color-accent);
+	text-shadow: 0 0 10px var(--color-accent);
+}
+
+/* Mobile Direct Wire Animation Bindings */
+.home-aurora__payload-carrier--port {
+	animation: port-mobile-travel 4s cubic-bezier(0.2, 0.8, 0.25, 1) infinite 0s;
+}
+.home-aurora__payload-carrier--port .home-aurora__payload-val--raw {
+	animation: port-mobile-raw 4s cubic-bezier(0.2, 0.8, 0.25, 1) infinite 0s;
+}
+.home-aurora__payload-carrier--port .home-aurora__payload-val--coerced {
+	animation: port-mobile-coerced 4s cubic-bezier(0.2, 0.8, 0.25, 1) infinite 0s;
+}
+
+.home-aurora__payload-carrier--debug-true {
+	animation: debug-mobile-travel-true 8s cubic-bezier(0.2, 0.8, 0.25, 1) infinite 0s;
+}
+.home-aurora__payload-carrier--debug-true .home-aurora__payload-val--raw {
+	animation: debug-mobile-raw-true 8s cubic-bezier(0.2, 0.8, 0.25, 1) infinite 0s;
+}
+.home-aurora__payload-carrier--debug-true .home-aurora__payload-val--coerced {
+	animation: debug-mobile-coerced-true 8s cubic-bezier(0.2, 0.8, 0.25, 1) infinite 0s;
+}
+
+.home-aurora__payload-carrier--debug-false {
+	animation: debug-mobile-travel-false 8s cubic-bezier(0.2, 0.8, 0.25, 1) infinite 0s;
+}
+.home-aurora__payload-carrier--debug-false .home-aurora__payload-val--raw {
+	animation: debug-mobile-raw-false 8s cubic-bezier(0.2, 0.8, 0.25, 1) infinite 0s;
+}
+.home-aurora__payload-carrier--debug-false .home-aurora__payload-val--coerced {
+	animation: debug-mobile-coerced-false 8s cubic-bezier(0.2, 0.8, 0.25, 1) infinite 0s;
 }
 
 /* Keyframes for Row 1 Alternating Pipeline */
@@ -2234,27 +2336,253 @@
 	}
 }
 
-@media (prefers-reduced-motion: reduce) {
-	.home-aurora__payload-chip,
-	.home-aurora__payload-schema,
-	.home-aurora__payload-dock {
-		animation: none !important;
+/* Mobile Direct Wire Keyframes (Mechanical Pipeline) */
+@keyframes port-mobile-travel {
+	0% {
+		left: 15%;
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.92);
 	}
-	.home-aurora__payload-chip {
-		display: none;
+	4% {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
 	}
-	.home-aurora__payload-dock {
+	36% {
+		left: 50%;
+	}
+	70% {
+		left: 82%;
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+	76% {
+		left: 86%;
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.85);
+	}
+	100% {
+		left: 86%;
+		opacity: 0;
+	}
+}
+
+@keyframes port-mobile-raw {
+	0%,
+	33% {
+		opacity: 1;
+		transform: scale(1);
+		filter: blur(0);
+	}
+	38%,
+	100% {
+		opacity: 0;
+		transform: scale(1.12);
+		filter: blur(2px);
+	}
+}
+
+@keyframes port-mobile-coerced {
+	0%,
+	33% {
+		opacity: 0;
+		transform: scale(0.88);
+		filter: blur(2px);
+	}
+	38%,
+	70% {
 		opacity: 1;
+		transform: scale(1);
+		filter: blur(0);
+	}
+	76%,
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes port-dock-pulse-mobile {
+	0%,
+	66% {
+		opacity: 0.45;
+		filter: none;
+		transform: scale(1);
+	}
+	70%,
+	82% {
+		opacity: 1;
+		filter: drop-shadow(0 0 10px var(--color-accent));
+		text-shadow: 0 0 8px var(--color-accent);
+		transform: scale(1.06);
+	}
+	88%,
+	100% {
+		opacity: 0.45;
+		filter: none;
+		transform: scale(1);
+	}
+}
+
+@keyframes debug-mobile-travel-true {
+	0%,
+	23% {
+		left: 15%;
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.92);
+	}
+	27% {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+	36% {
+		left: 50%;
+	}
+	45% {
+		left: 82%;
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+	50% {
+		left: 86%;
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.85);
+	}
+	100% {
+		left: 86%;
+		opacity: 0;
+	}
+}
+
+@keyframes debug-mobile-raw-true {
+	0%,
+	33% {
+		opacity: 1;
+		transform: scale(1);
+		filter: blur(0);
+	}
+	38%,
+	100% {
+		opacity: 0;
+		transform: scale(1.12);
+		filter: blur(2px);
+	}
+}
+
+@keyframes debug-mobile-coerced-true {
+	0%,
+	33% {
+		opacity: 0;
+		transform: scale(0.88);
+		filter: blur(2px);
+	}
+	38%,
+	46% {
+		opacity: 1;
+		transform: scale(1);
+		filter: blur(0);
+	}
+	50%,
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes debug-mobile-travel-false {
+	0%,
+	73% {
+		left: 15%;
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.92);
+	}
+	77% {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+	86% {
+		left: 50%;
+	}
+	95% {
+		left: 82%;
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+	100% {
+		left: 86%;
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.85);
+	}
+}
+
+@keyframes debug-mobile-raw-false {
+	0%,
+	83% {
+		opacity: 1;
+		transform: scale(1);
+		filter: blur(0);
+	}
+	88%,
+	100% {
+		opacity: 0;
+		transform: scale(1.12);
+		filter: blur(2px);
+	}
+}
+
+@keyframes debug-mobile-coerced-false {
+	0%,
+	83% {
+		opacity: 0;
+		transform: scale(0.88);
+		filter: blur(2px);
+	}
+	88%,
+	96% {
+		opacity: 1;
+		transform: scale(1);
+		filter: blur(0);
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes debug-dock-pulse-mobile {
+	0%,
+	44% {
+		opacity: 0.45;
+		filter: none;
+		transform: scale(1);
+	}
+	47%,
+	57% {
+		opacity: 1;
+		filter: drop-shadow(0 0 10px var(--color-accent));
+		text-shadow: 0 0 8px var(--color-accent);
+		transform: scale(1.06);
+	}
+	63%,
+	94% {
+		opacity: 0.45;
+		filter: none;
+		transform: scale(1);
+	}
+	96%,
+	100% {
+		opacity: 1;
+		filter: drop-shadow(0 0 10px var(--color-accent));
+		text-shadow: 0 0 8px var(--color-accent);
+		transform: scale(1.06);
 	}
 }
 
 @media (prefers-reduced-motion: reduce) {
 	.home-aurora__payload-chip,
+	.home-aurora__payload-carrier,
 	.home-aurora__payload-schema,
 	.home-aurora__payload-dock {
 		animation: none !important;
 	}
-	.home-aurora__payload-chip {
+	.home-aurora__payload-chip,
+	.home-aurora__payload-carrier {
 		display: none;
 	}
 	.home-aurora__payload-dock {
diff --git a/apps/www/components/page/declarative-showcase.test.tsx b/apps/www/components/page/declarative-showcase.test.tsx
index a6be88e5a..1bb474974 100644
--- a/apps/www/components/page/declarative-showcase.test.tsx
+++ b/apps/www/components/page/declarative-showcase.test.tsx
@@ -34,4 +34,34 @@ describe("DeclarativeShowcase", () => {
 		expect(figure).toHaveTextContent("number");
 		expect(figure).toHaveTextContent("boolean");
 	});
+
+	it("renders mobile direct single-wire elements and carrier tokens in the markup", () => {
+		const { container } = render(<DeclarativeShowcase />);
+
+		const directWires = container.querySelectorAll(
+			".home-aurora__payload-wire--direct",
+		);
+		expect(directWires).toHaveLength(2);
+
+		const portCarrier = container.querySelector(
+			".home-aurora__payload-carrier--port",
+		);
+		expect(portCarrier).toBeInTheDocument();
+		expect(portCarrier).toHaveTextContent('"3000"');
+		expect(portCarrier).toHaveTextContent("3000");
+
+		const debugTrueCarrier = container.querySelector(
+			".home-aurora__payload-carrier--debug-true",
+		);
+		expect(debugTrueCarrier).toBeInTheDocument();
+		expect(debugTrueCarrier).toHaveTextContent('"true"');
+		expect(debugTrueCarrier).toHaveTextContent("true");
+
+		const debugFalseCarrier = container.querySelector(
+			".home-aurora__payload-carrier--debug-false",
+		);
+		expect(debugFalseCarrier).toBeInTheDocument();
+		expect(debugFalseCarrier).toHaveTextContent('"false"');
+		expect(debugFalseCarrier).toHaveTextContent("false");
+	});
 });
diff --git a/apps/www/components/page/declarative-showcase.tsx b/apps/www/components/page/declarative-showcase.tsx
index 62dc40ab8..81b2139e5 100644
--- a/apps/www/components/page/declarative-showcase.tsx
+++ b/apps/www/components/page/declarative-showcase.tsx
@@ -35,7 +35,40 @@ export function DeclarativeShowcase() {
 							<span className="home-aurora__payload-key">PORT=</span>
 						</div>
 
-						{/* Wire 1 */}
+						{/* Mobile: Direct Wire (single track without middle gate) */}
+						<div
+							className="home-aurora__payload-wire home-aurora__payload-wire--direct"
+							aria-hidden="true"
+						>
+							<svg
+								className="home-aurora__stream-wire-svg"
+								viewBox="0 0 100 20"
+								preserveAspectRatio="none"
+								aria-hidden="true"
+							>
+								<line
+									x1="0"
+									y1="10"
+									x2="92"
+									y2="10"
+									className="home-aurora__stream-wire-track"
+								/>
+								<polygon
+									points="90,7 98,10 90,13"
+									className="home-aurora__stream-arrow"
+								/>
+							</svg>
+							<div className="home-aurora__payload-carrier home-aurora__payload-carrier--port">
+								<span className="home-aurora__payload-val home-aurora__payload-val--raw">
+									&quot;3000&quot;
+								</span>
+								<span className="home-aurora__payload-val home-aurora__payload-val--coerced">
+									3000
+								</span>
+							</div>
+						</div>
+
+						{/* Desktop: Wire 1 */}
 						<div
 							className="home-aurora__payload-wire home-aurora__payload-wire--1"
 							aria-hidden="true"
@@ -110,6 +143,47 @@ export function DeclarativeShowcase() {
 							<span className="home-aurora__payload-key">DEBUG=</span>
 						</div>
 
+						{/* Mobile: Direct Wire (single track without middle gate) */}
+						<div
+							className="home-aurora__payload-wire home-aurora__payload-wire--direct"
+							aria-hidden="true"
+						>
+							<svg
+								className="home-aurora__stream-wire-svg"
+								viewBox="0 0 100 20"
+								preserveAspectRatio="none"
+								aria-hidden="true"
+							>
+								<line
+									x1="0"
+									y1="10"
+									x2="92"
+									y2="10"
+									className="home-aurora__stream-wire-track"
+								/>
+								<polygon
+									points="90,7 98,10 90,13"
+									className="home-aurora__stream-arrow"
+								/>
+							</svg>
+							<div className="home-aurora__payload-carrier home-aurora__payload-carrier--debug-true">
+								<span className="home-aurora__payload-val home-aurora__payload-val--raw">
+									&quot;true&quot;
+								</span>
+								<span className="home-aurora__payload-val home-aurora__payload-val--coerced">
+									true
+								</span>
+							</div>
+							<div className="home-aurora__payload-carrier home-aurora__payload-carrier--debug-false">
+								<span className="home-aurora__payload-val home-aurora__payload-val--raw">
+									&quot;false&quot;
+								</span>
+								<span className="home-aurora__payload-val home-aurora__payload-val--coerced">
+									false
+								</span>
+							</div>
+						</div>
+
 						{/* Wire 1 */}
 						<div
 							className="home-aurora__payload-wire home-aurora__payload-wire--1"