site: a Why bench? section, and a console wide enough to read

Two changes to the landing page and the reference layout.

The three problem one-liners become "Why bench?" — four reasons now,
led by the one no hosted tool can answer: bench lives in your codebase
and is built to be extended, so the workflow it runs is exactly yours.
It stays unboxed on purpose; the doors below are the page's one grid of
cards and repeating that shape would make the eye read it twice.

The reference pages split the room right of the nav three fifths prose,
two fifths console. At the old fixed 208px every BOARD_AGENT_MODEL_* key
was cut mid-word, which makes a console of settings useless for the one
thing it is there for. Articles keep the narrow gutter — a list of
headings needs no more.

The narrow-width overrides are repeated at .page-reference .shell
specificity in both media blocks. Without that the base override (0-2-0)
outranks the bare .shell inside the query (0-1-0), the third track
survives, and with the gutter hidden it becomes two fifths of empty grid
squeezing the prose on every phone.

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}

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>