diff --git a/site/static/site.css b/site/static/site.css
index 13195d0..500b4de 100644
--- a/site/static/site.css
+++ b/site/static/site.css
@@ -131,6 +131,15 @@ img{max-width:100%;height:auto}
   display:grid;grid-template-columns:236px minmax(0,1fr) 208px;
   background:var(--surface);
 }
+/* Reference pages put a console in the gutter instead of a contents
+   list, and a console of settings is only useful if the settings are
+   legible: at 208px every BOARD_AGENT_MODEL_* line was cut mid-key.
+   So the room right of the nav is split three fifths prose, two
+   fifths console. Articles keep the narrow gutter — a list of
+   headings needs no more. */
+.page-reference .shell{
+  grid-template-columns:236px minmax(0,3fr) minmax(0,2fr);
+}
 .side{
   border-right:1px solid var(--border-soft);
   padding:22px 16px 40px;display:flex;flex-direction:column;gap:22px;
@@ -397,25 +406,26 @@ img{max-width:100%;height:auto}
 .install-copy p{margin:0;max-width:52ch;color:var(--muted);text-wrap:pretty}
 .install .terminal{min-width:0}
 
-/* The three sentences between the hero and the doors. Quiet on purpose:
-   no cards, no borders, no colour — the doors below are the page's one
-   grid of boxes, and repeating that shape here would make the reader
-   look twice at the same thing. The said-out-loud line takes the
-   display face; its answer is body copy. */
-.snags{padding:8px 44px 30px}
-.snags-title{
+/* Why bench, above the doors. Deliberately unboxed: the doors below are
+   the page's one grid of cards, and repeating that shape here would make
+   the eye read the same object twice. Two columns rather than three, so
+   the first reason — the one that needs a sentence, not a phrase — has
+   somewhere to put it. */
+.why{padding:8px 44px 30px}
+.why-title{
   margin:0 0 20px;font:600 var(--t-h2)/1.3 var(--display);
   letter-spacing:-.01em;color:var(--text);
 }
-.snag-list{
-  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
+.why-list{
+  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:22px 40px;
 }
-.snag{display:flex;flex-direction:column;gap:6px}
-.snag-said{
+.why-reason{display:flex;flex-direction:column;gap:6px}
+.why-lead{
   font:600 var(--t-h3)/1.4 var(--display);color:var(--text);
   text-wrap:pretty;
 }
-.snag-answer{
+.why-text{
   font-size:var(--t-ui);line-height:1.6;color:var(--muted);
   text-wrap:pretty;
 }
@@ -531,13 +541,15 @@ img{max-width:100%;height:auto}
    stylesheet. */
 @media (max-width:1080px){
   .shell{grid-template-columns:220px minmax(0,1fr)}
+  /* Same specificity as the base override, or the console's track
+     would survive here as two fifths of empty grid. */
+  .page-reference .shell{grid-template-columns:220px minmax(0,1fr)}
   .gutter{display:none}
   .menu-contents{display:block}
   .hero{grid-template-columns:minmax(0,1fr);gap:28px;padding:32px 24px}
   .install{grid-template-columns:minmax(0,1fr);gap:26px;padding:28px 24px}
   .doors{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 24px 28px}
-  .snags{padding:8px 24px 26px}
-  .snag-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
+  .why{padding:8px 24px 26px}
   .strip{padding:18px 24px}
 
   /* Only a code block or a table may scroll sideways, so a token that
@@ -578,11 +590,12 @@ img{max-width:100%;height:auto}
     --t-lede:16.5px;
   }
   .shell{grid-template-columns:minmax(0,1fr)}
+  .page-reference .shell{grid-template-columns:minmax(0,1fr)}
   .side{display:none}
   .menu{display:block}
   .page-article .prose,.page-reference .prose{padding:24px 20px 36px}
   .doors{grid-template-columns:minmax(0,1fr)}
-  .snag-list{grid-template-columns:minmax(0,1fr);gap:18px}
+  .why-list{grid-template-columns:minmax(0,1fr);gap:18px}
   .masthead{padding:12px 18px;gap:12px;flex-wrap:wrap}
   .crumbs{flex-wrap:wrap}
   .footer{flex-wrap:wrap;gap:16px 20px;padding:20px 18px}
@@ -623,7 +636,7 @@ img{max-width:100%;height:auto}
   .hero-actions{gap:8px}
   .hero-actions .button{width:100%}
   .doors{padding:0 16px 24px}
-  .snags{padding:8px 16px 22px}
+  .why{padding:8px 16px 22px}
   .strip{padding:16px}
   .install{padding:24px 16px}
   .page-article .prose,.page-reference .prose{padding:20px 16px 32px}
diff --git a/site/templates/home.html b/site/templates/home.html
index 4ff0f68..a67161f 100644
--- a/site/templates/home.html
+++ b/site/templates/home.html
@@ -133,26 +133,38 @@ Task board for ~/your-repo/.task-manager/tasks
   </div>
 </section>
 
-<!-- Three sentences a reader has said out loud before finding this page.
-     Each one is answered by a mechanism rather than a promise, and each
-     mechanism has a door below it that explains itself. -->
-<section class="snags">
-  <h2 class="snags-title">You've got agents. Now you've got a coordination problem.</h2>
-  <div class="snag-list">
-    <div class="snag">
-      <span class="snag-said">“Which tab was that in?”</span>
-      <span class="snag-answer">Every agent's task, branch and status on one
-        board — not scattered across chat sessions that forget everything.</span>
+<!-- Why bench, before the six doors say what it does. Four reasons, and
+     the first is the one no hosted tool can answer: it is in your
+     codebase, so it is yours to change. The three after it are the
+     coordination problems a reader has usually already hit. -->
+<section class="why">
+  <h2 class="why-title">Why bench?</h2>
+  <div class="why-list">
+    <div class="why-reason">
+      <span class="why-lead">Simplicity, and total control</span>
+      <span class="why-text">bench lives in your codebase — task files in
+        your repo, a board that reads them, nothing in the middle. And it
+        is built to be extended: the app it drives, the agent it launches,
+        the chores it runs are all yours to write, so the workflow it runs
+        is exactly your workflow.</span>
     </div>
-    <div class="snag">
-      <span class="snag-said">“They keep stepping on each other.”</span>
-      <span class="snag-answer">Each agent works in its own git worktree.
-        Parallel work, zero collisions.</span>
+    <div class="why-reason">
+      <span class="why-lead">Nothing lives in a scrollback</span>
+      <span class="why-text">Every agent's task, branch and status on one
+        board — not scattered across chat sessions that forget everything
+        the moment they end.</span>
     </div>
-    <div class="snag">
-      <span class="snag-said">“Did something just merge?”</span>
-      <span class="snag-answer">Never. bench opens PRs and puts CI on the
-        card — the merge button is yours alone.</span>
+    <div class="why-reason">
+      <span class="why-lead">Parallel work, zero collisions</span>
+      <span class="why-text">Each agent gets its own git worktree and
+        branch. Run five at once without them editing the same file out
+        from under each other.</span>
+    </div>
+    <div class="why-reason">
+      <span class="why-lead">Nothing merges without you</span>
+      <span class="why-text">Finished work arrives as a PR with CI on the
+        card. bench never merges — the button stays yours, and you stop
+        being the thing everything queues behind.</span>
     </div>
   </div>
 </section>