three measured fixes on the front page

Walked the page at 390, 768 and 1440 and measured rather than looked. Three
things were wrong, all of them one property:

The hero paragraph was max-w-xl — 576px inside a 768px measure — so the sentence
broke with "a browser." alone on a third line at every width above the phone.
max-w-2xl gives it the room the container already had.

The card's closing two sentences were text-xs, which is 11px here. That is a size
for the label above them, not for prose. text-sm.

The two footer links were 51x15 and 127x15. A thumb needs 44, which the buttons
in the hero already ask for with min-h-11, so the links ask for it too.

What was NOT wrong, having checked: no horizontal overflow at any width, the
feature grid collapses correctly, and every colour pair passes AA against the
background it actually sits on — the footer reads dim and is fine.

No visual guard exists in this repo; the suite is unit tests over pane and tile
logic. These were verified by measuring the live page.

app/page.tsx

@@ -41,7 +41,9 @@ export default function Marketing() {
       <h1 className="mt-4 text-4xl font-semibold leading-[1.1] tracking-tight text-foreground sm:text-5xl">
         Keep tabs on your agents.
       </h1>
-      <p className="mt-5 max-w-xl text-lg leading-relaxed text-muted-foreground">
+      {/* max-w-2xl, not xl: at 576px this sentence breaks with "a browser." alone on
+          a third line at every width above the phone. */}
+      <p className="mt-5 max-w-2xl text-lg leading-relaxed text-muted-foreground">
         Your coding agents work in shells on real machines. Tabs puts every one of those shells in
         front of you — split, tiled, and reachable from anywhere you can open a browser.
       </p>
@@ -67,7 +69,9 @@ export default function Marketing() {
         <pre className="mt-3 overflow-x-auto font-mono text-sm text-foreground">
           <code>hanzo link</code>
         </pre>
-        <p className="mt-3 text-xs leading-relaxed text-[var(--text-tertiary)]">
+        {/* Prose, so it reads at prose size. text-xs is 11px here, which is a size for
+            a label like the one above, not for two sentences. */}
+        <p className="mt-3 text-sm leading-relaxed text-[var(--text-tertiary)]">
           Run it on a laptop, a workstation, a GPU box — anything with a shell. The machine keeps
           the connection; nothing is exposed to the network it sits on.
         </p>
@@ -84,10 +88,18 @@ export default function Marketing() {
 
       <footer className="mt-20 flex flex-wrap items-center gap-x-5 gap-y-2 border-t border-border pt-6 text-xs text-[var(--text-disabled)]">
         <span>MIT</span>
-        <a className="hover:text-muted-foreground" href="https://hanzo.app">
+        {/* A link is something a thumb has to land on, so it gets the same 44px reach
+            the buttons above have. Text this size is 15px tall on its own. */}
+        <a
+          className="inline-flex min-h-11 items-center hover:text-muted-foreground"
+          href="https://hanzo.app"
+        >
           hanzo.app
         </a>
-        <a className="hover:text-muted-foreground" href="https://github.com/hanzoai/tabs">
+        <a
+          className="inline-flex min-h-11 items-center hover:text-muted-foreground"
+          href="https://github.com/hanzoai/tabs"
+        >
           github.com/hanzoai/tabs
         </a>
         <span className="ml-auto">Hanzo AI</span>