fix(website): repair the mobile menu and the landing mock on phones

backdrop-filter on .navbar made it the containing block for its own
fixed-position child. Docusaurus renders the mobile drawer inside the
navbar, so .navbar-sidebar was clamped to the 60px bar and every link
below its header was clipped by the drawer's own overflow — on docs
pages that left the sidebar navigation unreachable. The blur moves to a
pseudo-element, the drawer gets an opaque background instead of the
navbar's translucent one, and the bar's Download CTA steps aside while
the drawer is open rather than sitting on top of its close button.

Stacked under 780px the landing mock now leads with the editor stage
rather than with the agent panel, and the transport's timecode no
longer wraps into a slab covering half the preview.

Docs tables widened the document past the viewport on a phone: the
`display: table` override had dropped Infima's scroll container. They
scroll inside their own card again under 768px, and a table with real
headers — the platform matrix — keeps them, since hiding thead left its
columns of check marks unlabelled.

Author: EtienneLescot

.claude/launch.json

@@ -26,6 +26,12 @@
       "runtimeExecutable": "npm",
       "runtimeArgs": ["--prefix", "website", "run", "serve", "--", "--port", "3111"],
       "port": 3111
+    },
+    {
+      "name": "docs-dev",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["--prefix", "website", "run", "dev", "--", "--port", "3112"],
+      "port": 3112
     }
   ]
 }

website/src/css/custom.css

@@ -153,10 +153,25 @@ body {
 	height: 60px;
 	min-height: 60px;
 	padding: 0 28px;
-	backdrop-filter: blur(16px) saturate(140%);
+	background: transparent;
 	border-bottom: 1px solid var(--os-border-soft);
 }
 
+/* The frosted background is painted by a pseudo-element rather than on .navbar
+   itself: backdrop-filter turns an element into the containing block for its
+   fixed-position descendants, and Docusaurus renders the mobile menu
+   (.navbar-sidebar, position: fixed) *inside* the navbar. Filtering the bar
+   collapsed the whole drawer into the 60px strip — header visible, every link
+   clipped away. */
+.navbar::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	z-index: -1;
+	background: var(--os-nav-bg);
+	backdrop-filter: blur(16px) saturate(140%);
+}
+
 .navbar__inner {
 	gap: 18px;
 }
