From 20db2fde02ba9723d7aeea73540a999c35adccdf Mon Sep 17 00:00:00 2001
From: Henry Lach <henry@lach.ca>
Date: Mon, 18 May 2026 16:56:40 -0400
Subject: [PATCH 1/2] fix(overview): mobile-responsive baseline for the
 slide-deck microsite
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The deck was originally authored as 16:9 video frames at 1820px max-width
with a global --scale: 1.5 knob. After the GitHub Pages migration, the
absence of <meta name='viewport'> meant mobile browsers fell back to
shrink-fitting a 980px virtual viewport, masking the fact that none of
the layouts collapsed below desktop widths. This change makes the site
genuinely responsive for portrait phones (~375px) and tablets.

What landed (one PR per Sage's recommendation, not two):

1. Viewport meta tag injected into every page so mobile browsers stop
   the shrink-fit fallback and honor the actual device width.

2. shared.css responsive block:
   - Global media safety: img, svg { max-width: 100%; height: auto; }
   - @media (max-width: 900px): --scale drops to 1.1, page padding tightens
     to 20px / 24px.
   - @media (max-width: 700px): --scale drops to 0.95 (floored — anything
     smaller makes dense card text microscopic on phones), padding shrinks
     to 14px / 18px, h1 caps at 26px * --scale, and the eyebrow grid
     restructures so the wordmark logo sits on its own row above the
     title + nav row (otherwise the three-cell 1fr/auto/1fr layout
     overflows below ~340px).

3. Three pages with fixed-pixel grid tracks were collapsed in this PR
   instead of being deferred — otherwise the viewport change would
   regress them from 'tiny but laid-out' to 'horizontally scrolling':

   - Page 07 (mailbox protocol): .topology grid 200px/1fr/200px stacks
     vertically; .props 4-col collapses to 2-col at 900px and 1-col at
     700px; .lane label column tightens on phone.
   - Page 09 (branching lifecycle): .branch-labels 380px/1fr stacks;
     .steps 5-col collapses to 2-col at 900px and 1-col at 700px;
     SVG.git-graph removes preserveAspectRatio='none' (which was
     distorting the diagram non-uniformly at any width != 1500x360)
     and now scales proportionally via aspect-ratio: 1500/360. On
     phone the graph-card scrolls horizontally with a 760px min-width
     SVG so swim lanes stay readable instead of being crushed to a
     ~90px-tall strip.
   - Page 12 (dashboard visibility): .layout grid 1fr/320px stacks
     vertically at 900px, dashboard screenshot above side panels.

Phase 2 (a follow-up PR) will sweep the remaining repeat(N, 1fr) grids
(pages 01, 03, 04, 06, 10, 11, 13-17, index) for either auto-fit
collapse or explicit media queries. Those pages render acceptably at
narrow widths thanks to the --scale + padding response in this PR,
but will benefit from cleaner stacking.
---
 .../01-origin-timeline.html                   |  1 +
 .../02-light-factory-vs-dark.html             |  1 +
 docs/taskplane-overview/03-agent-quartet.html |  1 +
 .../04-task-packet-anatomy.html               |  1 +
 .../05-determinism-spectrum.html              |  1 +
 .../06-cross-model-review.html                |  1 +
 .../07-mailbox-protocol.html                  | 13 ++++
 .../08-waves-lanes-worktrees.html             |  1 +
 .../09-branching-lifecycle.html               | 18 ++++-
 .../taskplane-overview/10-semantic-merge.html |  1 +
 .../11-polyrepo-segments.html                 |  1 +
 .../12-dashboard-visibility.html              |  8 +++
 docs/taskplane-overview/13-why-pi.html        |  1 +
 .../14-pi-capabilities.html                   |  1 +
 .../15-how-to-get-started.html                |  1 +
 .../16-real-work-playbook.html                |  1 +
 .../taskplane-overview/17-sage-companion.html |  1 +
 docs/taskplane-overview/index.html            |  1 +
 docs/taskplane-overview/shared.css            | 65 +++++++++++++++++++
 19 files changed, 118 insertions(+), 1 deletion(-)

diff --git a/docs/taskplane-overview/01-origin-timeline.html b/docs/taskplane-overview/01-origin-timeline.html
index ead0025b..7d1060f1 100644
--- a/docs/taskplane-overview/01-origin-timeline.html
+++ b/docs/taskplane-overview/01-origin-timeline.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V1 — Origin timeline</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/02-light-factory-vs-dark.html b/docs/taskplane-overview/02-light-factory-vs-dark.html
index 77c0af6c..3fc7b0a9 100644
--- a/docs/taskplane-overview/02-light-factory-vs-dark.html
+++ b/docs/taskplane-overview/02-light-factory-vs-dark.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V2 — Light factory vs dark factory</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/03-agent-quartet.html b/docs/taskplane-overview/03-agent-quartet.html
index 1039527f..846887d8 100644
--- a/docs/taskplane-overview/03-agent-quartet.html
+++ b/docs/taskplane-overview/03-agent-quartet.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V3 — Agent quartet</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/04-task-packet-anatomy.html b/docs/taskplane-overview/04-task-packet-anatomy.html
index 77789191..919d71a5 100644
--- a/docs/taskplane-overview/04-task-packet-anatomy.html
+++ b/docs/taskplane-overview/04-task-packet-anatomy.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V4 — Anatomy of a task packet</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/05-determinism-spectrum.html b/docs/taskplane-overview/05-determinism-spectrum.html
index 738e1d0d..f61b3686 100644
--- a/docs/taskplane-overview/05-determinism-spectrum.html
+++ b/docs/taskplane-overview/05-determinism-spectrum.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V5 — Determinism spectrum</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/06-cross-model-review.html b/docs/taskplane-overview/06-cross-model-review.html
index 5051dc95..8c515966 100644
--- a/docs/taskplane-overview/06-cross-model-review.html
+++ b/docs/taskplane-overview/06-cross-model-review.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V6 — Cross-model review flow</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/07-mailbox-protocol.html b/docs/taskplane-overview/07-mailbox-protocol.html
index 27934e66..1d82c2ed 100644
--- a/docs/taskplane-overview/07-mailbox-protocol.html
+++ b/docs/taskplane-overview/07-mailbox-protocol.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V7 — Mailbox protocol</title>
 <link rel="stylesheet" href="shared.css">
 <style>
@@ -130,6 +131,18 @@
     color: var(--text-dim);
     line-height: 1.5;
   }
