diff --git a/README.md b/README.md
index cac99f4..2fac380 100644
--- a/README.md
+++ b/README.md
@@ -26,9 +26,9 @@
   </picture>
 </p>
 
-reins gives your coding agent (Claude Code, Cursor, Codex, Copilot — anything
-with a shell) control of the real, logged-in Chromium browser you already use,
-through a CLI and a Manifest V3 extension. No MCP server to register, no debug
+reins gives your coding agent control of the real, logged-in Chromium browser
+you already use, through a CLI and a Manifest V3 extension. Claude Code, Cursor,
+Codex, Copilot: anything with a shell. No MCP server to register, no debug
 profile, no launch flags, no tokens.
 
 ## Quick start
@@ -38,35 +38,45 @@ npm i -g @karnstack/reins        # the CLI (daemon included, starts on demand)
 npx skills add karnstack/reins   # the skill, into your agent(s) of choice
 ```
 
-Then install the extension in every Chromium browser you want agents to reach —
-Chrome, Brave, Edge, Arc, Dia:
+Then install the extension in every Chromium browser you want agents to reach:
+Chrome, Brave, Edge, Arc, Dia.
 
-**[Add reins from the Chrome Web Store](https://chromewebstore.google.com/detail/reins/hnjcfgochepemjndccfblpmfmlblkofo)** — it finds the local daemon and connects on its own.
+**[Add reins from the Chrome Web Store](https://chromewebstore.google.com/detail/reins/hnjcfgochepemjndccfblpmfmlblkofo)**. It finds the local daemon and connects on its own.
 
-No store access? `reins extension` installs it via Load unpacked instead — see
-[docs/SIDELOAD.md](docs/SIDELOAD.md). That's the whole setup; `reins status`
-shows what's connected.
+No store access? `reins extension` installs it through Load unpacked instead.
+See [docs/SIDELOAD.md](docs/SIDELOAD.md). That is the whole setup, and
+`reins status` shows what is connected.
 
 ## The loop
 
 ```bash
