diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json
index 1c193b1..05205e6 100644
--- a/.claude-plugin/plugin.json
+++ b/.claude-plugin/plugin.json
@@ -1,6 +1,6 @@
 {
   "name": "idstack",
-  "version": "3.5.0.0",
+  "version": "3.5.1.0",
   "description": "Evidence-based instructional design pipeline. 11 skills backed by peer-reviewed research across 11 domains. Analyze, design, build, review, and export courses with every recommendation citing its evidence tier.",
   "author": {
     "name": "Philippos Savvides",
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 3363fe6..129c9c3 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -27,6 +27,15 @@ jobs:
       - uses: actions/setup-python@v5
         with:
           python-version: ${{ matrix.python-version }}
+      # smoke-test skips the Chrome-extension and landing-page suites when node is
+      # absent. Declaring it here keeps that skip from silently hiding a failure on a
+      # runner image that stops preinstalling node.
+      - uses: actions/setup-node@v4
+        with:
+          # 22, not 20: test-rendered-landing.js drives Chrome over the global WebSocket,
+          # which node exposes unflagged only from 22.4. On 20 it fails with
+          # "WebSocket is not defined" and the rendered suite never runs.
+          node-version: '22'
       - name: Smoke test
         run: ./test/smoke-test.sh
       - name: Integration test
@@ -60,5 +69,12 @@ jobs:
       - uses: actions/setup-python@v5
         with:
           python-version: '3.9'
+      # Mutations 23-32 are guarded only by the node landing-page suites. Without node,
+      # smoke-test skips them, those mutations report NOT-GUARDED and this job fails. node is
+      # a hard requirement here, not a hedge against a silent skip. 22 for the same WebSocket
+      # reason as the test job; mutation 32 additionally needs Chrome.
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
       - name: Mutation test
         run: ./test/mutation-test.sh
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 947dd61..536dfff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,80 @@
 # Changelog
 
+## v3.5.1.0 (2026-08-29)
+
+Fixes three defects on idstack.org that only show up on a phone, and repairs the test harness that
+was supposed to be catching them. No skill behavior changes.
+
+To update: `cd` into your idstack clone, then `git pull && ./setup`.
+
+### Fixed — every mutation in the suite was passing vacuously
+
+- **`test/mutation-test.sh` reported a perfect score while proving nothing.** Its `fresh()` helper
+  copies the repo into a throwaway directory per mutation, and `extension/` was not on the copy
+  list. So `test/test-extension.sh` failed on every copy before any mutation was applied, and
+  because `expect_fail` only checks that smoke-test exits non-zero, all 36 mutations reported
+  GUARDED whether or not their guard worked. The suite that exists to prove the other tests work
+  had been unable to fail since the extension landed.
+
+  `extension` is now copied, and a null-mutation control runs first: it aborts the whole suite if
+  an unmutated copy is already red, because that is the state in which every GUARDED below it is
+  meaningless. Verified by removing the fix again and watching the control fire.
+
+### Fixed — idstack.org on a phone
+
+- **Every content section sat under the notch.** The responsive pass added `viewport-fit=cover`,
+  which extends the page into the display cutout, then gave the safe-area inset to the nav, hero
+  and footer but not to `.section` — which wraps the evidence, pipeline, output, install and
+  what's-new regions. On a notched phone in landscape the install command ran under the cutout.
+  The four containers now share one rule, so a fifth cannot be added without the gutter.
+- **Touch targets were below the 44px floor, inconsistently.** The page carried three ad-hoc
+  minimums (36px, 40px, 42px), and the footer controls applied theirs only below 480px, leaving
+  every width above that — tablets and desktop included — at 36.6px. One `--tap-min` token now
+  applies at every width.
+- **A viewport clip was hiding overflow rather than preventing it.** `overflow-x: clip` on
+  `html`/`body` suppressed horizontal scrolling, which also meant a real overflow became content
+  the reader could not reach instead of a visible bug. The grid tracks that actually contain long
+  install commands now size with `minmax(0, …)`, and the clip is gone: measured clean at 11
+  viewport widths from 320px up.
+
+### Added — the landing page is now tested by rendering it
+
+- **`test/test-rendered-landing.js`** loads `docs/index.html` in headless Chrome and asserts what
+  the page does at 11 widths: no sideways scroll, every control at least 44px, the pipeline and
+  output grids collapsing at their breakpoints, the nav sticky and all its links reachable. It
+  adds no npm dependency (Chrome over CDP with node's built-in `fetch` and `WebSocket`) and skips
+  loudly when no browser is present. It does require node 22.4+, which is where the global
+  `WebSocket` becomes available; CI pins node 22 for exactly this reason.
+
+  The existing suite checks CSS as text, which can only forbid the spellings someone thought of.
+  Six kinds of edit shipped a broken page past it — a selector list, an `:is()` wrapper, an
+  `@container` wrapper, a print-only media query, a media query nested inside a desktop one, and a
+  `<style>` block inside an HTML comment. All six fail the rendered suite. Both run: the text one
+  is fast and names the exact rule, the rendered one cannot be talked around.
+
+### Fixed — the responsive guard had holes in it
+
+- Assertions accepted the regressions they existed to catch: `(clip|hidden)` allowed the
+  `overflow-x: hidden` that breaks the sticky nav, `grid-template-columns: 1fr` matched the
+  `1fr 1fr` it forbids, a `--tap-min` existence check passed while a later rule shipped 30px
+  targets, and a `@media` regex spanned block boundaries so a rule could move to another
+  breakpoint unnoticed. Each is now pinned and carries a mutation.
+- Guards no longer fail correct changes: adding a fifth container to the shared gutter rule, or
+  reformatting `minmax(0, 1fr)`, used to fail a page that renders identically.
+
+### Changed
+
+- **CI declares its node dependency.** Both jobs install node rather than relying on the runner
+  image. Without it the landing-page suites skip, which in the mutation job means nine mutations
+  silently report NOT-GUARDED.
+- **Landing page type simplified.** 12 of 19 fluid `font-size: clamp()` declarations varied by at
+  most 1.12px across their whole range — a fixed value written in three terms — and are now fixed
+  values. The 7 that move meaningfully stay fluid. `DESIGN.md` records the rule and the 44px
+  target figure.
+- **Documentation corrected** where it disagreed with the code: the smoke-test assertion count,
+  the suite tables in `CLAUDE.md` and `CONTRIBUTING.md`, and the claim that every suite sources
+  `test/test-helper.sh` (the two node suites cannot).
+
 ## v3.5.0.0 (2026-08-16)
 
 Adds the native Chrome Side Panel extension for Canvas LMS and web course audits, the Course Dossier compiled Markdown export, and resolves open issues in learnings log management and test coverage.
diff --git a/CLAUDE.md b/CLAUDE.md
index 0f590c0..1556d04 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -27,10 +27,10 @@ bin/package-extension.sh                   # Package Chrome extension into build
 Tests (run in CI on every push and PR — see `.github/workflows/test.yml`):
 
 ```bash
-./test/smoke-test.sh              # 355 assertions: install, SKILL.md freshness, frontmatter, version agreement,
+./test/smoke-test.sh              # 362 assertions: install, SKILL.md freshness, frontmatter, version agreement,
                                   # canonical section names, /idstack: namespacing, resolve-snippet lockstep, bash -n,
                                   # Claude-Code-only invariant (no dist/, no AGENTS.md, no retired-CLI references)
-./test/integration-test.sh        # 48 behavioral tests across the bin/ scripts; also proves the suite
+./test/integration-test.sh        # 51 behavioral tests across the bin/ scripts; also proves the suite
                                   # leaves the working tree untouched
 ./test/test-setup.sh              # 17 behavioral tests for ./setup (flags, scope, legacy cleanup, failure handling)
 ./test/test-doctor.sh             # 13 behavioral tests for bin/idstack-doctor's PROBLEM/WARNING branches
@@ -40,12 +40,15 @@ Tests (run in CI on every push and PR — see `.github/workflows/test.yml`):
 ./test/test-plugin-status.sh      # bin/lib/plugin-status.sh unit tests
 ./test/test-preamble-python.sh    # Runs the preamble's embedded python on 3.9 and 3.12
 ./test/test-extension.sh          # Chrome Extension packaging and static analysis tests
+./test/test-responsive-landing.js # Responsive/mobile invariants for docs/index.html, as CSS text (node; via smoke-test)
+./test/test-rendered-landing.js   # Renders docs/index.html in headless Chrome and asserts the outcome:
+                                  # no sideways scroll, 44px touch targets, column counts (node + Chrome)
 python3 test/check-evidence-cards.py . # Verifies landing page evidence cards match evidence/references.md
 python3 test/check-doc-accuracy.py .   # Verifies documentation accuracy across version strings, binaries, flags, and links
 ./test/mutation-test.sh           # Reintroduces each fixed defect and asserts its guarding test fails
 ```
 
-`test/test-helper.sh` is not a suite — it is sourced by all of them and owns the shared `PASS`/`FAIL`/`TOTAL` counters and the `check()` assertion. Do not add a local counter block to a suite; smoke-test fails on one, and a mutation proves that guard works.
+`test/test-helper.sh` is not a suite — it is sourced by every **bash** suite that runs assertions itself and owns the shared `PASS`/`FAIL`/`TOTAL` counters and the `check()` assertion (`test-extension.sh` is the exception: it delegates to node and asserts nothing of its own). Do not add a local counter block to a bash suite; smoke-test fails on one, and a mutation proves that guard works. The node suites (`test-extension.sh`'s eight unit tests, `test/test-responsive-landing.js`, and `test/test-rendered-landing.js`) cannot source it; they accumulate their own problems and report a count, which is the same contract in another language.
 
 CI matrix: ubuntu (Python 3.9 + 3.12) and macOS (3.12). 3.9 is the leg that catches modern-only Python syntax reaching the preamble's embedded scripts — it is what macOS ships. `mutation-test.sh` runs once, pinned to 3.9.
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index c837a07..2a2b79c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -127,7 +127,7 @@ bin/idstack-gen-skills --dry-run  # Generated files up to date? Run this first.
 ./test/smoke-test.sh              # Verify the install
 ```
 
-Ten suites run in CI (`.github/workflows/test.yml`) on every push and pull request. Run whichever ones your change touches locally; CI runs them all:
+Every suite below runs in CI (`.github/workflows/test.yml`) on every push and pull request. Run whichever ones your change touches locally; CI runs them all:
 
 | Suite | Covers |
 |-------|--------|
@@ -140,6 +140,9 @@ Ten suites run in CI (`.github/workflows/test.yml`) on every push and pull reque
 | `test/test-version-classifier.sh` | `bin/lib/version-classify.sh` |
 | `test/test-plugin-status.sh` | `bin/lib/plugin-status.sh` |
 | `test/test-preamble-python.sh` | The preamble's embedded Python, on 3.9 and 3.12 |
+| `test/test-extension.sh` | Chrome extension packaging and static analysis, plus eight node unit suites under `test/test-*.js` |
+| `test/test-rendered-landing.js` | Renders `docs/index.html` in headless Chrome across 11 widths and asserts the rendered outcome: no horizontal scroll, 44px touch targets, breakpoint column counts, sticky nav. Catches regressions the text suite cannot see (selector lists, `@container`, nested or print-only media queries, a `<style>` inside an HTML comment). Skips loudly with no browser |
+| `test/test-responsive-landing.js` | Responsive and mobile-ergonomics invariants for `docs/index.html` — fluid tokens, notch-safe gutters, breakpoint-scoped rules, touch targets. Runs on node, via `smoke-test.sh` |
 | `python3 test/check-evidence-cards.py .` | Verifies landing page evidence card study counts and tier ranges against `evidence/references.md` |
 | `python3 test/check-doc-accuracy.py .` | Validates version agreement, manifest schema version, binary/flag references, link targets, and surface accuracy across docs |
 | `test/mutation-test.sh` | Reintroduces each known defect into a throwaway copy and asserts the guarding test fails. Add a mutation here whenever you fix a bug — it is what proves your new test would have caught it |
@@ -148,7 +151,7 @@ The CI matrix is ubuntu on Python 3.9 and 3.12, plus macOS on 3.12 for BSD `grep
 
 ### Writing a new assertion
 
-`test/test-helper.sh` is sourced by every suite and owns the counters and the assertion:
+`test/test-helper.sh` is sourced by every bash suite that runs assertions itself and owns the counters and the assertion (`test-extension.sh` delegates to node and asserts nothing of its own; the node suites cannot source it and accumulate their own problems instead):
 
 ```bash
 . "$(dirname "$0")/test-helper.sh"
diff --git a/DESIGN.md b/DESIGN.md
index b033f12..a8397f1 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -42,6 +42,13 @@ This file is the source of truth for idstack's visual system. Any visual or UI d
   | `small` | 0.80 | 14 | Captions, mono citations, badges |
 
 - **Line heights:** 1.65 body · 1.20 display · 1.40 UI.
+- **When to use fluid `clamp()` type (landing page):** only where the size genuinely moves —
+  a total min→max span of roughly 1.5px or more. Below that the clamp is a three-term
+  declaration encoding a sub-pixel step, so use a fixed rem value instead. Seven declarations
+  in `docs/index.html` clear the bar (`.brand`, `.nav-links a`, `.section-header h2`,
+  `.hero h1`, `.hero .lede`, `.install-track-header h3`, `.install-block code`); the rest are
+  fixed. The layout tokens `--pad-x` / `--pad-y` stay fluid regardless: 16→32px (fluid across a
+  457–914px viewport) and 44→88px (800–1600px).
 
 ## Color
 
@@ -104,6 +111,14 @@ Restrained. Two-color annotation set (rust + prussian blue) for primary marks; t
 | `3xl` | 64 | Major page section spacing |
 | `4xl` | 96 | Hero spacing |
 
+- **Minimum interactive target (landing page only):** 44px, as `--tap-min` in `docs/index.html`.
+  44px is where Apple's HIG and WCAG 2.5.5 Target Size (Enhanced) both land; citing it is the source
+  of the number, not a claim that the page conforms to that AAA criterion. Applies to buttons and
+  form inputs at every viewport width, not only in stacked mobile layouts. Text links are not sized
+  to it — measured at 375px they run 18px in prose, 29-32px for nav, footer, `.brand` and
+  `.cta-secondary`, and 35px for `.skip-link`. They sit in running text where a 44px box would break
+  the line rhythm, and all clear WCAG 2.5.8 (AA) at 24px or fall under its inline-target exception.
+
 ## Layout
 
 - **Approach:** Hybrid. Grid-disciplined for marketing landing; single-column prose for reports.
@@ -160,3 +175,5 @@ No medium / long durations. No scroll-driven animations. No parallax. No entranc
 | 2026-05-13 | Background ivory `#faf8f3` (replaces parchment `#fbfaf6`) | Cleaner publication feel. Parchment-warm read as "old book"; ivory reads as "good paper." |
 | 2026-05-13 | Add prussian blue `#1d4a5e` as secondary accent | Two-color annotation set (red + blue) mirrors how academic editors marked manuscripts. |
 | 2026-06-12 | Landing reverted to original dark/indigo aesthetic, separate from the report system (owner request) | Reports retain scholarly ivory "Proof" identity. Landing uses indigo→purple gradient accents — a scoped exception to the no-gradient anti-pattern, which still binds reports. |
+| 2026-08-29 | Fluid `clamp()` type reserved for sizes that span ≥1.5px | The responsive pass put `clamp()` on 19 landing-page font sizes; 12 of them varied by at most 1.12px across their whole range, i.e. a fixed value written in three terms. Those 12 reverted to fixed rem. Cost: type on phones is up to 1.1px larger than the clamp gave; accepted, it reads slightly better. |
+| 2026-08-29 | Minimum interactive target fixed at 44px (`--tap-min`) | The landing page had grown three ad-hoc floors (36/40/42px), and the footer controls applied theirs only below 480px, leaving every width above 480px (desktop included) at 36.6px. One token, applied at every width. Cost: slightly taller controls on desktop; accepted in a product that ships a WCAG review skill. |
diff --git a/README.md b/README.md
index 14baabc..8929248 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # idstack
 
-> **Status: beta (v3.5.0.0).** Skills work end-to-end and ship behind a versioned plugin, but expect rough edges and breaking changes between minor versions while we shake out the rest of the workflow with real instructional designers. See [CHANGELOG.md](CHANGELOG.md) for what's new in the current release. [Tell us what's broken or missing.](https://forms.gle/6LDgDD1M6WWyYvME8)
+> **Status: beta (v3.5.1.0).** Skills work end-to-end and ship behind a versioned plugin, but expect rough edges and breaking changes between minor versions while we shake out the rest of the workflow with real instructional designers. See [CHANGELOG.md](CHANGELOG.md) for what's new in the current release. [Tell us what's broken or missing.](https://forms.gle/6LDgDD1M6WWyYvME8)
 
 Decades of research say elaborated feedback improves learning. Cognitive load theory has been replicated for 30 years. Constructive alignment measurably raises grades. The evidence is strong, but most course design tools don't make it easy to apply.
 
diff --git a/ROADMAP.md b/ROADMAP.md
index 99205a2..5866dc9 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -4,6 +4,11 @@ What's coming next for idstack. Priorities are shaped by user feedback. [Tell us
 
 ## Just shipped
 
+### Mobile fixes for idstack.org & test-harness repair (v3.5.1.0)
+- **idstack.org is usable on a phone.** Every content section sat under the display cutout, buttons and inputs fell below the 44px touch floor at every width above 480px, and a viewport clip was hiding horizontal overflow instead of preventing it. Measured clean at 11 widths from 320px up. No skill behavior changed.
+- **The mutation suite could not fail.** `test/mutation-test.sh` never copied `extension/` into its throwaway repos, so `test/test-extension.sh` broke before any mutation was applied and all 36 mutations reported GUARDED whether their guard worked or not. A null-mutation control now aborts the run when an unmutated copy is already red.
+- **The landing page is tested by rendering it.** `test/test-rendered-landing.js` loads the page in headless Chrome and asserts what it does at 11 widths, not what its CSS says. Six kinds of edit had shipped a broken page past the text-only suite; all six fail this one.
+
 ### Chrome Extension, Course Dossier & Robustness (v3.5.0.0)
 - **Native Chrome Side Panel extension for Canvas LMS & Google Docs.** Officially published on the [Chrome Web Store](https://chromewebstore.google.com/detail/eclnhfehloplcnidkkopphamllnlhinm). Audits course content and assignments with cognitive demand classification (Bloom's Revised Taxonomy) and empirical evidence citations directly in the browser.
 - **Automated background Canvas course crawler.** Audits entire Canvas courses in the background via active session cookies without requiring developer API keys.
@@ -36,7 +41,7 @@ What's coming next for idstack. Priorities are shaped by user feedback. [Tell us
 - **Standalone runs persist.** `bin/idstack-migrate --init` creates a canonical manifest, so a skill run outside the pipeline has something to write into instead of silently discarding its results.
 
 ### Test infrastructure and CI (v3.3.0.0–v3.3.0.4, for contributors)
-- The suite had never run automatically. GitHub Actions runs every suite on each push and pull request, across ubuntu (Python 3.9 + 3.12) and macOS — eight suites at v3.3.0.0, ten today.
+- The suite had never run automatically. GitHub Actions runs every suite on each push and pull request, across ubuntu (Python 3.9 + 3.12) and macOS — eight suites at v3.3.0.0, and more since; `CONTRIBUTING.md` lists the current set.
 - `./setup` — the primary deliverable — went from zero coverage to 17 behavioral tests.
 - `bin/idstack-doctor` and `bin/idstack-status --readiness` gained their first execution coverage in v3.3.0.4. Both are what a user reaches for when something has already gone wrong, and neither had any.
 - `test/mutation-test.sh` reintroduces each fixed defect and asserts its guarding test fails, which is how a test that only appeared to test something gets caught. Every mutation in it is guarded; the suite prints the current count when you run it.
diff --git a/VERSION b/VERSION
index 5f56c9f..a11b5ad 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-3.5.0.0
+3.5.1.0
diff --git a/docs/index.html b/docs/index.html
index e0b870b..bfae29c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -42,7 +42,7 @@
     "url": "https://idstack.org",
     "applicationCategory": "EducationalApplication",
     "operatingSystem": "macOS, Linux, Windows (WSL or Git Bash)",
-    "softwareVersion": "3.5.0.0",
+    "softwareVersion": "3.5.1.0",
     "datePublished": "2026-04-20",
     "offers": {
       "@type": "Offer",
@@ -108,13 +108,14 @@
       --prose:  62ch;
       --pad-x:  clamp(1rem, 3.5vw, 2rem);
       --pad-y:  clamp(2.75rem, 5.5vw, 5.5rem);
-    }
 
-    html {
-      scroll-behavior: smooth;
-      overflow-x: clip;
+      /* Minimum interactive target. 44px is the Apple HIG / WCAG 2.5.5 figure; the page
+         previously carried three different ad-hoc floors (36/40/42px). */
+      --tap-min: 44px;
     }
 
+    html { scroll-behavior: smooth; }
+
     body {
       background: var(--bg);
       color: var(--ink);
@@ -123,7 +124,6 @@
       line-height: 1.65;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
-      overflow-x: clip;
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -179,11 +179,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      max-width: var(--max);
-      margin: 0 auto;
-      padding: 0.85rem var(--pad-x);
-      padding-left: max(var(--pad-x), env(safe-area-inset-left));
-      padding-right: max(var(--pad-x), env(safe-area-inset-right));
+      padding-block: 0.85rem;
       gap: 1rem;
       flex-wrap: wrap;
     }
@@ -233,10 +229,18 @@
     /* ──────────────────────────────────────────────
        Layout primitives
        ────────────────────────────────────────────── */
-    .section {
+    /* Page containers share the max-width, centering, and notch-safe inline gutter.
+       Defining the gutter once means a new container cannot miss it — .section did,
+       so every content region sat under the notch once viewport-fit=cover landed. */
+    .nav, .section, .hero, .footer {
       max-width: var(--max);
-      margin: 0 auto;
-      padding: var(--pad-y) var(--pad-x);
+      margin-inline: auto;
+      padding-inline:
+        max(var(--pad-x), env(safe-area-inset-left))
+        max(var(--pad-x), env(safe-area-inset-right));
+    }
+    .section {
+      padding-block: var(--pad-y);
     }
     .section + .section { border-top: 1px solid var(--rule); }
 
@@ -270,11 +274,7 @@
        Hero — single column, generous whitespace
        ────────────────────────────────────────────── */
     .hero {
-      max-width: var(--max);
-      margin: 0 auto;
-      padding: clamp(2.5rem, 6vw, 5.5rem) var(--pad-x) clamp(2.25rem, 5vw, 4.5rem);
-      padding-left: max(var(--pad-x), env(safe-area-inset-left));
-      padding-right: max(var(--pad-x), env(safe-area-inset-right));
+      padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(2.25rem, 5vw, 4.5rem);
     }
     .hero-text { max-width: 56rem; }
 
@@ -306,7 +306,7 @@
       flex-wrap: wrap;
       align-items: center;
       gap: 0.45rem 0.65rem;
-      font-size: clamp(0.74rem, 1.4vw, 0.78rem);
+      font-size: 0.78rem;
       letter-spacing: 0.03em;
       color: var(--ink-muted);
       margin-bottom: 1.25rem;
@@ -341,20 +341,19 @@
       border: none;
       padding: 0;
       color: var(--ink);
-      font-size: clamp(0.76rem, 1.6vw, 0.83rem);
+      font-size: 0.83rem;
       flex: 1 1 0;
       min-width: 0;
       overflow-x: auto;
       white-space: nowrap;
       scrollbar-width: thin;
-      -webkit-overflow-scrolling: touch;
     }
     .copy-btn {
       background: transparent;
       border: 1px solid var(--rule);
       border-radius: 2px;
       padding: 0.4rem 0.75rem;
-      min-height: 36px;
+      min-height: var(--tap-min);
       color: var(--ink-soft);
       font-family: var(--font-ui);
       font-weight: 600;
@@ -391,7 +390,7 @@
       font-weight: 600;
       font-size: 0.88rem;
       padding: 0.6rem 1rem;
-      min-height: 40px;
+      min-height: var(--tap-min);
       border-radius: 2px;
       text-decoration: none;
       transition: background 0.15s ease;
@@ -489,7 +488,7 @@
       padding-bottom: 1.25rem;
       border-bottom: 1px solid var(--rule);
       font-family: var(--font-ui);
-      font-size: clamp(0.82rem, 1.8vw, 0.88rem);
+      font-size: 0.88rem;
       color: var(--ink-soft);
     }
     .evidence-legend-item {
@@ -538,7 +537,7 @@
 
     .evidence-card-title {
       font-family: var(--font-display);
-      font-size: clamp(1.05rem, 2vw, 1.12rem);
+      font-size: 1.12rem;
       font-weight: 600;
       letter-spacing: -0.01em;
       color: var(--ink);
@@ -547,7 +546,7 @@
 
     .evidence-card-body {
       font-family: var(--font-body);
-      font-size: clamp(0.92rem, 1.6vw, 0.98rem);
+      font-size: 0.98rem;
       line-height: 1.55;
       color: var(--ink-soft);
       max-width: var(--prose);
@@ -577,7 +576,7 @@
 
     .evidence-foot {
       margin-top: 2rem;
-      font-size: clamp(0.88rem, 1.6vw, 0.92rem);
+      font-size: 0.92rem;
       color: var(--ink-muted);
       max-width: var(--prose);
     }
@@ -690,7 +689,7 @@
 
     .pipeline-foot {
       margin-top: 1.75rem;
-      font-size: clamp(0.9rem, 1.6vw, 0.95rem);
+      font-size: 0.95rem;
       color: var(--ink-soft);
       max-width: var(--prose);
     }
@@ -698,13 +697,15 @@
     /* ──────────────────────────────────────────────
        Output pair (markdown / json)
        ────────────────────────────────────────────── */
+    /* minmax(0, …) rather than a bare 1fr: a grid item's automatic minimum size is its
+       min-content width, so a long unbreakable code string would otherwise widen the track. */
     .output-pair {
       display: grid;
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 1rem;
     }
     @media (max-width: 880px) {
-      .output-pair { grid-template-columns: 1fr; }
+      .output-pair { grid-template-columns: minmax(0, 1fr); }
     }
     .output-panel {
       background: var(--raised);
@@ -713,7 +714,6 @@
       overflow: hidden;
       display: flex;
       flex-direction: column;
-      min-width: 0;
     }
     .output-header {
       padding: 0.55rem 0.85rem;
@@ -728,13 +728,13 @@
     }
     .output-body {
       padding: clamp(0.9rem, 2.5vw, 1.25rem);
-      font-size: clamp(0.88rem, 1.6vw, 0.92rem);
+      font-size: 0.92rem;
       line-height: 1.6;
       color: var(--ink-soft);
     }
     .output-body h3 {
       font-family: var(--font-display);
-      font-size: clamp(0.95rem, 2vw, 1rem);
+      font-size: 1rem;
       font-weight: 600;
       letter-spacing: -0.005em;
       color: var(--ink);
@@ -749,12 +749,11 @@
     .output-body strong { color: var(--ink); font-weight: 600; }
     .output-json {
       font-family: var(--font-mono);
-      font-size: clamp(0.72rem, 1.6vw, 0.78rem);
+      font-size: 0.78rem;
       line-height: 1.55;
       white-space: pre;
       overflow-x: auto;
       scrollbar-width: thin;
-      -webkit-overflow-scrolling: touch;
       color: var(--ink-soft);
       padding: clamp(0.9rem, 2.5vw, 1.25rem);
     }
@@ -763,7 +762,7 @@
     .output-json .punct { color: var(--ink-muted); }
     .output-foot {
       margin-top: 1.5rem;
-      font-size: clamp(0.88rem, 1.6vw, 0.92rem);
+      font-size: 0.92rem;
       color: var(--ink-muted);
       max-width: var(--prose);
     }
@@ -773,7 +772,7 @@
        ────────────────────────────────────────────── */
     .install-tracks {
       display: grid;
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(0, 1fr);
       gap: 1.5rem;
       max-width: 760px;
     }
@@ -782,7 +781,6 @@
       border: 1px solid var(--rule);
       border-radius: 2px;
       padding: clamp(1rem, 3.5vw, 1.75rem);
-      min-width: 0;
     }
     .install-track-header {
       display: flex;
@@ -823,8 +821,6 @@
       padding: 0.65rem 0.65rem 0.65rem 0.95rem;
       max-width: 760px;
       width: 100%;
-      min-width: 0;
-      overflow: hidden;
     }
     .install-block .prompt {
       color: var(--accent);
@@ -843,11 +839,10 @@
       overflow-x: auto;
       white-space: nowrap;
       scrollbar-width: thin;
-      -webkit-overflow-scrolling: touch;
     }
 
     .install-prose {
-      font-size: clamp(0.9rem, 1.6vw, 0.95rem);
+      font-size: 0.95rem;
       color: var(--ink-soft);
       max-width: var(--prose);
       margin-top: 0.85rem;
@@ -895,11 +890,7 @@
        Footer
        ────────────────────────────────────────────── */
     .footer {
-      max-width: var(--max);
-      margin: 0 auto;
-      padding: 2.5rem var(--pad-x) max(3rem, env(safe-area-inset-bottom));
-      padding-left: max(var(--pad-x), env(safe-area-inset-left));
-      padding-right: max(var(--pad-x), env(safe-area-inset-right));
+      padding-block: 2.5rem max(3rem, env(safe-area-inset-bottom));
       border-top: 1px solid var(--rule);
       font-size: 0.88rem;
     }
@@ -948,8 +939,8 @@
     }
     @media (max-width: 480px) {
       .footer-signup { flex-direction: column; gap: 0.5rem; }
-      .footer-signup input[type="email"] { border-right: 1px solid var(--rule); border-radius: 2px; min-height: 42px; }
-      .footer-signup button { border-radius: 2px; min-height: 42px; width: 100%; }
+      .footer-signup input[type="email"] { border-right: 1px solid var(--rule); border-radius: 2px; }
+      .footer-signup button { border-radius: 2px; width: 100%; }
     }
     .footer-signup label {
       position: absolute;
@@ -960,6 +951,7 @@
     }
     .footer-signup input[type="email"] {
       flex: 1;
+      min-height: var(--tap-min);
       padding: 0.55rem 0.85rem;
       font-family: var(--font-ui);
       font-size: 0.9rem;
@@ -973,6 +965,7 @@
     .footer-signup input[type="email"]:focus { border-color: var(--accent); }
     .footer-signup input[type="email"]::placeholder { color: var(--ink-muted); }
     .footer-signup button {
+      min-height: var(--tap-min);
       padding: 0.55rem 1rem;
       font-family: var(--font-ui);
       font-size: 0.85rem;
@@ -1037,7 +1030,7 @@
           <span class="dot" aria-hidden="true"></span>
           <span>MIT</span>
           <span class="dot" aria-hidden="true"></span>
-          <span>v3.5.0.0 · Claude Code &amp; Chrome Extension</span>
+          <span>v3.5.1.0 · Claude Code &amp; Chrome Extension</span>
         </p>
         <h1 id="hero-title">Evidence-based instructional design with peer-reviewed citations.</h1>
         <p class="lede">108 peer-reviewed studies across 11 research domains. Every recommendation includes its evidence tier: <span class="tier tier-1">T1</span> meta-analyses and RCTs through <span class="tier tier-5">T5</span> expert opinion. Runs in Claude Code and as a native Chrome Extension.</p>
diff --git a/test/check-doc-accuracy.py b/test/check-doc-accuracy.py
index 56d4527..0cb1de5 100755
--- a/test/check-doc-accuracy.py
+++ b/test/check-doc-accuracy.py
@@ -162,7 +162,7 @@ def check_developer_surfaces(root, problems):
                 if cmd not in content:
                     problems.append("CLAUDE.md missing test command reference: %s" % cmd)
 
-            test_refs = set(re.findall(r"\btest/[a-zA-Z0-9_-]+\.(?:sh|py)\b", content))
+            test_refs = set(re.findall(r"\btest/[a-zA-Z0-9_-]+\.(?:sh|py|js)\b", content))
             for ref in sorted(test_refs):
                 if not os.path.isfile(os.path.join(root, ref)):
                     problems.append("CLAUDE.md references missing test file: %s" % ref)
@@ -181,7 +181,7 @@ def check_developer_surfaces(root, problems):
                 if cmd not in content:
                     problems.append("CONTRIBUTING.md missing test command reference: %s" % cmd)
 
-            test_refs = set(re.findall(r"\btest/[a-zA-Z0-9_-]+\.(?:sh|py)\b", content))
+            test_refs = set(re.findall(r"\btest/[a-zA-Z0-9_-]+\.(?:sh|py|js)\b", content))
             for ref in sorted(test_refs):
                 if not os.path.isfile(os.path.join(root, ref)):
                     problems.append("CONTRIBUTING.md references missing test file: %s" % ref)
diff --git a/test/mutation-test.sh b/test/mutation-test.sh
index 9d5d7f9..18489b3 100755
--- a/test/mutation-test.sh
+++ b/test/mutation-test.sh
@@ -43,7 +43,7 @@ fresh() {
   rm -rf "$WORK/r"
   mkdir -p "$WORK/r"
   # Copy only what the suites need; skip .git and any nested worktrees.
-  for item in bin skills templates test evidence docs .claude-plugin \
+  for item in bin skills templates test evidence docs extension .claude-plugin \
               VERSION CHANGELOG.md README.md TODOS.md CONTRIBUTING.md \
               DESIGN.md ROADMAP.md CLAUDE.md setup; do
     [ -e "$SRC/$item" ] && cp -R "$SRC/$item" "$WORK/r/"
@@ -67,6 +67,19 @@ regen() {
   fi
 }
 
+# Null-mutation control. expect_fail only checks that smoke-test exits non-zero, so if the
+# UNMUTATED copy already fails, every GUARDED below is vacuous — the suite would report a
+# perfect score while proving nothing. This actually happened: `extension` was missing from
+# fresh()'s copy list, so test-extension.sh failed on every copy and all 36 mutations reported
+# GUARDED regardless of whether their guard worked. Prove the baseline is green before trusting
+# a single result.
+fresh
+if ! "$WORK/r/test/smoke-test.sh" "$WORK/r" >/dev/null 2>&1; then
+  echo "  ABORT: smoke-test fails on an UNMUTATED copy — every GUARDED below would be vacuous." >&2
+  echo "  Run it by hand on \$WORK/r to see which check fails; fresh() is probably missing a path." >&2
+  exit 1
+fi
+
 # 1. f-string bug in the preamble -> test-preamble-python must fail.
 # Only meaningful on Python < 3.12; see PY_LT_312 above.
 if [ "$PY_LT_312" = "1" ]; then
@@ -404,6 +417,166 @@ open(p, 'w').write(s)
 PY
 expect_fail "dateModified reintroduced into docs/index.html" "$WORK/r/test/smoke-test.sh" "$WORK/r"
 
+# 23. The notch-safe gutter drops back to a plain var(--pad-x), leaving .section
+# (which wraps every content region) under the notch once viewport-fit=cover is
+# set. This is the defect the shared container rule fixed.
+fresh
+python3 - "$WORK/r/docs/index.html" <<'PY'
+import sys
+p = sys.argv[1]; s = open(p).read()
+old = """    .nav, .section, .hero, .footer {
+      max-width: var(--max);
+      margin-inline: auto;
+      padding-inline:
+        max(var(--pad-x), env(safe-area-inset-left))
+        max(var(--pad-x), env(safe-area-inset-right));
+    }"""
+assert s.count(old) == 1, 'anchor not unique: %d' % s.count(old)
+new = """    .nav, .section, .hero, .footer {
+      max-width: var(--max);
+      margin-inline: auto;
+      padding-inline: var(--pad-x);
+    }"""
+open(p, 'w').write(s.replace(old, new, 1))
+PY
+expect_fail "notch-safe gutter loses its env() inset" "$WORK/r/test/smoke-test.sh" "$WORK/r"
+
+# 24. A later :root override ships 30px touch targets below 480px while the 44px
+# declaration is still present, so an existence check on --tap-min would pass.
+# Proves the assertion requires exactly one declaration, not merely the string.
+fresh
+python3 - "$WORK/r/docs/index.html" <<'PY'
+import sys
+p = sys.argv[1]; s = open(p).read()
+old = "  </style>"
+assert s.count(old) == 1, 'anchor not unique: %d' % s.count(old)
+s = s.replace(old, "    @media (max-width: 480px) { :root { --tap-min: 30px; } }\n" + old, 1)
+open(p, 'w').write(s)
+PY
+expect_fail "a later override shrinks the 44px touch target" "$WORK/r/test/smoke-test.sh" "$WORK/r"
+
+# 25. The viewport clip returns. It hides horizontal overflow instead of
+# preventing it, so a regression becomes unreachable content rather than a
+# visible bug -- measured in Chrome as 305px of the install command unreachable
+# when an element does overflow.
+fresh
+python3 - "$WORK/r/docs/index.html" <<'PY'
+import sys
+p = sys.argv[1]; s = open(p).read()
+old = "    html { scroll-behavior: smooth; }"
+assert s.count(old) == 1, 'anchor not unique: %d' % s.count(old)
+s = s.replace(old, "    html { scroll-behavior: smooth; overflow-x: clip; }", 1)
+open(p, 'w').write(s)
+PY
+expect_fail "root overflow-x clip masks page overflow" "$WORK/r/test/smoke-test.sh" "$WORK/r"
+
+# 26. The 44px floor is hoisted out of the unconditional cascade into a
+# min-width query, so phones get no floor at all while the token and the
+# declaration both still exist. This is the original scoping bug in mirror
+# image, and an assertion that scans the whole sheet cannot see it.
+fresh
+python3 - "$WORK/r/docs/index.html" <<'PY'
+import sys
+p = sys.argv[1]; s = open(p).read()
+old = "      min-height: var(--tap-min);\n      color: var(--ink-soft);"
+assert s.count(old) == 1, 'anchor not unique: %d' % s.count(old)
+s = s.replace(old, "      color: var(--ink-soft);", 1)
+s = s.replace("  </style>",
+              "    @media (min-width: 900px) { .copy-btn { min-height: var(--tap-min); } }\n  </style>", 1)
+open(p, 'w').write(s)
+PY
+expect_fail "touch-target floor hoisted into a desktop-only query" "$WORK/r/test/smoke-test.sh" "$WORK/r"
+
+# 27. A second <style> block overrides the token. Every assertion reads the
+# stylesheet, so a scanner that stops at the first block is blind to it --
+# and that blindness would also defeat mutation 24.
+fresh
+python3 - "$WORK/r/docs/index.html" <<'PY'
+import sys
+p = sys.argv[1]; s = open(p).read()
+old = "</head>"
+assert s.count(old) == 1, 'anchor not unique: %d' % s.count(old)
+s = s.replace(old, "<style>:root{--tap-min:30px}</style>\n</head>", 1)
+open(p, 'w').write(s)
+PY
+expect_fail "a second <style> block overrides the touch-target token" "$WORK/r/test/smoke-test.sh" "$WORK/r"
+
+# 28. The breakpoint rule moves into `@media not all and (max-width: 480px)`,
+# which applies ABOVE 480px. The prelude still contains the breakpoint string,
+# so a substring match counts it as scoped when it is inverted.
+fresh
+python3 - "$WORK/r/docs/index.html" <<'PY'
+import sys
+p = sys.argv[1]; s = open(p).read()
+old = """    @media (max-width: 480px) {
+      .pipeline-flow { grid-template-columns: 1fr; }
+    }"""
+assert s.count(old) == 1, 'anchor not unique: %d' % s.count(old)
+s = s.replace(old, """    @media not all and (max-width: 480px) {
+      .pipeline-flow { grid-template-columns: 1fr; }
+    }""", 1)
+open(p, 'w').write(s)
+PY
+expect_fail "an inverted @media prelude passes as breakpoint-scoped" "$WORK/r/test/smoke-test.sh" "$WORK/r"
+
+# 29. A later base rule at equal specificity re-declares the touch-target floor
+# in px. The token is untouched and the first .copy-btn block still reads
+# var(--tap-min), so a positive check that stops at the first match cannot see
+# it -- only counting the declarations sheet-wide can.
+fresh
+python3 - "$WORK/r/docs/index.html" <<'PY'
+import sys
+p = sys.argv[1]; s = open(p).read()
+old = "  </style>"
+assert s.count(old) == 1, 'anchor not unique: %d' % s.count(old)
+s = s.replace(old, "    .copy-btn { min-height: 30px; }\n" + old, 1)
+open(p, 'w').write(s)
+PY
+expect_fail "a later base rule outranks the touch-target token" "$WORK/r/test/smoke-test.sh" "$WORK/r"
+
+# 30. The viewport clip returns as the `overflow` shorthand rather than the
+# `overflow-x` longhand. Same rendered effect, different spelling.
+fresh
+python3 - "$WORK/r/docs/index.html" <<'PY'
+import sys
+p = sys.argv[1]; s = open(p).read()
+old = "    html { scroll-behavior: smooth; }"
+assert s.count(old) == 1, 'anchor not unique: %d' % s.count(old)
+s = s.replace(old, "    html { scroll-behavior: smooth; overflow: clip; }", 1)
+open(p, 'w').write(s)
+PY
+expect_fail "root overflow shorthand masks page overflow" "$WORK/r/test/smoke-test.sh" "$WORK/r"
+
+# 31. The mobile breakpoint stops collapsing to one column. `1fr 1fr` still
+# contains `1fr`, so an unanchored match treats the two-column regression as
+# satisfying the single-column assertion.
+fresh
+python3 - "$WORK/r/docs/index.html" <<'PY'
+import sys
+p = sys.argv[1]; s = open(p).read()
+old = "      .pipeline-flow { grid-template-columns: 1fr; }"
+assert s.count(old) == 1, 'anchor not unique: %d' % s.count(old)
+s = s.replace(old, "      .pipeline-flow { grid-template-columns: 1fr 1fr; }", 1)
+open(p, 'w').write(s)
+PY
+expect_fail "pipeline stays two-column at the mobile breakpoint" "$WORK/r/test/smoke-test.sh" "$WORK/r"
+
+# 32. A selector LIST shrinks the touch target below 480px. The text suite anchors every
+# touch-target guard on the single-selector spelling `.copy-btn {`, so `.copy-btn, .btn-badge {`
+# is invisible to all three of its checks at once and it exits 0. Only the rendered suite
+# catches this, by measuring the button at 375px. This mutation is the reason
+# test-rendered-landing.js exists: it forbids the outcome, not the spelling.
+fresh
+python3 - "$WORK/r/docs/index.html" <<'PY'
+import sys
+p = sys.argv[1]; s = open(p).read()
+old = "  </style>"
+assert s.count(old) == 1, 'anchor not unique: %d' % s.count(old)
+s = s.replace(old, "    @media (max-width: 480px) { .copy-btn, .btn-badge { min-height: 30px; } }\n" + old, 1)
+open(p, 'w').write(s)
+PY
+expect_fail "a selector list shrinks the touch target past the text guard" "$WORK/r/test/smoke-test.sh" "$WORK/r"
+
 echo ""
 echo "guarded: $pass   NOT guarded: $fail   skipped: $skip"
 [ "$fail" -eq 0 ]
diff --git a/test/smoke-test.sh b/test/smoke-test.sh
index 490cb9f..dc3adf7 100755
--- a/test/smoke-test.sh
+++ b/test/smoke-test.sh
@@ -312,14 +312,21 @@ if [ -x "$IDSTACK_DIR/test/test-setup.sh" ]; then
   check "setup behavioral tests pass" "'$IDSTACK_DIR/test/test-setup.sh' '$IDSTACK_DIR'"
 fi
 
-# Chrome extension unit and integration tests
-if [ -x "$IDSTACK_DIR/test/test-extension.sh" ]; then
+# The two node-dependent suites. Guarded on node, not on the files' exec bits — those are tracked
+# at 100755 so they never vary, while node is the part that can actually be absent. CI installs it
+# (see .github/workflows/test.yml); the guard is for a bare machine. The SKIP lines matter: without
+# them a node-less run just reports a smaller total than CLAUDE.md documents, with nothing saying why.
+if command -v node &>/dev/null; then
   check "chrome extension tests pass" "'$IDSTACK_DIR/test/test-extension.sh'"
-fi
-
-# Responsive landing page test
-if [ -x "$IDSTACK_DIR/test/test-responsive-landing.js" ]; then
   check "responsive landing page tests pass" "node '$IDSTACK_DIR/test/test-responsive-landing.js'"
+  # Renders the page in headless Chrome and asserts the OUTCOME (no sideways scroll, touch
+  # targets, column counts) rather than the CSS text. Skips loudly without a browser; the
+  # text suite above still runs. See test/test-rendered-landing.js for why both exist.
+  check "rendered landing page tests pass" "node '$IDSTACK_DIR/test/test-rendered-landing.js'"
+else
+  echo "  SKIP: chrome extension tests (node not installed)"
+  echo "  SKIP: responsive landing page tests (node not installed)"
+  echo "  SKIP: rendered landing page tests (node not installed)"
 fi
 
 # Check generated files have auto-generated header
diff --git a/test/test-rendered-landing.js b/test/test-rendered-landing.js
new file mode 100755
index 0000000..38fcff1
--- /dev/null
+++ b/test/test-rendered-landing.js
@@ -0,0 +1,217 @@
+#!/usr/bin/env node
+/**
+ * test-rendered-landing.js
+ * Renders docs/index.html in headless Chrome and asserts what the page actually DOES, not what
+ * its stylesheet says.
+ *
+ * test-responsive-landing.js scans CSS as text. That catches a rule being deleted, but six review
+ * rounds found ways to ship a broken page past it — a selector list, an @container wrapper, an
+ * @import, a <style> inside an HTML comment — because a text scanner can only forbid the spellings
+ * someone thought of. This file forbids the OUTCOME instead: if the page overflows sideways or a
+ * control is under the touch floor, it fails, no matter which spelling caused it.
+ *
+ * Keep both. The text suite is fast, runs everywhere, and names the exact rule that regressed;
+ * this one is slower, needs a browser, and cannot be evaded.
+ *
+ * Requires node 22.4+ for the global WebSocket (no npm dependency, but node 20 cannot run this).
+ * Chrome is located via $CHROME_PATH, then the usual macOS and Linux paths. With no browser this
+ * exits 0 after printing a SKIP line — a silent pass would be worse than no test, so the line is
+ * deliberately loud.
+ */
+
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const { spawn } = require('child_process');
+
+const landingPath = path.join(__dirname, '..', 'docs', 'index.html');
+
+const CHROME_CANDIDATES = [
+  process.env.CHROME_PATH,
+  '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+  '/Applications/Chromium.app/Contents/MacOS/Chromium',
+  '/usr/bin/google-chrome',
+  '/usr/bin/google-chrome-stable',
+  '/usr/bin/chromium',
+  '/usr/bin/chromium-browser',
+].filter(Boolean);
+
+const chromePath = CHROME_CANDIDATES.find(p => { try { return fs.existsSync(p); } catch { return false; } });
+
+if (!chromePath) {
+  console.log('  SKIP: rendered landing page tests (no Chrome found; set CHROME_PATH to enable)');
+  process.exit(0);
+}
+if (!fs.existsSync(landingPath)) {
+  console.error(`${landingPath} does not exist`);
+  process.exit(1);
+}
+
+// Widths worth asserting: the narrowest phone anyone still ships, the common iPhone/Android
+// logical widths, both breakpoints the stylesheet declares, and a desktop width.
+const WIDTHS = [320, 360, 375, 390, 414, 480, 640, 768, 880, 1024, 1280];
+const TAP_MIN = 44;
+const TAP_SELECTORS = ['.copy-btn', '.btn-chrome', '.footer-signup input[type="email"]', '.footer-signup button'];
+
+const problems = [];
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+const userDataDir = path.join(os.tmpdir(), `idstack-rendered-${process.pid}`);
+const port = 9400 + (process.pid % 500);
+let chrome = null;
+
+function killChrome() {
+  if (chrome && !chrome.killed) { try { chrome.kill('SIGKILL'); } catch { /* already gone */ } }
+  try { fs.rmSync(userDataDir, { recursive: true, force: true }); } catch { /* best effort */ }
+}
+// A leaked headless Chrome survives the run and holds memory until reboot, so cover every exit.
+process.on('exit', killChrome);
+for (const sig of ['SIGINT', 'SIGTERM']) process.on(sig, () => { killChrome(); process.exit(1); });
+
+async function main() {
+  chrome = spawn(chromePath, [
+    '--headless=new', `--remote-debugging-port=${port}`,
+    '--no-first-run', '--no-default-browser-check', '--disable-gpu',
+    '--hide-scrollbars', '--no-sandbox',
+    `--user-data-dir=${userDataDir}`, 'about:blank',
+  ], { stdio: 'ignore' });
+
+  let wsUrl = null;
+  for (let i = 0; i < 80; i++) {
+    try {
+      const res = await fetch(`http://127.0.0.1:${port}/json/version`);
+      wsUrl = (await res.json()).webSocketDebuggerUrl;
+      break;
+    } catch { await sleep(150); }
+  }
+  if (!wsUrl) throw new Error('Chrome did not expose a debugging port within 12s');
+
+  const ws = new WebSocket(wsUrl);
+  await new Promise((res, rej) => {
+    ws.addEventListener('open', res);
+    ws.addEventListener('error', () => rej(new Error('could not attach to Chrome')));
+  });
+
+  let id = 0;
+  const pending = new Map();
+  ws.addEventListener('message', e => {
+    const msg = JSON.parse(e.data);
+    if (msg.id && pending.has(msg.id)) { pending.get(msg.id)(msg); pending.delete(msg.id); }
+  });
+  const send = (method, params = {}, sessionId) => new Promise(res => {
+    const msg = { id: ++id, method, params };
+    if (sessionId) msg.sessionId = sessionId;
+    pending.set(msg.id, res);
+    ws.send(JSON.stringify(msg));
+  });
+
+  const { result: { targetId } } = await send('Target.createTarget', { url: 'about:blank' });
+  const { result: { sessionId } } = await send('Target.attachToTarget', { targetId, flatten: true });
+  await send('Page.enable', {}, sessionId);
+  await send('Runtime.enable', {}, sessionId);
+
+  const fileUrl = 'file://' + landingPath;
+
+  for (const width of WIDTHS) {
+    await send('Emulation.setDeviceMetricsOverride',
+      { width, height: 900, deviceScaleFactor: 1, mobile: width <= 640 }, sessionId);
+    await send('Page.navigate', { url: fileUrl }, sessionId);
+    await sleep(320);
+
+    const expression = `(() => {
+      const d = document.documentElement;
+      // An element wider than the viewport is only a problem if it is not inside something that
+      // scrolls it deliberately — the install command and the JSON panel are meant to scroll.
+      const scrollsItself = el => {
+        for (let n = el; n && n !== d; n = n.parentElement) {
+          const o = getComputedStyle(n);
+          if (/(auto|scroll)/.test(o.overflowX) || /(auto|scroll)/.test(o.overflow)) return true;
+        }
+        return false;
+      };
+      const offenders = [...document.querySelectorAll('body *')]
+        .filter(el => el.getBoundingClientRect().right > d.clientWidth + 1 && !scrollsItself(el))
+        .map(el => el.tagName.toLowerCase() +
+          (typeof el.className === 'string' && el.className.trim()
+            ? '.' + el.className.trim().split(/\\s+/).join('.') : ''))
+        .slice(0, 5);
+      const taps = {};
+      for (const sel of ${JSON.stringify(TAP_SELECTORS)}) {
+        const el = document.querySelector(sel);
+        taps[sel] = el ? +el.getBoundingClientRect().height.toFixed(1) : null;
+      }
+      const bar = document.querySelector('.topbar');
+      // Column counts, not declarations: a rule moved into a print-only, inverted, or
+      // desktop-nested @media still reads as present in the stylesheet but stops applying here.
+      const cols = sel => {
+        const el = document.querySelector(sel);
+        if (!el) return null;
+        const t = getComputedStyle(el).gridTemplateColumns;
+        return t && t !== 'none' ? t.trim().split(/\\s+/).length : null;
+      };
+      const cta = document.querySelector('.btn-chrome');
+      const signup = document.querySelector('.footer-signup');
+      return JSON.stringify({
+        overflow: d.scrollWidth - d.clientWidth,
+        offenders: [...new Set(offenders)],
+        taps,
+        navPosition: bar ? getComputedStyle(bar).position : null,
+        pipelineCols: cols('.pipeline-flow'),
+        outputCols: cols('.output-pair'),
+        ctaFillsRow: cta ? Math.round(cta.getBoundingClientRect().width) >=
+          Math.round(cta.parentElement.getBoundingClientRect().width) - 1 : null,
+        signupDirection: signup ? getComputedStyle(signup).flexDirection : null,
+        navLinksVisible: [...document.querySelectorAll('.nav-links a')]
+          .filter(a => a.getBoundingClientRect().height > 0).length,
+      });
+    })()`;
+
+    const { result: { result, exceptionDetails } } =
+      await send('Runtime.evaluate', { expression, returnByValue: true }, sessionId);
+    if (exceptionDetails) { problems.push(`w=${width}: page script threw while measuring`); continue; }
+    const m = JSON.parse(result.value);
+
+    if (m.overflow > 0) {
+      problems.push(`w=${width}: page scrolls sideways by ${m.overflow}px` +
+        (m.offenders.length ? ` — widest: ${m.offenders.join(', ')}` : ''));
+    }
+    for (const [sel, h] of Object.entries(m.taps)) {
+      if (h === null) problems.push(`w=${width}: ${sel} is missing from the page`);
+      else if (h < TAP_MIN) problems.push(`w=${width}: ${sel} renders ${h}px, under the ${TAP_MIN}px touch floor`);
+    }
+    if (m.navPosition !== 'sticky') {
+      problems.push(`w=${width}: .topbar computes position:${m.navPosition}, expected sticky`);
+    }
+    if (width <= 480) {
+      if (m.pipelineCols !== 1) problems.push(`w=${width}: .pipeline-flow renders ${m.pipelineCols} columns, expected 1`);
+      if (m.ctaFillsRow === false) problems.push(`w=${width}: .btn-chrome does not fill its row`);
+      if (m.signupDirection !== 'column') problems.push(`w=${width}: .footer-signup is ${m.signupDirection}, expected column`);
+    }
+    if (width <= 880 && m.outputCols !== 1) {
+      problems.push(`w=${width}: .output-pair renders ${m.outputCols} columns, expected 1`);
+    }
+    if (width > 880 && m.outputCols !== 2) {
+      problems.push(`w=${width}: .output-pair renders ${m.outputCols} columns, expected 2`);
+    }
+    if (m.navLinksVisible < 4) {
+      problems.push(`w=${width}: only ${m.navLinksVisible} nav links are visible, expected 4`);
+    }
+  }
+}
+
+main()
+  .then(() => {
+    killChrome();
+    if (problems.length) {
+      console.error(`${problems.length} rendered problem(s) in docs/index.html:`);
+      for (const line of problems) console.error(line);
+      process.exit(1);
+    }
+    console.log(`✅ Rendered landing page tests passed (${WIDTHS.length} widths).`);
+    process.exit(0);
+  })
+  .catch(err => {
+    killChrome();
+    console.error(`rendered landing page test could not run: ${err.message}`);
+    process.exit(1);
+  });
diff --git a/test/test-responsive-landing.js b/test/test-responsive-landing.js
index fe6c971..db85da2 100755
--- a/test/test-responsive-landing.js
+++ b/test/test-responsive-landing.js
@@ -2,138 +2,352 @@
 /**
  * test-responsive-landing.js
  * Validates responsive design, CSS media queries, fluid units, and mobile ergonomics in docs/index.html.
+ *
+ * Accumulating problems rather than throwing on the first means a direct run reports every
+ * regression at once. Separately: check() (test/test-helper.sh, which smoke-test.sh sources) prints
+ * only the first 5 lines of a failing command, so per-assertion "PASS:" logs would push the real
+ * failure out of view — hence no PASS logging, and the problem count printed first so it survives
+ * that truncation. Under CI the 5-line cap still elides the 5th problem onward.
+ *
+ * Three rules this file learned the hard way:
+ *
+ * 1. An assertion that REQUIRES a value pins the value the page actually ships. An alternation
+ *    like (32|36|40|44)px reads as tolerance but lets the regression it exists to catch pass.
+ *    In a PROHIBITION the reverse holds — widening the alternation forbids more, which is safe;
+ *    that is why the overflow-x guard below legitimately lists (clip|hidden).
+ * 2. Scan the <style> blocks — all of them — never the raw file. A rule inside an HTML comment
+ *    or a <script> string is dead in every browser, and a raw-text scan cannot tell it from a
+ *    live rule. A scoped floor is not a floor either: see unconditional().
+ * 3. A regex cannot check that a rule lives INSIDE a given @media block: `[^}]*` stops at the first
+ *    nested rule's brace and `[\s\S]*?` runs straight past the block's end, so both admit a rule
+ *    that has been moved to a different breakpoint. Use mediaBlocks() for anything breakpoint-scoped.
  */
 
 const fs = require('fs');
 const path = require('path');
 
-const repoRoot = path.resolve(__dirname, '..');
-const landingPath = path.join(repoRoot, 'docs', 'index.html');
+const landingPath = path.join(__dirname, '..', 'docs', 'index.html');
 
-let passed = 0;
-let failed = 0;
+if (!fs.existsSync(landingPath)) {
+  console.error(`${landingPath} does not exist`);
+  process.exit(1);
+}
+
+const html = fs.readFileSync(landingPath, 'utf8');
+const problems = [];
+
+// expect(condition, message) — records a problem instead of throwing, so one run reports every
+// responsive property that regressed.
+function expect(condition, message) {
+  if (!condition) problems.push(`docs/index.html: ${message}`);
+}
 
-function assert(condition, message) {
-  if (condition) {
-    console.log(`  PASS: ${message}`);
-    passed++;
-  } else {
-    console.error(`  FAIL: ${message}`);
-    failed++;
+// Separate channel for the parser self-tests below. Routing them through expect() would prefix
+// them with "docs/index.html:" and blame the page for a bug in this file's own helpers.
+const harnessProblems = [];
+function harness(condition, message) {
+  if (!condition) harnessProblems.push(`test harness: ${message}`);
+}
+
+// Every <style> element's contents, concatenated, with CSS comments, HTML comments and braces
+// inside strings neutralised. Blanking rather than deleting keeps offsets and line counts truthful.
+// Without it a `content: "{"` or a `/* } */` desynchronises the brace counter below and the suite
+// blames a rule that is present. All blocks, not just the first: a second one was invisible to
+// every assertion here, which defeated the --tap-min uniqueness check outright.
+function stylesheet(doc) {
+  const blocks = [...doc.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)].map(m => m[1]);
+  if (!blocks.length) return '';
+  const src = blocks.join('\n');
+  const blank = s => s.replace(/[^\n]/g, ' ');
+  let out = '';
+  for (let i = 0; i < src.length; ) {
+    if (src[i] === '/' && src[i + 1] === '*') {
+      const end = src.indexOf('*/', i + 2);
+      const stop = end === -1 ? src.length : end + 2;
+      out += blank(src.slice(i, stop));
+      i = stop;
+    } else if (src.startsWith('<!--', i)) {
+      // Measured in Chrome 151: an @media block wrapped in <!-- --> inside <style> does NOT apply
+      // (and neither does one placed after the -->), so a breakpoint rule in here is dead and must
+      // not satisfy an assertion. Note the narrower truth: a PLAIN rule between the markers does
+      // still apply, since CDO/CDC are ignored tokens — blanking it is conservative, not exact.
+      // docs/index.html carries no <!-- in its <style>, so this branch is unreached today.
+      const end = src.indexOf('-->', i + 4);
+      const stop = end === -1 ? src.length : end + 3;
+      out += blank(src.slice(i, stop));
+      i = stop;
+    } else if (src[i] === '"' || src[i] === "'") {
+      // Neutralise only braces inside the string. Blanking the whole literal would also erase
+      // attribute selectors like input[type="email"], which the assertions below match on.
+      const quote = src[i];
+      let j = i + 1;
+      while (j < src.length && src[j] !== quote && src[j] !== '\n') {
+        if (src[j] === '\\') j++;
+        j++;
+      }
+      const stop = Math.min(j + 1, src.length);
+      out += src.slice(i, stop).replace(/[{}]/g, ' ');
+      i = stop;
+    } else {
+      out += src[i];
+      i++;
+    }
   }
+  return out;
 }
 
-console.log('idstack responsive landing page test');
-console.log(`  target: ${landingPath}\n`);
+// Concatenated bodies of every `@media (max-width: <px>)` block, brace-matched. The page carries
+// several 480px blocks, each next to the component it styles, so a rule may legitimately be in any
+// of them — but it must be in one of them, which is exactly what a regex cannot verify.
+// Takes css as a parameter so it can be self-tested below against inputs other than the real page.
+function mediaBlocks(css, maxWidthPx, rejected) {
+  const open = new RegExp(`@media([^{]*max-width:\\s*${maxWidthPx}px[^{]*)\\{`, 'g');
+  const bodies = [];
+  let m;
+  while ((m = open.exec(css)) !== null) {
+    const prelude = m[1].trim();
+    // `not` inverts the query, a non-screen media type never applies on screen, and a comma
+    // introduces an unrelated alternative. None of these scope a rule to this breakpoint.
+    const type = prelude.match(/^([a-zA-Z-]+)\s+and\b/);
+    if (/\bnot\b/.test(prelude) || prelude.includes(',') ||
+        (type && !/^(screen|all)$/i.test(type[1]))) {
+      if (rejected) rejected.push(prelude);
+      continue;
+    }
+    const bodyStart = m.index + m[0].length;
+    let depth = 1;
+    for (let j = bodyStart; j < css.length; j++) {
+      if (css[j] === '{') depth++;
+      else if (css[j] === '}' && --depth === 0) { bodies.push(css.slice(bodyStart, j)); break; }
+    }
+  }
+  return bodies.join('\n');
+}
 
-if (!fs.existsSync(landingPath)) {
-  console.error(`FAIL: ${landingPath} does not exist`);
+// Everything OUTSIDE any @media block — the rules that apply at every viewport width. A floor
+// declared only inside a media query is not a floor; that is the exact bug --tap-min replaced.
+function unconditional(css) {
+  const open = /@media[^{]*\{/g;
+  let out = '', last = 0, m;
+  while ((m = open.exec(css)) !== null) {
+    if (m.index < last) continue;
+    out += css.slice(last, m.index);
+    let depth = 1, j = m.index + m[0].length;
+    for (; j < css.length; j++) {
+      if (css[j] === '{') depth++;
+      else if (css[j] === '}' && --depth === 0) break;
+    }
+    last = Math.min(j + 1, css.length);
+    open.lastIndex = last;
+  }
+  return out + css.slice(last);
+}
+
+// Concatenated bodies of EVERY @media block regardless of breakpoint, for asking "does any media
+// query touch this property at all".
+function allMediaBodies(css) {
+  const open = /@media[^{]*\{/g;
+  const bodies = [];
+  let m;
+  while ((m = open.exec(css)) !== null) {
+    let depth = 1, j = m.index + m[0].length;
+    const start = j;
+    for (; j < css.length; j++) {
+      if (css[j] === '{') depth++;
+      else if (css[j] === '}' && --depth === 0) break;
+    }
+    bodies.push(css.slice(start, j));
+    open.lastIndex = Math.min(j + 1, css.length);
+  }
+  return bodies.join('\n');
+}
+
+// Self-test the parser before trusting it. Every breakpoint-scoped assertion depends on it, so a
+// refactor that made it return the whole document would silently make those assertions vacuous.
+for (const [src, want, label] of [
+  ['@media (max-width:480px){.a{x:1}}', '.a{x:1}', 'plain block'],
+  ['@media (max-width:480px){.a{x:1}}@media (max-width:480px){.b{y:2}}', '.b{y:2}', 'second block of same width'],
+  ['@supports(display:grid){@media (max-width:480px){.a{x:1}}}', '.a{x:1}', 'nested inside @supports'],
+  ['@media (max-width:481px){.a{x:1}}', '', 'a different breakpoint must not match'],
+  ['@media (min-width:480px){.a{x:1}}', '', 'min-width must not match max-width'],
+]) {
+  const got = mediaBlocks(src, 480).replace(/\s/g, '');
+  const hit = want === '' ? got === '' : got.includes(want.replace(/\s/g, ''));
+  harness(hit, `mediaBlocks self-test failed: ${label}`);
+}
+
+// unconditional() gates the touch-target assertions, so self-test it too.
+for (const [src, keep, drop, label] of [
+  ['a{x:1}@media (max-width:480px){b{y:2}}c{z:3}', ['a{x:1}', 'c{z:3}'], ['b{y:2}'], 'flat'],
+  ['a{x:1}@media screen{@media (max-width:480px){b{y:2}}}c{z:3}', ['a{x:1}', 'c{z:3}'], ['b{y:2}'], 'nested @media'],
+  ['@supports(display:grid){a{x:1}@media (max-width:480px){b{y:2}}}', ['a{x:1}'], ['b{y:2}'], 'inside @supports'],
+]) {
+  const got = unconditional(src).replace(/\s/g, '');
+  const ok = keep.every(k => got.includes(k.replace(/\s/g, ''))) &&
+             drop.every(d => !got.includes(d.replace(/\s/g, '')));
+  harness(ok, `unconditional self-test failed: ${label}`);
+}
+
+// Fail fast: a broken parser makes every assertion below meaningless, so report it on its own
+// terms rather than as a page regression.
+if (harnessProblems.length) {
+  console.error(`${harnessProblems.length} parser self-test failure(s) — this file's helpers are broken, not docs/index.html:`);
+  for (const line of harnessProblems) console.error(line);
   process.exit(1);
 }
 
-const html = fs.readFileSync(landingPath, 'utf8');
+const css = stylesheet(html);
+expect(css.length > 0, 'no <style> block found in the page');
 
-// 1. Viewport meta tag
-assert(
-  html.includes('<meta name="viewport" content="width=device-width, initial-scale=1.0">') ||
-  html.includes('<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">'),
-  'viewport meta tag is properly configured'
+const rejectedPreludes = [];
+const at480 = mediaBlocks(css, 480, rejectedPreludes);
+const at880 = mediaBlocks(css, 880, rejectedPreludes);
+const baseCss = unconditional(css);
+const mediaCss = allMediaBodies(css);
+expect(
+  rejectedPreludes.length === 0,
+  `@media prelude names a breakpoint but does not scope to it: ${rejectedPreludes.join(' | ')}`
 );
+// One stylesheet, inline. An external sheet would carry rules this file never sees.
+expect(!/<link[^>]+rel=["']?stylesheet/i.test(html), 'page must not pull in an external stylesheet');
+// A dropped block and a missing rule both look like "not found" downstream. Separate them here so
+// a renamed breakpoint reports itself instead of blaming every rule inside it.
+expect(at480.length > 0, 'no @media (max-width: 480px) block found — breakpoint renamed?');
+expect(at880.length > 0, 'no @media (max-width: 880px) block found — breakpoint renamed?');
 
-// 2. Fluid spacing tokens
-assert(
-  /--pad-x:\s*clamp\(/.test(html) && /--pad-y:\s*clamp\(/.test(html),
-  'root spacing uses fluid clamp() for padding'
+// present(selector, label) — a prohibition on a selector that no longer exists passes vacuously,
+// which silently retires the guard. Assert the rule is there before asserting what it must not do.
+function present(pattern, label) {
+  expect(new RegExp(pattern, 's').test(css), `${label} rule must exist (guard would pass vacuously otherwise)`);
+}
+
+// viewport-fit=cover is what makes env(safe-area-inset-*) resolve to a non-zero value, so it is
+// the enabling condition for every safe-area rule below, not a cosmetic addition.
+expect(
+  /<meta name="viewport"[^>]*width=device-width[^>]*viewport-fit=cover/.test(html),
+  'viewport meta must set width=device-width and viewport-fit=cover'
 );
 
-// 3. Fluid typography
-assert(
-  /font-size:\s*clamp\(/.test(html),
-  'typography leverages fluid font-size clamps'
+// A vw term in the middle, not just the literal `clamp(` — clamp(2rem, 2rem, 2rem) is not fluid.
+expect(
+  /--pad-x:\s*clamp\([^)]*\dvw[^)]*\)/.test(css) && /--pad-y:\s*clamp\([^)]*\dvw[^)]*\)/.test(css),
+  'root spacing tokens --pad-x/--pad-y must stay fluid clamp() values with a vw term'
 );
 
-// 4. Safe area insets
-assert(
-  html.includes('safe-area-inset-left') || html.includes('safe-area-inset-right') || html.includes('--pad-x'),
-  'layout respects horizontal safe area padding'
+expect(
+  /\.hero h1\s*\{[^}]*font-size:\s*clamp\([^)]*\dvw[^)]*\)/s.test(css),
+  'hero h1 must use a fluid font-size clamp() with a vw term'
 );
 
-// 5. Responsive navigation — does not hide primary section links on mobile
-assert(
-  !html.includes('.nav-links a:nth-child(2),\n      .nav-links a:nth-child(3) { display: none; }') &&
-  !html.includes('.nav-links a:nth-child(2), .nav-links a:nth-child(3) { display: none; }'),
-  'navigation keeps all section links reachable across screen sizes without ad-hoc nth-child hiding'
+// One shared rule, so a container cannot be added without the gutter. .section was missed while
+// each container declared its own, which put every content region under the notch.
+// The max(var(--pad-x), …) floor is pinned too: dropping it would collapse every container's
+// inline padding to 0 on every device without a notch.
+const gutterRule = (css.match(/[^{}]*\{[^{}]*padding-inline:[^{}]*\}/gs) || [])
+  .find(r => ['\\.nav', '\\.section', '\\.hero', '\\.footer']
+    .every(c => new RegExp(`(^|,)\\s*${c}\\s*(,|\\{)`, 's').test(r)));
+expect(
+  !!gutterRule && /padding-inline:\s*max\(var\(--pad-x\),\s*env\(safe-area-inset-left\)\)\s*max\(var\(--pad-x\),\s*env\(safe-area-inset-right\)\)/s.test(gutterRule),
+  'nav, section, hero and footer must share one padding-inline rule with the max(var(--pad-x), env(...)) floor'
 );
 
-// 6. Pipeline grid responsive breakpoints — must support 1-column mobile layout (<= 480px or <= 500px)
-const hasSingleColPipeline =
-  /@media\s*\([^{}]*max-width:\s*(480|500|540)px[^{}]*\)\s*\{[^}]*\.pipeline-flow\s*\{[^}]*grid-template-columns:\s*(1fr|repeat\(1,\s*1fr\)|minmax\(0,\s*1fr\))/s.test(html) ||
-  /\.pipeline-flow\s*\{[^}]*grid-template-columns:\s*repeat\(auto-fit/s.test(html);
-assert(
-  hasSingleColPipeline,
-  'pipeline flow switches to single column on narrow mobile screens (<= 480px/500px)'
+// Pins the rendered property, not one spelling: hiding the .nav-links container is the same
+// regression as hiding individual links with nth-child.
+present('\\.nav-links\\s*\\{', '.nav-links');
+expect(
+  !/\.nav-links[^{]*\{[^}]*(display:\s*none|visibility:\s*hidden|content-visibility:\s*hidden)/s.test(css),
+  'navigation must keep all section links reachable (no display:none / visibility:hidden on .nav-links or its links)'
 );
 
-// 7. Pipeline aside top-alignment for mobile readability
-assert(
-  /\.pipeline-aside\s*\{[^}]*align-items:\s*flex-start/s.test(html),
-  'pipeline aside items align to top (flex-start) for multi-line description wrapping'
+expect(
+  /\.pipeline-flow\s*\{[^}]*grid-template-columns:\s*1fr\s*(;|\})/s.test(at480),
+  'pipeline flow must collapse to a single column inside a 480px media block'
 );
 
-// 8. CTA mobile full-width / wrapping support
-const hasCtaMobileStyles =
-  /@media\s*\([^{}]*max-width:\s*(480|500|640)px[^{}]*\)\s*\{[^}]*\.btn-chrome/s.test(html) ||
-  /\.btn-chrome\s*\{[^}]*justify-content:\s*center/s.test(html);
-assert(
-  hasCtaMobileStyles,
-  'CTA actions support full-width centered buttons on mobile viewports'
+expect(
+  /\.pipeline-aside\s*\{[^}]*align-items:\s*flex-start/s.test(css),
+  'pipeline aside must align to flex-start so multi-line descriptions wrap cleanly'
 );
 
-// 9. Install block touch & overflow scrolling
-assert(
-  /\.install-block code\s*\{[^}]*overflow-x:\s*auto/s.test(html) &&
-  /\.install-pill code\s*\{[^}]*overflow-x:\s*auto/s.test(html),
-  'install code snippets have horizontal overflow scrolling'
+expect(
+  /\.btn-chrome\s*\{[^}]*width:\s*100%/s.test(at480),
+  'CTA button must go full-width inside a 480px media block'
 );
 
-// 10. Footer signup form mobile stacking
-assert(
-  /@media\s*\([^{}]*max-width:\s*(420|480|500)px[^{}]*\)\s*\{[^}]*\.footer-signup\s*\{[^}]*flex-direction:\s*column/s.test(html),
-  'footer signup form stacks vertically on mobile screens'
+expect(
+  /\.install-block code\s*\{[^}]*overflow-x:\s*auto/s.test(css) &&
+  /\.install-pill code\s*\{[^}]*overflow-x:\s*auto/s.test(css),
+  'install code snippets must scroll horizontally rather than widen the page'
 );
 
-// 11. Touch targets (buttons, inputs, copy buttons have adequate minimum heights)
-assert(
-  /\.copy-btn\s*\{[^}]*min-height:\s*(32|36|40|44)px/s.test(html),
-  'copy buttons define accessible minimum touch heights'
+expect(
+  /\.footer-signup\s*\{[^}]*flex-direction:\s*column/s.test(at480),
+  'footer signup form must stack vertically inside a 480px media block'
 );
 
-// 12. Output panel responsive stacking
-assert(
-  /@media\s*\([^{}]*max-width:\s*(880|900|960)px[^{}]*\)\s*\{[^}]*\.output-pair\s*\{[^}]*grid-template-columns:\s*1fr/s.test(html),
-  'output preview pair stacks to single column on tablet/mobile screens'
+// Exactly one declaration, at 44px. An existence regex would pass while a later
+// `@media { :root { --tap-min: 30px } }` override shipped 30px targets on the very viewport the
+// token exists to protect. Uniqueness is what makes the value the one that wins the cascade.
+const tapDecls = css.match(/--tap-min:\s*[^;]+/g) || [];
+expect(
+  tapDecls.length === 1,
+  `--tap-min must be declared exactly once so no later rule can override it (found ${tapDecls.length})`
+);
+expect(
+  /--tap-min:\s*44px/.test(tapDecls[0] || ''),
+  'interactive minimum target must stay 44px (--tap-min)'
 );
 
-// 13. Dark-only invariant preserved
-assert(
-  html.includes('--bg:           #0a0a0f;') || html.includes('--bg: #0a0a0f;'),
-  'dark background invariant preserved'
+// Checked per selector, not by count, so a count-preserving swap back to a hardcoded floor
+// cannot slip by. The page previously carried three ad-hoc floors: 36/40/42px.
+for (const sel of ['\\.copy-btn', '\\.btn-chrome', '\\.footer-signup input\\[type="email"\\]', '\\.footer-signup button']) {
+  const name = sel.replace(/\\/g, '');
+  present(`${sel}\\s*\\{`, name);
+  expect(
+    new RegExp(`${sel}\\s*\\{[^}]*min-height:\\s*var\\(--tap-min\\)`, 's').test(baseCss),
+    `${name} must size its touch target from var(--tap-min) unconditionally, not inside a media query`
+  );
+  // No media query may re-declare min-height on these controls, in any unit. Restricting this to
+  // `\\d+px` over the whole sheet let a `min-height: 1.875rem` override below 480px ship 30px targets.
+  expect(
+    !new RegExp(`${sel}\\s*\\{[^}]*min-height:`, 's').test(mediaCss),
+    `${name} must not have its touch-target floor overridden inside a media query`
+  );
+  // ...and exactly one min-height declaration sheet-wide, so a LATER base rule at equal specificity
+  // cannot win the cascade behind the positive check above (which only sees the first match).
+  const floors = css.match(new RegExp(`${sel}\\s*\\{[^}]*min-height:`, 'gs')) || [];
+  expect(
+    floors.length === 1,
+    `${name} must declare min-height exactly once so no later rule outranks the token (found ${floors.length})`
+  );
+}
+
+expect(
+  /\.output-pair\s*\{[^}]*grid-template-columns:\s*minmax\(0,\s*1fr\)\s*(;|\})/s.test(at880),
+  'output preview pair must stack to a single column inside an 880px media block'
 );
 
-// 14. Gradient text solid fallback preserved (no bare color: transparent)
-assert(
-  !/[^-]color:\s*transparent/.test(html),
-  'gradient text keeps solid color fallback (no bare color: transparent)'
+// The page must not clip its own viewport. overflow-x:clip on the root hides horizontal overflow
+// instead of preventing it, so a regression becomes unreachable content rather than a visible bug.
+// The grid-track rules below are what actually keep the page inside the viewport.
+// (Widening this alternation broadens a prohibition, which is the safe direction.)
+expect(
+  !/(^|[\s,;}])(html|body|:root)[^{,\s]*\s*\{[^}]*overflow(-x)?:\s*(clip|hidden)/s.test(css),
+  'html/body/:root must not mask overflow with overflow-x — fix the overflowing element instead'
 );
 
-// 15. Viewport horizontal overflow protection & grid min-width containment
-assert(
-  /html\s*\{[^}]*overflow-x:\s*(clip|hidden)/s.test(html) &&
-  /body\s*\{[^}]*overflow-x:\s*(clip|hidden)/s.test(html) &&
-  /\.install-track-card\s*\{[^}]*min-width:\s*0/s.test(html) &&
-  /\.output-panel\s*\{[^}]*min-width:\s*0/s.test(html),
-  'viewport horizontal overflow protection and grid item min-width containment are enforced'
+// A grid item's automatic minimum size is its min-content width, so a bare 1fr track is widened by
+// an unbreakable code string. Sizing the track with minmax(0, …) immunises every child at once.
+expect(
+  /\.output-pair\s*\{[^}]*grid-template-columns:\s*repeat\(2,\s*minmax\(0,\s*1fr\)\)/s.test(css) &&
+  /\.install-tracks\s*\{[^}]*grid-template-columns:\s*minmax\(0,\s*1fr\)/s.test(css),
+  'output and install grids must size tracks with minmax(0, …) so long code cannot widen them'
 );
 
-console.log(`\nResults: ${passed}/${passed + failed} passed, ${failed} failed`);
-process.exit(failed === 0 ? 0 : 1);
+if (problems.length) {
+  // Count first: check() shows only the first 5 lines, so this line must survive truncation.
+  console.error(`${problems.length} responsive problem(s) in docs/index.html:`);
+  for (const line of problems) console.error(line);
+  process.exit(1);
+}
+console.log('✅ Responsive landing page tests passed.');