diff --git a/package-lock.json b/package-lock.json
index 79cd903..a2420f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,8 @@
         "shiki": "^4.3.0",
         "tailwind-merge": "^3.6.0",
         "tailwind-variants": "^3.3.0",
-        "tw-animate-css": "^1.4.0"
+        "tw-animate-css": "^1.4.0",
+        "vaul": "^1.1.2"
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
@@ -1546,6 +1547,43 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.23.tgz",
+      "integrity": "sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.4.tgz",
@@ -6381,6 +6419,19 @@
         }
       }
     },
+    "node_modules/vaul": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
diff --git a/package.json b/package.json
index 6b9b9ac..05610e5 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,8 @@
     "shiki": "^4.3.0",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.3.0",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
diff --git a/src/components/home/AgentSurface.tsx b/src/components/home/AgentSurface.tsx
index 02b807d..649cbd3 100644
--- a/src/components/home/AgentSurface.tsx
+++ b/src/components/home/AgentSurface.tsx
@@ -35,9 +35,9 @@ export function AgentSurface() {
   const origin = typeof window === 'undefined' ? '' : window.location.origin;
 
   return (
-    <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] lg:gap-12">
-      <div>
-        <p className="m-0 max-w-[46ch] text-[14px] leading-relaxed text-muted">
+    <div className="grid min-w-0 gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] lg:gap-12">
+      <div className="min-w-0">
+        <p className="m-0 max-w-full sm:max-w-[46ch] text-[14px] leading-relaxed text-muted">
           Agents are not a second audience here. Every page answers in plain
           markdown to any client that does not ask for HTML, identity is an
           Ed25519 keypair rather than an account, and each push produces a
@@ -53,7 +53,7 @@ export function AgentSurface() {
         </div>
       </div>
 
-      <ul className="m-0 list-none p-0">
+      <ul className="m-0 min-w-0 list-none p-0">
         {SURFACES.map(surface => (
           <li
             key={surface.path}
diff --git a/src/components/layout/MobileNavDrawer.tsx b/src/components/layout/MobileNavDrawer.tsx
new file mode 100644
index 0000000..36dcdb1
--- /dev/null
+++ b/src/components/layout/MobileNavDrawer.tsx
@@ -0,0 +1,121 @@
+import { Drawer } from 'vaul';
+import { Link } from 'react-router-dom';
+import { ArrowUpRight, Check } from 'lucide-react';
+import type { NodeInfo, NodeStats } from '../../lib/api';
+import { cn } from '../../lib/utils';
+
+/**
+ * The navigation drawer on phones.
+ *
+ * This replaced a panel that animated its height open beneath the header. That
+ * worked, but it read as part of the page rather than as a layer over it: it
+ * pushed the content down, it could not be dismissed by dragging or by tapping
+ * away, and it left the page behind it fully lit.
+ *
+ * Vaul is a drawer built on Radix Dialog, so the behaviour a menu needs comes
+ * with it — focus is trapped while open and restored on close, Escape closes,
+ * the page behind is inert and does not scroll, and the sheet can be thrown
+ * shut with a flick. It opens from the bottom, which is where a thumb already
+ * is on a tall phone; the top of a 812px screen is the hardest place to reach.
+ */
+interface MobileNavDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  links: readonly { to: string; label: string; end?: boolean }[];
+  isActive: (to: string, end?: boolean) => boolean;
+  node: NodeInfo | null;
+  stats: NodeStats | null;
+}
+
+/** Machine-readable copies, the thing that makes this explorer unusual. */
+const TEXT_SURFACES = [
+  { href: '/llms.txt', label: 'llms.txt' },
+  { href: '/skill.md', label: 'skill.md' },
+];
+
+export function MobileNavDrawer({
+  open,
+  onOpenChange,
+  links,
+  isActive,
+  node,
+  stats,
+}: MobileNavDrawerProps) {
+  // autoFocus moves focus into the sheet on open. Vaul leaves it off by
+  // default, which left focus on <body>: a keyboard or screen-reader user
+  // opened the menu and was still outside it, with the next Tab starting from
+  // the top of the document behind the overlay.
+  return (
+    <Drawer.Root open={open} onOpenChange={onOpenChange} autoFocus>
+      <Drawer.Portal>
+        <Drawer.Overlay className="fixed inset-0 z-[60] bg-background/70 backdrop-blur-[2px]" />
+        <Drawer.Content
+          aria-label="Navigation"
+          className={cn(
+            'fixed inset-x-0 bottom-0 z-[70] mt-24 flex max-h-[88vh] flex-col',
+            'rounded-t-[var(--radius)] border-t border-border bg-background',
+            'outline-none',
+          )}
+        >
+          {/* The grabber is the affordance for the drag Vaul provides; without
+              it the sheet gives no sign it can be thrown shut. */}
+          <div aria-hidden="true" className="mx-auto mt-3 h-1 w-10 shrink-0 rounded-full bg-border" />
+
+          <div className="overflow-y-auto overscroll-contain px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-4">
+            <Drawer.Title className="m-0 px-1 text-[11.5px] text-muted">
+              {node?.name ?? 'gitlawb'}
+              {node?.network && <span className="ml-1.5">· {node.network}</span>}
+            </Drawer.Title>
+
+            <nav aria-label="Sections" className="mt-2">
+              <ul className="m-0 list-none p-0">
+                {links.map(({ to, label, end }) => {
+                  const active = isActive(to, end);
+                  return (
+                    <li key={to}>
+                      <Link
+                        to={to}
+                        aria-current={active ? 'page' : undefined}
+                        className={cn(
+                          'flex h-12 items-center justify-between rounded-[var(--radius-sm)] px-3',
+                          'text-[15px] capitalize transition-colors',
+                          active
+                            ? 'bg-surface-secondary font-medium text-foreground'
+                            : 'text-muted active:bg-surface-secondary',
+                        )}
+                      >
+                        {label}
+                        {active && <Check size={15} aria-hidden="true" className="text-foreground" />}
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            </nav>
+
+            {stats && (
+              <p className="m-0 mt-4 border-t border-separator px-3 pt-3 text-[12.5px] tabular text-muted">
+                {stats.repos.toLocaleString()} repos
+                <span className="px-1.5 text-subtle">·</span>
+                {stats.agents.toLocaleString()} agents
+              </p>
+            )}
+
+            <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 px-3">
+              {TEXT_SURFACES.map(surface => (
+                <a
+                  key={surface.href}
+                  href={surface.href}
+                  className="inline-flex h-9 items-center gap-1 font-mono text-[12.5px] text-muted"
+                >
+                  {surface.label}
+                  <ArrowUpRight size={12} aria-hidden="true" />
+                </a>
+              ))}
+            </div>
+          </div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
diff --git a/src/components/layout/TopBar.tsx b/src/components/layout/TopBar.tsx
index b390fae..a6631b9 100644
--- a/src/components/layout/TopBar.tsx
+++ b/src/components/layout/TopBar.tsx
@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
+import { motion, useReducedMotion } from 'motion/react';
 import { Menu, X, Search } from 'lucide-react';
 import { ThemeToggle } from '../ui/ThemeToggle';
 import { Logo } from '../ui/Logo';
 import { useNodeStatus } from '../../hooks/useNodeStatus';
 import { useShortcuts } from '../../hooks/useShortcuts';
 import { cn } from '../../lib/utils';
+import { MobileNavDrawer } from './MobileNavDrawer';
 import { modifierKeyLabel } from '../../lib/platform';
 
 const NAV_LINKS = [
@@ -57,7 +58,7 @@ export default function TopBar() {
       <div className="mx-auto flex h-14 max-w-[1280px] items-center gap-2 sm:gap-6 px-4 sm:px-6 lg:px-8">
         <Link to="/" className="flex items-center gap-2.5 shrink-0">
           <Logo className="h-[18px] w-auto shrink-0 text-foreground" />
-          <span className="hidden sm:inline text-[15px] font-semibold tracking-tight text-foreground">
+          <span className="text-[15px] font-semibold tracking-tight text-foreground">
             gitlawb
           </span>
         </Link>
@@ -123,7 +124,7 @@ export default function TopBar() {
             title={`Search — ${paletteHint}`}
             aria-label={`Open command palette (${paletteHint})`}
             aria-keyshortcuts="Meta+K Control+K"
-            className="inline-flex h-8 w-8 items-center justify-center
+            className="inline-flex h-10 w-10 sm:h-8 sm:w-8 items-center justify-center
               text-muted transition-colors hover:text-foreground"
           >
             <Search size={17} />
@@ -136,51 +137,21 @@ export default function TopBar() {
             aria-label="Navigation menu"
             aria-expanded={menuOpen}
             onClick={() => setMenuOpen(o => !o)}
-            className="md:hidden inline-flex h-8 w-8 items-center justify-center text-muted hover:text-foreground"
+            className="md:hidden inline-flex h-10 w-10 items-center justify-center text-muted hover:text-foreground"
           >
             {menuOpen ? <X size={17} /> : <Menu size={17} />}
           </button>
         </div>
       </div>
 
-      <AnimatePresence>
-        {menuOpen && (
-          <motion.nav
-            key="mobile-nav"
-            initial={reduce ? { opacity: 0 } : { opacity: 0, height: 0 }}
-            animate={reduce ? { opacity: 1 } : { opacity: 1, height: 'auto' }}
-            exit={reduce ? { opacity: 0 } : { opacity: 0, height: 0 }}
-            transition={{ duration: reduce ? 0 : 0.26, ease: [0.16, 1, 0.3, 1] }}
-            className="md:hidden overflow-hidden border-b border-border bg-background"
-          >
-            <ul className="m-0 list-none px-4 sm:px-6 py-1">
-              {NAV_LINKS.map(({ to, label, end }) => (
-                <li key={to}>
-                  <Link
-                    to={to}
-                    aria-current={isActive(to, end) ? 'page' : undefined}
-                    className={cn(
-                      'flex items-center justify-between py-2.5 border-b border-separator',
-                      'text-[14px] transition-colors',
-                      isActive(to, end) ? 'text-foreground' : 'text-muted',
-                    )}
-                  >
-                    {label}
-                    {isActive(to, end) && (
-                      <span className="h-px w-5 bg-foreground" aria-hidden="true" />
-                    )}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-            {stats && (
-              <p className="m-0 px-4 sm:px-6 py-3 text-[12.5px] tabular text-muted">
-                {stats.repos.toLocaleString()} repos · {stats.agents.toLocaleString()} agents
-              </p>
-            )}
-          </motion.nav>
-        )}
-      </AnimatePresence>
+      <MobileNavDrawer
+        open={menuOpen}
+        onOpenChange={setMenuOpen}
+        links={NAV_LINKS}
+        isActive={isActive}
+        node={node}
+        stats={stats}
+      />
     </header>
   );
 }
diff --git a/src/components/network/FederationMap.tsx b/src/components/network/FederationMap.tsx
index d29a099..47ebd9f 100644
--- a/src/components/network/FederationMap.tsx
+++ b/src/components/network/FederationMap.tsx
@@ -47,7 +47,8 @@ function NodeChip({
         {lead ? <Server size={13} /> : <Radio size={13} />}
       </span>
       <span className="text-[12.5px] font-medium text-foreground whitespace-nowrap">
-        {snap.node.label}
+        <span className="sm:hidden">{snap.node.label.split('.')[0]}</span>
+        <span className="hidden sm:inline">{snap.node.label}</span>
       </span>
       {snap.stats && (
         <span className="text-[11px] text-muted tabular whitespace-nowrap">
@@ -74,11 +75,11 @@ export function FederationMap({ snapshots }: { snapshots: NodeSnapshot[] }) {
   return (
     <div
       ref={containerRef}
-      className="relative flex min-h-[240px] w-full items-center justify-between gap-8 px-2 py-8 sm:px-8"
+      className="relative flex min-h-[200px] sm:min-h-[240px] w-full items-center justify-between gap-3 sm:gap-8 px-0 sm:px-8 py-6 sm:py-8"
     >
       <NodeChip snap={origin} innerRef={originRef} lead />
 
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2.5 sm:gap-4">
         {shown.map((s, i) => (
           <NodeChip key={s.node.id} snap={s} innerRef={peerRefs[i]} />
         ))}
diff --git a/src/components/network/NetworkGlobe.tsx b/src/components/network/NetworkGlobe.tsx
index 10c1903..630484b 100644
--- a/src/components/network/NetworkGlobe.tsx
+++ b/src/components/network/NetworkGlobe.tsx
@@ -58,8 +58,11 @@ export function NetworkGlobe() {
     [isDark],
   );
 
+  // The globe is smaller on a phone. The sphere is decorative — the markers
+  // are a stock world spread, not peer positions — and at 343px square it took
+  // most of a screen, nearly all of it dark sphere against a dark ground.
   return (
-    <div className="relative mx-auto w-full max-w-[460px] aspect-square">
+    <div className="relative mx-auto w-full max-w-[250px] sm:max-w-[460px] aspect-square">
       <Globe config={config} className="top-0" />
     </div>
   );
diff --git a/src/components/register/Tabs.tsx b/src/components/register/Tabs.tsx
index 0a9ab8c..33ce650 100644
--- a/src/components/register/Tabs.tsx
+++ b/src/components/register/Tabs.tsx
@@ -2,6 +2,7 @@ import {
   createContext,
   useContext,
   useId,
+  useLayoutEffect,
   useRef,
   type ReactNode,
   type KeyboardEvent,
@@ -50,6 +51,47 @@ function ListContainer({ children, className }: { children: ReactNode; className
 
 function List({ children, ...rest }: { children: ReactNode; 'aria-label'?: string }) {
   const listRef = useRef<HTMLDivElement>(null);
+  const { selected } = useTabs();
+
+  // Keep the selected tab inside the strip.
+  //
+  // The strip scrolls horizontally once the tabs outrun their box, which on a
+  // 375px screen happens at six tabs — 440px of tabs in 343px. Arriving on
+  // ?tab=events then left the selected tab off the right edge with the strip
+  // still at scrollLeft 0, so the reader saw the first tabs and no indication
+  // of which one they were on.
+  //
+  // Only the container is scrolled, never the page: scrollIntoView would also
+  // move the document vertically and jump the reader past the repository
+  // header they had just landed on.
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+
+    const reveal = () => {
+      const tab = list.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]');
+      if (!tab) return;
+      const listBox = list.getBoundingClientRect();
+      const tabBox = tab.getBoundingClientRect();
+      const margin = 12;
+      if (tabBox.left < listBox.left) {
+        list.scrollLeft -= listBox.left - tabBox.left + margin;
+      } else if (tabBox.right > listBox.right) {
+        list.scrollLeft += tabBox.right - listBox.right + margin;
+      }
+    };
+
+    reveal();
+
+    // Re-run when the strip resizes. Each tab carries a count that arrives
+    // after its own fetch, so a tab grows from "certs" to "certs 1" a moment
+    // after selection — enough to push a tab revealed on the first pass back
+    // over the edge.
+    const observer = new ResizeObserver(reveal);
+    observer.observe(list);
+    for (const child of Array.from(list.children)) observer.observe(child);
+    return () => observer.disconnect();
+  }, [selected]);
 
   // Roving arrow keys across the tab strip, wrapping at both ends.
   const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
diff --git a/src/components/repos/RepoRow.tsx b/src/components/repos/RepoRow.tsx
index 98b5ace..46be329 100644
--- a/src/components/repos/RepoRow.tsx
+++ b/src/components/repos/RepoRow.tsx
@@ -33,7 +33,7 @@ export function RepoRow({ repo }: RepoRowProps) {
       ref={ref}
       {...prefetch}
       className="group relative grid items-center gap-x-4 sm:gap-x-6
-        grid-cols-[minmax(0,1fr)_auto]
+        grid-cols-1 sm:grid-cols-[minmax(0,1fr)_auto]
         md:grid-cols-[minmax(0,1fr)_64px_auto]
         border-b border-separator last:border-b-0 px-4 py-3
         transition-colors hover:bg-surface-secondary"
@@ -80,8 +80,12 @@ export function RepoRow({ repo }: RepoRowProps) {
           )}
         </div>
 
+        {/* Two lines on a phone, one on desktop. Stacked, the row has the width
+            for a second line, and a description cut mid-word tells the reader
+            less than the sentence does. Desktop keeps one line so the list
+            stays scannable at density. */}
         {repo.description && (
-          <p className="m-0 mt-1 text-[13px] leading-snug text-muted truncate">
+          <p className="m-0 mt-1 text-[13px] leading-snug text-muted line-clamp-2 sm:line-clamp-none sm:truncate">
             {repo.description}
           </p>
         )}
@@ -92,7 +96,7 @@ export function RepoRow({ repo }: RepoRowProps) {
         <Sparkline data={activity} />
       </div>
 
-      <div className="flex items-center gap-3 whitespace-nowrap justify-self-end">
+      <div className="mt-1.5 sm:mt-0 flex items-center gap-3 whitespace-nowrap justify-self-start sm:justify-self-end">
         {repo.stars > 0 && (
           <span className="inline-flex items-center gap-1 text-[13px] tabular text-muted">
             <Star size={13} className="text-attention" />
@@ -100,7 +104,7 @@ export function RepoRow({ repo }: RepoRowProps) {
           </span>
         )}
         <span className="text-[13px] tabular text-muted">{repo.updatedAt}</span>
-        <span className="relative z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
+        <span className="relative z-10 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
           <CopyButton value={`git clone ${repo.cloneUrl}`} label="clone" />
         </span>
       </div>
diff --git a/src/components/ui/Dropdown.tsx b/src/components/ui/Dropdown.tsx
index 8fd922f..a4ff4e3 100644
--- a/src/components/ui/Dropdown.tsx
+++ b/src/components/ui/Dropdown.tsx
@@ -56,7 +56,7 @@ export function Dropdown<T extends string>({
           id={controlId}
           aria-labelledby={`${labelId} ${controlId}`}
           className={cn(
-            'group inline-flex items-center gap-1.5 h-8 pl-3.5 pr-3 text-[13px] whitespace-nowrap',
+            'group inline-flex items-center gap-1.5 h-9 sm:h-8 pl-3.5 pr-3 text-[13px] whitespace-nowrap',
             'rounded-[var(--radius-control)] border border-border bg-transparent text-foreground',
             'cursor-pointer transition-colors hover:border-foreground/45 hover:bg-surface-secondary',
             'data-[state=open]:border-foreground/60 data-[state=open]:bg-surface-secondary',
diff --git a/src/components/ui/SegmentedControl.tsx b/src/components/ui/SegmentedControl.tsx
index 74c9638..565674e 100644
--- a/src/components/ui/SegmentedControl.tsx
+++ b/src/components/ui/SegmentedControl.tsx
@@ -110,7 +110,10 @@ export function SegmentedControl<T extends string>({
             onClick={() => onChange(option.value)}
             aria-pressed={active}
             className={cn(
-              'relative inline-flex items-center gap-1.5 px-3 h-7 text-[12.5px] whitespace-nowrap transition-colors',
+              // 36px on a phone, 28 from sm up. These are the primary filter controls on
+              // the listing pages and a 28px target is uncomfortable to hit with a
+              // thumb; desktop keeps the tighter density.
+              'relative inline-flex items-center gap-1.5 px-3.5 sm:px-3 h-9 sm:h-7 text-[13px] sm:text-[12.5px] whitespace-nowrap transition-colors',
               'rounded-[var(--radius-control)]',
               'focus:outline-none focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2',
               active ? 'text-background' : 'text-muted hover:text-foreground',
diff --git a/src/components/ui/ThemeToggle.tsx b/src/components/ui/ThemeToggle.tsx
index 8fdcf4f..d6f06df 100644
--- a/src/components/ui/ThemeToggle.tsx
+++ b/src/components/ui/ThemeToggle.tsx
@@ -28,7 +28,7 @@ export function ThemeToggle() {
       // the global `*` reset sets border-color, so a transparent border still
       // paints as a 1px frame. The icon is sized down from the component's
       // 24px default, which was cramped inside a 32px hit area.
-      className="inline-flex h-8 w-8 items-center justify-center
+      className="inline-flex h-10 w-10 sm:h-8 sm:w-8 items-center justify-center
         text-muted transition-colors hover:text-foreground
         [&_svg]:size-[17px]"
     />
diff --git a/src/components/ui/icon-cloud.tsx b/src/components/ui/icon-cloud.tsx
index 46c8a6b..e39348d 100644
--- a/src/components/ui/icon-cloud.tsx
+++ b/src/components/ui/icon-cloud.tsx
@@ -355,7 +355,11 @@ export function IconCloud({
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
         onMouseLeave={handleMouseUp}
-        className="rounded-lg"
+        // The width/height attributes size the drawing buffer, not the box.
+        // Left unconstrained the canvas lays out at a fixed 400px and runs off
+        // the side of a phone; these let CSS scale it down while the buffer,
+        // and so the rendering, stays 400x400.
+        className="h-auto max-w-full rounded-lg"
         aria-label="Interactive 3D Icon Cloud"
         role="img"
       />
diff --git a/src/index.css b/src/index.css
index 108658b..8119823 100644
--- a/src/index.css
+++ b/src/index.css
@@ -379,9 +379,22 @@ body {
 }
 ::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }
 
-:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: -1px;
+/* The default focus ring MUST live in @layer base.
+
+   Unlayered, it beat every Tailwind focus utility, because unlayered CSS wins
+   over layered CSS regardless of specificity — the same rule that broke the
+   border-color reset above. A control that had been given its own focus
+   treatment got this one instead: the command palette drew a hard 2px box,
+   inset by a pixel, around a search field that sits flush inside a rounded
+   panel and already shows focus with its caret.
+
+   Layered, this stays the default for anything that does not style its own
+   focus, and a component that does style it now wins. */
+@layer base {
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: -1px;
+  }
 }
 
 a { text-underline-offset: 0.2em; }
diff --git a/src/pages/DocsPage.tsx b/src/pages/DocsPage.tsx
index 454832c..ae695cd 100644
--- a/src/pages/DocsPage.tsx
+++ b/src/pages/DocsPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { NavLink, Navigate, useParams, useLocation } from 'react-router-dom';
 
 import { DocArticle } from '../components/docs/DocArticle';
@@ -32,6 +32,7 @@ interface DocState {
 export default function DocsPage() {
   const { slug = 'quickstart' } = useParams();
   const { hash } = useLocation();
+  const docNavRef = useRef<HTMLElement>(null);
   const [loaded, setLoaded] = useState<DocState>({ slug: null, html: null, error: null });
 
   useEffect(() => {
@@ -93,6 +94,23 @@ export default function DocsPage() {
     document.getElementById(id)?.scrollIntoView({ block: 'start' });
   }, [loaded.slug, loaded.html, slug, hash]);
 
+  // Keep the current document visible in the section nav.
+  //
+  // Below lg the nav is a horizontal strip, and four labels come to 419px in
+  // 351px of room. Opening /docs/node therefore left "Run a node" past the
+  // right edge with the strip unscrolled, so the reader could not see which
+  // document they were in. Only the strip scrolls, never the page.
+  useLayoutEffect(() => {
+    const nav = docNavRef.current;
+    const active = nav?.querySelector<HTMLElement>('[aria-current="page"]') ??
+      nav?.querySelector<HTMLElement>('a[class*="bg-foreground"]');
+    if (!nav || !active) return;
+    const navBox = nav.getBoundingClientRect();
+    const box = active.getBoundingClientRect();
+    if (box.left < navBox.left) nav.scrollLeft -= navBox.left - box.left + 12;
+    else if (box.right > navBox.right) nav.scrollLeft += box.right - navBox.right + 12;
+  }, [slug]);
+
   const headings = useMemo(
     () => (state.html ? extractTocHeadings(state.html) : []),
     [state.html],
@@ -114,6 +132,7 @@ export default function DocsPage() {
           <div className="lg:sticky lg:top-20">
             <p className="m-0 mb-3 text-[11.5px] text-muted">Documentation</p>
             <nav
+              ref={docNavRef}
               aria-label="documentation"
               className="-mx-1 flex gap-1 overflow-x-auto px-1 pb-1 lg:mx-0 lg:flex-col lg:overflow-visible lg:px-0 lg:pb-0"
             >
@@ -123,7 +142,8 @@ export default function DocsPage() {
                   to={`/docs/${d.slug}`}
                   className={({ isActive }) =>
                     cn(
-                      'block whitespace-nowrap rounded-[var(--radius-control)] px-3 py-1.5 text-[13.5px] transition-colors',
+                      'flex items-center whitespace-nowrap rounded-[var(--radius-control)] px-3.5 sm:px-3 text-[13.5px] transition-colors',
+                      'h-10 sm:h-auto sm:py-1.5',
                       isActive
                         ? 'bg-foreground font-medium text-background'
                         : 'text-muted hover:bg-surface-secondary hover:text-foreground',
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index d92e7fb..5cb6b5d 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -25,7 +25,6 @@ import { DotPattern } from '../components/ui/dot-pattern';
 import { AnimatedBeam } from '../components/ui/animated-beam';
 import { Terminal, TypingAnimation, AnimatedSpan } from '../components/ui/terminal';
 import { AuroraText } from '../components/ui/aurora-text';
-import { AnimatedGradientText } from '../components/ui/animated-gradient-text';
 import { RainbowButton } from '../components/ui/rainbow-button';
 import { RippleButton } from '../components/ui/ripple-button';
 import { ConfettiButton } from '../components/ui/confetti';
@@ -146,7 +145,7 @@ export default function HomePage() {
     <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
 
       {/* ── Hero ─────────────────────────────────────────────────────────── */}
-      <header className="relative overflow-hidden -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 pt-14 pb-12">
+      <header className="relative overflow-hidden -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 pt-10 pb-10 sm:pt-14 sm:pb-12">
         {/* Ripple centres on the node itself: concentric rings reading as a
             signal going out to the network. */}
         <Ripple
@@ -164,40 +163,46 @@ export default function HomePage() {
         />
 
         <div className="relative mx-auto max-w-3xl text-center">
+            {/* Plain text, not AnimatedGradientText.
+
+                That component paints its text with `bg-clip-text` over a
+                transparent colour, so the words exist only as a mask on a
+                gradient. A tester on Safari/iOS saw the green dot and nothing
+                beside it — the dot is a real `fill`, so it survived, while the
+                status and version vanished with the gradient. Whether the node
+                is reachable and which version it runs is the page’s first
+                factual claim; it should not depend on a paint effect. */}
           {!loading && (
-            <AnimatedGradientText
-              className="text-[13px] font-medium"
-              colorFrom="var(--ramp-1)"
-              colorTo="var(--ramp-2)"
-            >
-              <span className="inline-flex items-center gap-1.5">
-                <Circle
-                  size={7}
-                  fill="currentColor"
-                  className={online ? 'text-success' : 'text-danger'}
-                />
+            <p className="m-0 inline-flex flex-wrap items-center justify-center gap-x-1.5 gap-y-1 text-[13px] font-medium text-muted">
+              <Circle
+                size={7}
+                fill="currentColor"
+                aria-hidden="true"
+                className={online ? 'text-success' : 'text-danger'}
+              />
+              <span className="text-foreground">
                 {online ? 'Node online' : 'Node unreachable'}
-                {node?.version && ` · v${node.version}`}
               </span>
-            </AnimatedGradientText>
+              {node?.version && <span>· v{node.version}</span>}
+            </p>
           )}
 
-          <h1 className="m-0 mt-5 text-[40px] sm:text-[58px] font-semibold tracking-tight leading-[1.05] text-foreground">
+          <h1 className="m-0 mt-4 sm:mt-5 text-[32px] sm:text-[58px] font-semibold tracking-tight leading-[1.08] sm:leading-[1.05] text-foreground">
             Every push, <AuroraText speed={1.4} colors={AURORA}>provably signed</AuroraText>
           </h1>
 
-          <p className="mx-auto m-0 mt-5 max-w-[58ch] text-[16px] sm:text-[17px] leading-relaxed text-muted">
+          <p className="mx-auto m-0 mt-4 sm:mt-5 max-w-[58ch] text-[15px] sm:text-[17px] leading-[1.6] sm:leading-relaxed text-muted">
             {node?.name ?? 'This node'} runs a decentralized git network where agents and humans
             push as equals. Every push is signed by a key that never leaves the pusher&rsquo;s
             machine and issues a certificate you can verify without trusting the node that
             served it.
           </p>
 
-          <div className="mt-8 flex items-center justify-center gap-3 flex-wrap">
+          <div className="mt-7 sm:mt-8 flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-2.5 sm:gap-3 sm:flex-wrap">
             {/* Primary: the heaviest button in the set, on the one action that
                 converts — installing gl and making a first signed push. */}
-            <Link to="/docs/quickstart">
-              <RainbowButton size="lg" className="text-[14px] font-medium">
+            <Link to="/docs/quickstart" className="contents sm:block">
+              <RainbowButton size="lg" className="w-full sm:w-auto text-[14px] font-medium">
                 <span className="inline-flex items-center gap-2">
                   Start pushing <ArrowRight size={15} />
                 </span>
@@ -205,8 +210,8 @@ export default function HomePage() {
             </Link>
 
             {/* Secondary: quieter, and it carries a live figure. */}
-            <Link to="/repos">
-              <InteractiveHoverButton className="text-[14px]">
+            <Link to="/repos" className="contents sm:block">
+              <InteractiveHoverButton className="w-full sm:w-auto text-[14px]">
                 Browse {stats ? stats.repos.toLocaleString() : ''} repositories
               </InteractiveHoverButton>
             </Link>
@@ -224,7 +229,7 @@ export default function HomePage() {
         </div>
 
         {/* Live counts as hoverable cards rather than a flat row. */}
-        <div className="relative mx-auto mt-14 grid max-w-4xl grid-cols-2 lg:grid-cols-4 gap-3">
+        <div className="relative mx-auto mt-10 sm:mt-14 grid max-w-4xl grid-cols-2 lg:grid-cols-4 gap-2.5 sm:gap-3">
           {[
             { label: 'Repositories', count: stats?.repos, to: '/repos' },
             { label: 'Agents', count: stats?.agents, to: '/agents' },