diff --git a/site/styles/home-rebuild.css b/site/styles/home-rebuild.css
index 85a42f1ad..31816b02b 100644
--- a/site/styles/home-rebuild.css
+++ b/site/styles/home-rebuild.css
@@ -244,15 +244,32 @@
 
 @media (max-width: 1080px) {
   .hero-rebuild { padding: 108px 36px 80px; }   /* keep top clear of the fixed header */
-  .hero-rebuild-container { grid-template-columns: 1fr; gap: 48px; }
+  /* minmax(0, 1fr), not 1fr: a plain 1fr track has an `auto` (min-content)
+     floor, so the demo's 460px-wide browser frame held the column wider than a
+     phone viewport and the hero clipped. minmax(0,…) lets it shrink and the
+     frame clips its own content (overflow:hidden) instead. */
+  .hero-rebuild-container { grid-template-columns: minmax(0, 1fr); gap: 48px; }
   .hero-rebuild-right { justify-self: stretch; max-width: 100%; }
   .home-kinpaku .hero-rebuild-right .split-container { height: 380px; }
 }
 
 @media (max-width: 720px) {
   .hero-rebuild { padding: 92px 24px 64px; }   /* clear the compact mobile header */
+  /* The hero's 24px gutter is the mobile margin now; the container's desktop
+     56px padding stacked on top of it (160px of chrome) starved the content and
+     forced the grid track wider than the viewport. Drop it on mobile. */
+  .hero-rebuild-container { padding-left: 0; padding-right: 0; }
+  /* Title keeps its design-system clamp (floors at 3.4rem ≈ 54px here): the
+     Pinstripe display face is condensed, so "interfaces" stays well within a
+     320px+ viewport. No mobile shrink — at 54px against 16.8px body it holds a
+     ~3.2× hero hierarchy; shrinking it made the heading read smaller than body. */
   .hero-rebuild-actions { flex-direction: column; align-items: stretch; }
   .home-kinpaku .hero-rebuild-right .split-container { height: 320px; }
+  /* The hotel mock is authored ~460px wide; in the narrow mobile frame its full
+     nav (logo + 4 links + Book) overran the right edge and clipped mid-word.
+     Collapse to logo + Book — the realistic narrow-viewport nav, and it keeps
+     the hero (the picked element) as the demo's clear subject. */
+  .hero-live-demo .hotel-nav-links { display: none; }
 }
 
 /* ============================================================================
diff --git a/site/styles/workflow.css b/site/styles/workflow.css
index baba1d317..c3a33a8c8 100644
--- a/site/styles/workflow.css
+++ b/site/styles/workflow.css
@@ -1990,7 +1990,13 @@
   font-size: 12px;
   line-height: 1.7;
   color: oklch(80% 0 0);
+  /* Lines stay `pre` (a terminal keeps its alignment); when they outrun the
+     frame on narrow viewports, scroll like a real terminal instead of clipping
+     mid-word. No scrollbar chrome — it reads as terminal output, not a widget. */
+  overflow-x: auto;
+  scrollbar-width: none;
 }
+.why-terminal-body::-webkit-scrollbar { display: none; }
 .why-terminal-line { white-space: pre; }
 .why-terminal-line--prompt { color: oklch(90% 0 0); }
 .why-terminal-prompt { color: var(--color-accent); margin-right: 4px; }