@@ -213,8 +228,10 @@ body {
 }
 
 /* Docusaurus auto-appends an "opens in new tab" glyph to every external
-   navbar link; the design has none, so it's suppressed here. */
-.navbar__link [class*="iconExternalLink"] {
+   navbar link; the design has none, so it's suppressed here — in the mobile
+   drawer too, where the same items are rendered as .menu__link. */
+.navbar__link [class*="iconExternalLink"],
+.navbar-sidebar .menu__link [class*="iconExternalLink"] {
 	display: none;
 }
 
@@ -304,6 +321,65 @@ body {
 	display: none;
 }
 
+/* ---- mobile menu ----
+   Below 996px Docusaurus hides the navbar links and moves them into the
+   .navbar-sidebar drawer, where a navbar pill (GitHub, Download) is rendered
+   as a row of a menu list instead. */
+
+.navbar-sidebar {
+	background: var(--os-surface);
+	border-right: 1px solid var(--os-border);
+	box-shadow: var(--os-elev-pop);
+}
+
+.navbar-sidebar__brand {
+	border-bottom: 1px solid var(--os-border-soft);
+	box-shadow: none;
+}
+
+/* Groups the theme switch with the close button on the right of the drawer
+   header instead of leaving it stuck to the wordmark. */
+.navbar-sidebar__brand > [class*="toggle_"] {
+	margin-left: auto;
+}
+
+/* The drawer covers 83vw, so the bar's right-hand CTA would otherwise sit on
+   top of the drawer's own close button. */
+.navbar-sidebar--show .navbar__items--right {
+	display: none;
+}
+
+.navbar-sidebar .navbar-github-link,
+.navbar-sidebar .navbar-download-cta {
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	margin-top: 4px;
+	padding: 10px 14px !important;
+	font-size: 13.5px;
+}
+
+@media (max-width: 996px) {
+	.navbar {
+		padding: 0 16px;
+	}
+
+	/* The rule separates the wordmark from the nav links; at this width the
+	   links are in the drawer, so it divides the brand from nothing. */
+	.navbar__brand {
+		margin-right: 0;
+		padding-right: 0;
+	}
+
+	.navbar__brand::after {
+		display: none;
+	}
+
+	.navbar__items--right .navbar-download-cta {
+		padding: 6px 12px !important;
+	}
+}
+
 /* ---- footer ---- */
 
 .footer {
@@ -393,10 +469,26 @@ body {
 	box-shadow: none;
 }
 
+/* The docs' two-column "fact card" tables carry an empty header row, which is
+   what this hides. A table with real headers — the platform matrix in
+   Installation — keeps them, or its ✅/❌ columns say nothing. */
 .theme-doc-markdown table thead {
 	display: none;
 }
 
+.theme-doc-markdown table:has(thead th:not(:empty)) thead {
+	display: table-header-group;
+}
+
+.theme-doc-markdown table th {
+	border: none;
+	padding: 0.75rem 1rem;
+	font-size: 0.85em;
+	font-weight: 600;
+	color: var(--os-muted);
+	text-align: left;
+}
+
 .theme-doc-markdown table tr {
 	border-top: 1px solid var(--os-border-soft);
 	background: transparent;
@@ -411,12 +503,34 @@ body {
 	padding: 0.75rem 1rem;
 }
 
+/* A bare repo URL is one unbreakable word, which sets the table's minimum
+   width and drags the whole page past the viewport on a phone. Scoped to
+   links: prose has to keep breaking on word boundaries, or a narrow column
+   shreds it one letter per line. */
+.theme-doc-markdown table td a {
+	overflow-wrap: anywhere;
+}
+
 .theme-doc-markdown table td:first-child {
 	width: 160px;
 	color: var(--os-muted);
 	font-weight: 400;
 }
 
+@media (max-width: 768px) {
+	/* display: table above dropped Infima's scroll container, so a table wider
+	   than the screen (the platform matrix) widened the document instead of
+	   scrolling inside its own card. */
+	.theme-doc-markdown table {
+		display: block;
+		overflow-x: auto;
+	}
+
+	.theme-doc-markdown table td:first-child {
+		width: auto;
+	}
+}
+
 .theme-doc-markdown pre {
 	border-radius: 12px;
 	border: 1px solid var(--os-border);

website/src/pages/index.module.css

@@ -210,9 +210,24 @@
 	min-height: 340px;
 }
 
+/* Stacked, the mock has to read top-down: the editor is the product and the
+   agent panel is the sub-plot, so the stage goes first and the panel's right
+   border becomes the rule between them. Ordered in CSS rather than in the
+   markup so the desktop grid keeps its natural sidebar-then-stage source order. */
 @media (max-width: 780px) {
 	.visualBody {
 		grid-template-columns: 1fr;
+		min-height: 0;
+	}
+
+	.stage {
+		order: 1;
+	}
+
+	.agentPanel {
+		order: 2;
+		border-right: none;
+		border-top: 1px solid var(--os-border);
 	}
 }
 
@@ -349,11 +364,14 @@
 	color: #fff;
 }
 
+/* nowrap: the transport floats over the preview, and a wrapped timecode
+   doubles its height into a slab covering half the frame on a phone. */
 .transportTime {
 	font-family: var(--ifm-font-family-monospace);
 	font-size: 11px;
 	color: var(--os-fg);
 	margin-left: 4px;
+	white-space: nowrap;
 }
 
 .meta {
@@ -788,3 +806,52 @@
 	color: var(--os-fg-2);
 }
 
+/* ---- phone ----
+   The 28px section gutter is a third of the width of a small phone; every
+   inner padding here is scaled to give the mock and the cards room to breathe
+   rather than to change their design. */
+
+@media (max-width: 600px) {
+	.hero {
+		padding: 64px 20px 0;
+	}
+
+	.visualSection {
+		padding: 32px 16px 72px;
+	}
+
+	.features {
+		padding: 0 20px 72px;
+	}
+
+	.quickStart {
+		padding: 0 20px 76px;
+	}
+
+	.agentPanel {
+		padding: 14px;
+		gap: 12px;
+	}
+
+	.stageFrame {
+		padding: 16px;
+		min-height: 0;
+	}
+
+	.transport {
+		gap: 6px;
+		bottom: 10px;
+		padding: 6px 8px;
+	}
+
+	.timeline {
+		padding: 10px 12px 12px;
+	}
+
+	/* The icon is centred against a three-line paragraph on desktop; on a phone
+	   the same text runs to seven lines and leaves the badge stranded mid-card. */
+	.bentoCaptions {
+		align-items: flex-start;
+	}
+}
+