Fix homepage hero wrapping and narrow layouts

site/src/styles/landing.css

@@ -188,7 +188,7 @@ ca-splash-docs {
 .ca-splash {
   position: relative;
   display: grid;
-  grid-template-columns: minmax(0, 0.9fr) minmax(32rem, 1.1fr);
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
   gap: clamp(2.5rem, 7vw, 6rem);
   align-items: center;
   max-width: var(--ca-landing-width);
@@ -202,13 +202,14 @@ ca-splash-docs {
 }
 
 .ca-splash__copy h1 {
-  max-width: 9ch;
+  max-width: 12ch;
   margin: var(--ca-space-4) 0 var(--ca-space-5);
   color: var(--ca-ink);
-  font-size: var(--ca-text-display);
+  font-size: clamp(2.5rem, 6vw, 4.8rem);
   font-weight: 780;
   letter-spacing: -0.065em;
   line-height: 0.95;
+  overflow-wrap: normal;
   text-wrap: balance;
 }
 
@@ -776,7 +777,7 @@ ca-splash-docs {
   }
 
   .ca-splash__copy h1 {
-    font-size: clamp(2.8rem, 15vw, 4.6rem);
+    font-size: clamp(2.5rem, 12vw, 4.6rem);
   }
 
   .ca-splash__proof {

site/test/browser/homepage-responsive.spec.ts

@@ -0,0 +1,53 @@
+/// <reference lib="dom" />
+/** homepage-responsive.spec.ts — readable title and contained proof at every hero layout. */
+import { expect, test } from "@playwright/test";
+
+for (const width of [320, 390, 768, 1062, 1200, 1440, 1920]) {
+  test(`homepage title and proof fit at ${width}px`, async ({ page }, testInfo) => {
+    await page.setViewportSize({ width, height: 1000 });
+    await page.goto("/");
+    await page.evaluate(() => document.fonts.ready);
+    const heading = page.locator("#ca-splash-title");
+    await expect(heading).toHaveText("codeArbiter: hard gates for agentic coding.");
+
+    const layout = await heading.evaluate((element) => {
+      const words = [];
+      const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+      for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        for (const match of (node.textContent ?? "").matchAll(/\S+/g)) {
+          const range = document.createRange();
+          range.setStart(node, match.index!);
+          range.setEnd(node, match.index! + match[0].length);
+          const rects = Array.from(range.getClientRects());
+          words.push({
+            word: match[0],
+            lines: new Set(rects.map((rect) => Math.round(rect.top))).size,
+            left: Math.min(...rects.map((rect) => rect.left)),
+            right: Math.max(...rects.map((rect) => rect.right)),
+          });
+        }
+      }
+      const proof = document.querySelector(".ca-splash__proof")!.getBoundingClientRect();
+      return {
+        words,
+        proof: { left: proof.left, right: proof.right },
+        viewport: document.documentElement.clientWidth,
+        overflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+      };
+    });
+
+    await page.screenshot({ path: testInfo.outputPath(`homepage-${width}.png`) });
+    for (const word of layout.words) {
+      expect.soft(word.lines, `"${word.word}" must not split across lines`).toBe(1);
+      expect.soft(word.left).toBeGreaterThanOrEqual(0);
+      expect.soft(word.right).toBeLessThanOrEqual(layout.viewport);
+    }
+    expect.soft(layout.proof.left).toBeGreaterThanOrEqual(0);
+    expect.soft(layout.proof.right, "proof card must not be clipped outside the viewport").toBeLessThanOrEqual(layout.viewport);
+    expect.soft(layout.overflow).toBe(0);
+    const video = page.locator(".ca-hook-proof__video");
+    await video.scrollIntoViewIfNeeded();
+    await expect(video).toBeInViewport();
+    await expect(video).toHaveAttribute("controls", "");
+  });
+}