-reins snapshot              # list interactive elements with refs → e5: button "Submit"
-reins click --ref e5        # act by ref
-reins text                  # verify (or: reins screenshot → prints an image path)
+reins snapshot              # look: interactive elements with refs → e5: button "Submit"
+reins click --ref e5        # act: by ref
+reins text                  # check: or reins screenshot, which prints an image path
 ```
 
-Every command takes `--tab <id>` (default: active tab), `--browser <id>` (only
-when several are connected), and `--json`. `reins help` is self-describing;
-`reins cdp` is the escape hatch to the full Chrome DevTools Protocol.
+Shared flags, on the commands that act on a page or a tab: `--tab <id>`
+(default: active tab), `--browser <id>` (only when several are connected), and
+`--json` for raw output. `reins help` is self-describing, and
+`reins cdp` reaches the full Chrome DevTools Protocol when the curated commands
+are not enough.
+
+## Limits
+
+Chromium only, so no Firefox and no WebKit. No headless mode: reins drives a
+browser you already have open, which also makes it the wrong tool for CI. With
+two browsers connected, commands need `--browser <id>`, because reins never
+guesses which one you meant. Releases are still `0.x`, so commands, flags, and
+output can change.
 
 ## Learn more
 
 The full story lives on the site:
 
-- **[Docs](https://reins.tech/docs)** — getting started, architecture, and the complete command reference
-- **[How it compares](https://reins.tech/docs/comparison)** — vs agent-browser, dev3000, and playwright-mcp
-- **[Security](https://reins.tech/docs/security)** — per-site permissions, `127.0.0.1`-only binding, and the threat model
-- **[Site permissions](https://reins.tech/docs/permissions)** — the `deny` / `read` / `full` tiers and how to tighten them
+- **[Docs](https://reins.tech/docs)**: getting started, architecture, and the complete command reference
+- **[How it compares](https://reins.tech/docs/comparison)**: reins next to agent-browser, dev3000, and playwright-mcp
+- **[Security](https://reins.tech/docs/security)**: per-site permissions, `127.0.0.1`-only binding, and the threat model
+- **[Site permissions](https://reins.tech/docs/permissions)**: the `deny`, `read`, and `full` tiers, and how to tighten them
 
 Report vulnerabilities privately via [GitHub security advisories](https://github.com/karnstack/reins/security/advisories/new).
 
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index e78833e..5bef114 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### Minor Changes
 
-- 65ce7f3: `reins audit` — a per-action audit trail. The extension stamps each response with the resolved host, permission tier, and tab; the daemon writes one redacted JSONL line per action (policy denials included) to `~/.reins/logs/audit-YYYY-MM-DD.jsonl`, pruned after 30 days. Value-bearing params (typed text, fill values, eval code, CDP payloads) are redacted before anything reaches disk.
+- 65ce7f3: `reins audit`, a per-action audit trail. The extension stamps each response with the resolved host, permission tier, and tab; the daemon writes one redacted JSONL line per action (policy denials included) to `~/.reins/logs/audit-YYYY-MM-DD.jsonl`, pruned after 30 days. Value-bearing params (typed text, fill values, eval code, CDP payloads) are redacted before anything reaches disk.
 
 ## 0.3.0
 
@@ -19,7 +19,7 @@
 
 ### Patch Changes
 
-- 6885954: Trust the published Chrome Web Store extension (`hnjcfgochepemjndccfblpmfmlblkofo`) out of the box — store installs connect without `reins allow`.
+- 6885954: Trust the published Chrome Web Store extension (`hnjcfgochepemjndccfblpmfmlblkofo`) out of the box. Store installs connect without `reins allow`.
 
 ## 0.2.0
 
@@ -27,7 +27,7 @@
 
 - f6b30a4: New `reins extension` command: install the extension without the Chrome Web
   Store. The npm package now bundles the extension build with a key-pinned,
-  pre-allowlisted id — `reins extension` stages it at `~/.reins/extension` for
+  pre-allowlisted id. `reins extension` stages it at `~/.reins/extension` for
   Chrome's Load unpacked, no `reins allow` step. See docs/SIDELOAD.md.
 
 ### Patch Changes
diff --git a/packages/cli/src/bridge.ts b/packages/cli/src/bridge.ts
index 000f6d4..56546a9 100644
--- a/packages/cli/src/bridge.ts
+++ b/packages/cli/src/bridge.ts
@@ -232,14 +232,14 @@ export class BridgeHost implements BridgePort {
       const entry = this.#browsers.get(browserId);
       if (!entry || entry.ws.readyState !== WebSocket.OPEN) {
         throw new Error(
-          `unknown browserId "${browserId}"${roster ? ` — connected: ${roster}` : " — no browsers connected"}`,
+          `unknown browserId "${browserId}"${roster ? `. Connected: ${roster}` : ". No browsers connected"}`,
         );
       }
       return { id: browserId, ws: entry.ws };
     }
     if (live.length === 0) throw new Error("extension not connected");
     if (live.length > 1) {
-      throw new Error(`several browsers connected — pass browserId. Connected: ${roster}`);
+      throw new Error(`several browsers connected. Pass browserId. Connected: ${roster}`);
     }
     const only = live[0] as BrowserInfo;
     const entry = this.#browsers.get(only.id) as ConnectedBrowser;
diff --git a/packages/cli/src/integration.test.ts b/packages/cli/src/integration.test.ts
index 2105c53..8626dc7 100644
--- a/packages/cli/src/integration.test.ts
+++ b/packages/cli/src/integration.test.ts
@@ -78,7 +78,7 @@ function standInExtension(port: number): Promise<WebSocket> {
               error: {
                 code: "policy_denied",
                 message:
-                  "blocked by policy: x.com is read-only — grant full access from the reins extension popup",
+                  "blocked by policy: x.com is read-only. Grant full access from the reins extension popup",
               },
             }),
           );
diff --git a/packages/cli/src/rpc.test.ts b/packages/cli/src/rpc.test.ts
index 73a211e..981c023 100644
--- a/packages/cli/src/rpc.test.ts
+++ b/packages/cli/src/rpc.test.ts
@@ -90,7 +90,7 @@ describe("listAllTabs", () => {
   it("errors on an unknown browserId, naming the roster", async () => {
     const bridge = fakeBridge();
     await expect(listAllTabs(bridge, "b9")).rejects.toThrow(
-      'unknown browserId "b9" — connected: b1 (Chrome)',
+      'unknown browserId "b9". Connected: b1 (Chrome)',
     );
   });
 });
diff --git a/packages/cli/src/rpc.ts b/packages/cli/src/rpc.ts
index 29c1fb4..2ecfe99 100644
--- a/packages/cli/src/rpc.ts
+++ b/packages/cli/src/rpc.ts
@@ -14,7 +14,7 @@ export async function listAllTabs(bridge: BridgePort, browserId?: string): Promi
   const targets = browserId ? bridge.browsers.filter((b) => b.id === browserId) : bridge.browsers;
   if (browserId !== undefined && targets.length === 0) {
     const roster = bridge.browsers.map((b) => `${b.id} (${b.browser})`).join(", ");
-    throw new Error(`unknown browserId "${browserId}"${roster ? ` — connected: ${roster}` : ""}`);
+    throw new Error(`unknown browserId "${browserId}"${roster ? `. Connected: ${roster}` : ""}`);
   }
   const results = await Promise.all(
     targets.map(async (b) => {
diff --git a/packages/extension/CHANGELOG.md b/packages/extension/CHANGELOG.md
index 4dc24fd..7f22beb 100644
--- a/packages/extension/CHANGELOG.md
+++ b/packages/extension/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### Minor Changes
 
-- 65ce7f3: `reins audit` — a per-action audit trail. The extension stamps each response with the resolved host, permission tier, and tab; the daemon writes one redacted JSONL line per action (policy denials included) to `~/.reins/logs/audit-YYYY-MM-DD.jsonl`, pruned after 30 days. Value-bearing params (typed text, fill values, eval code, CDP payloads) are redacted before anything reaches disk.
+- 65ce7f3: `reins audit`, a per-action audit trail. The extension stamps each response with the resolved host, permission tier, and tab; the daemon writes one redacted JSONL line per action (policy denials included) to `~/.reins/logs/audit-YYYY-MM-DD.jsonl`, pruned after 30 days. Value-bearing params (typed text, fill values, eval code, CDP payloads) are redacted before anything reaches disk.
 
 ## 0.3.0
 
@@ -21,5 +21,5 @@
 
 - f6b30a4: New `reins extension` command: install the extension without the Chrome Web
   Store. The npm package now bundles the extension build with a key-pinned,
-  pre-allowlisted id — `reins extension` stages it at `~/.reins/extension` for
+  pre-allowlisted id. `reins extension` stages it at `~/.reins/extension` for
   Chrome's Load unpacked, no `reins allow` step. See docs/SIDELOAD.md.
diff --git a/packages/extension/src/lib/policy.ts b/packages/extension/src/lib/policy.ts
index a5bf7e4..21f83fd 100644
--- a/packages/extension/src/lib/policy.ts
+++ b/packages/extension/src/lib/policy.ts
@@ -82,7 +82,7 @@ export function tightenPolicy(patternInput: string, tier: Tier): Promise<Policy>
       existing?.tier ?? effectiveTier(p, pattern.startsWith("*.") ? pattern.slice(2) : pattern);
     if (!tighterThan(tier, current)) {
       throw new PolicyDenied(
-        `policy_tighten can only restrict: "${pattern}" is already ${current} — grants require the extension popup`,
+        `policy_tighten can only restrict: "${pattern}" is already ${current}. Grants require the extension popup`,
       );
     }
     const rules = existing
@@ -134,8 +134,8 @@ export async function ensureAllowed(method: GatedMethod, host: string | undefine
   const label = host ?? "this tab";
   const err = new PolicyDenied(
     tier === "deny"
-      ? `blocked by policy: ${label} is denied — change its tier from the reins extension popup`
-      : `blocked by policy: ${label} is read-only — grant full access from the reins extension popup`,
+      ? `blocked by policy: ${label} is denied. Change its tier from the reins extension popup`
+      : `blocked by policy: ${label} is read-only. Grant full access from the reins extension popup`,
   );
   err.meta = { host, tier };
   throw err;
diff --git a/packages/web/package.json b/packages/web/package.json
index 0fbba31..99b2072 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev --port 3000",
-    "build": "vite build && pagefind --site dist/client",
+    "build": "vite build && pagefind --site dist/client && node scripts/check-prose.mjs",
+    "check:prose": "node scripts/check-prose.mjs",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
     "deploy": "wrangler deploy"
diff --git a/packages/web/public/404.html b/packages/web/public/404.html
index 61bc559..e41e451 100644
--- a/packages/web/public/404.html
+++ b/packages/web/public/404.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex" />
-    <title>Page not found — reins</title>
+    <title>Page not found · reins</title>
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <script>
       // Honor the theme picked on the main site; unset follows the OS.
@@ -56,7 +56,7 @@
   <body>
     <main>
       <h1>Page not found</h1>
-      <p>That page doesn't exist or has moved.</p>
+      <p>That page does not exist, or it has moved.</p>
       <a href="/">Back to reins.tech</a>
     </main>
   </body>
diff --git a/packages/web/public/llms.txt b/packages/web/public/llms.txt
index 166d3bd..d68153c 100644
--- a/packages/web/public/llms.txt
+++ b/packages/web/public/llms.txt
@@ -1,29 +1,30 @@
 # reins
 
-> reins lets coding agents (Claude Code, Cursor, Codex, anything with a shell) drive the user's real, logged-in Chromium browser through a local CLI, an auto-spawned daemon, and a Manifest V3 browser extension. Everything runs on 127.0.0.1 — no cloud, no telemetry. Open source, MIT licensed.
+> reins is a command-line tool that lets coding agents drive the user's real, logged-in Chromium browser. It has three local pieces: a CLI, a daemon the CLI starts on demand, and a Manifest V3 browser extension. Everything binds 127.0.0.1. There is no cloud half and no telemetry. Open source, MIT licensed, and still 0.x, so commands can change between releases.
 
 Key facts:
 
 - Install: `npm i -g @karnstack/reins`, then add the reins extension from the Chrome Web Store in any Chromium browser (Chrome, Brave, Edge, Arc, Dia).
-- Teach an agent: `npx skills add karnstack/reins`; agents without skill support can read `reins help`.
-- Core loop: `reins snapshot` (interactive elements with refs) → `reins click --ref e7` / `reins type --ref e3 --text "…"` → `reins text` or `reins screenshot` to verify.
-- Site permissions: every site resolves to a per-site tier — deny, read-only, or full — enforced inside the extension; grants happen only via a click in the extension popup.
-- Security: daemon binds 127.0.0.1 with Host-header validation; only allowlisted chrome-extension:// origins may connect; Chrome shows its native debug banner while attached.
+- Teach an agent: `npx skills add karnstack/reins`. Agents without skill support can read `reins help`.
+- Core loop, in three beats. Look: `reins snapshot` lists interactive elements with refs. Act: `reins click --ref e7` or `reins type --ref e3 --text "…"`. Check: `reins text` or `reins screenshot`.
+- Site permissions: every site resolves to a tier, one of deny, read, or full. The extension enforces it. Grants happen only through a click in the extension popup, and the CLI can tighten the policy but never loosen it.
+- Security: the daemon binds 127.0.0.1 and validates the Host header. Only allowlisted chrome-extension:// origins may connect. Chrome shows its native debugging banner the whole time the extension is attached.
+- Limits: Chromium only, so no Firefox and no WebKit. No headless mode. Not built for CI. With two browsers connected, the commands that act on a page or a tab need `--browser <id>`, because reins never guesses which one you meant.
 
 ## Docs
 
-- [Getting started](https://reins.tech/docs): install the CLI and extension, teach your agent, verify the loop
-- [Commands](https://reins.tech/docs/commands): full command reference — tabs, snapshot, click, type, fill, screenshot, console, network, eval, cdp
-- [Site permissions](https://reins.tech/docs/permissions): per-site deny/read/full tiers and how grants work
+- [Getting started](https://reins.tech/docs): install the CLI and extension, teach your agent, check the loop
+- [Commands](https://reins.tech/docs/commands): the full command reference, covering tabs, snapshot, click, type, fill, screenshot, console, network, eval, and cdp
+- [Site permissions](https://reins.tech/docs/permissions): the deny, read, and full tiers, and how grants work
 - [Architecture](https://reins.tech/docs/architecture): how the CLI, daemon, and extension fit together
 - [Security](https://reins.tech/docs/security): the localhost-only security model
 - [Install without the store](https://reins.tech/docs/sideload): stage the bundled extension for Chrome's Load unpacked
-- [How it compares](https://reins.tech/docs/comparison): reins vs agent-browser, dev3000, and playwright-mcp
+- [How it compares](https://reins.tech/docs/comparison): reins next to agent-browser, dev3000, and playwright-mcp
 - [FAQ](https://reins.tech/docs/faq): common questions
 
 ## Optional
 
 - [Changelog](https://reins.tech/changelog): release notes for the CLI and extension
-- [Privacy policy](https://reins.tech/privacy): nothing leaves your machine
+- [Privacy policy](https://reins.tech/privacy): nothing reins handles leaves your machine
 - [GitHub repository](https://github.com/karnstack/reins): source for the CLI, daemon, extension, and this site
 - [npm package](https://www.npmjs.com/package/@karnstack/reins)
diff --git a/packages/web/scripts/check-prose.mjs b/packages/web/scripts/check-prose.mjs
new file mode 100644
index 0000000..54051c2
--- /dev/null
+++ b/packages/web/scripts/check-prose.mjs
@@ -0,0 +1,161 @@
+/**
+ * Fail the build if an em-dash or an en-dash reached anything a reader sees.
+ *
+ * The house style spells the pause out instead: a full stop when the second
+ * half is a second idea, a colon when it explains the first half, commas for
+ * an aside, brackets for a true parenthesis, and the word "to" for a range.
+ * A plain hyphen is fine.
+ *
+ * What gets scanned is the build output under dist/client, not the sources.
+ * The prerendered pages are exactly what a visitor is served, so they are the
+ * only honest thing to read: copy that arrives from a route, a component, a
+ * changelog, or public/ is all equally covered without this script needing to
+ * know which is which. README.md is named outright because it is copy on npm
+ * and on GitHub that the site never renders.
+ *
+ * Code comments keep their own voice and are never scanned.
+ *
+ * Run by `pnpm check:prose`, and by `pnpm build` once the site is built.
+ */
+import { readdir, readFile, stat } from "node:fs/promises";
+import { dirname, join, relative, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const WEB = join(dirname(fileURLToPath(import.meta.url)), "..");
+const DIST = join(WEB, "dist", "client");
+const README = resolve(WEB, "..", "..", "README.md");
+
+/**
+ * What a hit is called. README.md lives outside dist/client, so the
+ * `relative(DIST, ...)` the built assets use would print a path climbing out
+ * of the build directory instead of the one somebody has to go and edit.
+ */
+const LABELS = new Map([[README, "README.md"]]);
+
+/** The characters the house style forbids. */
+const BANNED = [
+  ["—", "em-dash"],
+  ["–", "en-dash"],
+];
+
+/**
+ * Extensions of the files a reader is served as text.
+ *
+ * An allowlist rather than a denylist, because the thing that must never be
+ * scanned is a binary: og.png and favicon.png would report hits on whatever
+ * bytes happen to sit where a dash would be. .js and .css are left off for
+ * the same reason a source file is: they are compiled output, and any prose
+ * in them is already being read in the page it renders. That also keeps
+ * pagefind's index (.js and .pf_* under dist/client/pagefind) out of the way.
+ */
+const TEXT_EXT = [".html", ".txt", ".svg", ".xml"];
+
+async function isDirectory(path) {
+  try {
+    return (await stat(path)).isDirectory();
+  } catch {
+    return false;
+  }
+}
+
+/** Every text asset under dist/client, whatever put it there. */
+async function targets(dir = DIST, out = []) {
+  for (const entry of await readdir(dir, { withFileTypes: true })) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      await targets(full, out);
+      continue;
+    }
+    if (TEXT_EXT.some((ext) => entry.name.endsWith(ext))) out.push(full);
+  }
+  return out;
+}
+
+if (!(await isDirectory(DIST))) {
+  throw new Error("check-prose: no dist/client, run `pnpm build` first");
+}
+
+/** At most this many occurrences are printed. The exit code counts them all. */
+const MAX_PRINTED = 40;
+
+/** Characters either side of a hit to show, since a page is one long line. */
+const WINDOW = 60;
+
+/**
+ * A readable window around one hit. Prerendered HTML is a single line tens of
+ * kilobytes long, so a line slice shows markup from somewhere else entirely.
+ * Whitespace is collapsed so the window stays on one terminal row.
+ */
+function context(text, at) {
+  const before = text.slice(Math.max(0, at - WINDOW), at);
+  const after = text.slice(at + 1, at + 1 + WINDOW);
+  const squash = (s) => s.replace(/\s+/g, " ");
+  const lead = at > WINDOW ? "…" : "";
+  const tail = at + 1 + WINDOW < text.length ? "…" : "";
+  return `${lead}${squash(before)}${text[at]}${squash(after)}${tail}`;
+}
+
+const prerendered = await targets();
+
+/**
+ * A dist/client with no HTML in it means the build did not finish, and
+ * scanning only README.md would report clean having checked almost nothing.
+ * Asked of `prerendered` and never of `files`, which is the whole point: the
+ * README is appended below and is always readable, so a guard that counted
+ * the scan list could be satisfied by one file that says nothing about
+ * whether vite ran.
+ */
+if (!prerendered.some((file) => file.endsWith(".html"))) {
+  throw new Error("check-prose: no prerendered pages under dist/client, did vite build run?");
+}
+
+const files = [...prerendered, README];
+
+/** One entry per file that has hits, in scan order, each with every hit. */
+const found = [];
+let total = 0;
+
+for (const file of files) {
+  const text = await readFile(file, "utf8");
+  const label = LABELS.get(file) ?? relative(DIST, file);
+  const hits = [];
+
+  let line = 1;
+  let lineStart = 0;
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === "\n") {
+      line += 1;
+      lineStart = i + 1;
+      continue;
+    }
+    const banned = BANNED.find(([char]) => char === text[i]);
+    if (!banned) continue;
+    hits.push({ line, column: i - lineStart + 1, name: banned[1], context: context(text, i) });
+  }
+
+  if (hits.length > 0) {
+    found.push({ label, hits });
+    total += hits.length;
+  }
+}
+
+if (total > 0) {
+  console.error(`check-prose: ${total} dash(es) in copy a reader sees\n`);
+
+  let printed = 0;
+  for (const { label, hits } of found) {
+    console.error(`  ${label}  (${hits.length})`);
+    for (const hit of hits) {
+      if (printed === MAX_PRINTED) break;
+      console.error(`    ${label}:${hit.line}:${hit.column}  ${hit.name}  ${hit.context}`);
+      printed += 1;
+    }
+    if (printed === MAX_PRINTED) break;
+  }
+  if (total > printed) console.error(`\n  … and ${total - printed} more`);
+
+  console.error("\nUse a full stop, a colon, commas or brackets instead.");
+  process.exit(1);
+}
+
+console.log(`check-prose: ${files.length} files, no em-dashes or en-dashes`);
diff --git a/packages/web/src/components/animated-terminal.tsx b/packages/web/src/components/animated-terminal.tsx
deleted file mode 100644
index 47f8240..0000000
--- a/packages/web/src/components/animated-terminal.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Output, Prompt, Terminal } from "@/components/terminal";
-import { prefersReducedMotion } from "@/lib/motion";
-
-export interface TermLine {
-  kind: "prompt" | "output";
-  text: string;
-}
-
-export function prompt(text: string): TermLine {
-  return { kind: "prompt", text };
-}
-
-export function output(text: string): TermLine {
-  return { kind: "output", text };
-}
-
-const CHAR_MS = 22;
-const PROMPT_PAUSE_MS = 450;
-const OUTPUT_PAUSE_MS = 260;
-
-function Caret() {
-  return (
-    <span
-      aria-hidden="true"
-      className="ml-px inline-block h-[1.05em] w-[0.55ch] translate-y-[0.18em] bg-neutral-300 [animation:terminal-caret_1s_step-end_infinite]"
-    />
-  );
-}
-
-function renderLine(line: TermLine, key: number) {
-  return line.kind === "prompt" ? (
-    <Prompt key={key}>{line.text}</Prompt>
-  ) : (
-    <Output key={key}>{line.text}</Output>
-  );
-}
-
-/**
- * A Terminal that types its prompts out character by character. The full
- * transcript is laid out invisibly underneath so the box never changes size
- * while typing. Renders instantly when `play` is false or the user prefers
- * reduced motion.
- */
-export function AnimatedTerminal({
-  title,
-  lines,
-  play = true,
-  startDelay = 0,
-  onDone,
-  className,
-}: {
-  title: string;
-  lines: TermLine[];
-  play?: boolean;
-  startDelay?: number;
-  onDone?: () => void;
-  className?: string;
-}) {
-  const [instant] = useState(() => !play || prefersReducedMotion());
-  const [pos, setPos] = useState(() => ({ line: instant ? lines.length : 0, char: 0 }));
-  const done = pos.line >= lines.length;
-  const onDoneRef = useRef(onDone);
-  onDoneRef.current = onDone;
-
-  useEffect(() => {
-    if (done) {
-      onDoneRef.current?.();
-      return;
-    }
-    const current = lines[pos.line];
-    if (!current) return;
-    const atStart = pos.line === 0 && pos.char === 0;
-    let ms: number;
-    let next: { line: number; char: number };
-    if (current.kind === "output") {
-      ms = OUTPUT_PAUSE_MS;
-      next = { line: pos.line + 1, char: 0 };
-    } else if (pos.char < current.text.length) {
-      ms = CHAR_MS;
-      next = { line: pos.line, char: pos.char + 1 };
-    } else {
-      ms = PROMPT_PAUSE_MS;
-      next = { line: pos.line + 1, char: 0 };
-    }
-    const t = window.setTimeout(() => setPos(next), ms + (atStart ? startDelay : 0));
-    return () => window.clearTimeout(t);
-  }, [pos, done, lines, startDelay]);
-
-  const current = lines[pos.line];
-
-  return (
-    <Terminal title={title} className={className}>
-      <div className="relative">
-        <div className="invisible" aria-hidden="true">
-          {lines.map(renderLine)}
-        </div>
-        <p className="sr-only">{lines.map((l) => l.text).join("\n")}</p>
-        <div aria-hidden="true" className="absolute inset-0">
-          {lines.slice(0, pos.line).map(renderLine)}
-          {!done && current?.kind === "prompt" ? (
-            <Prompt>
-              {current.text.slice(0, pos.char)}
-              <Caret />
-            </Prompt>
-          ) : null}
-        </div>
-      </div>
-    </Terminal>
-  );
-}
diff --git a/packages/web/src/components/browser-mock.tsx b/packages/web/src/components/browser-mock.tsx
new file mode 100644
index 0000000..511a056
--- /dev/null
+++ b/packages/web/src/components/browser-mock.tsx
@@ -0,0 +1,134 @@
+import { Globe } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/**
+ * A picture of an agent driving a tab.
+ *
+ * The one drawing on the homepage, and it sits in the flow where a README
+ * would put a screenshot. It is set in `font-sans` and keeps its corners on
+ * purpose: it is a picture of a browser, and a browser has both. Everything
+ * around it is mono and square.
+ */
+
+function RefChip({ id, className }: { id: string; className?: string }) {
+  return (
+    <span
+      className={cn(
+        "absolute z-20 bg-primary px-1.5 py-0.5 font-mono text-[0.6875rem] leading-none text-primary-foreground",
+        className,
+      )}
+    >
+      {id}
+    </span>
+  );
+}
+
+/* Small arrow cursor, positioned to look like it is about to click e7. */
+function Cursor({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 16 16" className={cn("absolute z-20 size-4", className)} aria-hidden="true">
+      <path
+        d="M1 1l4.5 13 2.2-5.3L13 6.5 1 1z"
+        fill="white"
+        stroke="black"
+        strokeWidth="1"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+const AGENT_LINES = [
+  "$ reins snapshot",
+  '  e3: input "Email"',
+  '  e7: button "Sign in"',
+  "$ reins click --ref e7",
+  "  ✓ clicked e7",
+];
+
+export function BrowserMock({ className }: { className?: string }) {
+  return (
+    <div className={cn("font-sans", className)}>
+      <div className="rounded-xl border border-border bg-card dark:bg-neutral-950">
+        {/* Chrome bar */}
+        <div className="flex items-center gap-3 rounded-t-xl border-b border-border px-4 py-2.5">
+          <div className="flex gap-1.5">
+            <span className="size-2.5 rounded-full bg-[#ff5f57]" />
+            <span className="size-2.5 rounded-full bg-[#febc2e]" />
+            <span className="size-2.5 rounded-full bg-[#28c840]" />
+          </div>
+          <div className="mx-auto flex w-full max-w-sm items-center gap-2 rounded-md bg-foreground/5 px-3 py-1 font-mono text-xs text-muted-foreground">
+            <Globe className="size-3.5 shrink-0" aria-hidden="true" />
+            app.acme.com/checkout
+          </div>
+          <div className="w-11 shrink-0" />
+        </div>
+
+        {/* Debugging banner, mirroring Chrome's native one */}
+        <div className="flex items-center gap-2 border-b border-amber-500/20 bg-amber-500/10 px-4 py-1.5 text-xs text-amber-700 dark:border-amber-300/20 dark:bg-amber-300/8 dark:text-amber-300">
+          <span className="size-1.5 shrink-0 rounded-full bg-current" />
+          <span className="truncate">reins is controlling this browser</span>
+        </div>
+
+        <div className="relative overflow-hidden rounded-b-xl">
+          {/* faux site chrome */}
+          <div className="flex items-center justify-between border-b border-border px-6 py-3">
+            <div className="flex items-center gap-2">
+              <span className="size-4 rounded bg-foreground/15" />
+              <span className="h-2 w-14 rounded-full bg-foreground/10" />
+            </div>
+            <div className="flex items-center gap-4 max-sm:hidden">
+              <span className="h-2 w-10 rounded-full bg-foreground/10" />
+              <span className="h-2 w-10 rounded-full bg-foreground/10" />
+              <span className="h-5 w-14 rounded-md bg-foreground/10" />
+            </div>
+          </div>
+
+          <div className="grid gap-8 p-6 sm:p-8 lg:grid-cols-2 lg:items-center">
+            {/* the page's sign-in form */}
+            <div className="mx-auto w-full max-w-xs">
+              <p className="text-lg font-semibold">Sign in to Dashboard</p>
+              <p className="mt-1 text-sm text-muted-foreground">Welcome back.</p>
+              <div className="mt-6">
+                <p className="mb-1.5 text-xs font-medium text-muted-foreground">Email</p>
+                <div className="relative border border-primary/50 px-3 py-2 text-left font-mono text-xs">
+                  <RefChip id="e3" className="-top-2.5 right-2" />
+                  you@work.dev
+                </div>
+              </div>
+              <div className="mt-4">
+                <p className="mb-1.5 text-xs font-medium text-muted-foreground">Password</p>
+                <div className="border border-border px-3 py-2 text-left font-mono text-xs text-muted-foreground">
+                  ••••••••••
+                </div>
+              </div>
+              <div className="relative mt-6">
+                <div className="relative bg-primary px-3 py-2.5 text-center text-sm font-medium text-primary-foreground">
+                  <RefChip id="e7" className="-top-2.5 right-2 bg-neutral-950 text-white" />
+                  Sign in
+                </div>
+                <Cursor className="right-6 -bottom-3" />
+              </div>
+            </div>
+
+            {/* the agent session driving it */}
+            <pre className="overflow-x-auto border border-border p-4 font-mono text-xs/6 whitespace-pre">
+              {AGENT_LINES.map((line) => (
+                <span key={line} className="block">
+                  {line.startsWith("$") ? (
+                    <>
+                      <span className="text-primary">$</span>
+                      {line.slice(1)}
+                    </>
+                  ) : (
+                    <span className="text-muted-foreground">{line}</span>
+                  )}
+                </span>
+              ))}
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/code-block.tsx b/packages/web/src/components/code-block.tsx
deleted file mode 100644
index dfd645c..0000000
--- a/packages/web/src/components/code-block.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Check, Copy } from "lucide-react";
-import { highlightShell } from "@/lib/highlight";
-import { useCopy } from "@/lib/use-copy";
-import { cn } from "@/lib/utils";
-
-export function CodeBlock({ code, className }: { code: string; className?: string }) {
-  const { copied, copy } = useCopy();
-
-  return (
-    <div className={cn("relative", className)}>
-      {/* biome-ignore lint/security/noDangerouslySetInnerHtml: shiki output from our own static strings */}
-      <div dangerouslySetInnerHTML={{ __html: highlightShell(code) }} />
-      <button
-        type="button"
-        onClick={() => copy(code)}
-        aria-label="Copy code"
-        className="absolute top-2 right-2 rounded-md p-2 text-neutral-400 hover:bg-white/10 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-      >
-        <span
-          className="absolute top-1/2 left-1/2 size-[max(100%,3rem)] -translate-1/2 pointer-fine:hidden"
-          aria-hidden="true"
-        />
-        {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
-      </button>
-    </div>
-  );
-}
diff --git a/packages/web/src/components/copy-command.tsx b/packages/web/src/components/copy-command.tsx
index ccb96fd..fc80e03 100644
--- a/packages/web/src/components/copy-command.tsx
+++ b/packages/web/src/components/copy-command.tsx
@@ -2,30 +2,35 @@ import { Check, Copy } from "lucide-react";
 import { useCopy } from "@/lib/use-copy";
 import { cn } from "@/lib/utils";
 
+/**
+ * The install line. It is selectable text first and a button second: with JS
+ * off or still loading, the command is right there to highlight and copy by
+ * hand, which is how a shell command should behave.
+ */
 export function CopyCommand({ command, className }: { command: string; className?: string }) {
   const { copied, copy } = useCopy();
 
   return (
-    <div
-      className={cn("flex items-center gap-3 rounded-lg bg-foreground/5 py-2 pr-2 pl-4", className)}
-    >
-      <p className="min-w-0 overflow-x-auto font-mono text-[0.8125rem]/6 whitespace-nowrap">
-        <span aria-hidden="true" className="text-muted-foreground">
-          ${" "}
-        </span>
-        {command}
-      </p>
+    <div className={cn("flex items-center gap-3 border border-border py-2 pr-2 pl-4", className)}>
+      <span aria-hidden="true" className="text-primary">
+        $
+      </span>
+      <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap">{command}</code>
       <button
         type="button"
         onClick={() => copy(command)}
-        aria-label="Copy command"
-        className="relative rounded-md p-2 text-muted-foreground hover:bg-foreground/5 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        aria-label={copied ? "Copied" : "Copy install command"}
+        className="relative inline-flex size-8 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
       >
         <span
-          className="absolute top-1/2 left-1/2 size-[max(100%,3rem)] -translate-1/2 pointer-fine:hidden"
           aria-hidden="true"
+          className="absolute top-1/2 left-1/2 size-[max(100%,3rem)] -translate-1/2 pointer-fine:hidden"
         />
-        {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
+        {copied ? (
+          <Check className="size-4 shrink-0 text-primary" aria-hidden="true" />
+        ) : (
+          <Copy className="size-4 shrink-0" aria-hidden="true" />
+        )}
       </button>
     </div>
   );
diff --git a/packages/web/src/components/copy-markdown.tsx b/packages/web/src/components/copy-markdown.tsx
index 98aafd0..79711d0 100644
--- a/packages/web/src/components/copy-markdown.tsx
+++ b/packages/web/src/components/copy-markdown.tsx
@@ -1,9 +1,9 @@
-import { Check, Copy } from "lucide-react";
 import type { RefObject } from "react";
-import { Button } from "@/components/ui/button";
 import { domToMarkdown } from "@/lib/dom-to-markdown";
 import { useCopy } from "@/lib/use-copy";
+import { cn } from "@/lib/utils";
 
+/** A bracket link, like the nav. The page has no filled buttons. */
 export function CopyMarkdown({
   contentRef,
   className,
@@ -16,18 +16,18 @@ export function CopyMarkdown({
   function onClick() {
     const root = contentRef.current;
     if (!root) return;
-    const article = root.querySelector("article") ?? root;
-    void copy(domToMarkdown(article as HTMLElement));
+    void copy(domToMarkdown(root));
   }
 
   return (
-    <Button variant="outline" size="sm" onClick={onClick} className={className}>
-      {copied ? (
-        <Check className="size-3.5" aria-hidden="true" />
-      ) : (
-        <Copy className="size-3.5" aria-hidden="true" />
-      )}
-      {copied ? "Copied" : "Copy as Markdown"}
-    </Button>
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn("text-muted-foreground hover:text-foreground", className)}
+    >
+      <span aria-hidden="true">[ </span>
+      {copied ? "copied" : "copy as markdown"}
+      <span aria-hidden="true"> ]</span>
+    </button>
   );
 }
diff --git a/packages/web/src/components/docs-toc.tsx b/packages/web/src/components/docs-toc.tsx
deleted file mode 100644
index 677663a..0000000
--- a/packages/web/src/components/docs-toc.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import { AlignLeft } from "lucide-react";
-import { type RefObject, useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils";
-
-interface TocItem {
-  id: string;
-  text: string;
-  level: 2 | 3;
-}
-
-function slugify(text: string): string {
-  return text
-    .toLowerCase()
-    .replace(/[^a-z0-9\s-]/g, "")
-    .trim()
-    .replace(/\s+/g, "-");
-}
-
-/* Docs headings are plain JSX without ids, so the scan assigns slugs as it
-   collects them. */
-function useHeadings(contentRef: RefObject<HTMLElement | null>) {
-  const [headings, setHeadings] = useState<Array<TocItem>>([]);
-
-  useEffect(() => {
-    const el = contentRef.current;
-    if (!el) return;
-
-    function scan() {
-      const nodes = el?.querySelectorAll("article h2, article h3") ?? [];
-      const seen = new Map<string, number>();
-      const items: Array<TocItem> = [];
-      nodes.forEach((node) => {
-        const text = (node.textContent ?? "").trim();
-        if (!text) return;
-        if (!node.id) {
-          const base = slugify(text) || "section";
-          const count = seen.get(base) ?? 0;
-          seen.set(base, count + 1);
-          node.id = count === 0 ? base : `${base}-${count}`;
-        }
-        items.push({ id: node.id, text, level: node.tagName === "H2" ? 2 : 3 });
-      });
-      setHeadings((prev) =>
-        prev.length === items.length &&
-        prev.every((p, i) => p.id === items[i]?.id && p.text === items[i]?.text)
-          ? prev
-          : items,
-      );
-    }
-
-    scan();
-    const observer = new MutationObserver(scan);
-    observer.observe(el, { childList: true, subtree: true });
-    return () => observer.disconnect();
-  }, [contentRef]);
-
-  return headings;
-}
-
-function useActiveHeadings(headings: Array<TocItem>) {
-  const [activeIds, setActiveIds] = useState<Set<string>>(new Set());
-  const visibleRef = useRef<Set<string>>(new Set());
-
-  useEffect(() => {
-    if (headings.length === 0) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const visible = visibleRef.current;
-
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            visible.add(entry.target.id);
-          } else {
-            visible.delete(entry.target.id);
-          }
-        }
-
-        if (visible.size === 0) {
-          // Nothing in view (e.g. inside a long section) — highlight the
-          // heading closest to the top of the viewport.
-          const viewTop = entries[0]?.rootBounds?.top ?? 0;
-          let fallbackId: string | undefined;
-          let minDist = Number.POSITIVE_INFINITY;
-
-          for (const { id } of headings) {
-            const el = document.getElementById(id);
-            if (!el) continue;
-            const dist = Math.abs(viewTop - el.getBoundingClientRect().top);
-            if (dist < minDist) {
-              minDist = dist;
-              fallbackId = id;
-            }
-          }
-
-          setActiveIds(fallbackId ? new Set([fallbackId]) : new Set());
-        } else {
-          setActiveIds(new Set(visible));
-        }
-      },
-      { rootMargin: "-64px 0% -5% 0%", threshold: 0 },
-    );
-
-    headings.forEach(({ id }) => {
-      const el = document.getElementById(id);
-      if (el) observer.observe(el);
-    });
-
-    return () => {
-      observer.disconnect();
-      visibleRef.current.clear();
-    };
-  }, [headings]);
-
-  return activeIds;
-}
-
-function getLineOffset(level: 2 | 3): number {
-  return level === 3 ? 10 : 0;
-}
-
-function getItemOffset(level: 2 | 3): number {
-  return level === 3 ? 28 : 16;
-}
-
-function calcThumb(container: HTMLElement, activeIds: Set<string>): [number, number] {
-  if (activeIds.size === 0 || container.clientHeight === 0) return [0, 0];
-
-  let upper = Number.MAX_VALUE;
-  let lower = 0;
-
-  for (const id of activeIds) {
-    const el = container.querySelector<HTMLElement>(`a[data-id="${id}"]`);
-    if (!el) continue;
-    const styles = getComputedStyle(el);
-    upper = Math.min(upper, el.offsetTop + Number.parseFloat(styles.paddingTop));
-    lower = Math.max(
-      lower,
-      el.offsetTop + el.clientHeight - Number.parseFloat(styles.paddingBottom),
-    );
-  }
-
-  if (upper === Number.MAX_VALUE) return [0, 0];
-  return [upper, lower - upper];
-}
-
-interface DocsTocProps {
-  contentRef: RefObject<HTMLElement | null>;
-  className?: string;
-}
-
-export function DocsToc({ contentRef, className }: DocsTocProps) {
-  const headings = useHeadings(contentRef);
-  const activeIds = useActiveHeadings(headings);
-  const listRef = useRef<HTMLDivElement>(null);
-  const thumbRef = useRef<HTMLDivElement>(null);
-
-  const [svgData, setSvgData] = useState<{
-    path: string;
-    width: number;
-    height: number;
-  } | null>(null);
-
-  useEffect(() => {
-    const container = listRef.current;
-    if (!container) return;
-
-    function rebuild() {
-      if (!container || container.clientHeight === 0) return;
-
-      let w = 0;
-      let h = 0;
-      const d: Array<string> = [];
-
-      headings.forEach((heading, i) => {
-        const el = container.querySelector<HTMLElement>(`a[data-id="${heading.id}"]`);
-        if (!el) return;
-
-        const styles = getComputedStyle(el);
-        const offset = getLineOffset(heading.level) + 1;
-        const top = el.offsetTop + Number.parseFloat(styles.paddingTop);
-        const bottom = el.offsetTop + el.clientHeight - Number.parseFloat(styles.paddingBottom);
-
-        w = Math.max(offset, w);
-        h = Math.max(h, bottom);
-
-        d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`);
-        d.push(`L${offset} ${bottom}`);
-      });
-
-      setSvgData({ path: d.join(" "), width: w + 1, height: h });
-    }
-
-    rebuild();
-    const observer = new ResizeObserver(rebuild);
-    observer.observe(container);
-    return () => observer.disconnect();
-  }, [headings]);
-
-  useEffect(() => {
-    const container = listRef.current;
-    const thumb = thumbRef.current;
-    if (!container || !thumb) return;
-
-    const [top, height] = calcThumb(container, activeIds);
-    thumb.style.setProperty("--toc-top", `${top}px`);
-    thumb.style.setProperty("--toc-height", `${height}px`);
-    thumb.dataset.hidden = String(activeIds.size === 0);
-  });
-
-  if (headings.length === 0) return null;
-
-  const svgMask = svgData
-    ? `url("data:image/svg+xml,${encodeURIComponent(
-        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgData.width} ${svgData.height}"><path d="${svgData.path}" stroke="black" stroke-width="1" fill="none" /></svg>`,
-      )}")`
-    : undefined;
-
-  return (
-    <nav className={cn("flex flex-col gap-3", className)} aria-label="On this page">
-      <div className="-ml-0.5 flex items-center gap-2 text-xs font-medium text-muted-foreground">
-        <AlignLeft className="size-4 shrink-0" aria-hidden="true" />
-        <span>On this page</span>
-      </div>
-
-      <div className="relative">
-        {svgData && (
-          <div
-            className="pointer-events-none absolute start-0 top-0"
-            style={{
-              width: svgData.width,
-              height: svgData.height,
-              maskImage: svgMask,
-              maskRepeat: "no-repeat",
-            }}
-          >
-            <div className="absolute inset-0 bg-border" />
-            <div
-              ref={thumbRef}
-              className={cn(
-                "absolute w-full bg-primary dark:bg-violet-300",
-                "top-[var(--toc-top)] h-[var(--toc-height)]",
-                "transition-[top,height] duration-150 ease-linear",
-                "data-[hidden=true]:opacity-0",
-              )}
-            />
-          </div>
-        )}
-
-        <div ref={listRef} className="flex flex-col">
-          {headings.map((heading) => {
-            const isActive = activeIds.has(heading.id);
-
-            return (
-              <a
-                key={heading.id}
-                href={`#${heading.id}`}
-                data-id={heading.id}
-                onClick={(e) => {
-                  e.preventDefault();
-                  document.getElementById(heading.id)?.scrollIntoView({ behavior: "smooth" });
-                  history.replaceState(null, "", `#${heading.id}`);
-                }}
-                style={{ paddingInlineStart: getItemOffset(heading.level) }}
-                className={cn(
-                  "relative block py-1.5 text-xs/5 transition-colors hover:text-foreground",
-                  isActive ? "text-primary dark:text-violet-300" : "text-muted-foreground",
-                )}
-              >
-                {heading.text}
-              </a>
-            );
-          })}
-        </div>
-      </div>
-    </nav>
-  );
-}
diff --git a/packages/web/src/components/hero.tsx b/packages/web/src/components/hero.tsx
deleted file mode 100644
index 51054eb..0000000
--- a/packages/web/src/components/hero.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import { Link } from "@tanstack/react-router";
-import { Globe } from "lucide-react";
-import { AnimatedTerminal, output, prompt } from "@/components/animated-terminal";
-import { Button } from "@/components/ui/button";
-
-const GITHUB_URL = "https://github.com/karnstack/reins";
-
-/* The agent transcript shown inside the browser mock — kept short so it fits
-   the docked panel and mirrors the highlighted e3/e7 refs on the page. */
-const AGENT_PANEL_LINES = [
-  prompt("reins snapshot"),
-  output('  e3: input "Email"\n  e7: button "Sign in"'),
-  prompt("reins click --ref e7"),
-  output("  ✓ clicked e7"),
-];
-
-function RefChip({ id, className }: { id: string; className?: string }) {
-  return (
-    <span
-      className={`absolute z-20 rounded-md bg-primary px-1.5 py-0.5 font-mono text-[0.6875rem] leading-none text-primary-foreground shadow-sm ${className ?? ""}`}
-    >
-      {id}
-    </span>
-  );
-}
-
-/* Small arrow cursor, positioned to look like it is about to click e7. */
-function Cursor({ className }: { className?: string }) {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      className={`absolute z-20 size-4 drop-shadow-md ${className ?? ""}`}
-      aria-hidden="true"
-    >
-      <path
-        d="M1 1l4.5 13 2.2-5.3L13 6.5 1 1z"
-        fill="white"
-        stroke="black"
-        strokeWidth="1"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-export function Hero() {
-  return (
-    <section className="relative isolate overflow-hidden py-20 sm:py-24">
-      <div aria-hidden="true" className="hero-grid pointer-events-none absolute inset-0 -z-10" />
-      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto max-w-3xl text-center">
-          <a
-            href={GITHUB_URL}
-            target="_blank"
-            rel="noreferrer"
-            className="inline-flex items-center gap-2 rounded-full border border-border bg-foreground/2 py-1 pr-3 pl-1.5 text-sm text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground"
-          >
-            <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
-              Open source
-            </span>
-            MIT licensed, runs on 127.0.0.1
-          </a>
-          <h1 className="mx-auto mt-6 max-w-[20ch] font-display text-5xl font-semibold tracking-tight text-balance sm:text-6xl">
-            Hand your agent the browser you already use
-          </h1>
-          <p className="mx-auto mt-5 max-w-[52ch] text-lg text-pretty text-muted-foreground">
-            reins lets coding agents (Claude Code, Cursor, Codex, anything with a shell) drive the
-            logged-in browser you already use. No debug profile, no launch flags, no MCP server to
-            register.
-          </p>
-          <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
-            <Button asChild size="lg">
-              <Link to="/docs">Get started</Link>
-            </Button>
-            <Button asChild size="lg" variant="ghost">
-              <a href={GITHUB_URL} target="_blank" rel="noreferrer">
-                View on GitHub
-              </a>
-            </Button>
-          </div>
-        </div>
-
-        {/* Browser window mock being driven by an agent. */}
-        <div className="relative mx-auto mt-16 max-w-5xl">
-          {/* Soft radial glow (blurred blob, not a rectangle). */}
-          <div
-            aria-hidden="true"
-            className="pointer-events-none absolute -top-10 left-1/2 -z-10 h-64 w-4/5 -translate-x-1/2 rounded-[50%] bg-primary/25 blur-[110px]"
-          />
-          <div className="rounded-xl border border-foreground/6 bg-card shadow-2xl dark:bg-neutral-950 dark:shadow-none dark:inset-ring dark:inset-ring-white/8">
-            {/* Chrome bar */}
-            <div className="flex items-center gap-3 rounded-t-xl border-b border-border px-4 py-2.5">
-              <div className="flex gap-1.5">
-                <span className="size-2.5 rounded-full bg-[#ff5f57]" />
-                <span className="size-2.5 rounded-full bg-[#febc2e]" />
-                <span className="size-2.5 rounded-full bg-[#28c840]" />
-              </div>
-              <div className="mx-auto flex w-full max-w-sm items-center gap-2 rounded-md bg-foreground/5 px-3 py-1 font-mono text-xs text-muted-foreground">
-                <Globe className="size-3.5 shrink-0" aria-hidden="true" />
-                app.acme.com/checkout
-              </div>
-              <div className="w-11 shrink-0" />
-            </div>
-            {/* Debugging banner (mirrors Chrome's native one) */}
-            <div className="flex items-center gap-2 border-b border-amber-500/20 bg-amber-500/10 px-4 py-1.5 text-xs text-amber-700 dark:border-amber-300/20 dark:bg-amber-300/8 dark:text-amber-300">
-              <span className="size-1.5 shrink-0 rounded-full bg-current" />
-              <span className="truncate">reins is controlling this browser</span>
-            </div>
-            {/* Page body */}
-            <div className="relative overflow-hidden rounded-b-xl">
-              {/* faux site chrome */}
-              <div className="flex items-center justify-between border-b border-border px-6 py-3">
-                <div className="flex items-center gap-2">
-                  <span className="size-4 rounded bg-foreground/15" />
-                  <span className="h-2 w-14 rounded-full bg-foreground/10" />
-                </div>
-                <div className="flex items-center gap-4 max-sm:hidden">
-                  <span className="h-2 w-10 rounded-full bg-foreground/10" />
-                  <span className="h-2 w-10 rounded-full bg-foreground/10" />
-                  <span className="h-5 w-14 rounded-md bg-foreground/10" />
-                </div>
-              </div>
-
-              <div className="grid gap-8 p-8 sm:p-12 lg:min-h-88 lg:grid-cols-2 lg:items-center">
-                {/* the page's sign-in form */}
-                <div className="mx-auto w-full max-w-xs">
-                  <p className="text-lg font-semibold">Sign in to Dashboard</p>
-                  <p className="mt-1 text-sm text-muted-foreground">Welcome back.</p>
-                  <div className="mt-6">
-                    <p className="mb-1.5 text-xs font-medium text-muted-foreground">Email</p>
-                    <div className="relative rounded-lg border border-primary/50 px-3 py-2 text-left font-mono text-xs ring-2 ring-primary/25">
-                      <RefChip id="e3" className="-top-2.5 right-2" />
-                      you@work.dev
-                    </div>
-                  </div>
-                  <div className="mt-4">
-                    <p className="mb-1.5 text-xs font-medium text-muted-foreground">Password</p>
-                    <div className="rounded-lg border border-border px-3 py-2 text-left font-mono text-xs text-muted-foreground">
-                      ••••••••••
-                    </div>
-                  </div>
-                  <div className="relative mt-6">
-                    <div className="relative rounded-lg bg-primary px-3 py-2.5 text-center text-sm font-medium text-primary-foreground ring-2 ring-primary/30">
-                      <RefChip id="e7" className="-top-2.5 right-2 bg-neutral-950 text-white" />
-                      Sign in
-                    </div>
-                    <Cursor className="right-6 -bottom-3" />
-                  </div>
-                </div>
-
-                {/* the agent session driving it */}
-                <div className="lg:pl-4">
-                  <AnimatedTerminal
-                    title="agent session"
-                    lines={AGENT_PANEL_LINES}
-                    startDelay={600}
-                    className="shadow-xl"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/packages/web/src/components/ideas-section.tsx b/packages/web/src/components/ideas-section.tsx
deleted file mode 100644
index ad0c13e..0000000
--- a/packages/web/src/components/ideas-section.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { AnimatedTerminal, output, prompt, type TermLine } from "@/components/animated-terminal";
-import { Reveal } from "@/components/reveal";
-import { prefersReducedMotion, useInView } from "@/lib/motion";
-import { cn } from "@/lib/utils";
-
-interface Idea {
-  id: string;
-  chip: string;
-  lines: TermLine[];
-}
-
-const IDEAS: Idea[] = [
-  {
-    id: "scrape",
-    chip: "Scrape behind logins",
-    lines: [
-      prompt("reins open https://github.com/notifications"),
-      prompt("reins text --max-chars 300"),
-      output("  Notifications · 12 unread\n  ci: build failed on main — 2 mention you"),
-    ],
-  },
-  {
-    id: "test",
-    chip: "Test as the logged-in user",
-    lines: [
-      prompt("reins nav localhost:3000/checkout"),
-      prompt("reins snapshot"),
-      output('  e2: input "Promo code"\n  e5: button "Apply"'),
-      prompt('reins fill --ref e2 --value "SHIP50"'),
-      prompt("reins click --ref e5"),
-      prompt("reins screenshot"),
-      output("  ~/.reins/shots/tab-4.png"),
-    ],
-  },
-  {
-    id: "api",
-    chip: "Watch & replay API traffic",
-    lines: [
-      prompt("reins network --url /api/"),
-      output("  POST /api/v1/orders     201  142ms\n  GET  /api/v1/orders/84  200   38ms"),
-      prompt("reins eval 'fetch(\"/api/v1/orders/84\").then(r => r.json())' --await"),
-      output('  { "id": 84, "status": "paid" }'),
-    ],
-  },
-  {
-    id: "dashboards",
-    chip: "Drive dashboards & forms",
-    lines: [
-      prompt("reins tabs"),
-      output("  b1  chrome  tab 7 *  Grafana — on-call"),
-      prompt("reins click --selector '[data-panel=\"errors\"]'"),
-      prompt("reins screenshot --full"),
-      output("  ~/.reins/shots/tab-7.png"),
-    ],
-  },
-  {
-    id: "debug",
-    chip: "Debug console & network",
-    lines: [
-      prompt("reins console --level error"),
-      output("  TypeError: user.plan is undefined (app.js:214)"),
-      prompt("reins network --since 60000"),
-      output("  GET /api/me  500  88ms"),
-    ],
-  },
-  {
-    id: "cdp",
-    chip: "Cookies & storage via CDP",
-    lines: [
-      prompt("reins cdp Network.getCookies"),
-      output('  { "cookies": [ { "name": "session", … } ] }'),
-      prompt("reins eval 'localStorage.getItem(\"theme\")'"),
-      output('  "dark"'),
-    ],
-  },
-];
-
-const NEXT_IDEA_MS = 2800;
-
-export function IdeasSection() {
-  const { ref, inView } = useInView<HTMLDivElement>();
-  const [index, setIndex] = useState(0);
-  const timer = useRef<number | undefined>(undefined);
-  const autoplay = !prefersReducedMotion();
-
-  const handleDone = useCallback(() => {
-    if (!autoplay) return;
-    window.clearTimeout(timer.current);
-    timer.current = window.setTimeout(() => setIndex((i) => (i + 1) % IDEAS.length), NEXT_IDEA_MS);
-  }, [autoplay]);
-
-  const pick = (i: number) => {
-    window.clearTimeout(timer.current);
-    setIndex(i);
-  };
-
-  useEffect(() => () => window.clearTimeout(timer.current), []);
-
-  const idea = IDEAS[index] ?? IDEAS[0];
-  if (!idea) return null;
-
-  return (
-    <section ref={ref} className="py-20 sm:py-24">
-      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
-        <Reveal>
-          <p className="font-mono text-sm tracking-wide text-muted-foreground uppercase">
-            Unlimited ideas
-          </p>
-          <h2 className="mt-3 max-w-[35ch] text-4xl font-semibold tracking-tight text-balance">
-            One CLI, your whole browser
-          </h2>
-          <p className="mt-4 max-w-[56ch] text-pretty text-muted-foreground">
-            Anything you can do signed in, your agent can do on request. A few loops to steal:
-          </p>
-        </Reveal>
-        <Reveal
-          delay={100}
-          className="mt-10 grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)] lg:gap-12"
-        >
-          <div className="flex flex-wrap gap-2 lg:flex-col lg:items-start">
-            {IDEAS.map((item, i) => (
-              <button
-                key={item.id}
-                type="button"
-                aria-pressed={i === index}
-                onClick={() => pick(i)}
-                className={cn(
-                  "rounded-full border px-4 py-2 text-left text-sm transition-colors",
-                  i === index
-                    ? "border-violet-600/40 bg-violet-600/10 text-foreground dark:border-violet-400/40 dark:bg-violet-400/10"
-                    : "border-border text-muted-foreground hover:bg-foreground/5 hover:text-foreground",
-                )}
-              >
-                {item.chip}
-              </button>
-            ))}
-          </div>
-          {inView ? (
-            <AnimatedTerminal
-              key={idea.id}
-              title="agent session"
-              lines={idea.lines}
-              onDone={handleDone}
-              className="min-h-72"
-            />
-          ) : (
-            <AnimatedTerminal
-              title="agent session"
-              lines={idea.lines}
-              play={false}
-              className="min-h-72"
-            />
-          )}
-        </Reveal>
-      </div>
-    </section>
-  );
-}
diff --git a/packages/web/src/components/md.tsx b/packages/web/src/components/md.tsx
new file mode 100644
index 0000000..3c04c97
--- /dev/null
+++ b/packages/web/src/components/md.tsx
@@ -0,0 +1,259 @@
+import { Link } from "@tanstack/react-router";
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * The page is a document, and this file is its whole vocabulary.
+ *
+ * Everything reins.tech draws is one of these: a heading with its `#`
+ * showing, a paragraph capped at a measure, a `*` list, a `$` transcript, a
+ * two-column table, a rule. The mocks are the only things on the site not in
+ * here, and they are pictures.
+ *
+ * One size of text, `text-base/7 sm:text-sm/7`, and it is the only size the
+ * page has apart from the markers. A README has one size too.
+ */
+
+/** The one column every page sits in. */
+export function Column({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn("mx-auto w-full max-w-[52rem] px-6", className)}>{children}</div>;
+}
+
+/** The text size everything uses. Named once so nothing drifts. */
+export const TEXT = "text-base/7 sm:text-sm/7";
+
+/** The block at the top of a page: who, what, when. */
+export function Meta({ lines }: { lines: string[] }) {
+  return (
+    <div className={cn(TEXT, "tracking-wide text-muted-foreground uppercase")}>
+      {lines.map((line) => (
+        <p key={line}>{line}</p>
+      ))}
+    </div>
+  );
+}
+
+/** A heading's `#`. Read by nobody; it is the one ornament on the page. */
+function Marker({ children }: { children: string }) {
+  return (
+    <span aria-hidden="true" className="mr-2 text-muted-foreground select-none">
+      {children}
+    </span>
+  );
+}
+
+export function H1({ children }: { children: ReactNode }) {
+  return (
+    <h1 className={cn(TEXT, "font-semibold tracking-wide text-balance uppercase")}>
+      <Marker>#</Marker>
+      {children}
+    </h1>
+  );
+}
+
+export function H2({ id, children }: { id?: string; children: ReactNode }) {
+  return (
+    <h2
+      id={id}
+      className={cn(TEXT, "mt-12 scroll-mt-8 font-semibold tracking-wide text-balance uppercase")}
+    >
+      <Marker>##</Marker>
+      {children}
+    </h2>
+  );
+}
+
+export function H3({ id, children }: { id?: string; children: ReactNode }) {
+  return (
+    <h3 id={id} className={cn(TEXT, "mt-8 scroll-mt-8 font-semibold tracking-wide text-balance")}>
+      <Marker>###</Marker>
+      {children}
+    </h3>
+  );
+}
+
+export function P({ children, muted }: { children: ReactNode; muted?: boolean }) {
+  return (
+    <p className={cn(TEXT, "mt-5 max-w-[68ch] text-pretty", muted && "text-muted-foreground")}>
+      {children}
+    </p>
+  );
+}
+
+/** `*` list. Children are `<li>`. The marker hangs in the gutter. */
+export function Ul({ children }: { children: ReactNode }) {
+  return (
+    <ul
+      className={cn(
+        TEXT,
+        "mt-5 max-w-[68ch] list-['*'] pl-5 text-pretty marker:text-muted-foreground [&>li]:mt-2 [&>li]:pl-1",
+      )}
+    >
+      {children}
+    </ul>
+  );
+}
+
+/** `1.` list. Children are `<li>`. */
+export function Ol({ children }: { children: ReactNode }) {
+  return (
+    <ol
+      className={cn(
+        TEXT,
+        "mt-5 max-w-[68ch] list-decimal pl-6 text-pretty tabular-nums marker:text-muted-foreground [&>li]:mt-2 [&>li]:pl-1",
+      )}
+    >
+      {children}
+    </ol>
+  );
+}
+
+const LINK_CLASS = "underline underline-offset-4 hover:text-primary";
+
+/**
+ * Every link on the site.
+ *
+ * An app-relative href routes through TanStack's `Link`, so moving between
+ * pages does not reload the document and lose the router. Everything else
+ * (http, mailto, and any other scheme) is a plain anchor, and anything
+ * off-site opens in its own tab.
+ */
+export function A({ href, children }: { href: string; children: ReactNode }) {
+  if (href.startsWith("/")) {
+    return (
+      <Link to={href} className={LINK_CLASS}>
+        {children}
+      </Link>
+    );
+  }
+  const external = href.startsWith("http");
+  return (
+    <a
+      href={href}
+      {...(external ? { target: "_blank", rel: "noreferrer" } : {})}
+      className={LINK_CLASS}
+    >
+      {children}
+    </a>
+  );
+}
+
+export function Code({ children }: { children: ReactNode }) {
+  return <code className="bg-foreground/8 px-1 py-0.5">{children}</code>;
+}
+
+export function Kbd({ children }: { children: ReactNode }) {
+  return <kbd className="bg-foreground/8 px-1 py-0.5">{children}</kbd>;
+}
+
+/**
+ * A block of text as typed.
+ *
+ * `label` is read to a screen reader in place of the block, for a diagram
+ * drawn in box characters, which is a picture to a reader who cannot see it.
+ */
+export function Pre({
+  children,
+  label,
+  className,
+}: {
+  children: ReactNode;
+  label?: string;
+  className?: string;
+}) {
+  return (
+    <pre
+      // A labelled block is a picture drawn in box characters, so it takes
+      // the image role and is announced as its label rather than read out
+      // one rule character at a time.
+      {...(label ? { role: "img" as const, "aria-label": label } : {})}
+      className={cn(
+        "mt-5 overflow-x-auto border border-border p-4 text-sm/6 whitespace-pre",
+        className,
+      )}
+    >
+      {children}
+    </pre>
+  );
+}
+
+/** A transcript. Lines beginning with `$` are prompts; the rest is output. */
+export function Shell({ lines }: { lines: string[] }) {
+  return (
+    <Pre>
+      {lines.map((line, i) => (
+        // Lines repeat in a transcript (blank ones, at least), so the index
+        // is the only key that is honest.
+        // biome-ignore lint/suspicious/noArrayIndexKey: transcript lines are not unique
+        <span key={i} className="block" {...(line === "" ? { "aria-hidden": true } : {})}>
+          {line === "" ? (
+            // An empty block has no height, so a blank line in the transcript
+            // would vanish. A space under `whitespace-pre` keeps the line, and
+            // the row is hidden from assistive tech so it is not announced as
+            // a spoken space.
+            " "
+          ) : line.startsWith("$") ? (
+            <>
+              <span className="text-primary">$</span>
+              {line.slice(1)}
+            </>
+          ) : (
+            <span className="text-muted-foreground">{line}</span>
+          )}
+        </span>
+      ))}
+    </Pre>
+  );
+}
+
+/** Two columns, key and value. A real table so it reflows and reads aloud. */
+export function Table({ rows }: { rows: [string, ReactNode][] }) {
+  return (
+    <table className={cn(TEXT, "mt-5 w-full border-collapse")}>
+      <tbody>
+        {rows.map(([k, v]) => (
+          <tr key={k} className="border-t border-border last:border-b">
+            <th
+              scope="row"
+              className="w-44 py-1.5 pr-4 text-left align-top font-normal whitespace-nowrap text-muted-foreground"
+            >
+              {k}
+            </th>
+            <td className="py-1.5 align-top">{v}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+/** `---`. A section boundary, and the only one the page draws. */
+export function Rule() {
+  return (
+    <p aria-hidden="true" className={cn(TEXT, "mt-12 text-muted-foreground select-none")}>
+      ---
+    </p>
+  );
+}
+
+/** `-> Somewhere`. A link that stands on its own line. */
+export function Arrow({ href, children }: { href: string; children: ReactNode }) {
+  return (
+    <p className={cn(TEXT, "mt-5")}>
+      <span aria-hidden="true" className="mr-2 text-muted-foreground">
+        &rarr;
+      </span>
+      <A href={href}>{children}</A>
+    </p>
+  );
+}
+
+/** A point worth pulling out of the flow, without being a warning. */
+export function Note({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <blockquote className="mt-5 max-w-[68ch] border-l-2 border-border pl-4">
+      <p className={cn(TEXT, "font-semibold")}>{title}</p>
+      {children}
+    </blockquote>
+  );
+}
diff --git a/packages/web/src/components/release-list.tsx b/packages/web/src/components/release-list.tsx
index dfdf0c9..8ff332f 100644
--- a/packages/web/src/components/release-list.tsx
+++ b/packages/web/src/components/release-list.tsx
@@ -1,17 +1,12 @@
 import type { ReactNode } from "react";
+import { H2, TEXT } from "@/components/md";
 import { CHANGELOGS, type ChangeType, type PackageKey } from "@/lib/changelog";
 import { cn } from "@/lib/utils";
 
 const TYPE_LABELS: Record<ChangeType, string> = {
-  major: "Major",
-  minor: "Minor",
-  patch: "Patch",
-};
-
-const TYPE_STYLES: Record<ChangeType, string> = {
-  major: "bg-amber-500/10 text-amber-700 dark:text-amber-400",
-  minor: "bg-primary/10 text-primary",
-  patch: "bg-foreground/5 text-muted-foreground",
+  major: "major",
+  minor: "minor",
+  patch: "patch",
 };
 
 /** Renders `code` spans in a changelog entry as inline code. */
@@ -21,75 +16,59 @@ function InlineCode({ text }: { text: string }) {
   return parts.map((part, i) =>
     i % 2 === 1 ? (
       // biome-ignore lint/suspicious/noArrayIndexKey: static text, order never changes
-      <code key={i}>{part}</code>
+      <code key={i} className="bg-foreground/8 px-1 py-0.5">
+        {part}
+      </code>
     ) : (
       part
     ),
   ) as ReactNode;
 }
 
+/**
+ * Releases as a document: a heading per version, and each change as a line
+ * that names its kind and its commit. No badges, no sticky rail.
+ */
 export function ReleaseList({ packageKey }: { packageKey: PackageKey }) {
   const { releases } = CHANGELOGS[packageKey];
 
   return (
-    <div className="divide-y divide-border">
-      {releases.map((release, releaseIndex) => {
-        const anchor = `${packageKey}-${release.version}`;
-        return (
-          <section
-            key={release.version}
-            className="grid gap-6 py-10 sm:grid-cols-[8rem_1fr] sm:gap-10 last:pb-0"
-          >
-            <div className="sm:sticky sm:top-24 sm:self-start">
-              <h2 id={anchor} className="scroll-mt-20 font-mono text-xl font-semibold">
-                <a href={`#${anchor}`} className="hover:underline">
-                  v{release.version}
-                </a>
-              </h2>
-              {releaseIndex === 0 && (
-                <p className="mt-2">
-                  <span className="rounded-full bg-primary/10 px-2.5 py-1 text-sm font-medium text-primary sm:px-2 sm:py-0.5 sm:text-xs">
-                    Latest
-                  </span>
-                </p>
-              )}
-            </div>
-            {/* biome-ignore lint/a11y/noRedundantRoles: preflight strips list styling, so Safari/VoiceOver need the explicit role */}
-            <ul role="list" className="flex flex-col gap-8">
-              {release.changes.map((change, changeIndex) => (
-                // biome-ignore lint/suspicious/noArrayIndexKey: entries are static per release
-                <li key={changeIndex} className="flex flex-col gap-2">
-                  <div className="flex items-center gap-3">
-                    <span
-                      className={cn(
-                        "rounded-full px-2.5 py-1 text-sm font-medium sm:px-2 sm:py-0.5 sm:text-xs",
-                        TYPE_STYLES[change.type],
-                      )}
+    <>
+      {releases.map((release, releaseIndex) => (
+        <section key={release.version}>
+          <H2 id={`${packageKey}-${release.version}`}>
+            v{release.version}
+            {releaseIndex === 0 && <span className="ml-2 text-muted-foreground">(latest)</span>}
+          </H2>
+          {release.changes.map((change, changeIndex) => (
+            <div
+              // biome-ignore lint/suspicious/noArrayIndexKey: entries are static per release
+              key={changeIndex}
+              className={cn(TEXT, "mt-5 max-w-[68ch]")}
+            >
+              <p className="text-muted-foreground">
+                {TYPE_LABELS[change.type]}
+                {change.commit && (
+                  <>
+                    {" · "}
+                    <a
+                      href={`https://github.com/karnstack/reins/commit/${change.commit}`}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="underline underline-offset-4 hover:text-primary"
                     >
-                      {TYPE_LABELS[change.type]}
-                    </span>
-                    {change.commit && (
-                      <a
-                        href={`https://github.com/karnstack/reins/commit/${change.commit}`}
-                        target="_blank"
-                        rel="noreferrer"
-                        className="font-mono text-sm text-muted-foreground hover:text-foreground sm:text-xs"
-                      >
-                        {change.commit}
-                      </a>
-                    )}
-                  </div>
-                  <div className="prose max-w-[70ch]">
-                    <p>
-                      <InlineCode text={change.text} />
-                    </p>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </section>
-        );
-      })}
-    </div>
+                      {change.commit}
+                    </a>
+                  </>
+                )}
+              </p>
+              <p className="text-pretty">
+                <InlineCode text={change.text} />
+              </p>
+            </div>
+          ))}
+        </section>
+      ))}
+    </>
   );
 }
diff --git a/packages/web/src/components/reveal.tsx b/packages/web/src/components/reveal.tsx
deleted file mode 100644
index 4204881..0000000
--- a/packages/web/src/components/reveal.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { ReactNode } from "react";
-import { prefersReducedMotion, useInView } from "@/lib/motion";
-import { cn } from "@/lib/utils";
-
-/** Fades and rises its children into view on first scroll into the viewport. */
-export function Reveal({
-  children,
-  className,
-  delay = 0,
-}: {
-  children: ReactNode;
-  className?: string;
-  delay?: number;
-}) {
-  const { ref, inView } = useInView<HTMLDivElement>();
-  const shown = inView || prefersReducedMotion();
-
-  return (
-    <div
-      ref={ref}
-      style={delay > 0 ? { transitionDelay: `${delay}ms` } : undefined}
-      className={cn(
-        "transition-[opacity,translate] duration-700 ease-out",
-        shown ? "translate-y-0 opacity-100" : "translate-y-6 opacity-0",
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/packages/web/src/components/site-footer.tsx b/packages/web/src/components/site-footer.tsx
index f028e6c..d243ae0 100644
--- a/packages/web/src/components/site-footer.tsx
+++ b/packages/web/src/components/site-footer.tsx
@@ -1,156 +1,39 @@
-import { Link } from "@tanstack/react-router";
-import type { ReactNode } from "react";
-import { GitHubIcon, NpmIcon, XIcon } from "@/components/icons";
-import { Wordmark } from "@/components/logo";
-import { GITHUB_URL, NPM_URL, REPO_URL, X_URL } from "@/lib/site";
+import { A, Column, Rule, TEXT } from "@/components/md";
+import { NPM_URL, REPO_URL, X_URL } from "@/lib/site";
+import { cn } from "@/lib/utils";
 
-const COLUMNS: Array<{
-  title: string;
-  links: Array<{ label: string; to: string; external?: boolean }>;
-}> = [
-  {
-    title: "Product",
-    links: [
-      { label: "Overview", to: "/" },
-      { label: "Get started", to: "/docs" },
-      { label: "Changelog", to: "/changelog" },
-    ],
-  },
-  {
-    title: "Docs",
-    links: [
-      { label: "Commands", to: "/docs/commands" },
-      { label: "Site permissions", to: "/docs/permissions" },
-      { label: "Architecture", to: "/docs/architecture" },
-      { label: "FAQ", to: "/docs/faq" },
-    ],
-  },
-  {
-    title: "Project",
-    links: [
-      { label: "Security", to: "/docs/security" },
-      { label: "Privacy", to: "/privacy" },
-      { label: "GitHub", to: REPO_URL, external: true },
-      { label: "npm", to: NPM_URL, external: true },
-    ],
-  },
+const LINKS = [
+  { href: "/docs", label: "Docs" },
+  { href: "/docs/commands", label: "Commands" },
+  { href: "/docs/permissions", label: "Site permissions" },
+  { href: "/docs/security", label: "Security" },
+  { href: "/changelog", label: "Changelog" },
+  { href: "/privacy", label: "Privacy" },
+  { href: REPO_URL, label: "GitHub" },
+  { href: NPM_URL, label: "npm" },
 ];
 
-function FooterLink({
-  to,
-  external,
-  children,
-}: {
-  to: string;
-  external?: boolean;
-  children: ReactNode;
-}) {
-  const className = "text-sm font-normal text-muted-foreground hover:text-foreground";
-  if (external) {
-    return (
-      <a href={to} target="_blank" rel="noreferrer" className={className}>
-        {children}
-      </a>
-    );
-  }
-  return (
-    <Link to={to} className={className}>
-      {children}
-    </Link>
-  );
-}
-
-function SocialLink({
-  href,
-  label,
-  children,
-}: {
-  href: string;
-  label: string;
-  children: ReactNode;
-}) {
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-      aria-label={label}
-      className="relative inline-flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
-    >
-      {children}
-      <span
-        className="absolute top-1/2 left-1/2 size-[max(100%,3rem)] -translate-1/2 pointer-fine:hidden"
-        aria-hidden="true"
-      />
-    </a>
-  );
-}
-
 export function SiteFooter() {
   return (
-    <footer data-pagefind-ignore className="overflow-hidden border-t border-border">
-      <div className="mx-auto max-w-6xl px-4 pt-14 pb-8 sm:px-6 lg:px-8">
-        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-[1.6fr_1fr_1fr_1fr]">
-          <div className="max-w-xs">
-            <a href="/" aria-label="Homepage">
-              <Wordmark />
-            </a>
-            <p className="mt-4 text-sm text-pretty text-muted-foreground">
-              Drive the logged-in browser you already use, straight from your coding agent.
-            </p>
-            <div className="mt-5 -ml-2 flex items-center gap-1">
-              <SocialLink href={X_URL} label="Karn on X">
-                <XIcon className="size-4" />
-              </SocialLink>
-              <SocialLink href={GITHUB_URL} label="Karn on GitHub">
-                <GitHubIcon className="size-4" />
-              </SocialLink>
-              <SocialLink href={NPM_URL} label="reins on npm">
-                <NpmIcon className="size-4" />
-              </SocialLink>
-            </div>
-          </div>
-
-          {COLUMNS.map((col) => (
-            <div key={col.title}>
-              <p className="text-sm font-medium text-foreground">{col.title}</p>
-              {/* biome-ignore lint/a11y/noRedundantRoles: Tailwind Preflight sets list-style:none, which drops the implicit list role in Safari VoiceOver */}
-              <ul role="list" className="mt-3 space-y-2.5">
-                {col.links.map((link) => (
-                  <li key={link.label}>
-                    <FooterLink to={link.to} external={link.external}>
-                      {link.label}
-                    </FooterLink>
-                  </li>
-                ))}
-              </ul>
-            </div>
+    <footer data-pagefind-ignore>
+      <Column className="pb-16">
+        <Rule />
+        <p className={cn(TEXT, "mt-5 flex flex-wrap gap-x-2")}>
+          {LINKS.map((link, i) => (
+            <span key={link.href}>
+              {i > 0 && (
+                <span aria-hidden="true" className="mr-2 text-muted-foreground">
+                  |
+                </span>
+              )}
+              <A href={link.href}>{link.label}</A>
+            </span>
           ))}
-        </div>
-
-        {/* Oversized wordmark watermark — the footer's signature. */}
-        <div aria-hidden="true" className="mt-12 select-none">
-          <p className="font-display text-[clamp(3.5rem,18vw,11rem)] leading-none font-semibold tracking-tight text-foreground/[0.05]">
-            reins
-          </p>
-        </div>
-
-        <div className="mt-6 flex flex-col gap-3 border-t border-border pt-6 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
-          <p>
-            © 2026 reins · Built by{" "}
-            <a
-              href={X_URL}
-              target="_blank"
-              rel="noreferrer"
-              className="font-medium text-foreground hover:underline"
-            >
-              Karn
-            </a>{" "}
-            and AI agents.
-          </p>
-          <p>MIT licensed · open source.</p>
-        </div>
-      </div>
+        </p>
+        <p className={cn(TEXT, "mt-5 text-muted-foreground")}>
+          &copy; 2026 karnstack. MIT. Made by <A href={X_URL}>karn</A> and a few AI agents.
+        </p>
+      </Column>
     </footer>
   );
 }
diff --git a/packages/web/src/components/site-header.tsx b/packages/web/src/components/site-header.tsx
index de8188a..6a1695f 100644
--- a/packages/web/src/components/site-header.tsx
+++ b/packages/web/src/components/site-header.tsx
@@ -1,22 +1,18 @@
 import { Link } from "@tanstack/react-router";
-import { Menu, Search, Star } from "lucide-react";
+import { Search } from "lucide-react";
 import { useEffect, useState } from "react";
 import { CommandMenu } from "@/components/command-menu";
-import { GitHubIcon, NpmIcon, XIcon } from "@/components/icons";
-import { Wordmark } from "@/components/logo";
+import { GitHubIcon } from "@/components/icons";
+import { Column, TEXT } from "@/components/md";
 import { ThemeToggle } from "@/components/theme-toggle";
-import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
-import { HEADER_LINKS, NPM_URL, REPO_URL, X_URL } from "@/lib/site";
-import { formatStars, useGitHubStars } from "@/lib/use-github-stars";
-
-const MOBILE_LINKS = [
-  { to: "/docs", label: "Docs" },
-  { to: "/docs/commands", label: "Commands" },
-  { to: "/docs/permissions", label: "Permissions" },
-  { to: "/docs/architecture", label: "Architecture" },
-  { to: "/docs/security", label: "Security" },
-  { to: "/changelog", label: "Changelog" },
+import { REPO_URL } from "@/lib/site";
+import { cn } from "@/lib/utils";
+
+const NAV = [
+  { to: "/docs", label: "docs" },
+  { to: "/docs/commands", label: "commands" },
+  { to: "/docs/permissions", label: "permissions" },
+  { to: "/changelog", label: "changelog" },
 ] as const;
 
 function isTyping(target: EventTarget | null): boolean {
@@ -30,25 +26,9 @@ function isTyping(target: EventTarget | null): boolean {
   );
 }
 
-function StarChip() {
-  const stars = useGitHubStars();
-  return (
-    <a
-      href={REPO_URL}
-      target="_blank"
-      rel="noreferrer"
-      className="hidden h-8 items-center gap-1.5 rounded-md border border-border px-2.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground lg:inline-flex"
-    >
-      <GitHubIcon className="size-4 shrink-0" />
-      <span className="tabular-nums">{stars != null ? formatStars(stars) : "Star"}</span>
-      <Star className="size-3.5 shrink-0 fill-current" aria-hidden="true" />
-    </a>
-  );
-}
-
+/** One line at the top. Not sticky: a document does not follow you down. */
 export function SiteHeader() {
   const [cmdkOpen, setCmdkOpen] = useState(false);
-  const [mobileOpen, setMobileOpen] = useState(false);
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -66,145 +46,50 @@ export function SiteHeader() {
     return () => window.removeEventListener("keydown", onKey);
   }, []);
 
-  const openSearch = () => setCmdkOpen(true);
-
   return (
-    <header
-      data-pagefind-ignore
-      className="sticky top-0 z-40 border-b border-border bg-background/75 backdrop-blur-md"
-    >
-      <div className="mx-auto flex h-16 max-w-6xl items-center gap-4 px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center gap-8">
-          <a href="/" aria-label="Homepage">
-            <Wordmark />
-          </a>
-          <nav className="flex items-center gap-6 max-lg:hidden">
-            {HEADER_LINKS.map((link) => (
-              <Link
-                key={link.to}
-                to={link.to}
-                className="text-sm text-muted-foreground hover:text-foreground"
-                activeProps={{ className: "text-foreground" }}
-                activeOptions={{ exact: link.to === "/docs" }}
-              >
-                {link.label}
-              </Link>
-            ))}
-          </nav>
-        </div>
-
-        <div className="flex flex-1 items-center justify-end gap-2">
-          {/* Full search pill on the widest screens */}
+    <header data-pagefind-ignore>
+      <Column className={cn(TEXT, "flex flex-wrap items-center gap-x-4 gap-y-2 py-6")}>
+        <a href="/" aria-label="Homepage" className="font-semibold tracking-wide uppercase">
+          reins
+        </a>
+        {/* Below `sm` the nav drops to its own line under the wordmark and the
+            icons, rather than splitting the four across four lines. */}
+        <nav className="flex flex-wrap items-center gap-x-3 max-sm:order-last max-sm:basis-full">
+          {NAV.map((item) => (
+            <Link
+              key={item.to}
+              to={item.to}
+              className="text-muted-foreground hover:text-foreground"
+              activeProps={{ className: "text-foreground" }}
+              activeOptions={{ exact: item.to === "/docs" }}
+            >
+              <span aria-hidden="true">[ </span>
+              {item.label}
+              <span aria-hidden="true"> ]</span>
+            </Link>
+          ))}
+        </nav>
+        <div className="ml-auto flex items-center gap-1">
           <button
             type="button"
-            onClick={openSearch}
-            className="hidden h-8 w-44 items-center gap-2 rounded-md border border-border bg-foreground/2 pr-1.5 pl-2.5 text-sm text-muted-foreground hover:bg-foreground/5 xl:flex"
+            onClick={() => setCmdkOpen(true)}
+            aria-label="Search"
+            className="inline-flex size-8 items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
           >
             <Search className="size-4 shrink-0" aria-hidden="true" />
-            <span className="flex-1 text-left">Search</span>
-            <kbd className="rounded border border-border bg-background px-1.5 py-px font-mono text-[0.6875rem]/4 text-muted-foreground">
-              ⌘K
-            </kbd>
           </button>
-          {/* Compact search icon below xl (incl. mobile) */}
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label="Search"
-            type="button"
-            onClick={openSearch}
-            className="xl:hidden"
-          >
-            <Search className="size-4.5" aria-hidden="true" />
-          </Button>
-
-          <StarChip />
           <ThemeToggle />
-
-          <Button asChild size="sm" className="max-sm:hidden">
-            <Link to="/docs">Get started</Link>
-          </Button>
-
-          {/* Mobile menu */}
-          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
-            <SheetTrigger asChild>
-              <Button variant="ghost" size="icon" aria-label="Open menu" className="lg:hidden">
-                <Menu className="size-5" aria-hidden="true" />
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="right" className="w-80 gap-0 p-6">
-              <SheetTitle className="sr-only">Menu</SheetTitle>
-              <a href="/" aria-label="Homepage" onClick={() => setMobileOpen(false)}>
-                <Wordmark />
-              </a>
-
-              <button
-                type="button"
-                onClick={() => {
-                  setMobileOpen(false);
-                  setCmdkOpen(true);
-                }}
-                className="mt-6 flex h-11 items-center gap-2 rounded-lg border border-border bg-foreground/2 px-3 text-base text-muted-foreground hover:bg-foreground/5"
-              >
-                <Search className="size-4 shrink-0" aria-hidden="true" />
-                Search docs
-              </button>
-
-              <nav className="mt-6 flex flex-col">
-                {MOBILE_LINKS.map((link) => (
-                  <Link
-                    key={link.to}
-                    to={link.to}
-                    onClick={() => setMobileOpen(false)}
-                    className="-mx-2 rounded-md px-2 py-2.5 text-base text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
-                    activeProps={{ className: "text-foreground" }}
-                    activeOptions={{ exact: link.to === "/docs" }}
-                  >
-                    {link.label}
-                  </Link>
-                ))}
-              </nav>
-
-              <Button asChild size="lg" className="mt-6">
-                <Link to="/docs" onClick={() => setMobileOpen(false)}>
-                  Get started
-                </Link>
-              </Button>
-
-              <div className="mt-6 flex items-center gap-1 border-t border-border pt-6">
-                <a
-                  href={REPO_URL}
-                  target="_blank"
-                  rel="noreferrer"
-                  aria-label="GitHub repository"
-                  className="inline-flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
-                >
-                  <GitHubIcon className="size-4.5" />
-                </a>
-                <a
-                  href={NPM_URL}
-                  target="_blank"
-                  rel="noreferrer"
-                  aria-label="npm package"
-                  className="inline-flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
-                >
-                  <NpmIcon className="size-4.5" />
-                </a>
-                <a
-                  href={X_URL}
-                  target="_blank"
-                  rel="noreferrer"
-                  aria-label="Karn on X"
-                  className="inline-flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
-                >
-                  <XIcon className="size-4.5" />
-                </a>
-              </div>
-            </SheetContent>
-          </Sheet>
+          <a
+            href={REPO_URL}
+            target="_blank"
+            rel="noreferrer"
+            aria-label="GitHub repository"
+            className="inline-flex size-8 items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          >
+            <GitHubIcon className="size-4 shrink-0" />
+          </a>
         </div>
-      </div>
-
+      </Column>
       <CommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen} />
     </header>
   );
diff --git a/packages/web/src/components/terminal.tsx b/packages/web/src/components/terminal.tsx
deleted file mode 100644
index 6ab3b44..0000000
--- a/packages/web/src/components/terminal.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { ReactNode } from "react";
-import { cn } from "@/lib/utils";
-
-export function Terminal({
-  title,
-  children,
-  className,
-}: {
-  title: string;
-  children: ReactNode;
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn(
-        "overflow-hidden rounded-xl bg-neutral-950 shadow-xl ring-1 ring-black/10 dark:bg-neutral-900 dark:shadow-none dark:ring-white/10",
-        className,
-      )}
-    >
-      <div className="flex items-center gap-2 border-b border-white/10 px-4 py-3">
-        <span aria-hidden="true" className="size-2.5 rounded-full bg-[#ff5f57]" />
-        <span aria-hidden="true" className="size-2.5 rounded-full bg-[#febc2e]" />
-        <span aria-hidden="true" className="size-2.5 rounded-full bg-[#28c840]" />
-        <p className="ml-2 font-mono text-xs text-neutral-500">{title}</p>
-      </div>
-      <div className="overflow-x-auto p-4 font-mono text-[0.8125rem]/6 whitespace-pre text-neutral-300">
-        {children}
-      </div>
-    </div>
-  );
-}
-
-export function Prompt({ children }: { children: ReactNode }) {
-  return (
-    <div>
-      <span className="text-violet-400">$ </span>
-      <span className="text-white">{children}</span>
-    </div>
-  );
-}
-
-export function Output({ children }: { children: ReactNode }) {
-  return <div className="text-neutral-400">{children}</div>;
-}
diff --git a/packages/web/src/components/theme-toggle.tsx b/packages/web/src/components/theme-toggle.tsx
index 558b99f..1778164 100644
--- a/packages/web/src/components/theme-toggle.tsx
+++ b/packages/web/src/components/theme-toggle.tsx
@@ -1,6 +1,5 @@
 import { Moon, Sun } from "lucide-react";
 import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
 
 /* "system" until the visitor picks explicitly; toggling always lands on an
    explicit light/dark, which is what gets persisted. */
@@ -63,17 +62,17 @@ export function ThemeToggle() {
   }, [isDark]);
 
   return (
-    <Button
-      variant="ghost"
-      size="icon"
+    <button
+      type="button"
       aria-label={
         mounted ? (isDark ? "Switch to light theme" : "Switch to dark theme") : "Toggle theme"
       }
       title="Toggle theme (D)"
       onClick={() => setTheme(isDark ? "light" : "dark")}
+      className="inline-flex size-8 items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
     >
-      <Sun className="size-4.5 dark:hidden" aria-hidden="true" />
-      <Moon className="hidden size-4.5 dark:block" aria-hidden="true" />
-    </Button>
+      <Sun className="size-4 shrink-0 dark:hidden" aria-hidden="true" />
+      <Moon className="hidden size-4 shrink-0 dark:block" aria-hidden="true" />
+    </button>
   );
 }
diff --git a/packages/web/src/components/ui/accordion.tsx b/packages/web/src/components/ui/accordion.tsx
deleted file mode 100644
index a3102aa..0000000
--- a/packages/web/src/components/ui/accordion.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-"use client";
-
-import { ChevronDownIcon } from "lucide-react";
-import { Accordion as AccordionPrimitive } from "radix-ui";
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  );
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  );
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  );
-}
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
diff --git a/packages/web/src/lib/dom-to-markdown.ts b/packages/web/src/lib/dom-to-markdown.ts
index 03f8ef1..5b0a16b 100644
--- a/packages/web/src/lib/dom-to-markdown.ts
+++ b/packages/web/src/lib/dom-to-markdown.ts
@@ -14,6 +14,10 @@ function escapeCell(text: string): string {
 function inline(node: Node): string {
   if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? "";
   if (!(node instanceof HTMLElement)) return "";
+  /* Decoration, not content: the `#` before a heading and the brackets around
+     a nav link are drawn for the eye and are already implied by the markdown
+     this produces. Without this, an H2 serializes as "## ## Commands". */
+  if (node.getAttribute("aria-hidden") === "true") return "";
   const kids = () => Array.from(node.childNodes).map(inline).join("");
   switch (node.tagName) {
     case "BUTTON":
diff --git a/packages/web/src/lib/highlight.ts b/packages/web/src/lib/highlight.ts
deleted file mode 100644
index 87803a4..0000000
--- a/packages/web/src/lib/highlight.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { createHighlighterCoreSync } from "shiki/core";
-import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
-import shellscript from "shiki/langs/shellscript.mjs";
-import githubDarkDefault from "shiki/themes/github-dark-default.mjs";
-
-// Sync core + JS regex engine keeps the highlighter usable during SSR render
-// and hydration without async setup, and avoids shipping the wasm engine.
-const highlighter = createHighlighterCoreSync({
-  themes: [githubDarkDefault],
-  langs: [shellscript],
-  engine: createJavaScriptRegexEngine({ forgiving: true }),
-});
-
-export function highlightShell(code: string): string {
-  return highlighter.codeToHtml(code, {
-    lang: "shellscript",
-    theme: "github-dark-default",
-    // Code blocks keep the dark surface in both themes; the github-dark
-    // token colors assume it, so pin the bg rather than letting the page
-    // show through.
-    colorReplacements: { "#0d1117": "oklch(0.205 0 0)" },
-  });
-}
diff --git a/packages/web/src/routes/__root.tsx b/packages/web/src/routes/__root.tsx
index c6206fd..e823d5f 100644
--- a/packages/web/src/routes/__root.tsx
+++ b/packages/web/src/routes/__root.tsx
@@ -24,7 +24,7 @@ export const Route = createRootRoute({
       { property: "og:image:height", content: "630" },
       {
         property: "og:image:alt",
-        content: "reins — drive your real browser from your coding agent",
+        content: "reins: drive your real browser from your coding agent",
       },
       { name: "twitter:card", content: "summary_large_image" },
       { name: "theme-color", media: "(prefers-color-scheme: light)", content: "#ffffff" },
@@ -53,7 +53,7 @@ function RootDocument({ children }: { children: ReactNode }) {
         {/* biome-ignore lint/security/noDangerouslySetInnerHtml: static theme bootstrap */}
         <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
       </head>
-      <body className="bg-background font-sans text-foreground">
+      <body className="bg-background font-mono text-foreground">
         <div className="isolate">{children}</div>
         <Scripts />
       </body>
diff --git a/packages/web/src/routes/changelog/route.tsx b/packages/web/src/routes/changelog/route.tsx
index 06e6c4f..3697062 100644
--- a/packages/web/src/routes/changelog/route.tsx
+++ b/packages/web/src/routes/changelog/route.tsx
@@ -1,4 +1,5 @@
 import { createFileRoute, Link, Outlet, useLocation } from "@tanstack/react-router";
+import { A, Column, H1, P, TEXT } from "@/components/md";
 import { SiteFooter } from "@/components/site-footer";
 import { SiteHeader } from "@/components/site-header";
 import { CHANGELOGS, type PackageKey } from "@/lib/changelog";
@@ -21,41 +22,47 @@ function ChangelogLayout() {
   return (
     <>
       <SiteHeader />
-      <main className="mx-auto min-h-dvh max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
-        <h1 className="text-3xl font-semibold tracking-tight text-pretty">Changelog</h1>
-        <p className="mt-3 max-w-[56ch] text-base/7 text-pretty text-muted-foreground">
-          Release notes for the reins CLI and Chrome extension, straight from each package's
-          changelog.
-        </p>
+      <main>
+        <Column className="py-10">
+          <p className={TEXT}>
+            <A href="/">&larr; reins.tech</A>
+          </p>
+          <div className="mt-10">
+            <H1>Changelog</H1>
+          </div>
+          <P>
+            Release notes for the reins CLI and the Chrome extension, straight from each package's
+            changelog.
+          </P>
 
-        <div className="mt-10 flex items-end justify-between gap-4 border-b border-border">
-          <nav className="-mb-px flex gap-6">
+          <p className={cn(TEXT, "mt-5 flex flex-wrap items-center gap-x-3")}>
             {TABS.map((tab) => (
               <Link
                 key={tab.key}
                 to={tab.to}
-                className={cn(
-                  "border-b-2 pb-3 text-base sm:text-sm",
+                className={
                   tab.key === activeKey
-                    ? "border-primary text-foreground"
-                    : "border-transparent text-muted-foreground hover:text-foreground",
-                )}
+                    ? "text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                }
               >
+                <span aria-hidden="true">[ </span>
                 {CHANGELOGS[tab.key].label}
+                <span aria-hidden="true"> ]</span>
               </Link>
             ))}
-          </nav>
-          <a
-            href={changelog.distribution.href}
-            target="_blank"
-            rel="noreferrer"
-            className="pb-3 font-mono text-xs text-muted-foreground hover:text-foreground max-sm:hidden"
-          >
-            {changelog.packageName}
-          </a>
-        </div>
+            <a
+              href={changelog.distribution.href}
+              target="_blank"
+              rel="noreferrer"
+              className="ml-auto text-muted-foreground hover:text-foreground"
+            >
+              {changelog.packageName}
+            </a>
+          </p>
 
-        <Outlet />
+          <Outlet />
+        </Column>
       </main>
       <SiteFooter />
     </>
diff --git a/packages/web/src/routes/docs/architecture.tsx b/packages/web/src/routes/docs/architecture.tsx
index e28b3b0..842e749 100644
--- a/packages/web/src/routes/docs/architecture.tsx
+++ b/packages/web/src/routes/docs/architecture.tsx
@@ -1,5 +1,5 @@
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { Fragment } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { Arrow, Code, H1, H2, P, Pre } from "@/components/md";
 import { seo } from "@/lib/seo";
 
 export const Route = createFileRoute("/docs/architecture")({
@@ -7,121 +7,85 @@ export const Route = createFileRoute("/docs/architecture")({
     ...seo({
       title: "Architecture · reins",
       description:
-        "How the reins CLI, local daemon, and Chrome extension fit together — one WebSocket on 127.0.0.1, no cloud, nothing to keep running.",
+        "How the reins CLI, local daemon, and Chrome extension fit together: one WebSocket on 127.0.0.1, no cloud, nothing to keep running.",
       path: "/docs/architecture",
     }),
   }),
   component: ArchitecturePage,
 });
 
-const FLOW: Array<{ name: string; detail: string; via?: string }> = [
-  {
-    name: "Your agent",
-    detail: "Claude Code, Cursor, Codex, anything with a shell",
-  },
-  {
-    via: "shells out",
-    name: "reins CLI",
-    detail: "@karnstack/reins",
-  },
-  {
-    via: "HTTP /rpc · 127.0.0.1 · auto-spawned",
-    name: "reins daemon",
-    detail: "one per machine, serves every browser",
-  },
-  {
-    via: "WebSocket · allowlisted chrome-extension:// origins",
-    name: "reins extension",
-    detail: "MV3; an offscreen document holds the socket",
-  },
-  {
-    via: "chrome.debugger · Chrome DevTools Protocol",
-    name: "Your tabs",
-    detail: "Chrome, Brave, Edge, Arc, Dia",
-  },
-];
+const FLOW = `your agent          Claude Code, Cursor, Codex, anything with a shell
+     │              shells out
+     ▼
+reins CLI           @karnstack/reins
+     │              HTTP /rpc · 127.0.0.1 · daemon auto-spawned
+     ▼
+reins daemon        one per machine, serves every browser
+     │              WebSocket · allowlisted chrome-extension:// origins
+     ▼
+reins extension     MV3; an offscreen document holds the socket
+     │              chrome.debugger · Chrome DevTools Protocol
+     ▼
+your tabs           Chrome, Brave, Edge, Arc, Dia`;
 
-function ArchitectureDiagram() {
-  return (
-    <div className="rounded-xl border border-border p-4 sm:p-6">
-      {FLOW.map((step) => (
-        <Fragment key={step.name}>
-          {step.via ? (
-            <div className="flex items-center gap-3 py-1.5 pl-6">
-              <span
-                aria-hidden="true"
-                className="relative h-8 w-px bg-violet-600/40 dark:bg-violet-400/40"
-              >
-                <span className="absolute -bottom-px left-1/2 size-1.5 -translate-x-1/2 rotate-45 border-r border-b border-violet-600/70 dark:border-violet-400/70" />
-              </span>
-              <p className="font-mono text-xs text-muted-foreground">{step.via}</p>
-            </div>
-          ) : null}
-          <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 rounded-lg border border-border bg-foreground/2 px-4 py-3">
-            <p className="text-base font-medium sm:text-sm">{step.name}</p>
-            <p className="text-sm text-muted-foreground">{step.detail}</p>
-          </div>
-        </Fragment>
-      ))}
-    </div>
-  );
-}
+const FLOW_LABEL =
+  "Your agent shells out to the reins CLI. The CLI speaks HTTP to a daemon on 127.0.0.1, which it spawns on demand. The daemon holds a WebSocket open to the Manifest V3 extension, accepted only from allowlisted chrome-extension:// origins. The extension drives your tabs through chrome.debugger, the Chrome DevTools Protocol.";
 
 function ArchitecturePage() {
   return (
-    <article className="prose max-w-[70ch]">
-      <h1>Architecture</h1>
-      <p>
+    <>
+      <H1>Architecture</H1>
+      <P>
         reins is three small pieces with one narrow contract between them. Everything runs on your
-        machine, and everything binds <code>127.0.0.1</code>.
-      </p>
-      <ArchitectureDiagram />
+        machine, and everything binds <Code>127.0.0.1</Code>.
+      </P>
+      <Pre label={FLOW_LABEL}>{FLOW}</Pre>
 
-      <h2>The CLI</h2>
-      <p>
-        The CLI is the entire interface: <code>reins tabs</code>, <code>reins click</code>,{" "}
-        <code>reins screenshot</code>, and the rest of the{" "}
-        <Link to="/docs/commands">command set</Link>. Agents use it because they already have a
-        shell: no MCP server to register, no per-agent setup. A skill (
-        <code>npx skills add karnstack/reins</code>) teaches agents the loop.
-      </p>
+      <H2 id="cli">The CLI</H2>
+      <P>
+        The CLI is the entire interface: <Code>reins tabs</Code>, <Code>reins click</Code>,{" "}
+        <Code>reins screenshot</Code> and the rest of the command set. Agents use it because they
+        already have a shell: no MCP server to register, no per-agent setup. A skill (
+        <Code>npx skills add karnstack/reins</Code>) teaches agents the loop.
+      </P>
 
-      <h2>The daemon</h2>
-      <p>
-        The daemon is invisible plumbing. Any CLI command spawns it on demand; it exposes an HTTP{" "}
-        <code>/rpc</code> endpoint for the CLI and holds the WebSocket that extensions dial into.
-        One daemon serves any number of browsers. <code>reins kill</code> stops it, and logs live in{" "}
-        <code>~/.reins/logs/</code>.
-      </p>
+      <H2 id="daemon">The daemon</H2>
+      <P>
+        You never run the daemon yourself. Any CLI command spawns it on demand. It exposes an HTTP{" "}
+        <Code>/rpc</Code> endpoint for the CLI and holds the WebSocket that extensions dial into.
+        One daemon serves any number of browsers. <Code>reins kill</Code> stops it, and logs live in{" "}
+        <Code>~/.reins/logs/</Code>.
+      </P>
 
-      <h2>The extension</h2>
-      <p>
+      <H2 id="extension">The extension</H2>
+      <P>
         A Manifest V3 extension. Its service worker executes commands against tabs through{" "}
-        <code>chrome.debugger</code> (the Chrome DevTools Protocol), and an offscreen document holds
+        <Code>chrome.debugger</Code> (the Chrome DevTools Protocol), and an offscreen document holds
         the persistent WebSocket to the daemon, because MV3 service workers are suspended when idle
-        and can't keep long-lived sockets.
-      </p>
-      <p>
-        The extension discovers the daemon by probing a small set of candidate localhost ports and
-        authenticates itself by its <code>chrome-extension://&lt;id&gt;</code> origin, a header the
+        and cannot keep long-lived sockets.
+      </P>
+      <P>
+        The extension discovers the daemon by probing a small set of candidate localhost ports, and
+        authenticates itself by its <Code>chrome-extension://&lt;id&gt;</Code> origin, a header the
         browser stamps itself, which web pages and other extensions cannot forge.
-      </p>
+      </P>
 
-      <h2>Multiple browsers</h2>
-      <p>
+      <H2 id="multiple-browsers">Multiple browsers</H2>
+      <P>
         Install the extension in several Chromium browsers (Chrome, Brave, Edge, Arc, Dia) and each
-        connects to the same daemon. <code>reins tabs</code> lists every tab with a browser id; pass{" "}
-        <code>--browser &lt;id&gt;</code> only when more than one browser is connected. reins never
-        guesses which browser you meant.
-      </p>
+        connects to the same daemon. <Code>reins tabs</Code> lists every tab with a browser id. Pass{" "}
+        <Code>--browser &lt;id&gt;</Code> only when more than one browser is connected. reins never
+        guesses which browser you meant: it errors and names the ones it can see.
+      </P>
 
-      <h2>Element refs</h2>
-      <p>
-        <code>reins snapshot</code> assigns stable refs (<code>e5: button "Submit"</code>) to
-        interactive elements. Commands act by ref, which survives page repaints better than
-        hand-written selectors, and a CSS <code>--selector</code> fallback exists for everything
+      <H2 id="refs">Element refs</H2>
+      <P>
+        <Code>reins snapshot</Code> assigns stable refs (<Code>e5: button "Submit"</Code>) to
+        interactive elements. Commands act by ref, which survives page repaints better than a
+        hand-written selector, and a CSS <Code>--selector</Code> fallback exists for everything
         else.
-      </p>
-    </article>
+      </P>
+      <Arrow href="/docs/commands">Full command reference</Arrow>
+    </>
   );
 }
diff --git a/packages/web/src/routes/docs/commands.tsx b/packages/web/src/routes/docs/commands.tsx
index 17df028..964818d 100644
--- a/packages/web/src/routes/docs/commands.tsx
+++ b/packages/web/src/routes/docs/commands.tsx
@@ -1,7 +1,8 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { Fragment } from "react";
-import { CodeBlock } from "@/components/code-block";
+import { Code, H1, H2, P, TEXT } from "@/components/md";
 import { seo } from "@/lib/seo";
+import { cn } from "@/lib/utils";
 
 export const Route = createFileRoute("/docs/commands")({
   head: () => ({
@@ -15,181 +16,181 @@ export const Route = createFileRoute("/docs/commands")({
   component: CommandsPage,
 });
 
-interface Command {
-  usage: string;
-  summary: string;
-}
-
-const GROUPS: Array<{ title: string; intro?: string; commands: Command[] }> = [
+/** Every group is a heading and a table: the usage, and what it does. */
+const GROUPS: Array<{ id: string; title: string; intro?: string; rows: [string, string][] }> = [
   {
-    title: "Tabs & pages",
-    commands: [
-      { usage: "reins tabs [--browser <id>]", summary: "List tabs across all connected browsers." },
-      { usage: "reins open <url> [--background]", summary: "Open a new tab." },
-      { usage: "reins close --tab <id>", summary: "Close a tab." },
-      { usage: "reins focus --tab <id>", summary: "Focus (activate) a tab." },
-      { usage: "reins nav <url|back|forward|reload> [--tab <id>]", summary: "Navigate a tab." },
+    id: "tabs",
+    title: "Tabs and pages",
+    rows: [
+      ["reins tabs [--browser <id>]", "List tabs across all connected browsers."],
+      ["reins open <url> [--background]", "Open a new tab."],
+      ["reins close --tab <id>", "Close a tab."],
+      ["reins focus --tab <id>", "Focus (activate) a tab."],
+      ["reins nav <url|back|forward|reload> [--tab <id>]", "Navigate a tab."],
     ],
   },
   {
+    id: "interaction",
     title: "Interaction",
     intro: "Interaction commands address elements by ref (from reins snapshot) or by CSS selector.",
-    commands: [
-      {
-        usage: "reins snapshot [--tab <id>] [--max-chars <n>]",
-        summary: "List interactive elements with refs; the refs feed click, type, and friends.",
-      },
-      {
-        usage: "reins click (--ref <e#> | --selector <css>) [--button right|middle] [--count 2]",
-        summary: "Click an element.",
-      },
-      {
-        usage: 'reins type (--ref <e#> | --selector <css>) --text "…" [--enter]',
-        summary: "Type into an element; --enter presses Enter afterwards.",
-      },
-      {
-        usage: 'reins fill (--ref <e#> | --selector <css>) --value "…"',
-        summary: "Set an input's value directly, faster than type.",
-      },
-      {
-        usage: 'reins select (--ref <e#> | --selector <css>) --value "…"',
-        summary: "Choose a <select> option by value or label.",
-      },
-      {
-        usage: 'reins press --key "Escape" | "Meta+A" | "Shift+Tab"',
-        summary: "Press a key or shortcut.",
-      },
-      {
-        usage: "reins hover (--ref <e#> | --selector <css>)",
-        summary: "Hover an element for menus and tooltips.",
-      },
-      {
-        usage: 'reins scroll [--ref <e#> | --selector <css> | --by "dx,dy" | --to top|bottom]',
-        summary: "Scroll an element into view, by a delta, or to an edge.",
-      },
-      {
-        usage: "reins upload (--ref <e#> | --selector <css>) --file <path> [--file <path>…]",
-        summary: "Set files on a file input.",
-      },
-      {
-        usage: "reins wait (--ref <e#> | --selector <css>) [--state visible|hidden|attached]",
-        summary: "Wait for an element to reach a state.",
-      },
-      {
-        usage: 'reins dialog (--accept | --dismiss) [--text "…"] [--tab <id>]',
-        summary: "Answer the open alert, confirm, or prompt.",
-      },
-      {
-        usage: "reins resize --width 1280 --height 800 [--tab <id>]",
-        summary: "Resize the tab's browser window.",
-      },
+    rows: [
+      [
+        "reins snapshot [--tab <id>] [--max-chars <n>]",
+        "List interactive elements with refs. The refs feed click, type and the rest.",
+      ],
+      [
+        "reins click (--ref <e#> | --selector <css>) [--button right|middle] [--count 2]",
+        "Click an element.",
+      ],
+      [
+        'reins type (--ref <e#> | --selector <css>) --text "…" [--enter]',
+        "Type into an element. --enter presses Enter afterwards.",
+      ],
+      [
+        'reins fill (--ref <e#> | --selector <css>) --value "…"',
+        "Set an input's value directly, faster than type.",
+      ],
+      [
+        'reins select (--ref <e#> | --selector <css>) --value "…"',
+        "Choose a select option by value or label.",
+      ],
+      ['reins press --key "Escape" | "Meta+A" | "Shift+Tab"', "Press a key or a shortcut."],
+      ["reins hover (--ref <e#> | --selector <css>)", "Hover an element, for menus and tooltips."],
+      [
+        'reins scroll [--ref <e#> | --selector <css> | --by "dx,dy" | --to top|bottom]',
+        "Scroll an element into view, by a delta, or to an edge.",
+      ],
+      [
+        "reins upload (--ref <e#> | --selector <css>) --file <path> […]",
+        "Set files on a file input.",
+      ],
+      [
+        "reins wait (--ref <e#> | --selector <css>) [--state visible|hidden|attached]",
+        "Wait for an element to reach a state.",
+      ],
+      [
+        'reins dialog (--accept | --dismiss) [--text "…"] [--tab <id>]',
+        "Answer the open alert, confirm or prompt.",
+      ],
+      ["reins resize --width 1280 --height 800 [--tab <id>]", "Resize the tab's browser window."],
     ],
   },
   {
+    id: "reading",
     title: "Reading",
-    commands: [
-      {
-        usage: "reins text [--ref <e#> | --selector <css>] [--max-chars <n>]",
-        summary: "Read the page's (or an element's) visible text.",
-      },
-      {
-        usage: "reins screenshot [--tab <id>] [--full] [--format jpeg] [--out <path>]",
-        summary: "Capture the page; prints the image file path.",
-      },
-      {
-        usage: "reins console [--tab <id>] [--since <ms>] [--level error --level warning…]",
-        summary: "Read recent console messages.",
-      },
-      {
-        usage: "reins network [--tab <id>] [--since <ms>] [--url <pattern>]",
-        summary: "Read recent network requests.",
-      },
+    rows: [
+      [
+        "reins text [--ref <e#> | --selector <css>] [--max-chars <n>]",
+        "Read the page's (or an element's) visible text.",
+      ],
+      [
+        "reins screenshot [--tab <id>] [--full] [--format jpeg] [--out <path>]",
+        "Capture the page. Prints the image file path.",
+      ],
+      [
+        "reins console [--tab <id>] [--since <ms>] [--level error …]",
+        "Read recent console messages.",
+      ],
+      [
+        "reins network [--tab <id>] [--since <ms>] [--url <pattern>]",
+        "Read recent network requests.",
+      ],
     ],
   },
   {
+    id: "advanced",
     title: "Advanced",
-    commands: [
-      {
-        usage: "reins eval '<expression>' [--await]",
-        summary: "Evaluate JavaScript in the page and print the value.",
-      },
-      {
-        usage: "reins cdp <Domain.method> ['<json-params>'] [--tab <id>]",
-        summary:
-          "Raw Chrome DevTools Protocol call: the escape hatch for cookies, geolocation, PDF, tracing, and everything else the curated commands don't wrap.",
-      },
-      {
-        usage: "reins daemon",
-        summary: "Run the daemon in the foreground (normally auto-spawned).",
-      },
+    rows: [
+      [
+        "reins eval '<expression>' [--await]",
+        "Evaluate JavaScript in the page and print the value.",
+      ],
+      [
+        "reins cdp <Domain.method> ['<json-params>'] [--tab <id>]",
+        "Raw Chrome DevTools Protocol call. The escape hatch for cookies, geolocation, PDF, tracing and everything else the curated commands do not wrap.",
+      ],
+      ["reins daemon", "Run the daemon in the foreground. Normally it is auto-spawned."],
     ],
   },
   {
+    id: "policy",
     title: "Site permissions",
     intro:
-      "The shell can inspect and tighten the per-site policy, never loosen it — grants happen in the extension popup. See the Site permissions page for the full model.",
-    commands: [
-      {
-        usage: "reins policy [--browser <id>]",
-        summary:
-          "Show the default tier, the rules, and the effective tier for each open tab's host.",
-      },
-      {
-        usage: "reins policy deny <pattern>",
-        summary: "Block a site entirely; the pattern is a host or a *.wildcard.",
-      },
-      {
-        usage: "reins policy readonly <pattern>",
-        summary: "Tighten a site to read-only: agents can look but not act.",
-      },
-      {
-        usage: "reins policy allow <pattern>",
-        summary:
-          "Always errors — grants require the extension popup, and the error message says exactly that.",
-      },
+      "The shell can inspect and tighten the per-site policy, never loosen it. Grants happen in the extension popup. See the Site permissions page for the full model.",
+    rows: [
+      [
+        "reins policy [--browser <id>]",
+        "Show the default tier, the rules, and the effective tier for each open tab's host.",
+      ],
+      [
+        "reins policy deny <pattern>",
+        "Block a site entirely. The pattern is a host or a *.wildcard.",
+      ],
+      ["reins policy readonly <pattern>", "Tighten a site to read-only: agents can look, not act."],
+      [
+        "reins policy allow <pattern>",
+        "Always errors. Grants require the extension popup, and the error message says exactly that.",
+      ],
     ],
   },
   {
+    id: "management",
     title: "Management",
-    commands: [
-      { usage: "reins browsers", summary: "List browsers connected to the daemon." },
-      { usage: "reins status", summary: "Daemon state, port, and connected browsers." },
-      {
-        usage: "reins extension",
-        summary:
-          "Stage the bundled extension for install without the Chrome Web Store (Load unpacked).",
-      },
-      { usage: "reins allow <id>", summary: "Allow an unpacked/dev extension to connect." },
-      { usage: "reins kill", summary: "Stop the background daemon." },
-      { usage: "reins doctor", summary: "Run diagnostic checks." },
-      { usage: "reins logs", summary: "Show the daemon log location and recent lines." },
-      { usage: "reins help [command]", summary: "Overall help, or a command's usage." },
+    rows: [
+      ["reins browsers", "List browsers connected to the daemon."],
+      ["reins status", "Daemon state, port, and connected browsers."],
+      [
+        "reins extension",
+        "Stage the bundled extension for install without the Chrome Web Store (Load unpacked).",
+      ],
+      ["reins allow <id>", "Allow an unpacked or dev extension to connect."],
+      ["reins audit [--denied]", "Render the audit trail, or only what policy blocked."],
+      ["reins kill", "Stop the background daemon."],
+      ["reins doctor", "Run diagnostic checks."],
+      ["reins logs", "Show the daemon log location and recent lines."],
+      ["reins help [command]", "Overall help, or one command's usage."],
     ],
   },
 ];
 
+/**
+ * One command, the way a man page sets it: the usage on its own line, and
+ * what it does under it. A two-column table cramps usages this long, and
+ * wrapping them mid-flag makes them unreadable.
+ */
+function Command({ usage, summary }: { usage: string; summary: string }) {
+  return (
+    <div className={cn(TEXT, "mt-5 max-w-[68ch]")}>
+      {/* Wraps rather than scrolls. A scroll box per command would be forty
+          keyboard stops down the page, and a long flag list is still legible
+          broken across lines when the wrap is indented under the command. */}
+      <p className="whitespace-pre-wrap [text-indent:-2ch] pl-[2ch]">{usage}</p>
+      <p className="text-pretty text-muted-foreground">{summary}</p>
+    </div>
+  );
+}
+
 function CommandsPage() {
   return (
-    <article className="prose max-w-[70ch]">
-      <h1>Commands</h1>
-      <p>
-        The CLI is the whole interface: agents shell out to it, and so can you. Every command
-        accepts <code>--tab &lt;id&gt;</code> (defaults to the active tab),{" "}
-        <code>--browser &lt;id&gt;</code> (only needed when several browsers are connected; ids come
-        from <code>reins tabs</code>), and <code>--json</code> for raw results.
-      </p>
+    <>
+      <H1>Commands</H1>
+      <P>
+        The CLI is the whole interface: agents shell out to it, and so can you. The commands that
+        act on a page or a tab share three flags: <Code>--tab &lt;id&gt;</Code> (the active tab by
+        default), <Code>--browser &lt;id&gt;</Code> (only needed when several browsers are
+        connected, and the ids come from <Code>reins tabs</Code>) and <Code>--json</Code> for raw
+        results. The management commands (<Code>status</Code>, <Code>doctor</Code>,{" "}
+        <Code>kill</Code>, <Code>help</Code>) take none of them.
+      </P>
       {GROUPS.map((group) => (
-        <Fragment key={group.title}>
-          <h2>{group.title}</h2>
-          {group.intro ? <p>{group.intro}</p> : null}
-          {group.commands.map((command) => (
-            <Fragment key={command.usage}>
-              <CodeBlock code={command.usage} />
-              <p>{command.summary}</p>
-            </Fragment>
+        <Fragment key={group.id}>
+          <H2 id={group.id}>{group.title}</H2>
+          {group.intro ? <P>{group.intro}</P> : null}
+          {group.rows.map(([usage, summary]) => (
+            <Command key={usage} usage={usage} summary={summary} />
           ))}
         </Fragment>
       ))}
-    </article>
+    </>
   );
 }
diff --git a/packages/web/src/routes/docs/comparison.tsx b/packages/web/src/routes/docs/comparison.tsx
index e369c7d..18d4d5c 100644
--- a/packages/web/src/routes/docs/comparison.tsx
+++ b/packages/web/src/routes/docs/comparison.tsx
@@ -1,4 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { A, H1, H2, P, Table } from "@/components/md";
 import { seo } from "@/lib/seo";
 
 export const Route = createFileRoute("/docs/comparison")({
@@ -6,144 +7,104 @@ export const Route = createFileRoute("/docs/comparison")({
     ...seo({
       title: "How it compares · reins",
       description:
-        "How reins compares to agent-browser, dev3000, and playwright-mcp — and when to pick each for agent-driven browser automation.",
+        "How reins compares to agent-browser, dev3000, and playwright-mcp, and when to pick each one for agent-driven browser automation.",
       path: "/docs/comparison",
     }),
   }),
   component: ComparisonPage,
 });
 
-const ROWS: Array<{
-  label: string;
-  reins: string;
-  agentBrowser: string;
-  dev3000: string;
-  playwrightMcp: string;
-}> = [
-  {
-    label: "Built for",
-    reins: "driving the browser you already use",
-    agentBrowser: "general-purpose automation for agents",
-    dev3000: "debugging your local dev server",
-    playwrightMcp: "browser automation as an MCP server",
-  },
-  {
-    label: "Browser",
-    reins: "your real, running browsers — Chrome, Brave, Edge, Arc, Dia, all at once",
-    agentBrowser: "its own Chrome for Testing it launches",
-    dev3000: "its own monitored Chrome it launches",
-    playwrightMcp: "its own Playwright-managed browser — Chromium, Firefox, WebKit",
-  },
-  {
-    label: "Logged-in sessions",
-    reins: "always — it is your profile",
-    agentBrowser: "opt-in: reuse a profile's login state or attach to a running Chrome",
-    dev3000: "per-project profile that persists between runs",
-    playwrightMcp: "its own persistent profile; real Chrome/Edge tabs via opt-in extension or CDP",
-  },
-  {
-    label: "Attaches via",
-    reins: "MV3 extension + chrome.debugger — no launch flags, no open debug port",
-    agentBrowser: "CDP from the outside",
-    dev3000: "CDP from the outside",
-    playwrightMcp: "Playwright launch; opt-in extension or CDP endpoint",
-  },
-  {
-    label: "Agent interface",
-    reins: "CLI + skill; nothing to register per agent",
-    agentBrowser: "CLI, plus an optional MCP server",
-    dev3000: "CLI + MCP server + unified timeline log",
-    playwrightMcp: "MCP server (stdio/HTTP), registered per client",
-  },
-  {
-    label: "Extras",
-    reins: "raw CDP escape hatch (reins cdp)",
-    agentBrowser: "HAR recording, request mocking, React tree, web vitals",
-    dev3000: "server+browser timeline, error replay, d3k fix",
-    playwrightMcp: "isolated contexts, device emulation, vision/PDF caps, traces",
-  },
-];
-
 function ComparisonPage() {
   return (
-    <article className="prose max-w-none">
-      <h1>How it compares</h1>
-      <p>
-        <a href="https://github.com/vercel-labs/agent-browser" target="_blank" rel="noreferrer">
-          agent-browser
-        </a>{" "}
-        and{" "}
-        <a href="https://github.com/vercel-labs/dev3000" target="_blank" rel="noreferrer">
-          dev3000
-        </a>{" "}
-        (Vercel Labs) and{" "}
-        <a href="https://github.com/microsoft/playwright-mcp" target="_blank" rel="noreferrer">
-          playwright-mcp
-        </a>{" "}
-        (Microsoft) live in the same neighborhood — browser tooling for coding agents — but start
-        from a different place: by default they launch and manage a browser for the agent, while
-        reins hands the agent the browser you already have open.
-      </p>
-      <div className="overflow-x-auto">
-        <table>
-          <thead>
-            <tr className="border-b border-border">
-              <th />
-              <th>reins</th>
-              <th>agent-browser</th>
-              <th>dev3000</th>
-              <th>playwright-mcp</th>
-            </tr>
-          </thead>
-          <tbody>
-            {ROWS.map((row) => (
-              <tr key={row.label} className="border-b border-border">
-                <th className="align-top">{row.label}</th>
-                <td className="align-top">{row.reins}</td>
-                <td className="align-top">{row.agentBrowser}</td>
-                <td className="align-top">{row.dev3000}</td>
-                <td className="align-top">{row.playwrightMcp}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      <h2>vs agent-browser</h2>
-      <p>
-        agent-browser is a fast, general automation CLI that owns its browser: it launches Chrome
-        for Testing by default and reaches your real login state only as an opt-in (profile reuse,
-        or attaching to a Chrome you started for it). reins starts from the opposite end: an
-        extension inside the browsers you already run means every session is authenticated by
-        definition, nothing new launches, and no debug port is ever exposed — the daemon only
-        accepts the extension's unforgeable origin on 127.0.0.1.
-      </p>
-      <p>
-        If you need headless fleets, request mocking, or CI runs, agent-browser is the better fit;
-        if the task is "act as me, in my browser", that's reins.
-      </p>
-      <h2>vs dev3000</h2>
-      <p>
+    <>
+      <H1>How it compares</H1>
+      <P>
+        <A href="https://github.com/vercel-labs/agent-browser">agent-browser</A> and{" "}
+        <A href="https://github.com/vercel-labs/dev3000">dev3000</A> (Vercel Labs) and{" "}
+        <A href="https://github.com/microsoft/playwright-mcp">playwright-mcp</A> (Microsoft) are all
+        browser tooling for coding agents, and they all start from the same place: by default each
+        one launches and manages a browser for the agent. reins starts from the other end. It hands
+        the agent the browser you already have open.
+      </P>
+
+      <H2 id="reins">reins</H2>
+      <Table
+        rows={[
+          ["Built for", "driving the browser you already use"],
+          ["Browser", "your real, running browsers: Chrome, Brave, Edge, Arc, Dia, all at once"],
+          ["Logged-in", "always, because it is your profile"],
+          ["Attaches via", "MV3 extension plus chrome.debugger. No launch flags, no debug port."],
+          ["Agent interface", "CLI and a skill. Nothing to register per agent."],
+          ["Extras", "raw CDP escape hatch, per-site permission tiers, audit trail"],
+        ]}
+      />
+
+      <H2 id="agent-browser">agent-browser</H2>
+      <Table
+        rows={[
+          ["Built for", "general-purpose automation for agents"],
+          ["Browser", "its own Chrome for Testing, which it launches"],
+          ["Logged-in", "opt-in: reuse a profile's login state, or attach to a running Chrome"],
+          ["Attaches via", "CDP from the outside"],
+          ["Agent interface", "CLI, plus an optional MCP server"],
+          ["Extras", "HAR recording, request mocking, React tree, web vitals"],
+        ]}
+      />
+      <P>
+        agent-browser is a fast, general automation CLI that owns its browser. reins puts an
+        extension inside the browsers you already run, so every session is authenticated by
+        definition, nothing new launches, and no debug port is ever exposed. The daemon only accepts
+        the extension's unforgeable origin on 127.0.0.1.
+      </P>
+      <P>
+        If you need headless fleets, request mocking or CI runs, agent-browser is the better fit. If
+        the task is "act as me, in my browser", that is reins.
+      </P>
+
+      <H2 id="dev3000">dev3000</H2>
+      <Table
+        rows={[
+          ["Built for", "debugging your local dev server"],
+          ["Browser", "its own monitored Chrome, which it launches"],
+          ["Logged-in", "per-project profile that persists between runs"],
+          ["Attaches via", "CDP from the outside"],
+          ["Agent interface", "CLI, MCP server, unified timeline log"],
+          ["Extras", "server and browser timeline, error replay, d3k fix"],
+        ]}
+      />
+      <P>
         dev3000 solves a different problem: it wraps your dev server, launches a monitored browser,
-        and merges server logs, console, network, and screenshots into one timeline an AI can debug
-        from. It's dev-loop observability, not general browser control.
-      </p>
-      <p>
-        They compose: dev3000 watches the app you're building, reins drives the rest of your browser
-        — dashboards, docs, the third-party service you're integrating.
-      </p>
-      <h2>vs playwright-mcp</h2>
-      <p>
+        and merges server logs, console, network and screenshots into one timeline an AI can debug
+        from. That is dev-loop observability, not general browser control.
+      </P>
+      <P>
+        They compose. dev3000 watches the app you are building, and reins drives the rest of your
+        browser: dashboards, docs, the third-party service you are integrating.
+      </P>
+
+      <H2 id="playwright-mcp">playwright-mcp</H2>
+      <Table
+        rows={[
+          ["Built for", "browser automation as an MCP server"],
+          ["Browser", "its own Playwright-managed browser: Chromium, Firefox or WebKit"],
+          ["Logged-in", "its own persistent profile; real Chrome and Edge tabs via opt-in"],
+          ["Attaches via", "Playwright launch; opt-in extension or CDP endpoint"],
+          ["Agent interface", "MCP server (stdio or HTTP), registered per client"],
+          ["Extras", "isolated contexts, device emulation, vision and PDF caps, traces"],
+        ]}
+      />
+      <P>
         The closest comparison: its extension mode can also drive existing tabs in your real browser
         (Chrome and Edge only). The defaults differ. playwright-mcp launches a Playwright-managed
         browser with its own persistent profile, and everything flows through an MCP server you
-        register in each client; reins is a plain CLI, so any agent with a shell drives your
+        register in each client. reins is a plain CLI, so any agent with a shell drives your
         everyday browsers with no per-agent setup, and one daemon serves them all at once.
-      </p>
-      <p>
+      </P>
+      <P>
         Pick playwright-mcp for cross-engine coverage (Firefox, WebKit), device emulation, or
-        clean-room isolated sessions; pick reins when the point is acting as you in the browser you
-        live in.
-      </p>
-    </article>
+        clean-room isolated sessions. Pick reins when the point is acting as you, in the browser you
+        already work in.
+      </P>
+    </>
   );
 }
diff --git a/packages/web/src/routes/docs/faq.tsx b/packages/web/src/routes/docs/faq.tsx
index e77c344..21917bd 100644
--- a/packages/web/src/routes/docs/faq.tsx
+++ b/packages/web/src/routes/docs/faq.tsx
@@ -1,109 +1,105 @@
 import { createFileRoute } from "@tanstack/react-router";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
+import { A, H1, H2, P } from "@/components/md";
 import { seo } from "@/lib/seo";
 
-export const Route = createFileRoute("/docs/faq")({
-  head: () => ({
-    ...seo({
-      title: "FAQ · reins",
-      description:
-        "Answers to common questions about reins: supported browsers and agents, the local-only daemon, Chrome's debugging banner, and installing without the store.",
-      path: "/docs/faq",
-    }),
-    scripts: [
-      {
-        type: "application/ld+json",
-        children: JSON.stringify({
-          "@context": "https://schema.org",
-          "@type": "FAQPage",
-          mainEntity: FAQS.map((faq) => ({
-            "@type": "Question",
-            name: faq.question,
-            acceptedAnswer: { "@type": "Answer", text: faq.answer },
-          })),
-        }),
-      },
-    ],
-  }),
-  component: FaqPage,
-});
-
 const FAQS = [
   {
+    id: "remote",
     question: "Is anything ever sent to a remote server?",
     answer:
-      "No. The extension talks to exactly one thing: the reins daemon on 127.0.0.1 on your machine. There is no analytics, no telemetry, and no remote code. Nothing leaves your computer.",
+      "Nothing reins reads goes anywhere. The extension talks to exactly one thing: the reins daemon on 127.0.0.1 on your machine. There is no analytics, no telemetry, and no remote code. Your browser still reaches the internet the way it always did, because reins drives the browser you already use rather than replacing it.",
   },
   {
+    id: "browsers",
     question: "Which browsers work?",
     answer:
-      "Any Chromium browser that supports Manifest V3 extensions: Chrome, Brave, Edge, Arc, and Dia are all known to work. Install the extension in each browser you want agents to reach; one daemon serves them all.",
+      "Any Chromium browser that supports Manifest V3 extensions. Chrome, Brave, Edge, Arc and Dia are all known to work. Install the extension in each browser you want agents to reach; one daemon serves them all.",
   },
   {
+    id: "agents",
     question: "Which agents work?",
     answer:
       "Anything with a shell: Claude Code, Cursor, Codex, GitHub Copilot, Gemini CLI, and plain scripts. Agents with skill support learn the commands via npx skills add karnstack/reins; everything else can read reins help.",
   },
   {
+    id: "banner",
     question: 'Why does Chrome show an "is being debugged" banner?',
     answer:
       "reins executes commands through chrome.debugger, the same Chrome DevTools Protocol that powers DevTools. Chrome shows its native banner whenever a debugger is attached. That is deliberate transparency: you always know when an agent is acting on a tab.",
   },
   {
+    id: "daemon",
     question: "Do I need to run or configure the daemon?",
     answer:
       "No. Any reins command starts the daemon on demand, and the extension finds it on its own through localhost port discovery. reins kill stops it; reins status shows what is connected.",
   },
   {
+    id: "mcp",
     question: "How is this different from an MCP browser server?",
     answer:
       "There is nothing to register per agent. reins is a plain CLI, so any tool that can run shell commands can drive the browser. And it drives your real, logged-in profile rather than a separate automation browser.",
   },
   {
-    question: "How do I stop an agent mid-flight?",
+    id: "stop",
+    question: "How do I stop an agent while it is running?",
     answer:
-      "Click the reins toolbar icon and hit Disconnect; the connection is severed instantly. reins kill stops the daemon entirely.",
+      "Click the reins toolbar icon and press Disconnect. The connection is cut at once. reins kill stops the daemon entirely.",
   },
   {
+    id: "store",
     question: "Can I install the extension without the Chrome Web Store?",
     answer:
       "Yes. reins extension stages the bundled extension for Chrome's Load unpacked, with no reins allow step. The npm package carries a full copy, so it works with no store access at all. The docs page Install without the store has the walkthrough.",
   },
   {
+    id: "dev-builds",
     question: "Does reins work with unpacked dev builds of the extension?",
     answer:
       "Yes. Load the unpacked extension, then allow its ID once with reins allow <extension-id>. Store-installed extensions are allowlisted automatically.",
   },
 ];
 
+export const Route = createFileRoute("/docs/faq")({
+  head: () => ({
+    ...seo({
+      title: "FAQ · reins",
+      description:
+        "Answers to common questions about reins: supported browsers and agents, the local-only daemon, Chrome's debugging banner, and installing without the store.",
+      path: "/docs/faq",
+    }),
+    scripts: [
+      {
+        type: "application/ld+json",
+        children: JSON.stringify({
+          "@context": "https://schema.org",
+          "@type": "FAQPage",
+          mainEntity: FAQS.map((faq) => ({
+            "@type": "Question",
+            name: faq.question,
+            acceptedAnswer: { "@type": "Answer", text: faq.answer },
+          })),
+        }),
+      },
+    ],
+  }),
+  component: FaqPage,
+});
+
+/** Headings and answers, the way a README does it. No accordion to open. */
 function FaqPage() {
   return (
-    <article className="prose max-w-[70ch]">
-      <h1>FAQ</h1>
-      <p>
+    <>
+      <H1>FAQ</H1>
+      <P>
         Quick answers about how reins works. Anything missing? Ask on{" "}
-        <a href="https://github.com/karnstack/reins/issues" target="_blank" rel="noreferrer">
-          GitHub
-        </a>
-        .
-      </p>
-      <Accordion type="single" collapsible className="mt-8 w-full">
-        {FAQS.map((faq) => (
-          <AccordionItem key={faq.question} value={faq.question}>
-            <AccordionTrigger className="py-5 text-left text-base hover:no-underline hover:[&>svg]:text-foreground">
-              {faq.question}
-            </AccordionTrigger>
-            <AccordionContent className="max-w-[60ch] text-base/7 text-muted-foreground sm:text-sm/6">
-              {faq.answer}
-            </AccordionContent>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    </article>
+        <A href="https://github.com/karnstack/reins/issues">GitHub</A>.
+      </P>
+      {FAQS.map((faq) => (
+        <div key={faq.id}>
+          <H2 id={faq.id}>{faq.question}</H2>
+          <P>{faq.answer}</P>
+        </div>
+      ))}
+    </>
   );
 }
diff --git a/packages/web/src/routes/docs/index.tsx b/packages/web/src/routes/docs/index.tsx
index bbef6bc..9c838f5 100644
--- a/packages/web/src/routes/docs/index.tsx
+++ b/packages/web/src/routes/docs/index.tsx
@@ -1,6 +1,7 @@
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { CodeBlock } from "@/components/code-block";
+import { createFileRoute } from "@tanstack/react-router";
+import { A, Arrow, Code, H1, H2, P, Shell } from "@/components/md";
 import { seo } from "@/lib/seo";
+import { INSTALL_COMMAND } from "@/lib/site";
 
 const CHROME_WEB_STORE_URL =
   "https://chromewebstore.google.com/detail/reins/hnjcfgochepemjndccfblpmfmlblkofo";
@@ -19,73 +20,71 @@ export const Route = createFileRoute("/docs/")({
 
 function GettingStarted() {
   return (
-    <article className="prose max-w-[70ch]">
-      <h1>Getting started</h1>
-      <p>
-        reins gives coding agents (Claude Code, Cursor, Codex, Copilot, anything with a shell) full
-        control of your actual, logged-in Chromium browser through a CLI and a Manifest V3
-        extension. This page takes you from nothing to an agent driving a tab.
-      </p>
+    <>
+      <H1>Getting started</H1>
+      <P>
+        reins gives coding agents full control of your actual, logged-in Chromium browser, through a
+        CLI and a Manifest V3 extension. Claude Code, Cursor, Codex, Copilot, anything with a shell.
+        This page takes you from nothing to an agent driving a tab.
+      </P>
 
-      <h2>1. Install the CLI</h2>
-      <CodeBlock code="npm i -g @karnstack/reins" />
-      <p>
-        This installs the <code>reins</code> command and the daemon it manages. The daemon is
-        invisible plumbing: any command starts it on demand, it binds to <code>127.0.0.1</code>, and{" "}
-        <code>reins kill</code> stops it. There is nothing to configure and nothing to keep running.
-      </p>
+      <H2 id="install-the-cli">1. Install the CLI</H2>
+      <Shell lines={[`$ ${INSTALL_COMMAND}`]} />
+      <P>
+        This installs the <Code>reins</Code> command and the daemon it manages. You never run the
+        daemon yourself: any command starts it on demand, it binds <Code>127.0.0.1</Code>, and{" "}
+        <Code>reins kill</Code> stops it. There is nothing to configure and nothing to keep running.
+      </P>
 
-      <h2>2. Add the extension</h2>
-      <p>
-        Install the{" "}
-        <a href={CHROME_WEB_STORE_URL} target="_blank" rel="noreferrer">
-          reins extension from the Chrome Web Store
-        </a>{" "}
-        in every Chromium browser you want agents to reach: Chrome, Brave, Edge, Arc, and Dia all
-        work. The extension finds the daemon on its own through localhost port discovery; when the
-        toolbar popover turns green, it is connected.
-      </p>
-      <p>
-        Prefer to skip the store? <code>reins extension</code> stages the bundled copy for Chrome's
-        Load unpacked; the walkthrough is on{" "}
-        <Link to="/docs/sideload">Install without the store</Link>.
-      </p>
-      <p>Working from a dev build instead? Load the unpacked extension and allow its ID once:</p>
-      <CodeBlock code="reins allow <extension-id>" />
+      <H2 id="add-the-extension">2. Add the extension</H2>
+      <P>
+        Install the <A href={CHROME_WEB_STORE_URL}>reins extension from the Chrome Web Store</A> in
+        every Chromium browser you want agents to reach. Chrome, Brave, Edge, Arc and Dia all work.
+        The extension finds the daemon on its own through localhost port discovery, and the toolbar
+        popover turns green when it is connected.
+      </P>
+      <P>
+        Prefer to skip the store? <Code>reins extension</Code> stages the bundled copy for Chrome's
+        Load unpacked. The walkthrough is on <A href="/docs/sideload">Install without the store</A>.
+      </P>
+      <P>Working from a dev build instead? Load the unpacked extension and allow its ID once:</P>
+      <Shell lines={["$ reins allow <extension-id>"]} />
 
-      <h2>3. Teach your agent</h2>
-      <CodeBlock code="npx skills add karnstack/reins" />
-      <p>
+      <H2 id="teach-your-agent">3. Teach your agent</H2>
+      <Shell lines={["$ npx skills add karnstack/reins"]} />
+      <P>
         The skill teaches agents the command set and the loop below. Agents without skill support
-        can run <code>reins help</code>; the CLI is self-describing.
-      </p>
+        can run <Code>reins help</Code>; the CLI is self-describing.
+      </P>
 
-      <h2>4. Verify</h2>
-      <CodeBlock
-        code={`reins status   # daemon state, port, connected browsers
-reins tabs     # every tab across every connected browser
-reins doctor   # diagnostic checks when something looks off`}
+      <H2 id="check">4. Check</H2>
+      <Shell
+        lines={[
+          "$ reins status   # daemon state, port, connected browsers",
+          "$ reins tabs     # every tab across every connected browser",
+          "$ reins doctor   # diagnostic checks when something looks off",
+        ]}
       />
 
-      <h2>The loop agents use</h2>
-      <p>Every page interaction follows the same three-beat rhythm: look, act, verify.</p>
-      <CodeBlock
-        code={`reins snapshot                      # interactive elements with refs
-  e3: input "Email"
-  e7: button "Sign in"
-reins type --ref e3 --text "you@work.dev"
-reins click --ref e7                # act by ref
-reins text                          # verify, or reins screenshot`}
+      <H2 id="the-loop">The loop agents use</H2>
+      <P>Every page interaction is the same three beats: look, act, check.</P>
+      <Shell
+        lines={[
+          "$ reins snapshot",
+          '  e3: input "Email"',
+          '  e7: button "Sign in"',
+          '$ reins type --ref e3 --text "you@work.dev"',
+          "$ reins click --ref e7",
+          "$ reins text",
+        ]}
       />
-      <p>
-        Every command accepts <code>--tab &lt;id&gt;</code> (defaults to the active tab),{" "}
-        <code>--browser &lt;id&gt;</code> (only needed when several browsers are connected), and{" "}
-        <code>--json</code> for raw output.
-      </p>
-      <p>
-        Next: the full <Link to="/docs/commands">command reference</Link>, or how the pieces fit in{" "}
-        <Link to="/docs/architecture">architecture</Link>.
-      </p>
-    </article>
+      <P>
+        The commands that act on a page or a tab share three flags: <Code>--tab &lt;id&gt;</Code>{" "}
+        (the active tab by default), <Code>--browser &lt;id&gt;</Code> (only needed when several
+        browsers are connected) and <Code>--json</Code> for raw output.
+      </P>
+      <Arrow href="/docs/commands">Full command reference</Arrow>
+      <Arrow href="/docs/architecture">How the pieces fit together</Arrow>
+    </>
   );
 }
diff --git a/packages/web/src/routes/docs/permissions.tsx b/packages/web/src/routes/docs/permissions.tsx
index 3438b99..b5d55c1 100644
--- a/packages/web/src/routes/docs/permissions.tsx
+++ b/packages/web/src/routes/docs/permissions.tsx
@@ -1,5 +1,5 @@
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { CodeBlock } from "@/components/code-block";
+import { createFileRoute } from "@tanstack/react-router";
+import { Arrow, Code, H1, H2, P, Shell, Table, Ul } from "@/components/md";
 import { seo } from "@/lib/seo";
 
 export const Route = createFileRoute("/docs/permissions")({
@@ -14,116 +14,99 @@ export const Route = createFileRoute("/docs/permissions")({
   component: PermissionsPage,
 });
 
-const TIERS: Array<{ tier: string; means: string }> = [
-  {
-    tier: "deny",
-    means:
-      "Nothing. Every command against the site fails, and its tabs appear redacted in reins tabs — tab id only, no URL or title.",
-  },
-  {
-    tier: "read",
-    means:
-      "Look, don't touch: snapshot, text, screenshot, console, network, and wait work; click, type, navigate, eval, and everything else that acts on the page is blocked.",
-  },
-  {
-    tier: "full",
-    means: "Everything, including navigation, interaction, eval, and raw CDP.",
-  },
-];
-
 function PermissionsPage() {
   return (
-    <article className="prose max-w-[70ch]">
-      <h1>Site permissions</h1>
-      <p>
-        Every site resolves to one of three tiers — <code>deny</code> &lt; <code>read</code> &lt;{" "}
-        <code>full</code> — and the extension checks the tier before running any command against a
-        tab. The check lives in the extension itself, the one place a process on your machine can't
-        reach around: even a misbehaving agent (or a compromised daemon) can't skip it.
-      </p>
-      <p>
-        The shipped default is <code>full</code> everywhere, so a fresh install behaves exactly as
+    <>
+      <H1>Site permissions</H1>
+      <P>
+        Every site resolves to one of three tiers, in order of power: <Code>deny</Code> &lt;{" "}
+        <Code>read</Code> &lt; <Code>full</Code>. The extension checks the tier before it runs any
+        command against a tab. The check lives in the extension itself, the one place a process on
+        your machine cannot reach around, so even a misbehaving agent (or a compromised daemon)
+        cannot skip it.
+      </P>
+      <P>
+        The shipped default is <Code>full</Code> everywhere, so a fresh install behaves exactly as
         before. The policy model is opt-in hardening: tighten the sites you care about, or flip the
         default and grant sites back one by one.
-      </p>
+      </P>
 
-      <h2>Tiers</h2>
-      <table>
-        <thead>
-          <tr className="border-b border-border">
-            <th>Tier</th>
-            <th>What the agent can do</th>
-          </tr>
-        </thead>
-        <tbody>
-          {TIERS.map((row) => (
-            <tr key={row.tier} className="border-b border-border">
-              <th className="align-top">
-                <code>{row.tier}</code>
-              </th>
-              <td className="align-top">{row.means}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <p>
-        Navigation is checked on both ends: <code>reins nav</code> and <code>reins open</code> need{" "}
-        <code>full</code> on the destination host as well as the current one, so a read-only page
-        can't be steered somewhere permissive.
-      </p>
+      <H2 id="tiers">Tiers</H2>
+      <Table
+        rows={[
+          [
+            "deny",
+            "Nothing. Every command against the site fails, and its tabs appear redacted in reins tabs: tab id only, no URL or title.",
+          ],
+          [
+            "read",
+            "Reading only. snapshot, text, screenshot, console, network and wait all work. click, type, navigate, eval, and everything else that acts on the page is blocked.",
+          ],
+          ["full", "Everything, including navigation, interaction, eval and raw CDP."],
+        ]}
+      />
+      <P>
+        Navigation is checked on both ends: <Code>reins nav</Code> and <Code>reins open</Code> need{" "}
+        <Code>full</Code> on the destination host as well as the current one, so a read-only page
+        cannot be steered somewhere permissive.
+      </P>
 
-      <h2>Rules and matching</h2>
-      <ul>
+      <H2 id="rules">Rules and matching</H2>
+      <Ul>
         <li>
-          A rule is a bare host (<code>github.com</code>) or a wildcard (<code>*.google.com</code>)
+          A rule is a bare host (<Code>github.com</Code>) or a wildcard (<Code>*.google.com</Code>)
           paired with a tier.
         </li>
         <li>
-          An exact host match beats a wildcard; the longest wildcard suffix wins among wildcards;
-          anything unmatched gets the default tier.
+          An exact host match beats a wildcard. The longest wildcard suffix wins among wildcards.
+          Anything unmatched gets the default tier.
         </li>
         <li>
-          <code>*.foo.com</code> covers subdomains and the apex <code>foo.com</code>, following
+          <Code>*.foo.com</Code> covers subdomains and the apex <Code>foo.com</Code>, following
           Chrome's match-pattern convention.
         </li>
         <li>
-          Pages without an http(s) host — <code>chrome://</code> pages, <code>about:blank</code> —
-          are governed by the default tier.
+          Pages without an http(s) host (<Code>chrome://</Code> pages, <Code>about:blank</Code>) are
+          governed by the default tier.
         </li>
         <li>
           Policy is stored per browser profile, so a locked-down work profile and a permissive
           scratch profile coexist naturally.
         </li>
-      </ul>
+      </Ul>
 
-      <h2>Granting and tightening</h2>
-      <p>
+      <H2 id="granting">Granting and tightening</H2>
+      <P>
         Grants happen only in the extension popup: click the reins icon, and the Site permissions
-        section offers a tier control for the current tab, the rules list, and the default. That's
-        deliberate — the popup is a user gesture, something an agent in your shell cannot perform.
-        From the CLI you can inspect the policy and tighten it, never loosen it:
-      </p>
-      <CodeBlock
-        code={[
-          "reins policy                          # default, rules, tier per open tab",
-          'reins policy readonly "*.github.com"  # look, don\'t touch',
-          "reins policy deny mybank.com          # off limits entirely",
-          "reins policy allow mybank.com         # always errors: grants live in the popup",
-        ].join("\n")}
+        section offers a tier control for the current tab, the rules list, and the default. That is
+        deliberate. The popup is a user gesture, and an agent in your shell cannot perform one. From
+        the CLI you can inspect the policy and tighten it, never loosen it:
+      </P>
+      <Shell
+        lines={[
+          "$ reins policy                          # default, rules, tier per open tab",
+          '$ reins policy readonly "*.github.com"  # reading only, no acting',
+          "$ reins policy deny mybank.com          # off limits entirely",
+          "$ reins policy allow mybank.com         # always errors: grants live in the popup",
+        ]}
       />
 
-      <h2>What a blocked agent sees</h2>
-      <p>
-        A blocked command fails with a <code>policy_denied</code> error that names the host, its
-        current tier, and the remediation — for example:{" "}
-        <code>
-          blocked by policy: mybank.com is read-only — grant full access from the reins extension
-          popup
-        </code>
-        . The CLI prints the message and exits nonzero, so agents relay the instruction instead of
-        retrying. For how this fits the broader trust model, see{" "}
-        <Link to="/docs/security">Security</Link>.
-      </p>
-    </article>
+      <H2 id="blocked">What a blocked agent sees</H2>
+      <P>
+        A blocked command fails with a <Code>policy_denied</Code> error. It names the host, its
+        current tier, and what to do about it:
+      </P>
+      <Shell
+        lines={[
+          "blocked by policy: mybank.com is read-only. Grant full access from the",
+          "reins extension popup",
+        ]}
+      />
+      <P>
+        The CLI prints the message and exits nonzero, so agents relay the instruction instead of
+        retrying.
+      </P>
+      <Arrow href="/docs/security">How this fits the broader trust model</Arrow>
+    </>
   );
 }
diff --git a/packages/web/src/routes/docs/route.tsx b/packages/web/src/routes/docs/route.tsx
index 1a3282a..2cb185e 100644
--- a/packages/web/src/routes/docs/route.tsx
+++ b/packages/web/src/routes/docs/route.tsx
@@ -1,89 +1,68 @@
-import { createFileRoute, Link, Outlet } from "@tanstack/react-router";
-import { Menu } from "lucide-react";
-import { useRef, useState } from "react";
+import { createFileRoute, Link, Outlet, useLocation } from "@tanstack/react-router";
+import { useRef } from "react";
 import { CopyMarkdown } from "@/components/copy-markdown";
-import { DocsToc } from "@/components/docs-toc";
+import { A, Column, Rule, TEXT, Ul } from "@/components/md";
 import { SiteFooter } from "@/components/site-footer";
 import { SiteHeader } from "@/components/site-header";
-import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
 
 export const Route = createFileRoute("/docs")({
   component: DocsLayout,
 });
 
 const NAV = [
-  { to: "/docs", label: "Getting started", exact: true },
-  { to: "/docs/sideload", label: "Install without the store", exact: false },
-  { to: "/docs/commands", label: "Commands", exact: false },
-  { to: "/docs/permissions", label: "Site permissions", exact: false },
-  { to: "/docs/architecture", label: "Architecture", exact: false },
-  { to: "/docs/security", label: "Security", exact: false },
-  { to: "/docs/comparison", label: "How it compares", exact: false },
-  { to: "/docs/faq", label: "FAQ", exact: false },
+  { to: "/docs", label: "Getting started", blurb: "install the CLI and extension, teach an agent" },
+  { to: "/docs/sideload", label: "Install without the store", blurb: "Chrome's Load unpacked" },
+  { to: "/docs/commands", label: "Commands", blurb: "the full reference" },
+  { to: "/docs/permissions", label: "Site permissions", blurb: "deny, read and full" },
+  { to: "/docs/architecture", label: "Architecture", blurb: "CLI, daemon, extension" },
+  { to: "/docs/security", label: "Security", blurb: "the localhost-only model" },
+  { to: "/docs/comparison", label: "How it compares", blurb: "next to the alternatives" },
+  { to: "/docs/faq", label: "FAQ", blurb: "common questions" },
 ] as const;
 
-function DocsNav({ onNavigate }: { onNavigate?: () => void }) {
-  return (
-    <nav className="flex flex-col gap-1">
-      {NAV.map((item) => (
-        <Link
-          key={item.to}
-          to={item.to}
-          activeOptions={{ exact: item.exact ?? false }}
-          onClick={onNavigate}
-          className="rounded-md px-3 py-2 text-base/6 text-muted-foreground hover:bg-foreground/5 hover:text-foreground sm:py-1.5 sm:text-sm/6"
-          activeProps={{ className: "bg-foreground/5 text-foreground" }}
-        >
-          {item.label}
-        </Link>
-      ))}
-    </nav>
-  );
-}
-
+/**
+ * The shell every document shares: the way back, the page, the way on.
+ *
+ * One column, like the homepage. The sidebar and the floating table of
+ * contents are gone: at this measure a document does not need a map of
+ * itself, and the list at the foot is the map.
+ */
 function DocsLayout() {
-  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const { pathname } = useLocation();
   const contentRef = useRef<HTMLElement>(null);
+  const others = NAV.filter((item) => item.to !== pathname.replace(/\/$/, ""));
 
   return (
     <>
       <SiteHeader />
-      <div className="border-b border-border xl:hidden">
-        <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2 sm:px-6">
-          <div className="lg:hidden">
-            <Sheet open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
-              <SheetTrigger asChild>
-                <Button variant="ghost" size="sm">
-                  <Menu aria-hidden="true" className="size-4" />
-                  Docs menu
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="left" className="w-72 p-4 pt-12">
-                <SheetTitle className="sr-only">Documentation navigation</SheetTitle>
-                <DocsNav onNavigate={() => setMobileNavOpen(false)} />
-              </SheetContent>
-            </Sheet>
-          </div>
-          <CopyMarkdown contentRef={contentRef} className="ml-auto" />
-        </div>
-      </div>
-      <div className="mx-auto flex min-h-dvh max-w-6xl gap-12 px-4 sm:px-6 lg:px-8">
-        <aside className="w-52 shrink-0 border-r border-border py-10 pr-6 max-lg:hidden">
-          <div className="sticky top-24">
-            <DocsNav />
-          </div>
-        </aside>
-        <main ref={contentRef} data-pagefind-body className="min-w-0 flex-1 py-10 lg:py-12">
-          <Outlet />
-        </main>
-        <aside className="w-56 shrink-0 py-12 max-xl:hidden">
-          <div className="sticky top-24 flex flex-col gap-6">
-            <CopyMarkdown contentRef={contentRef} className="self-start" />
-            <DocsToc contentRef={contentRef} />
-          </div>
-        </aside>
-      </div>
+      <main>
+        <Column className="py-10">
+          <p className={cn(TEXT, "flex flex-wrap items-center gap-x-4")}>
+            <A href="/">&larr; reins.tech</A>
+            <CopyMarkdown contentRef={contentRef} className="ml-auto" />
+          </p>
+
+          {/* An article, not a second <main>: the layout above already opens
+              one, and two main landmarks on a page is one too many. */}
+          <article ref={contentRef} data-pagefind-body className="mt-10">
+            <Outlet />
+          </article>
+
+          <Rule />
+          <p className={cn(TEXT, "mt-5 text-muted-foreground")}>Other pages</p>
+          <Ul>
+            {others.map((item) => (
+              <li key={item.to}>
+                <Link to={item.to} className="underline underline-offset-4 hover:text-primary">
+                  {item.label}
+                </Link>
+                <span className="text-muted-foreground"> {item.blurb}</span>
+              </li>
+            ))}
+          </Ul>
+        </Column>
+      </main>
       <SiteFooter />
     </>
   );
diff --git a/packages/web/src/routes/docs/security.tsx b/packages/web/src/routes/docs/security.tsx
index 4b6d1ff..a7a4c4c 100644
--- a/packages/web/src/routes/docs/security.tsx
+++ b/packages/web/src/routes/docs/security.tsx
@@ -1,4 +1,5 @@
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { A, Arrow, Code, H1, H2, P, Ul } from "@/components/md";
 import { seo } from "@/lib/seo";
 
 export const Route = createFileRoute("/docs/security")({
@@ -15,125 +16,116 @@ export const Route = createFileRoute("/docs/security")({
 
 function SecurityPage() {
   return (
-    <article className="prose max-w-[70ch]">
-      <h1>Security</h1>
-      <p>
-        A tool that drives your logged-in browser deserves a paranoid design. reins keeps the attack
+    <>
+      <H1>Security</H1>
+      <P>
+        A tool that drives your logged-in browser has to be careful with it. reins keeps the attack
         surface small by having no cloud half at all: the pieces only ever talk to each other, on
         your machine.
-      </p>
+      </P>
 
-      <h2>Network surface</h2>
-      <ul>
+      <H2 id="network">Network surface</H2>
+      <Ul>
         <li>
-          Everything binds <code>127.0.0.1</code>; neither the daemon nor the extension is reachable
+          Everything binds <Code>127.0.0.1</Code>. Neither the daemon nor the extension is reachable
           from the network.
         </li>
         <li>
-          <code>/rpc</code> and the other daemon endpoints validate the <code>Host</code> header, so
-          web pages can't reach the daemon even through rebound DNS.
+          <Code>/rpc</Code> and the other daemon endpoints validate the <Code>Host</Code> header, so
+          web pages cannot reach the daemon even through rebound DNS.
         </li>
         <li>
           The daemon accepts extension WebSocket connections only from exact allowlisted{" "}
-          <code>chrome-extension://&lt;id&gt;</code> origins. Browsers stamp that header themselves;
-          pages and other extensions can't forge it. Dev builds are added explicitly with{" "}
-          <code>reins allow &lt;id&gt;</code>.
+          <Code>chrome-extension://&lt;id&gt;</Code> origins. The browser stamps that header itself,
+          so pages and other extensions cannot forge it. Dev builds are added explicitly with{" "}
+          <Code>reins allow &lt;id&gt;</Code>.
         </li>
-      </ul>
+      </Ul>
 
-      <h2>Visibility and control</h2>
-      <ul>
+      <H2 id="visibility">Visibility and control</H2>
+      <Ul>
         <li>
           Chrome shows its native "is being debugged" banner whenever the extension is attached to a
           tab, so you always know when an agent is acting.
         </li>
-        <li>The toolbar popup's Disconnect toggle severs the daemon connection instantly.</li>
+        <li>The toolbar popup's Disconnect toggle cuts the daemon connection at once.</li>
         <li>
           Nothing happens in the background: the extension only acts on explicit commands sent
           through the CLI on your machine.
         </li>
-      </ul>
+      </Ul>
 
-      <h2>Per-site permissions</h2>
-      <ul>
+      <H2 id="permissions">Per-site permissions</H2>
+      <Ul>
         <li>
-          Every host resolves to a tier — <code>deny</code>, <code>read</code>, or <code>full</code>{" "}
-          — and the extension enforces it before any command touches a tab. The check runs inside
-          the extension, so nothing speaking the protocol — the CLI, the daemon, or any other local
-          client — can skip or loosen it.
+          Every host resolves to a tier: <Code>deny</Code>, <Code>read</Code> or <Code>full</Code>.
+          The extension enforces it before any command touches a tab. The check runs inside the
+          extension, so nothing that speaks the protocol can skip or loosen it. That includes the
+          CLI, the daemon, and any other local client.
         </li>
         <li>
-          Grants happen only in the extension popup, a user gesture an agent can't perform from the
-          shell. The CLI (<code>reins policy</code>) can view and tighten the policy, never loosen
-          it.
+          Grants happen only in the extension popup. That is a user gesture, and an agent cannot
+          perform it from the shell. The CLI (<Code>reins policy</Code>) can view and tighten the
+          policy, never loosen it.
         </li>
         <li>
-          The shipped default is <code>full</code> everywhere — today's behavior — so tightening is
-          opt-in. <code>deny</code> also redacts the site's tabs from <code>reins tabs</code>.
+          The shipped default is <Code>full</Code> everywhere, which is today's behavior, so
+          tightening is opt-in. <Code>deny</Code> also redacts the site's tabs from{" "}
+          <Code>reins tabs</Code>.
         </li>
-      </ul>
-      <p>
-        The full model — tiers, wildcard rules, matching precedence — is on the{" "}
-        <Link to="/docs/permissions">Site permissions</Link> page.
-      </p>
+      </Ul>
+      <Arrow href="/docs/permissions">Tiers, wildcard rules and matching precedence</Arrow>
 
-      <h2>Trust boundary</h2>
-      <p>
-        The tiers contain the agent you invited in; they are not a defense against other software on
-        your machine. Anything already running as your OS user sits inside the trust boundary — it
+      <H2 id="trust-boundary">Trust boundary</H2>
+      <P>
+        The tiers contain the agent you invited in. They are not a defense against other software on
+        your machine. Anything already running as your OS user sits inside the trust boundary: it
         could talk to the daemon or rewrite the policy store directly, and no browser automation
-        tool's permission model survives local malware. The honest write-up — what the tiers protect
-        against, what they can't, prompt injection, and a hardening checklist — is the{" "}
-        <a
-          href="https://github.com/karnstack/reins/blob/main/docs/SECURITY.md"
-          target="_blank"
-          rel="noreferrer"
-        >
+        tool's permission model survives local malware. The honest write-up covers what the tiers
+        protect against, what they do not, prompt injection, and a hardening checklist. It is the{" "}
+        <A href="https://github.com/karnstack/reins/blob/main/docs/SECURITY.md">
           threat model (SECURITY.md)
-        </a>
+        </A>
         .
-      </p>
+      </P>
 
-      <h2>Audit trail</h2>
-      <ul>
+      <H2 id="audit">Audit trail</H2>
+      <Ul>
         <li>
-          Every command the daemon executes — and every one the policy blocks — appends one
-          structured line (timestamp, command, browser, tab, host, tier, outcome, duration) to{" "}
-          <code>~/.reins/logs/audit-YYYY-MM-DD.jsonl</code>. <code>reins audit</code> renders the
-          trail; <code>--denied</code> shows only what policy blocked.
+          Every command the daemon executes, and every one the policy blocks, appends one structured
+          line (timestamp, command, browser, tab, host, tier, outcome, duration) to{" "}
+          <Code>~/.reins/logs/audit-YYYY-MM-DD.jsonl</Code>. <Code>reins audit</Code> renders the
+          trail, and <Code>--denied</Code> shows only what policy blocked.
         </li>
         <li>
-          Value-bearing params — typed text, fill values, <code>eval</code> code, CDP payloads — are
-          redacted before the line is written, so the trail never stores what the agent typed, only
+          Value-bearing params are redacted before the line is written: typed text, fill values,{" "}
+          <Code>eval</Code> code and CDP payloads. The trail never stores what the agent typed, only
           that it typed.
         </li>
         <li>
           Audit files are pruned after 30 days. Writes are best-effort: a full disk never blocks a
           command.
         </li>
-      </ul>
+      </Ul>
 
-      <h2>Data handling</h2>
-      <ul>
+      <H2 id="data">Data handling</H2>
+      <Ul>
         <li>
-          Page content and tab metadata are read via the Chrome DevTools Protocol only when your
+          Page content and tab metadata are read through the Chrome DevTools Protocol only when your
           local daemon asks, and are sent only to that daemon over localhost.
         </li>
         <li>No analytics, no telemetry, no tracking, no remote servers, no remote code.</li>
         <li>
           The only stored state is the extension's own settings (auto-connect, cached daemon port,
-          connection status) and your site-permission policy, kept in <code>chrome.storage</code> on
+          connection status) and your site-permission policy, kept in <Code>chrome.storage</Code> on
           your device.
         </li>
-      </ul>
-      <p>
-        The full policy lives at <Link to="/privacy">reins.tech/privacy</Link>. The code is
-        MIT-licensed and auditable at{" "}
-        <a href="https://github.com/karnstack/reins" target="_blank" rel="noreferrer">
-          github.com/karnstack/reins
-        </a>
+      </Ul>
+      <P>
+        The full policy is at <A href="/privacy">reins.tech/privacy</A>. The code is MIT-licensed
+        and auditable at <A href="https://github.com/karnstack/reins">github.com/karnstack/reins</A>
         .
-      </p>
-    </article>
+      </P>
+    </>
   );
 }
diff --git a/packages/web/src/routes/docs/sideload.tsx b/packages/web/src/routes/docs/sideload.tsx
index 77d65c9..5b28a69 100644
--- a/packages/web/src/routes/docs/sideload.tsx
+++ b/packages/web/src/routes/docs/sideload.tsx
@@ -1,6 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { CodeBlock } from "@/components/code-block";
+import { A, Code, H1, H2, Ol, P, Shell, Ul } from "@/components/md";
 import { seo } from "@/lib/seo";
+import { INSTALL_COMMAND } from "@/lib/site";
 
 export const Route = createFileRoute("/docs/sideload")({
   head: () => ({
@@ -16,83 +17,68 @@ export const Route = createFileRoute("/docs/sideload")({
 
 function SideloadPage() {
   return (
-    <article className="prose max-w-[70ch]">
-      <h1>Install without the store</h1>
-      <p>
+    <>
+      <H1>Install without the store</H1>
+      <P>
         The npm package carries a full copy of the reins extension. If you cannot (or would rather
         not) install from the{" "}
-        <a
-          href="https://chromewebstore.google.com/detail/reins/hnjcfgochepemjndccfblpmfmlblkofo"
-          target="_blank"
-          rel="noreferrer"
-        >
+        <A href="https://chromewebstore.google.com/detail/reins/hnjcfgochepemjndccfblpmfmlblkofo">
           Chrome Web Store
-        </a>
-        , one command stages it for Chrome's <strong>Load unpacked</strong>. No repo checkout, no
-        build, no <code>reins allow</code>.
-      </p>
+        </A>
+        , one command stages it for Chrome's Load unpacked. No repo checkout, no build, no{" "}
+        <Code>reins allow</Code>.
+      </P>
 
-      <h2>Install</h2>
-      <CodeBlock
-        code={`npm i -g @karnstack/reins
-reins extension`}
-      />
-      <ol>
+      <H2 id="install">Install</H2>
+      <Shell lines={[`$ ${INSTALL_COMMAND}`, "$ reins extension"]} />
+      <Ol>
         <li>
-          <code>reins extension</code> copies the bundled extension to{" "}
-          <code>~/.reins/extension</code> and prints these same steps.
+          <Code>reins extension</Code> copies the bundled extension to{" "}
+          <Code>~/.reins/extension</Code> and prints these same steps.
         </li>
         <li>
-          Open <code>chrome://extensions</code> (or <code>brave://extensions</code>,{" "}
-          <code>dia://extensions</code>, …).
+          Open <Code>chrome://extensions</Code> (or <Code>brave://extensions</Code>,{" "}
+          <Code>dia://extensions</Code>, and so on).
         </li>
+        <li>Enable Developer mode, top right.</li>
         <li>
-          Enable <strong>Developer mode</strong> (top right).
+          Click Load unpacked and select <Code>~/.reins/extension</Code>.
         </li>
         <li>
-          Click <strong>Load unpacked</strong> and select <code>~/.reins/extension</code>.
+          Run <Code>reins status</Code>. The extension finds the daemon and connects on its own.
         </li>
-        <li>
-          Run <code>reins status</code>; the extension finds the daemon and connects on its own.
-        </li>
-      </ol>
-      <p>
-        There is no <code>reins allow</code> step: the sideload build pins a public key in its
+      </Ol>
+      <P>
+        There is no <Code>reins allow</Code> step: the sideload build pins a public key in its
         manifest, so its extension ID is identical on every machine and ships in the CLI's built-in
         allowlist.
-      </p>
+      </P>
 
-      <h2>Updating</h2>
-      <p>Sideloaded extensions do not auto-update. After upgrading the CLI, re-stage it:</p>
-      <CodeBlock code="reins extension" />
-      <p>
-        Then click <strong>Reload</strong> on the reins card in <code>chrome://extensions</code>.
-        The path never changes, so Chrome keeps the registration.
-      </p>
+      <H2 id="updating">Updating</H2>
+      <P>Sideloaded extensions do not auto-update. After upgrading the CLI, re-stage it:</P>
+      <Shell lines={["$ reins extension"]} />
+      <P>
+        Then click Reload on the reins card in <Code>chrome://extensions</Code>. The path never
+        changes, so Chrome keeps the registration.
+      </P>
 
-      <h2>Caveats</h2>
-      <ul>
+      <H2 id="caveats">Caveats</H2>
+      <Ul>
         <li>
           Chrome shows its usual developer-mode reminders for unpacked extensions on some platforms.
-          That is inherent to sideloading; the store build has no such nag
+          That comes with sideloading. The store build does not show them.
         </li>
         <li>
-          A sideloaded and a store-installed reins can coexist, but run one at a time; disable the
-          other in <code>chrome://extensions</code> so two connections don't both drive your tabs
+          A sideloaded and a store-installed reins can coexist, but run one at a time. Disable the
+          other in <Code>chrome://extensions</Code>, so two connections do not both drive your tabs.
         </li>
         <li>
           Working from a source checkout instead? That flow uses a per-machine dev ID and{" "}
-          <code>reins allow</code>; see{" "}
-          <a
-            href="https://github.com/karnstack/reins/blob/main/docs/RUNNING.md"
-            target="_blank"
-            rel="noreferrer"
-          >
-            RUNNING.md
-          </a>{" "}
-          on GitHub
+          <Code>reins allow</Code>. See{" "}
+          <A href="https://github.com/karnstack/reins/blob/main/docs/RUNNING.md">RUNNING.md</A> on
+          GitHub.
         </li>
-      </ul>
-    </article>
+      </Ul>
+    </>
   );
 }
diff --git a/packages/web/src/routes/index.tsx b/packages/web/src/routes/index.tsx
index fda145d..f87b5ce 100644
--- a/packages/web/src/routes/index.tsx
+++ b/packages/web/src/routes/index.tsx
@@ -1,22 +1,26 @@
-import { createFileRoute, Link } from "@tanstack/react-router";
-import {
-  AppWindow,
-  Braces,
-  Bug,
-  KeyRound,
-  MousePointerClick,
-  ScanSearch,
-  ShieldCheck,
-} from "lucide-react";
+import { createFileRoute } from "@tanstack/react-router";
+import { BrowserMock } from "@/components/browser-mock";
 import { CopyCommand } from "@/components/copy-command";
-import { Hero } from "@/components/hero";
-import { IdeasSection } from "@/components/ideas-section";
+import {
+  Arrow,
+  Code,
+  Column,
+  H2,
+  Kbd,
+  Meta,
+  P,
+  Pre,
+  Shell,
+  Table,
+  TEXT,
+  Ul,
+} from "@/components/md";
 import { PopupMock } from "@/components/popup-mock";
-import { Reveal } from "@/components/reveal";
 import { SiteFooter } from "@/components/site-footer";
 import { SiteHeader } from "@/components/site-header";
-import { Button } from "@/components/ui/button";
 import { seo } from "@/lib/seo";
+import { INSTALL_COMMAND, REPO_URL } from "@/lib/site";
+import { cn } from "@/lib/utils";
 
 const CHROME_WEB_STORE_URL =
   "https://chromewebstore.google.com/detail/reins/hnjcfgochepemjndccfblpmfmlblkofo";
@@ -26,7 +30,7 @@ export const Route = createFileRoute("/")({
     ...seo({
       title: "reins: drive your real browser from your coding agent",
       description:
-        "reins lets coding agents drive the logged-in Chromium browser you already use, through a local CLI, daemon, and extension. Everything stays on 127.0.0.1.",
+        "reins is a CLI that hands your coding agent the logged-in Chromium browser you already use. A local daemon and a Manifest V3 extension, everything on 127.0.0.1. No cloud, no telemetry, MIT.",
       path: "/",
     }),
     scripts: [
@@ -51,271 +55,282 @@ export const Route = createFileRoute("/")({
       },
     ],
   }),
-  component: LandingPage,
+  component: Home,
 });
 
-const FEATURES = [
-  {
-    icon: AppWindow,
-    title: "Every tab, every browser",
-    description:
-      "List, open, focus, and close tabs across Chrome, Brave, Edge, Arc, and Dia. One daemon serves every connected browser.",
-  },
-  {
-    icon: MousePointerClick,
-    title: "Real interaction",
-    description:
-      "Click, type, fill, select, hover, scroll, press keys, and upload files, all addressed by stable element refs, not brittle selectors.",
-  },
-  {
-    icon: ScanSearch,
-    title: "See the page",
-    description:
-      "Snapshot interactive elements, read visible text, and capture screenshots your agent can open and reason about.",
-  },
-  {
-    icon: Bug,
-    title: "Debug signals",
-    description:
-      "Read a tab's recent console messages and network requests without ever opening DevTools.",
-  },
-  {
-    icon: Braces,
-    title: "An escape hatch",
-    description:
-      "Evaluate JavaScript in the page, or issue raw Chrome DevTools Protocol commands when the curated set isn't enough.",
-  },
-  {
-    icon: KeyRound,
-    title: "Your sessions intact",
-    description:
-      "It is your real profile, with logins, cookies, and state included. No separate automation browser to babysit.",
-  },
-];
+/**
+ * One document, top to bottom.
+ *
+ * What it is, what it does, the loop, how it reaches a tab, who is allowed to
+ * touch what, the facts, the limits, the install line. No hero, no cards, no
+ * numbered boxes. The two mocks are the only pictures, and they sit in the
+ * flow where a README would put a screenshot.
+ */
+function Home() {
+  return (
+    <>
+      <SiteHeader />
+      <main>
+        <Column className="py-10">
+          <Meta lines={["karnstack", "reins", "2026 · MIT"]} />
 
-function SectionDivider() {
+          <div className="mt-16">
+            <h1 className={cn(TEXT, "font-semibold tracking-wide text-balance uppercase")}>
+              <span aria-hidden="true" className="mr-2 text-muted-foreground select-none">
+                #
+              </span>
+              Drive the browser you are already signed in to
+            </h1>
+          </div>
+          <P>
+            reins is a CLI that hands your coding agent the real Chromium browser you already use.
+            Claude Code, Cursor, Codex, anything with a shell. The logins, the cookies and the
+            sessions are already there, because it is your browser. No debug profile, no launch
+            flags, no MCP server to register.
+          </P>
+
+          <CopyCommand command={INSTALL_COMMAND} className={cn(TEXT, "mt-5 max-w-[68ch]")} />
+          <P muted>
+            then add the{" "}
+            <a
+              href={CHROME_WEB_STORE_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="underline underline-offset-4 hover:text-primary"
+            >
+              extension
+            </a>{" "}
+            in every browser you want agents to reach
+          </P>
+
+          <BrowserMock className="mt-10" />
+
+          <WhatItDoes />
+          <Loop />
+          <HowItWorks />
+          <Permissions />
+          <Facts />
+          <Limits />
+          <Install />
+        </Column>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
+
+/* ------------------------------------------------------------------------ */
+
+function WhatItDoes() {
   return (
-    <div
-      aria-hidden="true"
-      className="mx-auto h-px max-w-6xl bg-gradient-to-r from-transparent via-border to-transparent"
-    />
+    <>
+      <H2 id="what-it-does">What it does</H2>
+      <Ul>
+        <li>
+          Every tab, every browser. List, open, focus and close tabs across Chrome, Brave, Edge, Arc
+          and Dia. One daemon serves every browser that connects to it.
+        </li>
+        <li>
+          Act on the page. Click, type, fill, select, hover, scroll, press keys, upload files,
+          answer dialogs, resize the window.
+        </li>
+        <li>
+          Refs, not selectors. <Code>reins snapshot</Code> lists the interactive elements with
+          stable refs, and commands act by ref. A CSS <Code>--selector</Code> is there when you need
+          it.
+        </li>
+        <li>Read the page. Visible text, and screenshots your agent can open and reason about.</li>
+        <li>
+          Console and network, without opening DevTools. Recent messages and requests, filtered by
+          level, age or URL.
+        </li>
+        <li>
+          An escape hatch. <Code>reins eval</Code> runs JavaScript in the page.{" "}
+          <Code>reins cdp</Code> sends a raw Chrome DevTools Protocol command when the curated set
+          is not enough.
+        </li>
+        <li>
+          Site permissions. Every host resolves to deny, read or full, and the extension enforces it
+          before a command touches a tab.
+        </li>
+        <li>
+          An audit trail. Every command the daemon runs, and every one the policy blocks, appends
+          one line to <Code>~/.reins/logs</Code>, with the values redacted.
+        </li>
+      </Ul>
+    </>
   );
 }
 
-const SECURITY_POINTS = [
-  "Everything binds 127.0.0.1; nothing is reachable from the network.",
-  "Host-header validation blocks DNS rebinding, so web pages can't reach the daemon.",
-  "Only allowlisted chrome-extension:// origins may connect, an identity pages can't forge.",
-  "Chrome shows its native debugging banner whenever the extension is attached.",
-  "The popup's Disconnect toggle severs the connection instantly.",
+/* ------------------------------------------------------------------------ */
+
+const LOOP_LINES = [
+  "$ reins snapshot",
+  '  e3: input "Email"',
+  '  e7: button "Sign in"',
+  '$ reins type --ref e3 --text "you@work.dev"',
+  "$ reins click --ref e7",
+  "$ reins text",
+  "  Signed in as you@work.dev",
 ];
 
-function LandingPage() {
+function Loop() {
   return (
     <>
-      <SiteHeader />
-      <main>
-        <Hero />
+      <H2 id="loop">The loop</H2>
+      <P>
+        Every page interaction is the same three beats: look, act, check. The commands that act on a
+        page or a tab share three flags: <Code>--tab &lt;id&gt;</Code> (the active tab by default),{" "}
+        <Code>--browser &lt;id&gt;</Code> (only when more than one browser is connected) and{" "}
+        <Code>--json</Code> for raw output.
+      </P>
+      <Shell lines={LOOP_LINES} />
+      <Arrow href="/docs/commands">Full command reference</Arrow>
+    </>
+  );
+}
 
-        <SectionDivider />
+/* ------------------------------------------------------------------------ */
 
-        <section className="py-20 sm:py-24">
-          <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
-            <Reveal>
-              <p className="font-mono text-sm tracking-wide text-muted-foreground uppercase">
-                How it works
-              </p>
-              <h2 className="mt-3 max-w-[35ch] text-4xl font-semibold tracking-tight text-balance">
-                Install once, drive everything
-              </h2>
-              <p className="mt-4 max-w-[56ch] text-pretty text-muted-foreground">
-                Three pieces, all yours: a CLI your agent calls, a daemon it auto-spawns, and an
-                extension that dials in. Nothing to keep running, nothing to register per agent.
-              </p>
-            </Reveal>
-            {/* biome-ignore lint/a11y/noRedundantRoles: Safari drops list semantics once list-style is none */}
-            <ol role="list" className="mt-12 grid gap-x-8 gap-y-10 md:grid-cols-3">
-              <li>
-                <Reveal>
-                  <p className="font-mono text-sm text-muted-foreground">01</p>
-                  <h3 className="mt-2 font-semibold">Install the CLI</h3>
-                  <p className="mt-2 text-base/7 text-pretty text-muted-foreground sm:text-sm/6">
-                    The daemon ships inside and starts on demand; any command spawns it.
-                  </p>
-                  <CopyCommand command="npm i -g @karnstack/reins" className="mt-4" />
-                </Reveal>
-              </li>
-              <li>
-                <Reveal delay={100}>
-                  <p className="font-mono text-sm text-muted-foreground">02</p>
-                  <h3 className="mt-2 font-semibold">Add the extension</h3>
-                  <p className="mt-2 text-base/7 text-pretty text-muted-foreground sm:text-sm/6">
-                    Install it from the Chrome Web Store in every browser you want agents to reach.
-                    It discovers the daemon on its own and the toolbar icon turns green when
-                    connected.
-                  </p>
-                  <Button asChild variant="outline" className="mt-4">
-                    <a href={CHROME_WEB_STORE_URL} target="_blank" rel="noreferrer">
-                      Get the extension
-                    </a>
-                  </Button>
-                </Reveal>
-              </li>
-              <li>
-                <Reveal delay={200}>
-                  <p className="font-mono text-sm text-muted-foreground">03</p>
-                  <h3 className="mt-2 font-semibold">Teach your agent</h3>
-                  <p className="mt-2 text-base/7 text-pretty text-muted-foreground sm:text-sm/6">
-                    The skill teaches any coding agent the command loop. From here, the agent
-                    drives.
-                  </p>
-                  <CopyCommand command="npx skills add karnstack/reins" className="mt-4" />
-                </Reveal>
-              </li>
-            </ol>
-          </div>
-        </section>
+/*
+ * The whole path from a shell to a tab, drawn as one line. Nothing on it
+ * leaves the machine, which is the thing worth showing.
+ */
+const PATH = `your agent            your machine                  your browser
+shells out            daemon, starts on demand      extension, MV3
+reins <cmd>  ───────► 127.0.0.1  ──────────────────► chrome.debugger, CDP`;
 
-        <SectionDivider />
+const PATH_LABEL =
+  "Your agent shells out to the reins CLI. The CLI talks to a daemon on 127.0.0.1, which starts on demand. The daemon holds a WebSocket to a Manifest V3 extension, which acts on your tabs through the Chrome DevTools Protocol.";
 
-        <section className="py-20 sm:py-24">
-          <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
-            <Reveal>
-              <h2 className="max-w-[35ch] text-4xl font-semibold tracking-tight text-balance">
-                Everything an agent needs to work a page
-              </h2>
-              <p className="mt-4 max-w-[56ch] text-pretty text-muted-foreground">
-                A small, curated command set covers the whole loop: look at the page, act on it,
-                verify the result.
-              </p>
-            </Reveal>
-            <dl className="mt-12 grid gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
-              {FEATURES.map((feature, i) => (
-                <Reveal key={feature.title} delay={(i % 3) * 100}>
-                  <dt className="flex items-center gap-3 font-semibold">
-                    <feature.icon
-                      aria-hidden="true"
-                      className="size-5 shrink-0 text-violet-600 dark:text-violet-400"
-                    />
-                    {feature.title}
-                  </dt>
-                  <dd className="mt-2 text-base/7 text-pretty text-muted-foreground sm:text-sm/6">
-                    {feature.description}
-                  </dd>
-                </Reveal>
-              ))}
-            </dl>
-          </div>
-        </section>
+function HowItWorks() {
+  return (
+    <>
+      <H2 id="how-it-works">How it works</H2>
+      <P>
+        Three pieces with one narrow contract between them, and all three run on your machine. The
+        daemon ships inside the CLI and starts on demand, so there is nothing to keep running and
+        nothing to register per agent.
+      </P>
+      <Pre label={PATH_LABEL}>{PATH}</Pre>
+      <P>
+        The extension finds the daemon by probing a small set of localhost ports, and authenticates
+        by its <Code>chrome-extension://&lt;id&gt;</Code> origin, a header the browser stamps itself
+        and a page cannot forge. Chrome shows its native debugging banner the whole time it is
+        attached.
+      </P>
+      <Arrow href="/docs/architecture">How the three pieces fit together</Arrow>
+    </>
+  );
+}
 
-        <SectionDivider />
+/* ------------------------------------------------------------------------ */
 
-        <IdeasSection />
+function Permissions() {
+  return (
+    <>
+      <H2 id="permissions">Site permissions</H2>
+      <P>
+        Every site your agent touches resolves to one of three tiers. The check lives in the
+        extension, the one place no process on your machine can reach around, so a misbehaving agent
+        cannot skip it.
+      </P>
+      <Table
+        rows={[
+          ["deny", "Nothing. Commands fail, and the site's tabs are redacted from reins tabs."],
+          [
+            "read",
+            "Reading only. snapshot, text, screenshot, console, network and wait. Anything that acts on the page is blocked.",
+          ],
+          ["full", "Everything, including navigation, interaction, eval and raw CDP."],
+        ]}
+      />
+      <P>
+        Granting more access takes a click in the extension popup. That is a user gesture, and an
+        agent in your shell cannot perform one. From the CLI, <Code>reins policy</Code> can inspect
+        the policy and tighten it. It can never loosen it.
+      </P>
+      <PopupMock className="mt-10 font-sans" />
+      <Arrow href="/docs/permissions">How site permissions work</Arrow>
+    </>
+  );
+}
 
-        <SectionDivider />
+/* ------------------------------------------------------------------------ */
 
-        <section className="py-20 sm:py-24">
-          <div className="mx-auto grid max-w-6xl items-center gap-x-12 gap-y-12 px-4 sm:px-6 lg:grid-cols-2 lg:px-8">
-            <Reveal>
-              <p className="font-mono text-sm tracking-wide text-muted-foreground uppercase">
-                Trust
-              </p>
-              <h2 className="mt-3 max-w-[35ch] text-4xl font-semibold tracking-tight text-balance">
-                You hold the reins
-              </h2>
-              <p className="mt-4 max-w-[56ch] text-pretty text-muted-foreground">
-                Every site your agent touches resolves to a permission tier — deny, read-only, or
-                full. The check runs inside the extension, the one place no process on your machine
-                can reach around, so even a misbehaving agent can't skip it.
-              </p>
-              <p className="mt-4 max-w-[56ch] text-pretty text-muted-foreground">
-                Granting more access takes a click in the extension popup — a user gesture no agent
-                can fake from a shell. The CLI can inspect and tighten the policy, never loosen it.
-              </p>
-              <p className="mt-4 text-sm">
-                <Link
-                  to="/docs/permissions"
-                  className="font-medium text-foreground underline underline-offset-3 decoration-foreground/30 hover:decoration-foreground"
-                >
-                  How site permissions work
-                </Link>
-              </p>
-            </Reveal>
-            <Reveal delay={150} className="flex justify-center lg:justify-end">
-              <PopupMock />
-            </Reveal>
-          </div>
-        </section>
+function Facts() {
+  return (
+    <>
+      <H2 id="facts">Facts</H2>
+      <Table
+        rows={[
+          ["License", "MIT"],
+          ["Install", <Code key="i">{INSTALL_COMMAND}</Code>],
+          ["Browsers", "Chrome, Brave, Edge, Arc, Dia. Any Chromium that takes MV3 extensions."],
+          ["Agents", "Claude Code, Cursor, Codex, Copilot, Gemini CLI. Anything with a shell."],
+          ["Binds", <Code key="b">127.0.0.1</Code>],
+          ["Hosted service", "None"],
+          ["Account", "None"],
+          ["Telemetry", "None. No analytics, no tracking, no remote code."],
+          ["Version", "0.x. Commands and output can still change."],
+        ]}
+      />
+    </>
+  );
+}
 
-        <SectionDivider />
+/* ------------------------------------------------------------------------ */
 
-        <section className="py-20 sm:py-24">
-          <div className="mx-auto grid max-w-6xl gap-x-12 gap-y-10 px-4 sm:px-6 lg:grid-cols-2 lg:px-8">
-            <Reveal>
-              <h2 className="max-w-[35ch] text-4xl font-semibold tracking-tight text-balance">
-                Local by design
-              </h2>
-              <p className="mt-4 max-w-[56ch] text-pretty text-muted-foreground">
-                reins has no cloud half. The extension talks to one thing, your own daemon on
-                127.0.0.1, and collects nothing, for anyone. The whole stack is open source and
-                auditable.
-              </p>
-              <p className="mt-4 text-sm">
-                <Link
-                  to="/docs/security"
-                  className="font-medium text-foreground underline underline-offset-3 decoration-foreground/30 hover:decoration-foreground"
-                >
-                  Read the security model
-                </Link>
-              </p>
-            </Reveal>
-            <Reveal delay={100}>
-              {/* biome-ignore lint/a11y/noRedundantRoles: Safari drops list semantics once list-style is none */}
-              <ul role="list" className="space-y-4">
-                {SECURITY_POINTS.map((point) => (
-                  <li key={point} className="flex items-start gap-3">
-                    <ShieldCheck
-                      aria-hidden="true"
-                      className="size-5 shrink-0 text-violet-600 dark:text-violet-400"
-                    />
-                    <p className="text-base/6 text-pretty text-muted-foreground sm:text-sm/5">
-                      {point}
-                    </p>
-                  </li>
-                ))}
-              </ul>
-            </Reveal>
-          </div>
-        </section>
+function Limits() {
+  return (
+    <>
+      <H2 id="limits">Limits</H2>
+      <Table
+        rows={[
+          ["Browsers", "Chromium only. No Firefox, no WebKit."],
+          ["Headless", "Not supported. reins drives a browser you already have open."],
+          [
+            "CI",
+            "Not the target. Use Playwright or agent-browser for a machine with nobody at it.",
+          ],
+          [
+            "Two browsers",
+            <>
+              Supported, but commands then need <Code>--browser &lt;id&gt;</Code>. reins never
+              guesses which one you meant.
+            </>,
+          ],
+          ["Releases", "0.x. Commands, flags and output can still change."],
+        ]}
+      />
+    </>
+  );
+}
 
-        <SectionDivider />
+/* ------------------------------------------------------------------------ */
 
-        <section className="relative isolate overflow-hidden py-20 sm:py-28">
-          <div
-            aria-hidden="true"
-            className="pointer-events-none absolute inset-0 -z-10 [background:radial-gradient(42rem_26rem_at_50%_120%,--alpha(var(--color-primary)/12%),transparent_60%)] dark:[background:radial-gradient(42rem_26rem_at_50%_120%,--alpha(var(--color-primary)/20%),transparent_62%)]"
-          />
-          <div className="mx-auto max-w-6xl px-4 text-center sm:px-6 lg:px-8">
-            <Reveal>
-              <h2 className="mx-auto max-w-[30ch] font-display text-5xl font-semibold tracking-tight text-balance">
-                Hand your agent the reins
-              </h2>
-              <p className="mx-auto mt-4 max-w-[48ch] text-pretty text-muted-foreground">
-                Two installs and a skill: your agent is driving your browser in under a minute.
-              </p>
-              <div className="mt-8 flex justify-center">
-                <CopyCommand command="npm i -g @karnstack/reins" />
-              </div>
-              <div className="mt-6">
-                <Button asChild variant="outline" size="lg">
-                  <Link to="/docs">Read the docs</Link>
-                </Button>
-              </div>
-            </Reveal>
-          </div>
-        </section>
-      </main>
-      <SiteFooter />
+function Install() {
+  return (
+    <>
+      <H2 id="install">Install</H2>
+      <Shell
+        lines={[`$ ${INSTALL_COMMAND}`, "$ npx skills add karnstack/reins", "$ reins status"]}
+      />
+      <P>
+        The first line installs the CLI, and the daemon rides along inside it. The second teaches
+        any agent with skill support the command set; the rest can read <Code>reins help</Code>.
+        Then install the extension in every browser you want agents to reach, and{" "}
+        <Code>reins status</Code> shows what is connected.
+      </P>
+      <P muted>
+        No Chrome Web Store access? <Code>reins extension</Code> stages the bundled copy for
+        Chrome's Load unpacked, with no <Code>reins allow</Code> step.
+      </P>
+      <P>
+        Press <Kbd>&#8984;K</Kbd> anywhere on this site to search the docs.
+      </P>
+      <Arrow href="/docs">Setup guide</Arrow>
+      <Arrow href={REPO_URL}>Source</Arrow>
     </>
   );
 }
diff --git a/packages/web/src/routes/privacy.tsx b/packages/web/src/routes/privacy.tsx
index 7d7b507..03d9ddb 100644
--- a/packages/web/src/routes/privacy.tsx
+++ b/packages/web/src/routes/privacy.tsx
@@ -1,4 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { A, Code, Column, H1, H2, P, Ul } from "@/components/md";
 import { SiteFooter } from "@/components/site-footer";
 import { SiteHeader } from "@/components/site-header";
 import { seo } from "@/lib/seo";
@@ -8,7 +9,7 @@ export const Route = createFileRoute("/privacy")({
     ...seo({
       title: "Privacy policy · reins",
       description:
-        "The reins privacy policy: everything stays on your machine — no analytics, no telemetry, no remote servers.",
+        "The reins privacy policy: everything stays on your machine. No analytics, no telemetry, no remote servers.",
       path: "/privacy",
     }),
   }),
@@ -19,37 +20,42 @@ function PrivacyPage() {
   return (
     <>
       <SiteHeader />
-      <main className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
-        <article className="prose max-w-[70ch]">
-          <h1>Privacy policy</h1>
-          <p>Last updated: July 11, 2026</p>
-          <p>
+      <main>
+        <Column className="py-10">
+          <p className="text-base/7 sm:text-sm/7">
+            <A href="/">&larr; reins.tech</A>
+          </p>
+          <div className="mt-10">
+            <H1>Privacy policy</H1>
+          </div>
+          <P muted>Last updated: July 11, 2026</P>
+          <P>
             reins is a browser extension that lets a local daemon on your own machine (installed by
-            you, via the <code>@karnstack/reins</code> CLI) drive your browser. It is a developer
+            you, via the <Code>@karnstack/reins</Code> CLI) drive your browser. It is a developer
             tool; you install both halves yourself.
-          </p>
+          </P>
 
-          <h2>What data reins handles</h2>
-          <ul>
+          <H2 id="what-it-handles">What data reins handles</H2>
+          <Ul>
             <li>
               Page content and tab metadata (titles, URLs, screenshots, console and network activity
-              of tabs you interact with through your agent) are read via the Chrome DevTools
+              of tabs you interact with through your agent) are read through the Chrome DevTools
               Protocol only when the local reins daemon asks, and are sent only to that daemon over
-              a WebSocket bound to <code>127.0.0.1</code> on your machine.
+              a WebSocket bound to <Code>127.0.0.1</Code> on your machine.
             </li>
             <li>
               Settings (the auto-connect toggle and the cached daemon port) and your site-permission
-              policy (per-site access tiers: deny, read, or full) are stored in{" "}
-              <code>chrome.storage.local</code> on your device. Connection status is stored in{" "}
-              <code>chrome.storage.session</code>.
+              policy (per-site access tiers: deny, read or full) are stored in{" "}
+              <Code>chrome.storage.local</Code> on your device. Connection status is stored in{" "}
+              <Code>chrome.storage.session</Code>.
             </li>
-          </ul>
+          </Ul>
 
-          <h2>What reins does not do</h2>
-          <ul>
+          <H2 id="what-it-does-not">What reins does not do</H2>
+          <Ul>
             <li>
               No data is sent to the developer or to any remote server. There is no analytics,
-              telemetry, tracking, or advertising of any kind.
+              telemetry, tracking or advertising of any kind.
             </li>
             <li>No data is sold or shared with third parties.</li>
             <li>
@@ -57,30 +63,30 @@ function PrivacyPage() {
               sent through the reins CLI on your own machine.
             </li>
             <li>The extension loads no remote code.</li>
-          </ul>
+          </Ul>
 
-          <h2>Security</h2>
-          <ul>
+          <H2 id="security">Security</H2>
+          <Ul>
             <li>
-              The daemon accepts the extension's connection only from <code>127.0.0.1</code> and
-              only from allowlisted extension identities (<code>chrome-extension://&lt;id&gt;</code>{" "}
+              The daemon accepts the extension's connection only from <Code>127.0.0.1</Code>, and
+              only from allowlisted extension identities (<Code>chrome-extension://&lt;id&gt;</Code>{" "}
               origins, which browsers set themselves and web pages cannot forge).
             </li>
             <li>
               Chrome shows its native "is debugging this browser" banner whenever the extension is
-              attached to a tab; the popup's Disconnect toggle severs the connection at any time.
+              attached to a tab, and the popup's Disconnect toggle cuts the connection at any time.
             </li>
-          </ul>
+          </Ul>
 
-          <h2>Contact</h2>
-          <p>
+          <H2 id="contact">Contact</H2>
+          <P>
             Questions or concerns: open an issue at{" "}
-            <a href="https://github.com/karnstack/reins/issues" target="_blank" rel="noreferrer">
+            <A href="https://github.com/karnstack/reins/issues">
               github.com/karnstack/reins/issues
-            </a>{" "}
-            or email <a href="mailto:mail@karngyan.com">mail@karngyan.com</a>.
-          </p>
-        </article>
+            </A>{" "}
+            or email <A href="mailto:mail@karngyan.com">mail@karngyan.com</A>.
+          </P>
+        </Column>
       </main>
       <SiteFooter />
     </>
diff --git a/packages/web/src/styles.css b/packages/web/src/styles.css
index c51ab1c..edc74a6 100644
--- a/packages/web/src/styles.css
+++ b/packages/web/src/styles.css
@@ -9,17 +9,23 @@
    query. */
 @custom-variant dark (&:where(.dark, .dark *));
 
+/*
+ * The page is set in mono, the way a README is. Inter is still here for one
+ * reason: the drawn mocks are pictures of a browser and of the extension
+ * popup, and those are set in a UI face. They opt in with `font-sans`;
+ * everything else inherits mono from <body>.
+ */
 @theme {
   --font-sans: "InterVariable", ui-sans-serif, system-ui, sans-serif;
   --font-sans--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
-  --font-display: "Mona Sans", "InterVariable", ui-sans-serif, system-ui, sans-serif;
-  --font-display--font-variation-settings: "wdth" 112.5;
   --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
 }
 
 :root {
   color-scheme: light;
-  --radius: 0.625rem;
+  /* Zero on everything the site owns. The mocks draw real UI, which has
+     corners, and they carry their own values. */
+  --radius: 0;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -100,195 +106,8 @@
   --radius-xl: calc(var(--radius) + 4px);
 }
 
-/* Documentation / long-form content rendered from JSX without per-element
-   classes. Width is constrained in the markup (`prose max-w-[70ch]`). */
-@utility prose {
-  color: var(--color-foreground);
-  font-size: var(--text-base);
-  line-height: --spacing(7);
-
-  & > * + * {
-    margin-top: --spacing(5);
-  }
-
-  & h1 {
-    font-size: var(--text-3xl);
-    line-height: var(--text-3xl--line-height);
-    font-weight: var(--font-weight-semibold);
-    letter-spacing: var(--tracking-tight);
-    text-wrap: pretty;
-  }
-
-  & h1,
-  & h2,
-  & h3 {
-    /* Anchored headings land below the sticky site header. */
-    scroll-margin-top: --spacing(20);
-  }
-
-  & h2 {
-    margin-top: --spacing(12);
-    font-size: var(--text-xl);
-    line-height: var(--text-xl--line-height);
-    font-weight: var(--font-weight-semibold);
-    letter-spacing: var(--tracking-tight);
-    text-wrap: pretty;
-  }
-
-  & h3 {
-    margin-top: --spacing(8);
-    font-size: var(--text-base);
-    line-height: var(--text-base--line-height);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  & p {
-    color: var(--color-muted-foreground);
-  }
-
-  & a {
-    color: var(--color-foreground);
-    font-weight: var(--font-weight-medium);
-    text-decoration: underline;
-    text-underline-offset: 3px;
-    text-decoration-color: var(--prose-underline, --alpha(var(--color-foreground) / 30%));
-
-    @variant hover {
-      --prose-underline: var(--color-foreground);
-    }
-  }
-
-  & strong {
-    color: var(--color-foreground);
-    font-weight: var(--font-weight-medium);
-  }
-
-  & ul,
-  & ol {
-    padding-left: --spacing(5);
-    color: var(--color-muted-foreground);
-  }
-
-  & ul {
-    list-style-type: disc;
-  }
-
-  & ol {
-    list-style-type: decimal;
-  }
-
-  & li {
-    padding-left: --spacing(1);
-  }
-
-  & li + li {
-    margin-top: --spacing(2);
-  }
-
-  & code {
-    font-family: var(--font-mono);
-    font-size: 0.875em;
-    color: var(--color-foreground);
-  }
-
-  & :not(pre) > code {
-    border-radius: var(--radius-sm);
-    background-color: --alpha(var(--color-foreground) / 5%);
-    padding: --spacing(0.5) --spacing(1);
-  }
-
-  & pre {
-    overflow-x: auto;
-    border-radius: var(--radius-lg);
-    background-color: oklch(0.205 0 0);
-    color: oklch(0.87 0 0);
-    padding: --spacing(4);
-    font-size: var(--text-sm);
-    line-height: --spacing(6);
-
-    @variant dark {
-      box-shadow: inset 0 0 0 1px --alpha(var(--color-white) / 5%);
-    }
-  }
-
-  & pre code {
-    color: inherit;
-    font-size: inherit;
-  }
-
-  & blockquote {
-    border-left: 2px solid var(--color-border);
-    padding-left: --spacing(4);
-    color: var(--color-muted-foreground);
-  }
-
-  & hr {
-    margin-top: --spacing(10);
-    border-color: var(--color-border);
-  }
-
-  & table {
-    width: 100%;
-    font-size: var(--text-sm);
-    line-height: --spacing(6);
-  }
-
-  & th {
-    white-space: nowrap;
-    text-align: left;
-    font-weight: var(--font-weight-medium);
-    padding: --spacing(2) --spacing(3);
-  }
-
-  & th:first-child,
-  & td:first-child {
-    padding-left: 0;
-  }
-
-  & th:last-child,
-  & td:last-child {
-    padding-right: 0;
-  }
-
-  & td {
-    padding: --spacing(2) --spacing(3);
-    border-top: 1px solid var(--color-border);
-    color: var(--color-muted-foreground);
-  }
-}
-
 @keyframes terminal-caret {
   50% {
     opacity: 0;
   }
 }
-
-/* Decorative hero backdrop: a faint dot grid that fades out toward the edges,
-   plus a soft violet glow behind the headline. Sits in an aria-hidden layer
-   below the content; tuned low enough to stay subtle in light and dark. */
-@utility hero-grid {
-  background-image: radial-gradient(var(--color-foreground) 0.75px, transparent 0.75px);
-  background-size: 22px 22px;
-  mask-image: radial-gradient(120% 90% at 50% 0%, black, transparent 70%);
-  opacity: 0.04;
-
-  @variant dark {
-    opacity: 0.05;
-  }
-}
-
-@utility hero-glow {
-  background: radial-gradient(
-    42rem 30rem at 70% -10%,
-    --alpha(var(--color-primary) / 14%),
-    transparent 60%
-  );
-
-  @variant dark {
-    background: radial-gradient(
-      42rem 30rem at 70% -10%,
-      --alpha(var(--color-primary) / 22%),
-      transparent 62%
-    );
-  }
-}