+
+  /* Mobile: stack the 3-col topology (supervisor / mailbox / agent) and
+     drop the 4-col props grid to 2 columns. */
+  @media (max-width: 900px) {
+    .props { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .topology { grid-template-columns: 1fr; gap: 18px; }
+    .props    { grid-template-columns: 1fr; }
+    /* Tighten the inbox/outbox label column on phone. */
+    .lane     { grid-template-columns: 70px 1fr; gap: 10px; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/08-waves-lanes-worktrees.html b/docs/taskplane-overview/08-waves-lanes-worktrees.html
index 4d80f112..dcd40043 100644
--- a/docs/taskplane-overview/08-waves-lanes-worktrees.html
+++ b/docs/taskplane-overview/08-waves-lanes-worktrees.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V8 — Waves, lanes, worktrees</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/09-branching-lifecycle.html b/docs/taskplane-overview/09-branching-lifecycle.html
index 74efb145..47d531a2 100644
--- a/docs/taskplane-overview/09-branching-lifecycle.html
+++ b/docs/taskplane-overview/09-branching-lifecycle.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V9 — Branching lifecycle</title>
 <link rel="stylesheet" href="shared.css">
 <style>
@@ -114,6 +115,21 @@
   }
   .rule .hl { color: var(--green); }
   .rule .pink { color: var(--pink); }
+
+  /* Mobile: stack the develop-label row, collapse the 5-step grid, and let
+     the git-graph scroll horizontally so its swim lanes stay readable
+     instead of shrinking to a ~90px-tall strip. */
+  @media (max-width: 900px) {
+    .steps { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .branch-labels { grid-template-columns: 1fr; }
+    .branch-name   { text-align: left; }
+    .steps         { grid-template-columns: 1fr; }
+    /* Horizontal-scroll the dense git-graph rather than crushing it. */
+    .graph-card    { overflow-x: auto; }
+    svg.git-graph  { min-width: 760px; }
+  }
 </style>
 </head>
 <body>
@@ -136,7 +152,7 @@ <h1>How Taskplane uses branches</h1>
         <div></div>
       </div>
 
-      <svg class="git-graph" viewBox="0 0 1500 360" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+      <svg class="git-graph" viewBox="0 0 1500 360" xmlns="http://www.w3.org/2000/svg">
         <!-- horizontal grid -->
         <line x1="0" y1="60" x2="1500" y2="60" stroke="#30363d" stroke-width="2" opacity="0.4"/>
         <line x1="0" y1="160" x2="1500" y2="160" stroke="#30363d" stroke-width="2" opacity="0.4"/>
diff --git a/docs/taskplane-overview/10-semantic-merge.html b/docs/taskplane-overview/10-semantic-merge.html
index a86addcd..f2d806b0 100644
--- a/docs/taskplane-overview/10-semantic-merge.html
+++ b/docs/taskplane-overview/10-semantic-merge.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V10 — Semantic merge vs git merge</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/11-polyrepo-segments.html b/docs/taskplane-overview/11-polyrepo-segments.html
index 2b6734a1..bb0ffd46 100644
--- a/docs/taskplane-overview/11-polyrepo-segments.html
+++ b/docs/taskplane-overview/11-polyrepo-segments.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V11 — Polyrepo segments</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/12-dashboard-visibility.html b/docs/taskplane-overview/12-dashboard-visibility.html
index 72ee4f37..954b99ac 100644
--- a/docs/taskplane-overview/12-dashboard-visibility.html
+++ b/docs/taskplane-overview/12-dashboard-visibility.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V12 — Dashboard visibility map</title>
 <link rel="stylesheet" href="shared.css">
 <style>
@@ -197,6 +198,13 @@
     color: var(--text-dim);
   }
   .footer .hl { color: var(--green); }
+
+  /* Mobile: stack the 2-column layout so the side panels move below the
+     dashboard screenshot instead of getting squeezed into a 320px track
+     that doesn't fit a phone. */
+  @media (max-width: 900px) {
+    .layout { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/13-why-pi.html b/docs/taskplane-overview/13-why-pi.html
index f415fdb1..5ba1803a 100644
--- a/docs/taskplane-overview/13-why-pi.html
+++ b/docs/taskplane-overview/13-why-pi.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V13 — Why pi</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/14-pi-capabilities.html b/docs/taskplane-overview/14-pi-capabilities.html
index 48a22847..7c206aee 100644
--- a/docs/taskplane-overview/14-pi-capabilities.html
+++ b/docs/taskplane-overview/14-pi-capabilities.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V14 — Pi capabilities</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/15-how-to-get-started.html b/docs/taskplane-overview/15-how-to-get-started.html
index 5a188bd5..3983bcdf 100644
--- a/docs/taskplane-overview/15-how-to-get-started.html
+++ b/docs/taskplane-overview/15-how-to-get-started.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V15 — Getting started: install and test</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/16-real-work-playbook.html b/docs/taskplane-overview/16-real-work-playbook.html
index 50034e5c..33fcdf46 100644
--- a/docs/taskplane-overview/16-real-work-playbook.html
+++ b/docs/taskplane-overview/16-real-work-playbook.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V16 — How to get started on real work</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/17-sage-companion.html b/docs/taskplane-overview/17-sage-companion.html
index afe4448a..21b461be 100644
--- a/docs/taskplane-overview/17-sage-companion.html
+++ b/docs/taskplane-overview/17-sage-companion.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>V17 — Sage: the post-batch quality gate</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/index.html b/docs/taskplane-overview/index.html
index 03a0186c..e9a12b63 100644
--- a/docs/taskplane-overview/index.html
+++ b/docs/taskplane-overview/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Taskplane Overview</title>
 <link rel="stylesheet" href="shared.css">
 <style>
diff --git a/docs/taskplane-overview/shared.css b/docs/taskplane-overview/shared.css
index b01bfc83..eaa6503a 100644
--- a/docs/taskplane-overview/shared.css
+++ b/docs/taskplane-overview/shared.css
@@ -120,6 +120,16 @@
   padding: 0;
 }
 
+/* Global media safety: keep images/SVGs from busting their containers on
+   narrow viewports. Per-page rules that set explicit width/height still win
+   because of selector specificity, except height: auto, which is what we
+   want for fluid scaling. */
+img,
+svg {
+  max-width: 100%;
+  height: auto;
+}
+
 
 /* ----------------------------------------------------------------------------
    3. Base
@@ -215,3 +225,58 @@ h1 {
   max-width: 100%;
   line-height: 1.55;
 }
+
+
+/* ----------------------------------------------------------------------------
+   6. Responsive (mobile baseline)
+   ----------------------------------------------------------------------------
+   The deck was originally authored at 1820px max-width with --scale: 1.5
+   for 16:9 video frames. These breakpoints retarget it for portrait phones
+   and tablets without a rebuild.
+
+   Two breakpoints:
+     900px : tablet portrait + small landscape
+     700px : phone portrait — also restructures the eyebrow so the wordmark
+             logo doesn't get crushed against the title and nav.
+
+   --scale comes down but is floored at 0.95 — anything smaller starts to
+   make the dense card text microscopic on phones. Page padding shrinks
+   aggressively because every saved pixel matters at <400px viewport widths.
+   ---------------------------------------------------------------------------- */
+
+@media (max-width: 900px) {
+  :root {
+    --scale:       1.1;
+    --page-pad-x:  20px;
+    --page-pad-y:  24px;
+  }
+}
+
+@media (max-width: 700px) {
+  :root {
+    --scale:       0.95;
+    --page-pad-x:  14px;
+    --page-pad-y:  18px;
+  }
+
+  /* Stack the eyebrow: wordmark on its own row above title + nav.
+     Without this the three items get squeezed into <340px and overflow. */
+  .eyebrow {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "logo  logo"
+      "title nav";
+    row-gap: 8px;
+  }
+  .eyebrow > :first-child  { grid-area: title; justify-self: start; }
+  .eyebrow > .eyebrow-logo { grid-area: logo;  justify-self: center; }
+  .eyebrow > .page-nav     { grid-area: nav;   justify-self: end; }
+
+  /* Heading needs more aggressive size reduction than --scale alone
+     delivers. --fs-h1 at scale 0.95 is still 34px which crowds out
+     everything else on a 375px viewport. */
+  h1 {
+    font-size: calc(26px * var(--scale));
+    line-height: 1.15;
+  }
+}

From 37a069570faeb1a0dae6f7ce1ce80d785bb8e1d5 Mon Sep 17 00:00:00 2001
From: Henry Lach <henry@lach.ca>
Date: Mon, 18 May 2026 17:41:48 -0400
Subject: [PATCH 2/2] fix(overview): collapse remaining multi-column grids on
 mobile

Phase 2 of the mobile responsive work, consolidated into the same PR
as the baseline so the site doesn't ship in an intermediate state.

Each affected page now collapses its content grids on phone-portrait
viewports (<=700px) and an interim 2-column grid at tablet sizes
(<=900px) where the original was 3+ columns:

  01 (origin timeline)   .timeline 4-col   -> 2 -> 1
  02 (factory vs dark)   .split 2-col      -> 1 at 700
  03 (agent quartet)     .grid 4-col       -> 2 -> 1
  04 (task packet)       .split + .callouts -> 1 at 700, callouts 2 at 900
  05 (determinism)       .split + .items   -> 1 at 700
  06 (cross-model)       .flow stacks, .arrow-col hidden, .verdicts 4 -> 2 -> 1
  08 (waves/lanes)       waves scroll horizontally within their cards
                          (.lanes min-width 540px); .rules 3 -> 2 -> 1
  10 (semantic merge)    .split + .merger-grid 5 -> 2 -> 1
  11 (polyrepo)          .repos + .rules 3 -> 2 -> 1;
                          .dag flex stacks vertically and arrows rotate 90deg
  13 (why pi)            .reasons 3 -> 1 at 700
  14 (pi caps)           .capabilities 6 -> 2 -> 1
  15 (get started)       .steps 9 -> 2 -> 1
  16 (real work)         .steps 6 -> 2 -> 1
  17 (sage)              .cards 3 -> 2 -> 1; .flagship-inner 2-col stacks at 700
  index                  .grid 17 cards -> 2 -> 1

Pages 02 and the index were not on the user's explicit fix list but
share the same pattern; included for consistency.

Page 06's arrow column (worker -> reviewer direction indicator) is
hidden on phone because the vertical reading order makes the
directionality implicit and the horizontal arrow would not render
sensibly between stacked actor boxes.

Page 08 keeps each wave's 3 lane cards horizontal but lets the wave
card scroll internally (lane affinity reads better laterally); only
the bottom rule summary cards collapse.

Page 11's segment-DAG arrows rotate 90deg so the polyrepo flow
reads top-to-bottom on phone.
---
 docs/taskplane-overview/01-origin-timeline.html     |  8 ++++++++
 .../02-light-factory-vs-dark.html                   |  5 +++++
 docs/taskplane-overview/03-agent-quartet.html       |  8 ++++++++
 docs/taskplane-overview/04-task-packet-anatomy.html |  9 +++++++++
 .../taskplane-overview/05-determinism-spectrum.html |  7 +++++++
 docs/taskplane-overview/06-cross-model-review.html  | 12 ++++++++++++
 .../08-waves-lanes-worktrees.html                   | 12 ++++++++++++
 docs/taskplane-overview/10-semantic-merge.html      | 10 ++++++++++
 docs/taskplane-overview/11-polyrepo-segments.html   | 13 +++++++++++++
 docs/taskplane-overview/13-why-pi.html              |  5 +++++
 docs/taskplane-overview/14-pi-capabilities.html     |  8 ++++++++
 docs/taskplane-overview/15-how-to-get-started.html  |  8 ++++++++
 docs/taskplane-overview/16-real-work-playbook.html  |  8 ++++++++
 docs/taskplane-overview/17-sage-companion.html      | 13 +++++++++++++
 docs/taskplane-overview/index.html                  |  8 ++++++++
 15 files changed, 134 insertions(+)

diff --git a/docs/taskplane-overview/01-origin-timeline.html b/docs/taskplane-overview/01-origin-timeline.html
index 7d1060f1..b188cbef 100644
--- a/docs/taskplane-overview/01-origin-timeline.html
+++ b/docs/taskplane-overview/01-origin-timeline.html
@@ -95,6 +95,14 @@
     text-align: center;
   }
   .footer-tag .hl { color: var(--green); }
+
+  /* Mobile: collapse the 4-column harness timeline. */
+  @media (max-width: 900px) {
+    .timeline { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .timeline { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/02-light-factory-vs-dark.html b/docs/taskplane-overview/02-light-factory-vs-dark.html
index 3fc7b0a9..0ac64a19 100644
--- a/docs/taskplane-overview/02-light-factory-vs-dark.html
+++ b/docs/taskplane-overview/02-light-factory-vs-dark.html
@@ -91,6 +91,11 @@
     color: var(--text-faint);
   }
   .footer-note .hl { color: var(--green); }
+
+  /* Mobile: stack the dark / light factory comparison panels. */
+  @media (max-width: 700px) {
+    .split { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/03-agent-quartet.html b/docs/taskplane-overview/03-agent-quartet.html
index 846887d8..e28e262d 100644
--- a/docs/taskplane-overview/03-agent-quartet.html
+++ b/docs/taskplane-overview/03-agent-quartet.html
@@ -107,6 +107,14 @@
   .flow-band .hl-a { color: var(--amber); }
   .flow-band .hl-b { color: var(--blue); }
   .flow-band .arrow { color: var(--text-faint); padding: 0 6px; }
+
+  /* Mobile: collapse the 4-agent quartet. */
+  @media (max-width: 900px) {
+    .grid { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .grid { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/04-task-packet-anatomy.html b/docs/taskplane-overview/04-task-packet-anatomy.html
index 919d71a5..245b3cec 100644
--- a/docs/taskplane-overview/04-task-packet-anatomy.html
+++ b/docs/taskplane-overview/04-task-packet-anatomy.html
@@ -93,6 +93,15 @@
     line-height: 1.55;
   }
   .callout-text code { color: var(--text); background: var(--surface-2); padding: 1px 4px; border-radius: 3px; font-family: var(--mono); font-size: var(--fs-sm); }
+
+  /* Mobile: stack the PROMPT.md / STATUS.md split, and collapse callouts. */
+  @media (max-width: 900px) {
+    .callouts { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .split    { grid-template-columns: 1fr; }
+    .callouts { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/05-determinism-spectrum.html b/docs/taskplane-overview/05-determinism-spectrum.html
index f61b3686..6fb1e596 100644
--- a/docs/taskplane-overview/05-determinism-spectrum.html
+++ b/docs/taskplane-overview/05-determinism-spectrum.html
@@ -120,6 +120,13 @@
     text-align: center;
   }
   .principle .hl { color: var(--green); }
+
+  /* Mobile: stack the forced-deterministic / left-to-the-model split, and
+     drop the inner 2-col item list to a single column for readability. */
+  @media (max-width: 700px) {
+    .split { grid-template-columns: 1fr; }
+    .items { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/06-cross-model-review.html b/docs/taskplane-overview/06-cross-model-review.html
index 8c515966..a275854f 100644
--- a/docs/taskplane-overview/06-cross-model-review.html
+++ b/docs/taskplane-overview/06-cross-model-review.html
@@ -184,6 +184,18 @@
   }
   .footer-line .hl-g { color: var(--green); }
   .footer-line .hl-a { color: var(--amber); }
+
+  /* Mobile: stack the worker-arrow-reviewer flow (hide the arrow column
+     since the vertical reading order makes the worker->reviewer direction
+     implicit), and collapse the 4 verdict cards. */
+  @media (max-width: 900px) {
+    .verdicts { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .flow      { grid-template-columns: 1fr; }
+    .arrow-col { display: none; }
+    .verdicts  { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/08-waves-lanes-worktrees.html b/docs/taskplane-overview/08-waves-lanes-worktrees.html
index dcd40043..a59067f8 100644
--- a/docs/taskplane-overview/08-waves-lanes-worktrees.html
+++ b/docs/taskplane-overview/08-waves-lanes-worktrees.html
@@ -167,6 +167,18 @@
     border-radius: 3px;
     font-size: var(--fs-sm);
   }
+
+  /* Mobile: the 3-lane row inside each wave stays horizontal but scrolls
+     inside its wave card (lane affinity is easiest to read laterally),
+     while the summary rule cards at the bottom stack vertically. */
+  @media (max-width: 900px) {
+    .rules { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .wave  { overflow-x: auto; }
+    .lanes { min-width: 540px; }
+    .rules { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/10-semantic-merge.html b/docs/taskplane-overview/10-semantic-merge.html
index f2d806b0..e376e404 100644
--- a/docs/taskplane-overview/10-semantic-merge.html
+++ b/docs/taskplane-overview/10-semantic-merge.html
@@ -125,6 +125,16 @@
   }
   .monitor .hl-a { color: var(--amber); }
   .monitor .hl-r { color: var(--red); }
+
+  /* Mobile: stack the git-merge / merge-agent split, and collapse the
+     5-step merger pipeline to 2 then 1 column. */
+  @media (max-width: 900px) {
+    .merger-grid { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .split       { grid-template-columns: 1fr; }
+    .merger-grid { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/11-polyrepo-segments.html b/docs/taskplane-overview/11-polyrepo-segments.html
index bb0ffd46..d82b82f5 100644
--- a/docs/taskplane-overview/11-polyrepo-segments.html
+++ b/docs/taskplane-overview/11-polyrepo-segments.html
@@ -189,6 +189,19 @@
     border-radius: 3px;
     font-size: var(--fs-sm);
   }
+
+  /* Mobile: stack the 3 repo cards, stack the 3 rule cards, and reorient
+     the segment-DAG flow vertically (arrows rotate from -> to v). */
+  @media (max-width: 900px) {
+    .repos { grid-template-columns: repeat(2, 1fr); }
+    .rules { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .repos     { grid-template-columns: 1fr; }
+    .rules     { grid-template-columns: 1fr; }
+    .dag       { flex-direction: column; align-items: center; }
+    .seg-arrow { transform: rotate(90deg); }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/13-why-pi.html b/docs/taskplane-overview/13-why-pi.html
index 5ba1803a..bab6bba5 100644
--- a/docs/taskplane-overview/13-why-pi.html
+++ b/docs/taskplane-overview/13-why-pi.html
@@ -85,6 +85,11 @@
   .closing .hl-g { color: var(--green); }
   .closing .hl-b { color: var(--blue); }
   .closing .hl-a { color: var(--amber); }
+
+  /* Mobile: stack the three reasons. */
+  @media (max-width: 700px) {
+    .reasons { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/14-pi-capabilities.html b/docs/taskplane-overview/14-pi-capabilities.html
index 7c206aee..51ef0576 100644
--- a/docs/taskplane-overview/14-pi-capabilities.html
+++ b/docs/taskplane-overview/14-pi-capabilities.html
@@ -85,6 +85,14 @@
     vertical-align: middle;
   }
   .for-tp-band .hl { color: var(--text); }
+
+  /* Mobile: collapse the 6 capability cards. */
+  @media (max-width: 900px) {
+    .capabilities { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .capabilities { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/15-how-to-get-started.html b/docs/taskplane-overview/15-how-to-get-started.html
index 3983bcdf..10764cdc 100644
--- a/docs/taskplane-overview/15-how-to-get-started.html
+++ b/docs/taskplane-overview/15-how-to-get-started.html
@@ -100,6 +100,14 @@
   .footer-band .hl-g { color: var(--green); }
   .footer-band .hl-b { color: var(--blue); }
   .footer-band .hl-a { color: var(--amber); }
+
+  /* Mobile: stack the 9 setup-step cards. */
+  @media (max-width: 900px) {
+    .steps { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .steps { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/16-real-work-playbook.html b/docs/taskplane-overview/16-real-work-playbook.html
index 33fcdf46..7922c833 100644
--- a/docs/taskplane-overview/16-real-work-playbook.html
+++ b/docs/taskplane-overview/16-real-work-playbook.html
@@ -181,6 +181,14 @@
   .footer-band .hl-b { color: var(--blue); }
   .footer-band .hl-a { color: var(--amber); }
   .footer-band .hl-p { color: var(--purple); }
+
+  /* Mobile: stack the 6 step cards. */
+  @media (max-width: 900px) {
+    .steps { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .steps { grid-template-columns: 1fr; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/17-sage-companion.html b/docs/taskplane-overview/17-sage-companion.html
index 21b461be..a1d760d9 100644
--- a/docs/taskplane-overview/17-sage-companion.html
+++ b/docs/taskplane-overview/17-sage-companion.html
@@ -195,6 +195,19 @@
   .footer-band .hl-g { color: var(--green); }
   .footer-band .hl-b { color: var(--blue); }
   .footer-band .dim  { color: var(--text-dim); }
+
+  /* Mobile: stack the 3 basic cards. The flagship card already spans the
+     full row; its internal 2-column inner layout (body + pull-quote
+     callout) stacks the callout below the body on phone. */
+  @media (max-width: 900px) {
+    .cards { grid-template-columns: repeat(2, 1fr); }
+    /* The flagship card still spans the full row at tablet sizes. */
+    .card.flagship { grid-column: 1 / -1; }
+  }
+  @media (max-width: 700px) {
+    .cards          { grid-template-columns: 1fr; }
+    .flagship-inner { grid-template-columns: 1fr; gap: 16px; }
+  }
 </style>
 </head>
 <body>
diff --git a/docs/taskplane-overview/index.html b/docs/taskplane-overview/index.html
index e9a12b63..1534992b 100644
--- a/docs/taskplane-overview/index.html
+++ b/docs/taskplane-overview/index.html
@@ -108,6 +108,14 @@
     border-radius: 3px;
   }
 
+  /* Mobile: collapse the 3-column page index. */
+  @media (max-width: 900px) {
+    .grid { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 700px) {
+    .grid { grid-template-columns: 1fr; }
+  }
+
 </style>
 </head>
 <body>