diff --git a/.okf/design/house-visual-spec.md b/.okf/design/house-visual-spec.md
index 0eeb45274..bdcd04fbb 100644
--- a/.okf/design/house-visual-spec.md
+++ b/.okf/design/house-visual-spec.md
@@ -6,7 +6,7 @@ resource: .stitch/prompts/course-inpost-visual-prompt.md
 tags: [svg, design, course]
 generated:
   by: process:okf-migrate
-  at: 2026-07-13T00:00:00Z
+  at: 2026-08-01T00:00:00Z
 ---
 
 # The spec in one table
@@ -46,3 +46,190 @@ print-ready PDF (Wave M3 ships a download link on every printable page;
 print is the native format for pen-and-paper artifacts). Revisit only if
 pilot recordings show phone readers pinch-zooming worksheets instead of
 downloading.
+
+# v3 exhibit spec
+
+Source of authority: ADR 30.09 (premium-editorial pilot). This section is
+the executable spec its Phase-A A/B pilot demanded - an SVG author renders
+from it without guessing px, ratios, or weights. It ADDS to (does not
+replace) the hand-drawn grammar above: O1 keeps that style, disciplined to
+the numbers here; O2 is the flat-vector challenger. Everything below is
+style-agnostic unless a row splits O1/O2. Dashes stay "-" everywhere,
+green stays money-only, labels stay inside shapes.
+
+## The governing constant: the >=9px @390px legibility floor
+
+The current SVGs render at a 960-1000 viewBox and their smallest text lands
+at ~5.5-7px on a 390px phone (ADR "Measured state"). That is the defect v3
+fixes. The fix is a formula, not a wish.
+
+An SVG scales to its container width, so rendered text size is:
+
+    rendered_px = font_viewBox * (W_render / W_viewBox)
+
+Reference render width is **W_render = 390** (a phone's CSS viewport; the
+real content column after page padding is ~358px, so 390 carries ~9%
+built-in headroom). Require the SMALLEST rung (basis) to clear 9px:
+
+    rendered_px(basis) >= 9
+    => basis_viewBox >= 9 * W_viewBox / 390 = 0.02308 * W_viewBox
+    => equivalently  W_viewBox <= basis_viewBox * 43.33
+
+**Canonical exhibit viewBox width = 720.** At 720 the floor is
+0.02308 * 720 = 16.62px, so the basis rung is set to **17px**, which renders
+17 * 390/720 = **9.21px** at 390 - above floor by design. Only the basis rung
+(the smallest) needs the check; every larger rung clears it automatically.
+
+If an exhibit needs a wider viewBox W, scale ALL five rungs by W/720 so the
+floor still holds; never place text smaller than `ceil(9 * W/390)` px.
+Widening the viewBox to fit more nodes is the trap that caused the 5.5px
+defect - prefer fewer nodes at W=720 over more nodes at W=960.
+
+**O1 Caveat correction (calibration knob):** Caveat's x-height is ~15%
+smaller than Space Grotesk at the same point size, so O1 multiplies the
+required floor by 1.15 - O1 basis rung = ceil(1.15 * 17) = **20px** (renders
+10.8px, perceived ~9.4px). This is a real font-metric compensation, not slack.
+
+## 1. Grid / column system
+
+| Property | Value (viewBox units at W=720) |
+|---|---|
+| Canonical viewBox width | 720 |
+| Columns | 12 |
+| Outer safe margin (no critical content past it) | 24 all sides |
+| Gutter | 12 |
+| Column width | (720 - 48 - 11*12)/12 = 45 |
+| Vertical rhythm baseline | 8 |
+
+Nodes and axes snap to column edges; multi-column nodes span whole columns
+plus the gutters between them (2 cols = 45+12+45 = 102). Vertical positions
+snap to the 8px baseline.
+
+## 2. Spacing scale
+
+8px-based rung set (matches JetVelocity's 8px rhythm; 4 and 12 are the only
+half-steps, reserved for tight in-node text padding):
+
+    4  -  8  -  12  -  16  -  24  -  32  -  48  -  64
+
+- 4/8: in-node text padding, gap between a label and its icon.
+- 12/16: node internal padding, gap between a bar and its value label.
+- 24/32: gap between sibling nodes, chart plot inset.
+- 48/64: gap between exhibit regions (title block -> body -> basis line).
+
+Every gap in an exhibit is one of these eight values. No off-rung spacing.
+
+## 3. Connector spec
+
+| Property | O2 flat-vector | O1 hand-drawn-normalized |
+|---|---|---|
+| Line weight | 2px uniform | 2-2.5px hand stroke |
+| Routing | orthogonal (right-angle) | organic curve |
+| Corner radius on turns | 4px | n/a (curve) |
+| Arrowhead | filled triangle, 9 long x 7 base, same fill as line | open hand-drawn caret, ~10px |
+| Attach point | node edge midpoint | node edge, loose |
+| Turn clearance | >=16px straight off a node before the first turn | ~16px |
+| Connector label | in a paper-tone pill centered ON the line, never crossing it | same |
+
+Line color = ink (#121212 O2 / #1a1a1a O1) for neutral flow; ruby only when
+the connector itself is the anti-pattern / action edge; purple for the
+alternate path (carried from the hand-drawn semantics above).
+
+## 4. Data-viz rules
+
+- **Chart-vs-diagram trigger:** message is a quantity / comparison / trend
+  -> chart. Message is a flow / relationship / sequence -> diagram. One
+  message per exhibit decides which.
+- **Fill vs stroke (hard rule):** DATA marks are FILLED, no stroke (bars,
+  dots, bands, meter fill). STRUCTURE is STROKED, no fill (axes, gridlines,
+  connectors, node outlines). Never both on one mark.
+- **Bars:** filled semantic color; inter-bar gap = 0.5x bar width; category
+  label below (label rung), value label above (annotation rung).
+- **Dots/scatter:** 6px-radius filled dots, no stroke.
+- **Gauge / meter / signal read:** horizontal track, bands filled by
+  semantic tone, 2px pointer tick, threshold marked with a labeled tick
+  (this is the `smoke-test-signal.svg` archetype).
+- **Ruby-for-signal convention:** ruby marks the ONE actionable reading -
+  the threshold to act on, the kill zone, the number the exhibit exists to
+  show. Everything else stays ink or gray. If two things are ruby, the
+  exhibit has two messages - split it.
+- **Threshold vs band:** a threshold is a 2px dashed ink line perpendicular
+  to the axis with a labeled tick. A band is a filled semantic-tone rect
+  BEHIND the data, its label inside at the label rung.
+- **Axis:** single baseline axis 2px ink; no gridlines unless precise values
+  are read (then 1px #e5e5e5); no 3D, no chart junk. Plain-language chart
+  title sits in the action-title slot (see grammar).
+
+## 5. Aspect-ratio guidance
+
+| Exhibit type | Ratio | viewBox at W=720 |
+|---|---|---|
+| Signal meter / single-axis chart | 12:5 | 720 x 300 |
+| Flow / process diagram | 16:9 | 720 x 405 |
+| Comparison (bars) | 3:2 | 720 x 480 |
+| Relationship / node map | 3:2 | 720 x 480 |
+| Program map / synthesis | up to 4:5 portrait | 720 x 900 max |
+
+**Mobile-safe default = 3:2 (720 x 480)** - fills the phone column at ~1.3x
+viewport height. Never exceed 4:5 portrait on a phone, and never breach the
+hand-drawn spec's "taller than 2x viewport = wall, not hook" ceiling above.
+
+## 6. Five-rung type scale
+
+Sizes in viewBox units at the canonical W=720. Rendered column = value *
+390/720 = value * 0.5417 (the >=9px floor check).
+
+| Rung | Role in exhibit | O2 size / font | O1 size / font | Rendered @390 (O2) |
+|---|---|---|---|---|
+| 1 Title | action title (the takeaway sentence) | 34 / Space Grotesk 700 | 34 / Caveat 700 | 18.4px |
+| 2 Message | the one point proved (subtitle) | 24 / Space Grotesk 600 | 24 / Caveat 700 | 13.0px |
+| 3 Label | in-node / axis labels | 20 / Space Grotesk 600 | 22 / Caveat 700 | 10.8px |
+| 4 Annotation | callouts, value labels | 18 / system-ui 400 | 22 / Caveat 700 | 9.75px |
+| 5 Basis | source/scope line | 17 / system-ui 400 | 20 / Caveat 700 | 9.21px |
+
+O2 uses Space Grotesk for title/message/label only; annotation and basis
+(running text) stay system-ui per ADR ("Space Grotesk labels only, body
+stays system-ui"). O1 keeps the full Caveat/Patrick Hand/Comic Sans stack at
+the x-height-corrected sizes (rungs 3-5 bumped to satisfy the O1 floor).
+
+## Exhibit grammar (every exhibit, both styles)
+
+Zelazny doctrine, from ADR driver D2. Non-negotiable in either style:
+
+1. **One action title** - a sentence stating the takeaway, not a label.
+   "Under 3% conversion means kill the idea", never "Conversion signal".
+2. **One message** - the single point the exhibit proves. If you need two,
+   make two exhibits.
+3. **One basis line** - the data's source and scope, bottom of the exhibit.
+   "Basis: 7-day cold-traffic test, one channel."
+
+## O1 vs O2 scoring rubric (for the T2 A/B pair)
+
+Both variants MUST pass the grammar checklist and the measured >=9px @390px
+floor - those are pass/fail gates, not scored preferences. The rows below
+are where the two styles legitimately diverge, so T2 (and Paul's eye-test)
+can score them on the same axes at equal zoom.
+
+| Axis | O1 hand-drawn-normalized | O2 premium-editorial flat-vector |
+|---|---|---|
+| Heading/label font | Caveat / Patrick Hand / Comic Sans stack | Space Grotesk 600-700 |
+| Running-text font | same cursive stack | system-ui |
+| Stroke | 2-2.5px hand feel | 1.5-2px uniform |
+| Corner radius | organic / none | 4px |
+| Texture filter | rough filter allowed | none (clean) |
+| Background | paper tones (#fff5f5 / #faf7f2 / #f0f9f0 / #fbe9ff) | paper white #ffffff on #faf7f2 page |
+| Ink color | #1a1a1a | #121212 |
+| Accents | ruby=action/anti-pattern, purple=alt, green=money, amber=warn | same semantics |
+| Basis-rung floor | 20px (Caveat x-height corrected) | 17px |
+| Brand-identity fit | preserves the "handwritten = non-negotiable" mermaid brand rule | deliberately re-tests it (ADR: weak prior) |
+| Sam-trust read (ADR) | risked reading "amateur / unfinished" | risked reading "generic startup" if overdone |
+| When it wins | authenticity/warmth valued over polish; cheapest (no restyle) | craft/consistency read as premium; consulting-grade synthesis |
+
+## Verification against ADR 30.09
+
+All six demanded components are present: (1) grid, (2) spacing scale,
+(3) connector spec, (4) data-viz rules, (5) aspect-ratio, (6) 5-rung type
+scale with the measured >=9px @390px floor formula - plus the exhibit
+grammar and the O1/O2 rubric. Nothing in the ADR's Phase-A spec requirement
+was left aspirational; the floor is a formula (basis 17px @ W=720 -> 9.21px)
+and every dimension is a number an SVG author can render from.
diff --git a/.okf/log.md b/.okf/log.md
index e52aa4f32..8179f84be 100644
--- a/.okf/log.md
+++ b/.okf/log.md
@@ -580,3 +580,17 @@ untouched.
 
 ## 2026-08-01 - Removed toolchain drift-gate unit tests (config-mirror anti-pattern)
 * **Remove**: `test/unit/toolchain_pins_test.rb` deleted in full. It was a config-mirror "drift gate" asserting `.mise.toml` version pins equal the literal pins in the setup-hugo action, `_hugo.yml`, `.dev/compose.yml`, and `.ruby-version`. `test_setup_hugo_action_matches_mise` red-built on a FALSE invariant: `.mise.toml` `node = "latest"` (devs want latest) vs CI `node-version: '22'` (pinned on purpose in #393) - a correct divergence, not drift. Tests config agreement, not behavior; violates FIRST + the CLAUDE.md "no fragile config assertions" rule. Comparing CI-vs-local node explicitly was considered and rejected as overkill (Paul). Refs cleaned: Rakefile `:guards` list, `.mise.toml` / setup-hugo `action.yml` header comments, README, `docs/SETUP.md`, this bundle's [ci-gates](/build/ci-gates.md). Pins still need manual sync when bumping - now by convention, not a gate.
+
+## 2026-08-01 - W3-T1: v3 exhibit spec appended to house-visual-spec
+
+Added a `# v3 exhibit spec` section to `.okf/design/house-visual-spec.md`
+(hand-drawn spec untouched, O1 still needs it) covering the six components
+ADR 30.09 Phase A demanded: 12-col grid at a canonical 720 viewBox, 8px
+spacing scale, connector spec (2px orthogonal + 4px radius O2 / hand-curve
+O1), data-viz rules (fill=data / stroke=structure, ruby-for-signal,
+threshold-vs-band), aspect-ratio table (mobile-safe default 3:2), and the
+5-rung type scale. The >=9px @390px floor is a formula, not prose:
+`rendered = font_viewBox * 390/W_viewBox`; basis rung 17px @ W=720 renders
+9.21px. O1 bumps the floor x1.15 (basis 20px) for Caveat's small x-height.
+Includes the action-title/one-message/basis-line grammar and an O1-vs-O2
+scoring rubric so the T2 A/B pair scores both on the same axes.
diff --git a/content/course/tech-for-non-technical-founders-2026/form-your-founding-hypothesis-90-minute-sprint/hypothesis-mad-libs.svg b/content/course/tech-for-non-technical-founders-2026/form-your-founding-hypothesis-90-minute-sprint/hypothesis-mad-libs.svg
index 53dcc5d71..99c27d79d 100644
--- a/content/course/tech-for-non-technical-founders-2026/form-your-founding-hypothesis-90-minute-sprint/hypothesis-mad-libs.svg
+++ b/content/course/tech-for-non-technical-founders-2026/form-your-founding-hypothesis-90-minute-sprint/hypothesis-mad-libs.svg
@@ -1,46 +1,58 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 190" role="img" aria-labelledby="madlibs-title">
-  <title id="madlibs-title">The founding-hypothesis Mad Libs sentence with five blanks: If we help [customer] solve [problem] with [approach], they'll choose it over [competition] because [differentiation].</title>
-  <desc>Five fill-in-the-blank pills stitched into one sentence. Three red pills name the customer, the problem, and the approach; two purple pills name the competition and the differentiation. Caption: five blanks, one sentence, no vagueness allowed.</desc>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 320" role="img" aria-labelledby="madlibs-title madlibs-desc">
+  <title id="madlibs-title">Fill five specific blanks and the hypothesis becomes one testable sentence.</title>
+  <desc id="madlibs-desc">A fill-in-the-blank sentence with five outlined placeholder chips: customer, problem, approach, competition and differentiation, stitched by the connecting words "If we help ... solve ... with ..., they'll choose it over ... because ...". Below, the customer blank is filled two ways to show what specific means: the vague fill "small businesses" gets a shrug, the specific fill "solo chiropractors" (marked in ruby) gets "that's me". Basis: the founding-hypothesis frame from Click by Knapp and Zeratsky, 2025.</desc>
   <defs>
     <style>
-      .h    { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; }
-      .join { font-size: 21px; fill: #555; }
-      .pill { font-size: 20px; font-weight: 700; fill: #1a1a1a; }
-      .cap  { font-size: 18px; fill: #888; font-style: italic; }
-      .p-r  { fill: #fff5f5; stroke: #cc342d; stroke-width: 2; stroke-linejoin: round; }
-      .p-p  { fill: #fbe9ff; stroke: #a855f7; stroke-width: 2; stroke-linejoin: round; }
+      .gk    { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; }
+      .sys   { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
+      .title { font-size: 34px; font-weight: 700; fill: #121212; letter-spacing: -0.4px; }
+      .msg   { font-size: 24px; font-weight: 600; fill: #4a4a4a; }
+      .join  { font-size: 20px; font-weight: 400; fill: #121212; }
+      .blank { font-size: 20px; font-weight: 600; fill: #8a8a8a; }
+      .fill  { font-size: 20px; font-weight: 600; fill: #ffffff; }
+      .vague { font-size: 20px; font-weight: 600; fill: #8a8a8a; }
+      .annot { font-size: 18px; font-weight: 400; fill: #444444; }
+      .basis { font-size: 17px; font-weight: 400; fill: #555555; }
     </style>
   </defs>
 
-  <!-- Line 1: If we help [customer] solve [problem] with [approach] -->
-  <text x="18" y="54" class="h join">If we help</text>
-  <g transform="rotate(-0.8 202 47)">
-    <rect x="152" y="32" width="100" height="30" rx="8" class="p-r"/>
-    <text x="202" y="54" text-anchor="middle" class="h pill">customer</text>
-  </g>
-  <text x="266" y="54" class="h join">solve</text>
-  <g transform="rotate(0.7 378 47)">
-    <rect x="330" y="32" width="96" height="30" rx="8" class="p-r"/>
-    <text x="378" y="54" text-anchor="middle" class="h pill">problem</text>
-  </g>
-  <text x="440" y="54" class="h join">with</text>
-  <g transform="rotate(-0.6 553 47)">
-    <rect x="500" y="32" width="106" height="30" rx="8" class="p-r"/>
-    <text x="553" y="54" text-anchor="middle" class="h pill">approach</text>
-  </g>
+  <!-- page tone + editorial card -->
+  <rect width="720" height="320" fill="#faf7f2"/>
+  <rect x="8" y="8" width="704" height="304" rx="6" fill="#ffffff" stroke="#ececec" stroke-width="1"/>
 
-  <!-- Line 2: they'll choose it over [competition] because [differentiation] -->
-  <text x="18" y="114" class="h join">they'll choose it over</text>
-  <g transform="rotate(0.6 340 107)">
-    <rect x="280" y="92" width="120" height="30" rx="8" class="p-p"/>
-    <text x="340" y="114" text-anchor="middle" class="h pill">competition</text>
-  </g>
-  <text x="414" y="114" class="h join">because</text>
-  <g transform="rotate(-0.7 584 107)">
-    <rect x="516" y="92" width="136" height="30" rx="8" class="p-p"/>
-    <text x="584" y="114" text-anchor="middle" class="h pill">differentiation</text>
-  </g>
+  <!-- title block: action title + one message -->
+  <text x="360" y="46" text-anchor="middle" class="gk title">Five specific blanks, one testable sentence</text>
+  <text x="360" y="78" text-anchor="middle" class="gk msg">Categories get a polite nod; specifics get pushback</text>
 
-  <!-- Caption -->
-  <text x="340" y="166" text-anchor="middle" class="h cap">Five blanks. One sentence. No vagueness allowed.</text>
+  <!-- Row 1: If we help [CUSTOMER] solve [PROBLEM] with [APPROACH] -->
+  <text x="40" y="134" class="gk join">If we help</text>
+  <rect x="140" y="113" width="118" height="30" rx="4" fill="#ffffff" stroke="#c8c8c8" stroke-width="2"/>
+  <text x="199" y="134" text-anchor="middle" class="gk blank">CUSTOMER</text>
+  <text x="272" y="134" class="gk join">solve</text>
+  <rect x="326" y="113" width="106" height="30" rx="4" fill="#ffffff" stroke="#c8c8c8" stroke-width="2"/>
+  <text x="379" y="134" text-anchor="middle" class="gk blank">PROBLEM</text>
+  <text x="444" y="134" class="gk join">with</text>
+  <rect x="492" y="113" width="122" height="30" rx="4" fill="#ffffff" stroke="#c8c8c8" stroke-width="2"/>
+  <text x="553" y="134" text-anchor="middle" class="gk blank">APPROACH</text>
+
+  <!-- Row 2: they'll choose it over [COMPETITION] because [DIFFERENTIATION] -->
+  <text x="40" y="193" class="gk join">they'll choose it over</text>
+  <rect x="252" y="172" width="150" height="30" rx="4" fill="#ffffff" stroke="#c8c8c8" stroke-width="2"/>
+  <text x="327" y="193" text-anchor="middle" class="gk blank">COMPETITION</text>
+  <text x="414" y="193" class="gk join">because</text>
+  <rect x="502" y="172" width="176" height="30" rx="4" fill="#ffffff" stroke="#c8c8c8" stroke-width="2"/>
+  <text x="590" y="193" text-anchor="middle" class="gk blank">DIFFERENTIATION</text>
+
+  <!-- hero reading: the CUSTOMER blank filled two ways (ruby = the specific, actionable fill) -->
+  <line x1="40" y1="226" x2="680" y2="226" stroke="#ececec" stroke-width="1"/>
+  <text x="40" y="256" class="gk join" fill="#4a4a4a" font-size="18">Fill it vague:</text>
+  <rect x="158" y="238" width="176" height="30" rx="4" fill="#ffffff" stroke="#c8c8c8" stroke-width="2"/>
+  <text x="246" y="259" text-anchor="middle" class="gk vague">small businesses</text>
+  <path d="M348,253 L372,253 M366,248 L374,253 L366,258" fill="none" stroke="#3a3a3a" stroke-width="2"/>
+  <rect x="384" y="238" width="196" height="30" rx="4" fill="#cc342d"/>
+  <text x="482" y="259" text-anchor="middle" class="gk fill">solo chiropractors</text>
+  <text x="592" y="259" class="sys annot" fill="#cc342d">= "that's me"</text>
+
+  <!-- one basis line -->
+  <text x="360" y="298" text-anchor="middle" class="sys basis">Basis: the founding-hypothesis frame from Click (Knapp &amp; Zeratsky, 2025)</text>
 </svg>
diff --git a/content/course/tech-for-non-technical-founders-2026/form-your-founding-hypothesis-90-minute-sprint/index.md b/content/course/tech-for-non-technical-founders-2026/form-your-founding-hypothesis-90-minute-sprint/index.md
index 8b81d4a5b..8da3e92ee 100644
--- a/content/course/tech-for-non-technical-founders-2026/form-your-founding-hypothesis-90-minute-sprint/index.md
+++ b/content/course/tech-for-non-technical-founders-2026/form-your-founding-hypothesis-90-minute-sprint/index.md
@@ -67,7 +67,7 @@ Each blank is an assumption, and each assumption has a test waiting for it later
 - **`[COMPETITION]`**: what they currently use (a spreadsheet, a billing service, "doing nothing")
 - **`[DIFFERENTIATION]`**: why they'd switch - faster or cheaper, with numbers
 
-![5 blanks of the Mad Libs hypothesis sentence with a filled example below](hypothesis-mad-libs.svg)
+![The founding-hypothesis frame as five outlined blanks - customer, problem, approach, competition, differentiation - with the customer blank filled two ways to show specific beats vague: "small businesses" gets a shrug, "solo chiropractors" gets "that's me"](hypothesis-mad-libs.svg)
 
 Can't tell whether a blank is specific enough to bet on? The [validation tools field guide](/course/tech-for-non-technical-founders-2026/validation-tools-field-guide/) walks three AI tools that stress-test your five blanks in about ten minutes - a structured second opinion before you commit the sentence and start booking interviews.
 
diff --git a/content/course/tech-for-non-technical-founders-2026/how-this-course-works/index.md b/content/course/tech-for-non-technical-founders-2026/how-this-course-works/index.md
index 9e771e262..1fb636b70 100644
--- a/content/course/tech-for-non-technical-founders-2026/how-this-course-works/index.md
+++ b/content/course/tech-for-non-technical-founders-2026/how-this-course-works/index.md
@@ -42,7 +42,7 @@ This course takes a non-technical founder from a rough idea to a signed paid pil
 
 ## The Big Picture
 
-![5-module pipeline: Module 1 Hypothesis & Smoke Test → Module 2 Validate the Problem → Module 3 Design from Evidence → Module 4 Build It Yourself → Module 5 First Paying Customer](module-pipeline.svg)
+![Program map: five modules on one spine, each output feeding the next input. Module 1 Hypothesis & Smoke Test produces a tested hypothesis and a live page that takes payment; Module 2 Validate the Problem produces 10 customer interviews and a validated problem statement; Module 3 Design from Evidence produces a one-page product brief in real customer words; Module 4 Build It Yourself produces a live MVP at a real URL with every account in your name; Module 5 First Paying Customer produces a signed paid pilot with a deposit in the bank.](program-map.svg)
 
 {{< course-stat modules >}} modules. {{< course-stat chapters >}} lessons. {{< course-stat artifacts >}} artifacts you can hand to an investor or a co-founder. Each module's output is the next module's input.
 
diff --git a/content/course/tech-for-non-technical-founders-2026/how-this-course-works/module-pipeline.svg b/content/course/tech-for-non-technical-founders-2026/how-this-course-works/module-pipeline.svg
deleted file mode 100644
index 4de0c6bb1..000000000
--- a/content/course/tech-for-non-technical-founders-2026/how-this-course-works/module-pipeline.svg
+++ /dev/null
@@ -1,123 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 340" role="img" aria-labelledby="pipeline-title">
-  <title id="pipeline-title">5-module course pipeline: Hypothesis → Validate → Design → Build → First Paying Customer</title>
-  <defs>
-    <style>
-      .card-title   { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 22px; fill: #1a1a1a; font-weight: 700; }
-      .card-label   { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 15px; fill: #555; }
-      .card-artifact{ font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 14px; fill: #444; font-style: italic; }
-      .arrow-label  { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 18px; fill: #777; font-weight: 700; }
-      .page-title   { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 28px; fill: #1a1a1a; font-weight: 700; }
-      .page-sub     { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 16px; fill: #666; font-style: italic; }
-      .card-1 { fill: #eef2ff; stroke: #4f46e5; stroke-width: 2.5; }
-      .card-2 { fill: #ecfeff; stroke: #0891b2; stroke-width: 2.5; }
-      .card-3 { fill: #fffbeb; stroke: #d97706; stroke-width: 2.5; }
-      .card-4 { fill: #fff5f5; stroke: #cc342d; stroke-width: 2.5; }
-      .card-5 { fill: #f0fdf4; stroke: #16a34a; stroke-width: 2.5; }
-    </style>
-    <filter id="rough" x="-3%" y="-3%" width="106%" height="106%">
-      <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="3" seed="7"/>
-      <feDisplacementMap in="SourceGraphic" scale="2.5"/>
-    </filter>
-    <filter id="rough-arrow" x="-3%" y="-3%" width="106%" height="106%">
-      <feTurbulence type="fractalNoise" baseFrequency="0.06" numOctaves="2" seed="12"/>
-      <feDisplacementMap in="SourceGraphic" scale="1.8"/>
-    </filter>
-  </defs>
-
-  <rect width="1100" height="340" fill="#fafaf7"/>
-
-  <!-- Title -->
-  <text x="550" y="38" class="page-title" text-anchor="middle">The 5-Module Pipeline</text>
-  <text x="550" y="62" class="page-sub" text-anchor="middle">Each module's output is the next module's input - from rough idea to signed paid pilot</text>
-
-  <!-- Card 1: Module 1 -->
-  <rect x="20" y="85" width="180" height="230" rx="10" class="card-1" filter="url(#rough)"/>
-  <text x="110" y="115" class="card-title" text-anchor="middle">Module 1</text>
-  <text x="110" y="140" class="card-label" text-anchor="middle" font-weight="bold">Hypothesis</text>
-  <text x="110" y="160" class="card-label" text-anchor="middle">&amp; Smoke Test</text>
-  <line x1="40" y1="175" x2="180" y2="175" stroke="#4f46e5" stroke-width="1" stroke-dasharray="4 3" opacity="0.4"/>
-  <text x="110" y="196" class="card-label" text-anchor="middle">~7 days</text>
-  <line x1="40" y1="212" x2="180" y2="212" stroke="#4f46e5" stroke-width="1" stroke-dasharray="4 3" opacity="0.4"/>
-  <text x="110" y="234" class="card-artifact" text-anchor="middle">Artifact:</text>
-  <text x="110" y="254" class="card-artifact" text-anchor="middle">Hypothesis +</text>
-  <text x="110" y="272" class="card-artifact" text-anchor="middle">Smoke Test</text>
-  <text x="110" y="302" class="card-label" text-anchor="middle" fill="#4f46e5" font-weight="bold">STAGE 1</text>
-
-  <!-- Arrow 1→2 -->
-  <g filter="url(#rough-arrow)">
-    <line x1="210" y1="200" x2="260" y2="200" stroke="#777" stroke-width="2.5"/>
-    <polygon points="258,192 272,200 258,208" fill="#777"/>
-  </g>
-  <text x="238" y="190" class="arrow-label" text-anchor="middle">→</text>
-
-  <!-- Card 2: Module 2 -->
-  <rect x="230" y="85" width="180" height="230" rx="10" class="card-2" filter="url(#rough)"/>
-  <text x="320" y="115" class="card-title" text-anchor="middle">Module 2</text>
-  <text x="320" y="140" class="card-label" text-anchor="middle" font-weight="bold">Validate the</text>
-  <text x="320" y="160" class="card-label" text-anchor="middle">Problem</text>
-  <line x1="250" y1="175" x2="390" y2="175" stroke="#0891b2" stroke-width="1" stroke-dasharray="4 3" opacity="0.4"/>
-  <text x="320" y="196" class="card-label" text-anchor="middle">~2-3 weeks</text>
-  <line x1="250" y1="212" x2="390" y2="212" stroke="#0891b2" stroke-width="1" stroke-dasharray="4 3" opacity="0.4"/>
-  <text x="320" y="234" class="card-artifact" text-anchor="middle">Artifact:</text>
-  <text x="320" y="254" class="card-artifact" text-anchor="middle">10 Interviews +</text>
-  <text x="320" y="272" class="card-artifact" text-anchor="middle">Problem Stmt</text>
-  <text x="320" y="302" class="card-label" text-anchor="middle" fill="#0891b2" font-weight="bold">STAGE 2</text>
-
-  <!-- Arrow 2→3 -->
-  <g filter="url(#rough-arrow)">
-    <line x1="420" y1="200" x2="470" y2="200" stroke="#777" stroke-width="2.5"/>
-    <polygon points="468,192 482,200 468,208" fill="#777"/>
-  </g>
-
-  <!-- Card 3: Module 3 -->
-  <rect x="440" y="85" width="180" height="230" rx="10" class="card-3" filter="url(#rough)"/>
-  <text x="530" y="115" class="card-title" text-anchor="middle">Module 3</text>
-  <text x="530" y="140" class="card-label" text-anchor="middle" font-weight="bold">Design from</text>
-  <text x="530" y="160" class="card-label" text-anchor="middle">Evidence</text>
-  <line x1="460" y1="175" x2="600" y2="175" stroke="#d97706" stroke-width="1" stroke-dasharray="4 3" opacity="0.4"/>
-  <text x="530" y="196" class="card-label" text-anchor="middle">~3-5 days</text>
-  <line x1="460" y1="212" x2="600" y2="212" stroke="#d97706" stroke-width="1" stroke-dasharray="4 3" opacity="0.4"/>
-  <text x="530" y="234" class="card-artifact" text-anchor="middle">Artifact:</text>
-  <text x="530" y="254" class="card-artifact" text-anchor="middle">Product Brief /</text>
-  <text x="530" y="272" class="card-artifact" text-anchor="middle">Vibe PRD</text>
-  <text x="530" y="302" class="card-label" text-anchor="middle" fill="#d97706" font-weight="bold">STAGE 3</text>
-
-  <!-- Arrow 3→4 -->
-  <g filter="url(#rough-arrow)">
-    <line x1="630" y1="200" x2="680" y2="200" stroke="#777" stroke-width="2.5"/>
-    <polygon points="678,192 692,200 678,208" fill="#777"/>
-  </g>
-
-  <!-- Card 4: Module 4 -->
-  <rect x="650" y="85" width="180" height="230" rx="10" class="card-4" filter="url(#rough)"/>
-  <text x="740" y="115" class="card-title" text-anchor="middle">Module 4</text>
-  <text x="740" y="140" class="card-label" text-anchor="middle" font-weight="bold">Build It</text>
-  <text x="740" y="160" class="card-label" text-anchor="middle">Yourself</text>
-  <line x1="670" y1="175" x2="810" y2="175" stroke="#cc342d" stroke-width="1" stroke-dasharray="4 3" opacity="0.4"/>
-  <text x="740" y="196" class="card-label" text-anchor="middle">~2-4 weeks</text>
-  <line x1="670" y1="212" x2="810" y2="212" stroke="#cc342d" stroke-width="1" stroke-dasharray="4 3" opacity="0.4"/>
-  <text x="740" y="234" class="card-artifact" text-anchor="middle">Artifact:</text>
-  <text x="740" y="254" class="card-artifact" text-anchor="middle">Live MVP at</text>
-  <text x="740" y="272" class="card-artifact" text-anchor="middle">real URL</text>
-  <text x="740" y="302" class="card-label" text-anchor="middle" fill="#cc342d" font-weight="bold">STAGE 4</text>
-
-  <!-- Arrow 4→5 -->
-  <g filter="url(#rough-arrow)">
-    <line x1="840" y1="200" x2="890" y2="200" stroke="#777" stroke-width="2.5"/>
-    <polygon points="888,192 902,200 888,208" fill="#777"/>
-  </g>
-
-  <!-- Card 5: Module 5 -->
-  <rect x="860" y="85" width="180" height="230" rx="10" class="card-5" filter="url(#rough)"/>
-  <text x="950" y="115" class="card-title" text-anchor="middle">Module 5</text>
-  <text x="950" y="140" class="card-label" text-anchor="middle" font-weight="bold">First Paying</text>
-  <text x="950" y="160" class="card-label" text-anchor="middle">Customer</text>
-  <line x1="880" y1="175" x2="1020" y2="175" stroke="#16a34a" stroke-width="1" stroke-dasharray="4 3" opacity="0.4"/>
-  <text x="950" y="196" class="card-label" text-anchor="middle">~2-4 weeks</text>
-  <line x1="880" y1="212" x2="1020" y2="212" stroke="#16a34a" stroke-width="1" stroke-dasharray="4 3" opacity="0.4"/>
-  <text x="950" y="234" class="card-artifact" text-anchor="middle">Artifact:</text>
-  <text x="950" y="254" class="card-artifact" text-anchor="middle">Signed Paid</text>
-  <text x="950" y="272" class="card-artifact" text-anchor="middle">Pilot</text>
-  <text x="950" y="302" class="card-label" text-anchor="middle" fill="#16a34a" font-weight="bold">DONE</text>
-
-</svg>
diff --git a/content/course/tech-for-non-technical-founders-2026/how-this-course-works/program-map.svg b/content/course/tech-for-non-technical-founders-2026/how-this-course-works/program-map.svg
new file mode 100644
index 000000000..f2471cc6d
--- /dev/null
+++ b/content/course/tech-for-non-technical-founders-2026/how-this-course-works/program-map.svg
@@ -0,0 +1,70 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 848" role="img" aria-labelledby="pm-title pm-desc">
+  <title id="pm-title">The 5-module program map: from a rough idea to a signed paid pilot</title>
+  <desc id="pm-desc">A vertical spine links five numbered modules in order. Module 1 Hypothesis and Smoke Test produces a tested hypothesis and a live page that takes payment. Module 2 Validate the Problem produces 10 customer interviews and a validated problem statement. Module 3 Design from Evidence produces a one-page product brief in real customer words. Module 4 Build It Yourself produces a live MVP at a real URL with every account in your name. Module 5 First Paying Customer, shown in green, produces a signed paid pilot with a deposit in the bank. Each module's output is the next module's input.</desc>
+
+  <defs>
+    <style>
+      .h1 { font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 34px; font-weight: 700; fill: #121212; }
+      .h2 { font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 24px; font-weight: 600; fill: #475569; }
+      .mod { font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 20px; font-weight: 600; fill: #121212; }
+      .badge { font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 22px; font-weight: 700; fill: #ffffff; }
+      .deliv { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 18px; fill: #334155; }
+      .basis { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 17px; fill: #64748b; }
+    </style>
+  </defs>
+
+  <rect width="720" height="848" fill="#faf7f2"/>
+
+  <!-- Title block: action title + one message -->
+  <text x="24" y="52" class="h1">Five modules carry a rough idea</text>
+  <text x="24" y="90" class="h1">to a signed paid pilot</text>
+  <text x="24" y="130" class="h2">Each module's output is the next module's input.</text>
+  <line x1="24" y1="150" x2="696" y2="150" stroke="#e5e5e5" stroke-width="1"/>
+
+  <!-- Spine: the 5-module backbone (structure, stroked) -->
+  <line x1="48" y1="220" x2="48" y2="732" stroke="#121212" stroke-width="2"/>
+  <!-- Downward flow chevrons in the gaps -->
+  <polygon points="43,281 53,281 48,290" fill="#121212"/>
+  <polygon points="43,409 53,409 48,418" fill="#121212"/>
+  <polygon points="43,537 53,537 48,546" fill="#121212"/>
+  <polygon points="43,665 53,665 48,674" fill="#121212"/>
+
+  <!-- Module 1 -->
+  <rect x="84" y="168" width="612" height="104" rx="4" fill="#ffffff" stroke="#121212" stroke-width="2"/>
+  <circle cx="48" cy="220" r="22" fill="#475569"/>
+  <text x="48" y="228" class="badge" text-anchor="middle">1</text>
+  <text x="108" y="208" class="mod">Module 1 &#183; Hypothesis &amp; Smoke Test</text>
+  <text x="108" y="240" class="deliv">A tested hypothesis + a live page that takes payment</text>
+
+  <!-- Module 2 -->
+  <rect x="84" y="296" width="612" height="104" rx="4" fill="#ffffff" stroke="#121212" stroke-width="2"/>
+  <circle cx="48" cy="348" r="22" fill="#475569"/>
+  <text x="48" y="356" class="badge" text-anchor="middle">2</text>
+  <text x="108" y="336" class="mod">Module 2 &#183; Validate the Problem</text>
+  <text x="108" y="368" class="deliv">10 customer interviews + a validated problem statement</text>
+
+  <!-- Module 3 -->
+  <rect x="84" y="424" width="612" height="104" rx="4" fill="#ffffff" stroke="#121212" stroke-width="2"/>
+  <circle cx="48" cy="476" r="22" fill="#475569"/>
+  <text x="48" y="484" class="badge" text-anchor="middle">3</text>
+  <text x="108" y="464" class="mod">Module 3 &#183; Design from Evidence</text>
+  <text x="108" y="496" class="deliv">A one-page product brief in real customer words</text>
+
+  <!-- Module 4 -->
+  <rect x="84" y="552" width="612" height="104" rx="4" fill="#ffffff" stroke="#121212" stroke-width="2"/>
+  <circle cx="48" cy="604" r="22" fill="#475569"/>
+  <text x="48" y="612" class="badge" text-anchor="middle">4</text>
+  <text x="108" y="592" class="mod">Module 4 &#183; Build It Yourself</text>
+  <text x="108" y="624" class="deliv">A live MVP at a real URL - every account in your name</text>
+
+  <!-- Module 5: the money outcome (green = money only) -->
+  <rect x="84" y="680" width="612" height="104" rx="4" fill="#f0fdf4" stroke="#16a34a" stroke-width="2"/>
+  <circle cx="48" cy="732" r="22" fill="#16a34a"/>
+  <text x="48" y="740" class="badge" text-anchor="middle">5</text>
+  <text x="108" y="720" class="mod">Module 5 &#183; First Paying Customer</text>
+  <text x="108" y="752" class="deliv">A signed paid pilot with a deposit in the bank</text>
+
+  <!-- Basis line + version -->
+  <text x="24" y="820" class="basis">Basis: the course's 5-module spine - 20+ lessons, 6 artifacts.</text>
+  <text x="696" y="840" class="basis" text-anchor="end">v1.0 &#183; August 2026</text>
+</svg>
diff --git a/content/course/tech-for-non-technical-founders-2026/price-hypothesis-on-smoke-test-page/index.md b/content/course/tech-for-non-technical-founders-2026/price-hypothesis-on-smoke-test-page/index.md
index 97470fc15..51861635a 100644
--- a/content/course/tech-for-non-technical-founders-2026/price-hypothesis-on-smoke-test-page/index.md
+++ b/content/course/tech-for-non-technical-founders-2026/price-hypothesis-on-smoke-test-page/index.md
@@ -58,7 +58,7 @@ The copy matters more than the price number. Two framings we keep reaching for o
 
 Pick one pattern. Do not A/B test - 150 visits each on a $300 budget can't distinguish 4% from 5%. Ship one button copy.
 
-![Same button, two framings side by side - an outcome-framed CTA reading "Stop spending 4 hours on reconciliation - $97" and a risk-reduction-framed CTA reading "Reserve your spot - $97 refundable for 30 days", both showing the identical $97 price](stripe-payment-link.svg)
+![Two cards showing the same waitlist button written two ways - an outcome-framed CTA reading "Stop spending 4 hours on reconciliation - $97" and a risk-reduction-framed CTA reading "Reserve your spot - $97 refundable for 30 days" - both ruby buttons charging the identical $97](stripe-payment-link.svg)
 
 ## Add the Stripe button
 
diff --git a/content/course/tech-for-non-technical-founders-2026/price-hypothesis-on-smoke-test-page/stripe-payment-link.svg b/content/course/tech-for-non-technical-founders-2026/price-hypothesis-on-smoke-test-page/stripe-payment-link.svg
index 8b76d9aad..683a5c8ed 100644
--- a/content/course/tech-for-non-technical-founders-2026/price-hypothesis-on-smoke-test-page/stripe-payment-link.svg
+++ b/content/course/tech-for-non-technical-founders-2026/price-hypothesis-on-smoke-test-page/stripe-payment-link.svg
@@ -1,38 +1,44 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 360" role="img" aria-labelledby="framings-title">
-  <title id="framings-title">Same button, two framings side by side - an outcome-framed CTA and a risk-reduction-framed CTA, both showing the identical $97 price</title>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 300" role="img" aria-labelledby="framings-title framings-desc">
+  <title id="framings-title">Same $97, two ways to frame the button - pick one, never A/B test.</title>
+  <desc id="framings-desc">Two side-by-side cards show the same ruby waitlist button written two ways. The outcome framing reads "Stop spending 4 hours on reconciliation - $97" and anchors the price to the problem it replaces. The risk-reduction framing reads "Reserve your spot - $97, refundable for 30 days" and reduces first-touch risk. Both charge the identical $97. Basis: one smoke-test price, only the wording differs.</desc>
   <defs>
     <style>
-      .heading    { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 28px; fill: #1a1a1a; font-weight: 700; }
-      .note       { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 16px; fill: #444; font-style: italic; }
-      .card-label { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 22px; font-weight: 700; }
-      .cta-text   { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 16px; fill: #fff; font-weight: 700; }
-      .cta-price  { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 19px; fill: #fff; font-weight: 700; }
-      .card-note  { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 15px; fill: #444; font-style: italic; }
-      .callout    { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 17px; fill: #1a1a1a; font-weight: 600; }
-      .card-out   { fill: #fff5f5; stroke: #cc342d; stroke-width: 2.5; }
-      .card-risk  { fill: #fff8e0; stroke: #b8860b; stroke-width: 2.5; }
-      .btn        { fill: #cc342d; stroke: #1a1a1a; stroke-width: 1.5; }
+      .gk    { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; }
+      .sys   { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
+      .title { font-size: 34px; font-weight: 700; fill: #121212; letter-spacing: -0.4px; }
+      .msg   { font-size: 24px; font-weight: 600; fill: #4a4a4a; }
+      .label { font-size: 20px; font-weight: 600; fill: #121212; }
+      .cta   { font-size: 17px; font-weight: 600; fill: #ffffff; }
+      .price { font-size: 19px; font-weight: 700; fill: #ffffff; }
+      .annot { font-size: 18px; font-weight: 400; fill: #555555; }
+      .basis { font-size: 17px; font-weight: 400; fill: #555555; }
     </style>
   </defs>
 
-  <text x="480" y="40" class="heading" text-anchor="middle">Same button, two framings</text>
-  <text x="480" y="66" class="note" text-anchor="middle">The price ($97) is identical on both. Pick one - do not A/B test.</text>
+  <!-- page tone + editorial card -->
+  <rect width="720" height="300" fill="#faf7f2"/>
+  <rect x="8" y="8" width="704" height="284" rx="6" fill="#ffffff" stroke="#ececec" stroke-width="1"/>
 
-  <!-- Left card: outcome framing -->
-  <rect x="32" y="90" width="430" height="185" rx="14" class="card-out" transform="rotate(-0.3 247 182)"/>
-  <text x="247" y="126" class="card-label" text-anchor="middle" fill="#cc342d">OUTCOME FRAMING</text>
-  <rect x="44" y="150" width="406" height="58" rx="29" class="btn" transform="rotate(0.2 247 179)"/>
-  <text x="247" y="186" class="cta-text" text-anchor="middle">Stop spending 4 hours on reconciliation - <tspan class="cta-price">$97</tspan></text>
-  <text x="247" y="248" class="card-note" text-anchor="middle">anchors the price to the problem it replaces</text>
+  <!-- title block: action title + one message -->
+  <text x="360" y="46" text-anchor="middle" class="gk title">Same $97, two ways to frame the button</text>
+  <text x="360" y="78" text-anchor="middle" class="gk msg">Pick one framing; never A/B test a smoke test</text>
 
-  <!-- Right card: risk-reduction framing -->
-  <rect x="498" y="90" width="430" height="185" rx="14" class="card-risk" transform="rotate(0.3 713 182)"/>
-  <text x="713" y="126" class="card-label" text-anchor="middle" fill="#b8860b">RISK-REDUCTION FRAMING</text>
-  <rect x="510" y="150" width="406" height="58" rx="29" class="btn" transform="rotate(-0.2 713 179)"/>
-  <text x="713" y="186" class="cta-text" text-anchor="middle">Reserve your spot - <tspan class="cta-price">$97</tspan> refundable 30 days</text>
-  <text x="713" y="248" class="card-note" text-anchor="middle">reduces first-touch risk</text>
+  <!-- Left card: outcome framing (neutral structure) -->
+  <rect x="24" y="100" width="336" height="168" rx="4" fill="#ffffff" stroke="#3a3a3a" stroke-width="2"/>
+  <text x="192" y="132" text-anchor="middle" class="gk label">OUTCOME FRAMING</text>
+  <rect x="40" y="146" width="304" height="70" rx="4" fill="#cc342d"/>
+  <text x="192" y="174" text-anchor="middle" class="gk cta">Stop spending 4 hours</text>
+  <text x="192" y="198" text-anchor="middle" class="gk price">on reconciliation - $97</text>
+  <text x="192" y="246" text-anchor="middle" class="sys annot">anchors price to what it replaces</text>
 
-  <!-- Bottom callout -->
-  <rect x="90" y="298" width="780" height="48" rx="12" fill="#fbe9ff" stroke="#a855f7" stroke-width="2"/>
-  <text x="480" y="328" class="callout" text-anchor="middle">Same $97 either way - the frame changes what the visitor feels, not what they pay.</text>
+  <!-- Right card: risk-reduction framing (neutral structure) -->
+  <rect x="372" y="100" width="336" height="168" rx="4" fill="#ffffff" stroke="#3a3a3a" stroke-width="2"/>
+  <text x="540" y="132" text-anchor="middle" class="gk label">RISK-REDUCTION FRAMING</text>
+  <rect x="388" y="146" width="304" height="70" rx="4" fill="#cc342d"/>
+  <text x="540" y="174" text-anchor="middle" class="gk price">Reserve your spot - $97</text>
+  <text x="540" y="198" text-anchor="middle" class="gk cta">refundable for 30 days</text>
+  <text x="540" y="246" text-anchor="middle" class="sys annot">reduces first-touch risk</text>
+
+  <!-- one basis line -->
+  <text x="360" y="286" text-anchor="middle" class="sys basis">Basis: one smoke-test price of $97, only the wording differs</text>
 </svg>
diff --git a/content/course/tech-for-non-technical-founders-2026/smoke-test-build-page/index.md b/content/course/tech-for-non-technical-founders-2026/smoke-test-build-page/index.md
index 4b445c5c8..305c05f82 100644
--- a/content/course/tech-for-non-technical-founders-2026/smoke-test-build-page/index.md
+++ b/content/course/tech-for-non-technical-founders-2026/smoke-test-build-page/index.md
@@ -51,7 +51,7 @@ The page has four copy blocks that decide whether it converts:
 - The **3-4 value props** describe what the visitor gets, in their words. "Stop calling 8 tutoring centers" is an outcome a parent wants; "Calendar integration" is a feature they read as noise.
 - The **CTA + footer** is "Get on the waitlist" plus a "Coming soon" line in the footer. (**CTA** = call to action, the button you want the visitor to click.) Never use "Buy now" on this page: selling something that does not exist yet *without saying so* is false advertising. [Lesson 1.5](/course/tech-for-non-technical-founders-2026/price-hypothesis-on-smoke-test-page/) adds a price test the honest way - a clearly labeled founding-member pre-order with a visible refund promise.
 
-![Smoke-test page anatomy showing 4 labeled blocks - headline names customer plus outcome, sub-headline explains the mechanism, a row of 3-4 value props, and the CTA button with coming-soon footer line](page-anatomy.svg)
+![A smoke-test page as four stacked blocks - headline names the customer plus outcome, sub-headline explains the mechanism, a row of four value props, then the ruby call-to-action button "Get on the waitlist" with a coming-soon footer](page-anatomy.svg)
 
 ## Step 1: get 2-3 real customer quotes (10 minutes)
 
diff --git a/content/course/tech-for-non-technical-founders-2026/smoke-test-build-page/page-anatomy.svg b/content/course/tech-for-non-technical-founders-2026/smoke-test-build-page/page-anatomy.svg
index b5f1a92c3..f5871f95d 100644
--- a/content/course/tech-for-non-technical-founders-2026/smoke-test-build-page/page-anatomy.svg
+++ b/content/course/tech-for-non-technical-founders-2026/smoke-test-build-page/page-anatomy.svg
@@ -1,51 +1,60 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" role="img" aria-labelledby="anatomy-title">
-  <title id="anatomy-title">Smoke-test page anatomy: 4 stacked blocks - headline names customer + outcome, sub-headline explains the mechanism, a row of 3-4 value props, and the CTA with coming-soon footer</title>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 470" role="img" aria-labelledby="anatomy-title anatomy-desc">
+  <title id="anatomy-title">A smoke-test page is four copy blocks stacked above one call-to-action.</title>
+  <desc id="anatomy-desc">A stacked page layout. The headline block names the customer and outcome in a 3-second test. The sub-headline block explains the mechanism. A row of four value-prop blocks lists outcomes the customer wants, not features. At the bottom, the call-to-action block, marked in ruby as the one click-target, reads "Get on the waitlist" with a coming-soon footer. Basis: a one-page email-capture smoke test, built before any product exists.</desc>
   <defs>
     <style>
-      .heading   { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 30px; fill: #1a1a1a; font-weight: 700; }
-      .label     { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 26px; fill: #cc342d; font-weight: 700; letter-spacing: 1px; }
-      .desc      { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 20px; fill: #1a1a1a; }
-      .note      { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 17px; fill: #555; font-style: italic; }
-      .cta-text  { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 24px; fill: #fff; font-weight: 700; }
-      .block     { fill: #fff5f5; stroke: #cc342d; stroke-width: 2.5; }
-      .block-cta { fill: #cc342d; stroke: none; }
+      .gk    { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; }
+      .sys   { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
+      .title { font-size: 34px; font-weight: 700; fill: #121212; letter-spacing: -0.4px; }
+      .msg   { font-size: 24px; font-weight: 600; fill: #4a4a4a; }
+      .label { font-size: 20px; font-weight: 600; fill: #121212; }
+      .cta   { font-size: 20px; font-weight: 700; fill: #ffffff; }
+      .annot { font-size: 18px; font-weight: 400; fill: #555555; }
+      .ctaft { font-size: 17px; font-weight: 400; fill: #ffffff; }
+      .basis { font-size: 17px; font-weight: 400; fill: #555555; }
     </style>
   </defs>
 
-  <text x="400" y="32" class="heading" text-anchor="middle">A smoke-test page, anatomy</text>
+  <!-- page tone + editorial card -->
+  <rect width="720" height="470" fill="#faf7f2"/>
+  <rect x="8" y="8" width="704" height="454" rx="6" fill="#ffffff" stroke="#ececec" stroke-width="1"/>
 
+  <!-- title block: action title + one message -->
+  <text x="360" y="46" text-anchor="middle" class="gk title">Four blocks, then one clear ask</text>
+  <text x="360" y="78" text-anchor="middle" class="gk msg">The anatomy of a page strangers can act on</text>
+
+  <!-- STRUCTURE blocks: white fill, ink outline, labels inside -->
   <!-- Headline -->
-  <rect x="60" y="58" width="680" height="80" rx="12" class="block" transform="rotate(-0.3 400 98)"/>
-  <text x="400" y="92" class="label" text-anchor="middle">HEADLINE</text>
-  <text x="400" y="122" class="desc" text-anchor="middle">names the customer + the outcome (3-sec test)</text>
+  <rect x="60" y="104" width="600" height="64" rx="4" fill="#ffffff" stroke="#3a3a3a" stroke-width="2"/>
+  <text x="360" y="132" text-anchor="middle" class="gk label">HEADLINE</text>
+  <text x="360" y="156" text-anchor="middle" class="sys annot">names the customer + the outcome (3-second test)</text>
 
   <!-- Sub-headline -->
-  <rect x="60" y="158" width="680" height="68" rx="12" class="block" transform="rotate(0.2 400 192)"/>
-  <text x="400" y="186" class="label" text-anchor="middle">SUB-HEADLINE</text>
-  <text x="400" y="212" class="desc" text-anchor="middle">explains HOW (the mechanism)</text>
+  <rect x="60" y="180" width="600" height="56" rx="4" fill="#ffffff" stroke="#3a3a3a" stroke-width="2"/>
+  <text x="360" y="205" text-anchor="middle" class="gk label">SUB-HEADLINE</text>
+  <text x="360" y="227" text-anchor="middle" class="sys annot">explains how - the mechanism</text>
 
   <!-- Value props row -->
-  <rect x="60" y="246" width="160" height="120" rx="12" class="block" transform="rotate(-0.5 140 306)"/>
-  <text x="140" y="293" class="label" text-anchor="middle">VALUE</text>
-  <text x="140" y="320" class="label" text-anchor="middle">PROP 1</text>
-
-  <rect x="234" y="246" width="160" height="120" rx="12" class="block" transform="rotate(0.4 314 306)"/>
-  <text x="314" y="293" class="label" text-anchor="middle">VALUE</text>
-  <text x="314" y="320" class="label" text-anchor="middle">PROP 2</text>
-
-  <rect x="408" y="246" width="160" height="120" rx="12" class="block" transform="rotate(-0.3 488 306)"/>
-  <text x="488" y="293" class="label" text-anchor="middle">VALUE</text>
-  <text x="488" y="320" class="label" text-anchor="middle">PROP 3</text>
-
-  <rect x="582" y="246" width="158" height="120" rx="12" class="block" transform="rotate(0.5 661 306)"/>
-  <text x="661" y="293" class="label" text-anchor="middle">VALUE</text>
-  <text x="661" y="320" class="label" text-anchor="middle">PROP 4</text>
-
-  <text x="400" y="397" class="note" text-anchor="middle">outcomes the customer wants, not features</text>
-
-  <!-- CTA + footer -->
-  <rect x="60" y="425" width="680" height="145" rx="12" class="block" transform="rotate(-0.2 400 497)"/>
-  <rect x="245" y="455" width="310" height="62" rx="31" class="block-cta" transform="rotate(0.3 400 486)"/>
-  <text x="400" y="494" class="cta-text" text-anchor="middle">Get on the waitlist</text>
-  <text x="400" y="545" class="note" text-anchor="middle">Coming soon. Email reserves your spot at launch.</text>
+  <rect x="60"  y="248" width="141" height="84" rx="4" fill="#ffffff" stroke="#3a3a3a" stroke-width="2"/>
+  <text x="130.5" y="290" text-anchor="middle" class="gk label">VALUE</text>
+  <text x="130.5" y="314" text-anchor="middle" class="gk label">PROP 1</text>
+  <rect x="213" y="248" width="141" height="84" rx="4" fill="#ffffff" stroke="#3a3a3a" stroke-width="2"/>
+  <text x="283.5" y="290" text-anchor="middle" class="gk label">VALUE</text>
+  <text x="283.5" y="314" text-anchor="middle" class="gk label">PROP 2</text>
+  <rect x="366" y="248" width="141" height="84" rx="4" fill="#ffffff" stroke="#3a3a3a" stroke-width="2"/>
+  <text x="436.5" y="290" text-anchor="middle" class="gk label">VALUE</text>
+  <text x="436.5" y="314" text-anchor="middle" class="gk label">PROP 3</text>
+  <rect x="519" y="248" width="141" height="84" rx="4" fill="#ffffff" stroke="#3a3a3a" stroke-width="2"/>
+  <text x="589.5" y="290" text-anchor="middle" class="gk label">VALUE</text>
+  <text x="589.5" y="314" text-anchor="middle" class="gk label">PROP 4</text>
+
+  <text x="360" y="354" text-anchor="middle" class="sys annot">outcomes the customer wants, not features</text>
+
+  <!-- CTA: ruby = the one actionable click-target (DATA/action mark, filled) -->
+  <rect x="60" y="368" width="600" height="66" rx="4" fill="#cc342d"/>
+  <text x="360" y="398" text-anchor="middle" class="gk cta">Get on the waitlist</text>
+  <text x="360" y="422" text-anchor="middle" class="sys ctaft">Coming soon. Email reserves your spot at launch.</text>
+
+  <!-- one basis line -->
+  <text x="360" y="456" text-anchor="middle" class="sys basis">Basis: a one-page email-capture smoke test, before any product exists</text>
 </svg>
diff --git a/content/course/tech-for-non-technical-founders-2026/smoke-test-landing-page-7-day-demand-test/index.md b/content/course/tech-for-non-technical-founders-2026/smoke-test-landing-page-7-day-demand-test/index.md
index 4edafdecb..28c99ef9b 100644
--- a/content/course/tech-for-non-technical-founders-2026/smoke-test-landing-page-7-day-demand-test/index.md
+++ b/content/course/tech-for-non-technical-founders-2026/smoke-test-landing-page-7-day-demand-test/index.md
@@ -54,7 +54,7 @@ Two routes get you 300 cold visitors: the **$0 organic path** on the [full chann
 
 You will not have to figure out the ad on your own: the launch checklist below links a [step-by-step recipe for your channel](/course/tech-for-non-technical-founders-2026/reference/smoke-test-channel-guide/#campaign-creation-recipes) (7 settings, click by click) plus a copy-paste prompt that writes the ad copy and image concept for you.
 
-![Signal meter reading the smoke-test conversion rate: 0-3% kill or pivot, 3-6% iterate the message, 6-10% promising, 10-20% strong signal, over 20% suspicious - with the 6% go line marked](smoke-test-signal.svg)
+![A signal meter mapping cold-traffic conversion to a decision: 0-3% kill or pivot, 3-6% iterate the message, 6-10% promising, 10-20% strong signal, over 20% suspicious - with the 6% go line marked in ruby as the point where demand is real enough to start building](smoke-test-signal.svg)
 
 ## Launch and read the signal
 
diff --git a/content/course/tech-for-non-technical-founders-2026/smoke-test-landing-page-7-day-demand-test/smoke-test-signal.svg b/content/course/tech-for-non-technical-founders-2026/smoke-test-landing-page-7-day-demand-test/smoke-test-signal.svg
index 53ab5fff9..efaebcbfb 100644
--- a/content/course/tech-for-non-technical-founders-2026/smoke-test-landing-page-7-day-demand-test/smoke-test-signal.svg
+++ b/content/course/tech-for-non-technical-founders-2026/smoke-test-landing-page-7-day-demand-test/smoke-test-signal.svg
@@ -1,70 +1,75 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 380" role="img" aria-labelledby="smoke2-title">
-  <title id="smoke2-title">Smoke-test signal meter: read your cold-traffic conversion rate against the kill / iterate / promising / strong / suspicious bands.</title>
-  <desc>A horizontal meter from 0 to over 20 percent conversion. Under 3 percent is Kill or pivot (red). 3 to 6 percent is Iterate the message (amber). 6 to 10 percent is Promising (green). 10 to 20 percent is Strong signal (deep green). Over 20 percent is Suspicious - verify with a second channel (gray). A pointer marks the 6 percent line where the demand is real enough to start building.</desc>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 300" role="img" aria-labelledby="signal-title signal-desc">
+  <title id="signal-title">At 6% signups the demand is real: read your cold-traffic conversion rate against the kill, iterate, promising, strong and suspicious bands.</title>
+  <desc id="signal-desc">A horizontal signal meter. Under 3 percent conversion is kill or pivot (ruby). 3 to 6 percent is iterate the message (amber). 6 to 10 percent is promising (green). 10 to 20 percent is a strong signal (deep green). Over 20 percent is suspicious, verify with a second channel (gray). A ruby pointer marks the 6 percent go line where demand is real enough to start building. Basis: form submits divided by page views after 300 cold visitors on one channel.</desc>
   <defs>
     <style>
-      .h      { font-family: "Patrick Hand", "Caveat", "Comic Sans MS", cursive; }
-      .title  { font-size: 27px; font-weight: bold; fill: #1a1a1a; }
-      .sub    { font-size: 15px; fill: #666; font-style: italic; }
-      .band-pct { font-size: 20px; font-weight: bold; fill: #fff; }
-      .band-verd{ font-size: 16px; font-weight: bold; fill: #fff; }
-      .tick   { font-size: 15px; fill: #555; }
-      .ptr    { font-size: 17px; font-weight: bold; fill: #1a1a1a; }
-      .rule   { font-size: 19px; font-weight: bold; fill: #1a1a1a; }
+      .gk   { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; }
+      .sys  { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
+      .title { font-size: 34px; font-weight: 700; fill: #121212; letter-spacing: -0.4px; }
+      .msg   { font-size: 24px; font-weight: 600; fill: #4a4a4a; }
+      .label { font-size: 20px; font-weight: 600; fill: #ffffff; }
+      .annot { font-size: 18px; font-weight: 400; fill: #ffffff; }
+      .tick  { font-size: 20px; font-weight: 600; fill: #3a3a3a; }
+      .basis { font-size: 17px; font-weight: 400; fill: #555555; }
+      .ptr   { font-size: 20px; font-weight: 700; fill: #cc342d; }
+      .ptrsub{ font-size: 18px; font-weight: 400; fill: #444444; }
     </style>
+    <clipPath id="signal-bar"><rect x="56" y="150" width="608" height="64" rx="4"/></clipPath>
   </defs>
 
-  <rect width="960" height="380" fill="#ffffff"/>
+  <!-- page tone + editorial card -->
+  <rect width="720" height="300" fill="#faf7f2"/>
+  <rect x="8" y="8" width="704" height="284" rx="6" fill="#ffffff" stroke="#ececec" stroke-width="1"/>
 
-  <text x="480" y="40" text-anchor="middle" class="h title">Read your conversion rate off the meter</text>
-  <text x="480" y="64" text-anchor="middle" class="h sub">form submits ÷ page views, after 300 cold visitors</text>
+  <!-- title block: action title + one message -->
+  <text x="360" y="46" text-anchor="middle" class="gk title">Your signup rate picks your move</text>
+  <text x="360" y="78" text-anchor="middle" class="gk msg">Cold-traffic conversion, mapped to a decision</text>
 
-  <!-- ================= POINTER at 6% (x=276) ================= -->
-  <g class="h">
-    <text x="276" y="120" text-anchor="middle" class="ptr">6% = the go line</text>
-    <text x="276" y="140" text-anchor="middle" class="ptr" font-weight="normal" font-size="14" fill="#555">demand is real - start building</text>
-    <path d="M276,148 C270,158 270,160 276,172 C282,160 282,158 276,148 Z" fill="#1a1a1a"/>
-    <line x1="276" y1="150" x2="276" y2="185" stroke="#1a1a1a" stroke-width="2.5"/>
+  <!-- hero reading: the 6% go line (ruby = the one actionable reading) -->
+  <g>
+    <text x="248" y="110" text-anchor="middle" class="gk ptr">6% = the go line</text>
+    <text x="248" y="130" text-anchor="middle" class="sys ptrsub">demand is real, start building</text>
+    <path d="M242,134 L254,134 L248,144 Z" fill="#cc342d"/>
   </g>
 
-  <!-- ================= METER BAR (y 185..278) ================= -->
-  <!-- Kill 0-3% : x60 w108 -->
-  <rect x="60"  y="185" width="108" height="93" fill="#cc342d"/>
-  <text x="114" y="228" text-anchor="middle" class="h band-pct">0-3%</text>
-  <text x="114" y="252" text-anchor="middle" class="h band-verd">Kill / pivot</text>
-
-  <!-- Iterate 3-6% : x168 w108 -->
-  <rect x="168" y="185" width="108" height="93" fill="#d98c1f"/>
-  <text x="222" y="228" text-anchor="middle" class="h band-pct">3-6%</text>
-  <text x="222" y="252" text-anchor="middle" class="h band-verd">Iterate msg</text>
-
-  <!-- Promising 6-10% : x276 w144 -->
-  <rect x="276" y="185" width="144" height="93" fill="#4caf50"/>
-  <text x="348" y="228" text-anchor="middle" class="h band-pct">6-10%</text>
-  <text x="348" y="252" text-anchor="middle" class="h band-verd">Promising</text>
-
-  <!-- Strong 10-20% : x420 w360 -->
-  <rect x="420" y="185" width="360" height="93" fill="#2e7d32"/>
-  <text x="600" y="228" text-anchor="middle" class="h band-pct">10-20%</text>
-  <text x="600" y="252" text-anchor="middle" class="h band-verd">Strong signal</text>
+  <!-- meter track: DATA bands filled, no stroke, 4px outer radius via clip -->
+  <g clip-path="url(#signal-bar)">
+    <rect x="56"  y="150" width="96"  height="64" fill="#cc342d"/>
+    <rect x="152" y="150" width="96"  height="64" fill="#c47d16"/>
+    <rect x="248" y="150" width="128" height="64" fill="#3d9142"/>
+    <rect x="376" y="150" width="176" height="64" fill="#2e7d32"/>
+    <rect x="552" y="150" width="112" height="64" fill="#7d7d7d"/>
+  </g>
 
-  <!-- Suspicious 20%+ : x780 w120 -->
-  <rect x="780" y="185" width="120" height="93" fill="#8a8a8a"/>
-  <text x="840" y="228" text-anchor="middle" class="h band-pct">20%+</text>
-  <text x="840" y="252" text-anchor="middle" class="h band-verd">Suspicious?</text>
+  <!-- band labels: pct (label rung) + verdict (annotation rung), inside shape -->
+  <text x="104" y="180" text-anchor="middle" class="gk label">0-3%</text>
+  <text x="104" y="200" text-anchor="middle" class="sys annot">Kill / pivot</text>
+  <text x="200" y="180" text-anchor="middle" class="gk label">3-6%</text>
+  <text x="200" y="200" text-anchor="middle" class="sys annot">Iterate msg</text>
+  <text x="312" y="180" text-anchor="middle" class="gk label">6-10%</text>
+  <text x="312" y="200" text-anchor="middle" class="sys annot">Promising</text>
+  <text x="464" y="180" text-anchor="middle" class="gk label">10-20%</text>
+  <text x="464" y="200" text-anchor="middle" class="sys annot">Strong signal</text>
+  <text x="608" y="180" text-anchor="middle" class="gk label">20%+</text>
+  <text x="608" y="200" text-anchor="middle" class="sys annot">Suspicious?</text>
 
-  <!-- band divider ticks / boundary marks -->
-  <g class="h">
-    <text x="60"  y="302" text-anchor="middle" class="tick">0%</text>
-    <text x="168" y="302" text-anchor="middle" class="tick">3%</text>
-    <text x="276" y="302" text-anchor="middle" class="tick" fill="#1a1a1a" font-weight="bold">6%</text>
-    <text x="420" y="302" text-anchor="middle" class="tick">10%</text>
-    <text x="780" y="302" text-anchor="middle" class="tick">20%</text>
+  <!-- STRUCTURE: axis baseline + ticks, stroked ink, no fill -->
+  <line x1="56" y1="216" x2="664" y2="216" stroke="#3a3a3a" stroke-width="2"/>
+  <g stroke="#3a3a3a" stroke-width="2">
+    <line x1="56"  y1="216" x2="56"  y2="224"/>
+    <line x1="152" y1="216" x2="152" y2="224"/>
+    <line x1="376" y1="216" x2="376" y2="224"/>
+    <line x1="552" y1="216" x2="552" y2="224"/>
   </g>
+  <text x="56"  y="242" text-anchor="middle" class="gk tick">0%</text>
+  <text x="152" y="242" text-anchor="middle" class="gk tick">3%</text>
+  <text x="376" y="242" text-anchor="middle" class="gk tick">10%</text>
+  <text x="552" y="242" text-anchor="middle" class="gk tick">20%</text>
 
-  <!-- 6% boundary emphasis line through the bar -->
-  <line x1="276" y1="181" x2="276" y2="282" stroke="#1a1a1a" stroke-width="3"/>
+  <!-- the 6% go-line threshold: ruby, the hero action marker (structure, stroked) -->
+  <line x1="248" y1="146" x2="248" y2="228" stroke="#cc342d" stroke-width="2.5"/>
+  <text x="248" y="242" text-anchor="middle" class="gk tick" fill="#cc342d" font-weight="700">6%</text>
 
-  <!-- ================= CURSIVE RULE ================= -->
-  <text x="480" y="344" text-anchor="middle" class="h rule">A stranger's signup is a real vote. A friend's "sounds great" is not.</text>
+  <!-- one basis line -->
+  <text x="360" y="278" text-anchor="middle" class="sys basis">Basis: form submits &#247; page views, 300 cold visitors, one channel</text>
 </svg>
diff --git a/content/course/tech-for-non-technical-founders-2026/smoke-test-wire-tracking/index.md b/content/course/tech-for-non-technical-founders-2026/smoke-test-wire-tracking/index.md
index 65db9b29d..cc91cef9d 100644
--- a/content/course/tech-for-non-technical-founders-2026/smoke-test-wire-tracking/index.md
+++ b/content/course/tech-for-non-technical-founders-2026/smoke-test-wire-tracking/index.md
@@ -63,7 +63,7 @@ The 3 numbers you will read in Lesson 1.4:
 
 Conversion rate = form submits ÷ page views. That is the number your hypothesis is judged against.
 
-![Three tracking snippets stacked vertically: Microsoft Clarity (heatmap icon), ad-platform pixel (target icon), GA4 (chart icon), with arrows pointing to a landing page wireframe showing where each snippet fires (page view, CTA click, form submit)](tracking-snippets.svg)
+![Three tracking snippets - Microsoft Clarity, an ad-platform pixel, and Google Analytics 4 - feeding into a landing page's head tag, which then emits three events shown in monospace where they fire: page_view at the headline, cta_click at the waitlist button, form_submit at the email field](tracking-snippets.svg)
 
 ## Install the tracking
 
diff --git a/content/course/tech-for-non-technical-founders-2026/smoke-test-wire-tracking/tracking-snippets.svg b/content/course/tech-for-non-technical-founders-2026/smoke-test-wire-tracking/tracking-snippets.svg
index ebb60b140..0784c3f54 100644
--- a/content/course/tech-for-non-technical-founders-2026/smoke-test-wire-tracking/tracking-snippets.svg
+++ b/content/course/tech-for-non-technical-founders-2026/smoke-test-wire-tracking/tracking-snippets.svg
@@ -1,75 +1,79 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 500" role="img" aria-labelledby="tracking-title">
-  <title id="tracking-title">Three tracking snippets stacked on the left side - Microsoft Clarity, Ad-platform pixel, Google Analytics 4 - with arrows pointing to a landing page wireframe on the right showing page_view, cta_click, and form_submit events firing</title>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 405" role="img" aria-labelledby="tracking-title tracking-desc">
+  <title id="tracking-title">Three snippets pasted into the head tag let you read three events off the page.</title>
+  <desc id="tracking-desc">Three tool boxes on the left - Microsoft Clarity, an ad-platform pixel, and Google Analytics 4 - route into the head tag of a landing-page wireframe on the right. The page then emits three events, shown as monospace tokens where they fire: page_view at the headline, cta_click at the ruby waitlist button, and form_submit at the email field. Basis: three tracking snippets pasted once into the page's head tag.</desc>
   <defs>
     <style>
-      .heading   { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 28px; fill: #1a1a1a; font-weight: 700; }
-      .label     { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 22px; fill: #cc342d; font-weight: 700; }
-      .sub       { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 16px; fill: #555; font-style: italic; }
-      .event     { font-family: "JetBrains Mono", "Courier New", monospace; font-size: 16px; fill: #1a1a1a; }
-      .wf-text   { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 18px; fill: #1a1a1a; }
-      .cta-text  { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; font-size: 18px; fill: #fff; font-weight: 700; }
-      .clarity   { fill: #fbe9ff; stroke: #a855f7; stroke-width: 2.5; }
-      .pixel     { fill: #fff5f5; stroke: #cc342d; stroke-width: 2.5; }
-      .ga4       { fill: #fff8e0; stroke: #b8860b; stroke-width: 2.5; }
-      .wireframe { fill: #fafafa; stroke: #1a1a1a; stroke-width: 2.5; }
-      .ph-block  { fill: #e8e8e8; stroke: none; }
-      .ph-cta    { fill: #cc342d; stroke: none; }
-      .arrow     { stroke: #1a1a1a; stroke-width: 2; fill: none; stroke-dasharray: 6 4; }
+      .gk    { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; }
+      .sys   { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
+      .mono  { font-family: "JetBrains Mono", "Courier New", monospace; font-size: 17px; fill: #121212; }
+      .title { font-size: 30px; font-weight: 700; fill: #121212; letter-spacing: -0.4px; }
+      .msg   { font-size: 22px; font-weight: 600; fill: #4a4a4a; }
+      .label { font-size: 20px; font-weight: 600; fill: #121212; }
+      .annot { font-size: 18px; font-weight: 400; fill: #555555; }
+      .cta   { font-size: 17px; font-weight: 700; fill: #ffffff; }
+      .basis { font-size: 17px; font-weight: 400; fill: #555555; }
     </style>
-    <marker id="arrowhead" viewBox="0 0 12 12" refX="10" refY="6" markerWidth="9" markerHeight="9" orient="auto">
-      <path d="M0,0 L12,6 L0,12 z" fill="#1a1a1a"/>
+    <marker id="tri" viewBox="0 0 9 7" refX="8" refY="3.5" markerWidth="9" markerHeight="7" orient="auto">
+      <path d="M0,0 L9,3.5 L0,7 z" fill="#3a3a3a"/>
     </marker>
   </defs>
 
-  <text x="450" y="36" class="heading" text-anchor="middle">3 snippets in the head tag = 3 events you can read</text>
+  <!-- page tone + editorial card -->
+  <rect width="720" height="405" fill="#faf7f2"/>
+  <rect x="8" y="8" width="704" height="389" rx="6" fill="#ffffff" stroke="#ececec" stroke-width="1"/>
 
-  <!-- Left column: 3 snippet boxes -->
-  <rect x="50" y="80" width="260" height="90" rx="12" class="clarity" transform="rotate(-0.4 180 125)"/>
-  <text x="180" y="115" class="label" text-anchor="middle">Microsoft Clarity</text>
-  <text x="180" y="145" class="sub" text-anchor="middle">heatmaps + session replays</text>
+  <!-- title block: action title + one message -->
+  <text x="360" y="44" text-anchor="middle" class="gk title">Three snippets, three readable events</text>
+  <text x="360" y="74" text-anchor="middle" class="gk msg">One head-tag paste turns visits into numbers</text>
 
-  <rect x="50" y="200" width="260" height="90" rx="12" class="pixel" transform="rotate(0.3 180 245)"/>
-  <text x="180" y="235" class="label" text-anchor="middle">Ad-platform pixel</text>
-  <text x="180" y="265" class="sub" text-anchor="middle">Meta · LinkedIn · Reddit</text>
+  <!-- Left: three tool boxes (neutral structure, labels inside) -->
+  <rect x="40" y="112" width="250" height="72" rx="4" fill="#ffffff" stroke="#3a3a3a" stroke-width="2"/>
+  <text x="165" y="145" text-anchor="middle" class="gk label">Microsoft Clarity</text>
+  <text x="165" y="168" text-anchor="middle" class="sys annot">session replays + heatmaps</text>
 
-  <rect x="50" y="320" width="260" height="90" rx="12" class="ga4" transform="rotate(-0.3 180 365)"/>
-  <text x="180" y="355" class="label" text-anchor="middle">Google Analytics 4</text>
-  <text x="180" y="385" class="sub" text-anchor="middle">page views · clicks · form submits</text>
+  <rect x="40" y="196" width="250" height="72" rx="4" fill="#ffffff" stroke="#3a3a3a" stroke-width="2"/>
+  <text x="165" y="229" text-anchor="middle" class="gk label">Ad-platform pixel</text>
+  <text x="165" y="252" text-anchor="middle" class="sys annot">Meta / LinkedIn / Reddit</text>
 
-  <!-- Arrows from boxes to landing page -->
-  <path d="M 318 125 Q 420 125 525 145" class="arrow" marker-end="url(#arrowhead)"/>
-  <path d="M 318 245 Q 420 245 525 245" class="arrow" marker-end="url(#arrowhead)"/>
-  <path d="M 318 365 Q 420 365 525 345" class="arrow" marker-end="url(#arrowhead)"/>
+  <rect x="40" y="280" width="250" height="72" rx="4" fill="#ffffff" stroke="#3a3a3a" stroke-width="2"/>
+  <text x="165" y="313" text-anchor="middle" class="gk label">Google Analytics 4</text>
+  <text x="165" y="336" text-anchor="middle" class="sys annot">views, clicks, form submits</text>
 
-  <!-- Right: landing page wireframe -->
-  <rect x="540" y="80" width="320" height="380" rx="14" class="wireframe" transform="rotate(0.2 700 270)"/>
+  <!-- orthogonal collector rail: three snippets converge into the head tag -->
+  <g stroke="#3a3a3a" stroke-width="2" fill="none">
+    <line x1="290" y1="148" x2="430" y2="148"/>
+    <line x1="290" y1="232" x2="430" y2="232"/>
+    <line x1="290" y1="316" x2="430" y2="316"/>
+    <line x1="430" y1="316" x2="430" y2="123"/>
+    <line x1="430" y1="123" x2="462" y2="123" marker-end="url(#tri)"/>
+  </g>
 
-  <!-- Headline placeholder -->
-  <rect x="565" y="105" width="270" height="36" rx="4" class="ph-cta"/>
-  <text x="700" y="129" class="cta-text" text-anchor="middle">Headline</text>
+  <!-- Right: landing-page wireframe -->
+  <rect x="470" y="104" width="210" height="280" rx="6" fill="#fcfcfc" stroke="#3a3a3a" stroke-width="2"/>
 
-  <!-- page_view marker -->
-  <text x="700" y="165" class="event" text-anchor="middle">→ page_view</text>
+  <!-- head tag = paste target -->
+  <rect x="486" y="112" width="178" height="24" rx="4" fill="#ffffff" stroke="#3a3a3a" stroke-width="1.5"/>
+  <text x="575" y="129" text-anchor="middle" class="mono">&lt;head&gt; tag</text>
 
-  <!-- Sub-headline placeholder -->
-  <rect x="565" y="180" width="270" height="22" rx="4" class="ph-block"/>
+  <!-- headline + page_view -->
+  <rect x="486" y="148" width="178" height="22" rx="3" fill="#e8e8e8"/>
+  <text x="575" y="192" text-anchor="middle" class="mono">&#8250; page_view</text>
 
-  <!-- Value props row -->
-  <rect x="565" y="215" width="60" height="50" rx="4" class="ph-block"/>
-  <rect x="635" y="215" width="60" height="50" rx="4" class="ph-block"/>
-  <rect x="705" y="215" width="60" height="50" rx="4" class="ph-block"/>
-  <rect x="775" y="215" width="60" height="50" rx="4" class="ph-block"/>
+  <!-- value props -->
+  <rect x="486" y="206" width="38" height="28" rx="3" fill="#e8e8e8"/>
+  <rect x="533" y="206" width="38" height="28" rx="3" fill="#e8e8e8"/>
+  <rect x="580" y="206" width="38" height="28" rx="3" fill="#e8e8e8"/>
+  <rect x="627" y="206" width="37" height="28" rx="3" fill="#e8e8e8"/>
 
-  <!-- CTA button -->
-  <rect x="615" y="290" width="170" height="44" rx="22" class="ph-cta"/>
-  <text x="700" y="319" class="cta-text" text-anchor="middle">Get on the waitlist</text>
+  <!-- CTA: ruby action, then cta_click -->
+  <rect x="506" y="248" width="138" height="34" rx="4" fill="#cc342d"/>
+  <text x="575" y="270" text-anchor="middle" class="gk cta">Join waitlist</text>
+  <text x="575" y="304" text-anchor="middle" class="mono">&#8250; cta_click</text>
 
-  <!-- cta_click marker -->
-  <text x="700" y="358" class="event" text-anchor="middle">→ cta_click</text>
+  <!-- email field + form_submit -->
+  <rect x="506" y="316" width="138" height="24" rx="3" fill="#e8e8e8"/>
+  <text x="575" y="366" text-anchor="middle" class="mono">&#8250; form_submit</text>
 
-  <!-- email field placeholder -->
-  <rect x="615" y="375" width="170" height="32" rx="4" class="ph-block"/>
-
-  <!-- form_submit marker -->
-  <text x="700" y="436" class="event" text-anchor="middle">→ form_submit</text>
+  <!-- one basis line -->
+  <text x="360" y="388" text-anchor="middle" class="sys basis">Basis: three tracking snippets pasted once into the page's head tag</text>
 </svg>
diff --git a/docs/projects/2605-tech-for-non-technical-founders/30-39-architecture-design/30.09-adr-visual-system-v3-premium-editorial.md b/docs/projects/2605-tech-for-non-technical-founders/30-39-architecture-design/30.09-adr-visual-system-v3-premium-editorial.md
index 32707d6ff..0a0dc1b99 100644
--- a/docs/projects/2605-tech-for-non-technical-founders/30-39-architecture-design/30.09-adr-visual-system-v3-premium-editorial.md
+++ b/docs/projects/2605-tech-for-non-technical-founders/30-39-architecture-design/30.09-adr-visual-system-v3-premium-editorial.md
@@ -186,3 +186,34 @@ ACCEPT-WITH-CHANGES - every required change incorporated above):**
   shared blog CSS protected; alt-rewrite = body edit = full gate ->
   checkbox added; honest 2-3 sprint estimate; template change scheduled
   outside the Aug 1-14 campaign window.
+
+---
+
+## STYLE-CALL GATE (W3, 2026-08-01) — PENDING PAUL'S DECISION
+
+The A/B exemplar is produced (lesson 1.4 signal exhibit rendered both ways,
+same message, only style differs): `40-49-review/40.30-exemplar-1.4-O1.svg`
+(hand-drawn-normalized) vs `40.30-exemplar-1.4-O2.svg` (flat-vector),
+side-by-side `40.30-exemplar-ab-sidebyside.png`, scored in
+`40.30-exemplar-ab-comparison.md`.
+
+**Both pass the ≥9px@390px legibility floor** (O1 10.83px, O2 9.21px,
+measured in-browser with real webfonts) — neither is invalid; the choice is
+pure taste + strategy. Rubric (no winner declared): O2 wins perceived craft
+(3→5) and cross-SVG consistency (3→5) — the two things Paul's original
+"old-time / lacks infographic quality" note named; O1 wins brand-continuity
+with the existing handwritten house rule (5→2) and cost-to-adopt (5→2).
+Sam-trust is a true wash (3/3, amateur-risk vs generic-startup-risk).
+
+**Context that raises the stakes (Sprint-Y audit 40.31):** 4 of 5 current M1
+SVGs FAIL the mobile floor today (the archetype signal SVG worst, 5.7-8.1px)
+— so T5 fixes a live readability defect regardless of which style wins.
+
+**DECISION (Paul 2026-08-01): O2 flat-vector.** All M1 exhibits adopt the
+flat-vector style (Space Grotesk titles / JetBrains Mono labels / white card /
+geometric, 4px radius, basis 17px). Rationale: O2 directly answers Paul's
+original "old-time / lacks infographic quality" note, scales consistently
+across all 81 SVGs, and the handwritten house rule it breaks was already
+flagged for re-test by the ADR reviewers. T5 UNBLOCKED: redesign 1.1/1.2/1.3/
+1.5 + finalize 1.4 into the lesson, all O2, honoring the Sprint-Y keep-as-is
+list (40.31). The 4-of-5 mobile-floor failures get fixed in the same pass.
diff --git a/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.30-exemplar-1.4-O1.svg b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.30-exemplar-1.4-O1.svg
new file mode 100644
index 000000000..82fc4aca7
--- /dev/null
+++ b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.30-exemplar-1.4-O1.svg
@@ -0,0 +1,83 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 300" role="img" aria-labelledby="o1-title o1-desc">
+  <title id="o1-title">At 6% signups the demand is real: read your cold-traffic conversion rate against the kill, iterate, promising, strong and suspicious bands.</title>
+  <desc id="o1-desc">A hand-drawn horizontal signal meter. Under 3 percent conversion is kill or pivot (ruby). 3 to 6 percent is iterate the message (amber). 6 to 10 percent is promising (green). 10 to 20 percent is a strong signal (deep green). Over 20 percent is suspicious, verify with a second channel (gray). A ruby pointer marks the 6 percent go line where demand is real enough to start building. Basis: form submits divided by ad-campaign visits after 300 cold visitors on one channel.</desc>
+  <defs>
+    <style>
+      .h     { font-family: "Caveat", "Patrick Hand", "Comic Sans MS", cursive; }
+      .title { font-size: 34px; font-weight: 700; fill: #1a1a1a; }
+      .msg   { font-size: 24px; font-weight: 700; fill: #555555; font-style: italic; }
+      .label { font-size: 22px; font-weight: 700; fill: #ffffff; }
+      .annot { font-size: 22px; font-weight: 700; fill: #ffffff; }
+      .tick  { font-size: 22px; font-weight: 700; fill: #333333; }
+      .basis { font-size: 20px; font-weight: 700; fill: #555555; }
+      .ptr   { font-size: 22px; font-weight: 700; fill: #cc342d; }
+      .ptrsub{ font-size: 22px; font-weight: 700; fill: #555555; }
+    </style>
+    <filter id="o1-rough" x="-2%" y="-2%" width="104%" height="104%">
+      <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" seed="7" result="n"/>
+      <feDisplacementMap in="SourceGraphic" in2="n" scale="2.2" xChannelSelector="R" yChannelSelector="G"/>
+    </filter>
+    <clipPath id="o1-bar"><rect x="56" y="150" width="608" height="64" rx="3"/></clipPath>
+  </defs>
+
+  <!-- warm paper -->
+  <rect width="720" height="300" fill="#faf7f2"/>
+
+  <!-- title block: action title + one message -->
+  <text x="360" y="46" text-anchor="middle" class="h title">Your signup rate picks your move</text>
+  <text x="360" y="78" text-anchor="middle" class="h msg">Cold-traffic conversion, mapped to a decision</text>
+
+  <!-- hero reading: the 6% go line (ruby = the one actionable reading) -->
+  <g class="h">
+    <text x="248" y="110" text-anchor="middle" class="ptr">6% = the go line</text>
+    <text x="248" y="130" text-anchor="middle" class="ptrsub">demand is real, start building</text>
+    <path d="M240,133 C245,140 251,140 256,133" fill="none" stroke="#cc342d" stroke-width="2.5" stroke-linecap="round"/>
+  </g>
+
+  <!-- meter track: DATA bands filled, no stroke, hand-drawn edges -->
+  <g clip-path="url(#o1-bar)" filter="url(#o1-rough)">
+    <rect x="56"  y="150" width="96"  height="64" fill="#cc342d"/>
+    <rect x="152" y="150" width="96"  height="64" fill="#c47d16"/>
+    <rect x="248" y="150" width="128" height="64" fill="#3d9142"/>
+    <rect x="376" y="150" width="176" height="64" fill="#2e7d32"/>
+    <rect x="552" y="150" width="112" height="64" fill="#7d7d7d"/>
+  </g>
+
+  <!-- band labels: pct (label rung) + verdict (annotation rung), inside shape -->
+  <g class="h">
+    <text x="104" y="181" text-anchor="middle" class="label">0-3%</text>
+    <text x="104" y="202" text-anchor="middle" class="annot">Kill / pivot</text>
+    <text x="200" y="181" text-anchor="middle" class="label">3-6%</text>
+    <text x="200" y="202" text-anchor="middle" class="annot">Iterate msg</text>
+    <text x="312" y="181" text-anchor="middle" class="label">6-10%</text>
+    <text x="312" y="202" text-anchor="middle" class="annot">Promising</text>
+    <text x="464" y="181" text-anchor="middle" class="label">10-20%</text>
+    <text x="464" y="202" text-anchor="middle" class="annot">Strong signal</text>
+    <text x="608" y="181" text-anchor="middle" class="label">20%+</text>
+    <text x="608" y="202" text-anchor="middle" class="annot">Suspicious?</text>
+  </g>
+
+  <!-- STRUCTURE: hand-drawn axis baseline + ticks -->
+  <g filter="url(#o1-rough)">
+    <line x1="56" y1="216" x2="664" y2="216" stroke="#333333" stroke-width="2.5" stroke-linecap="round"/>
+    <g stroke="#333333" stroke-width="2.5" stroke-linecap="round">
+      <line x1="56"  y1="216" x2="56"  y2="224"/>
+      <line x1="152" y1="216" x2="152" y2="224"/>
+      <line x1="376" y1="216" x2="376" y2="224"/>
+      <line x1="552" y1="216" x2="552" y2="224"/>
+    </g>
+  </g>
+  <g class="h">
+    <text x="56"  y="243" text-anchor="middle" class="tick">0%</text>
+    <text x="152" y="243" text-anchor="middle" class="tick">3%</text>
+    <text x="376" y="243" text-anchor="middle" class="tick">10%</text>
+    <text x="552" y="243" text-anchor="middle" class="tick">20%</text>
+  </g>
+
+  <!-- the 6% go-line threshold: ruby, the hero action marker -->
+  <line x1="248" y1="146" x2="248" y2="228" stroke="#cc342d" stroke-width="2.5" stroke-linecap="round" filter="url(#o1-rough)"/>
+  <text x="248" y="243" text-anchor="middle" class="h tick" fill="#cc342d">6%</text>
+
+  <!-- one basis line -->
+  <text x="360" y="278" text-anchor="middle" class="h basis">Basis: form submits &#247; ad-campaign visits, 300 cold visitors, one channel</text>
+</svg>
diff --git a/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.30-exemplar-1.4-O2.svg b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.30-exemplar-1.4-O2.svg
new file mode 100644
index 000000000..859b24745
--- /dev/null
+++ b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.30-exemplar-1.4-O2.svg
@@ -0,0 +1,75 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 300" role="img" aria-labelledby="o2-title o2-desc">
+  <title id="o2-title">At 6% signups the demand is real: read your cold-traffic conversion rate against the kill, iterate, promising, strong and suspicious bands.</title>
+  <desc id="o2-desc">A horizontal signal meter. Under 3 percent conversion is kill or pivot (ruby). 3 to 6 percent is iterate the message (amber). 6 to 10 percent is promising (green). 10 to 20 percent is a strong signal (deep green). Over 20 percent is suspicious, verify with a second channel (gray). A ruby pointer marks the 6 percent go line where demand is real enough to start building. Basis: form submits divided by ad-campaign visits after 300 cold visitors on one channel.</desc>
+  <defs>
+    <style>
+      .gk   { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; }
+      .sys  { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
+      .title { font-size: 34px; font-weight: 700; fill: #121212; letter-spacing: -0.4px; }
+      .msg   { font-size: 24px; font-weight: 600; fill: #4a4a4a; }
+      .label { font-size: 20px; font-weight: 600; fill: #ffffff; }
+      .annot { font-size: 18px; font-weight: 400; fill: #ffffff; }
+      .tick  { font-size: 20px; font-weight: 600; fill: #3a3a3a; }
+      .basis { font-size: 17px; font-weight: 400; fill: #555555; }
+      .ptr   { font-size: 20px; font-weight: 700; fill: #cc342d; }
+      .ptrsub{ font-size: 18px; font-weight: 400; fill: #444444; }
+    </style>
+    <clipPath id="o2-bar"><rect x="56" y="150" width="608" height="64" rx="4"/></clipPath>
+  </defs>
+
+  <!-- page tone + editorial card -->
+  <rect width="720" height="300" fill="#faf7f2"/>
+  <rect x="8" y="8" width="704" height="284" rx="6" fill="#ffffff" stroke="#ececec" stroke-width="1"/>
+
+  <!-- title block: action title + one message -->
+  <text x="360" y="46" text-anchor="middle" class="gk title">Your signup rate picks your move</text>
+  <text x="360" y="78" text-anchor="middle" class="gk msg">Cold-traffic conversion, mapped to a decision</text>
+
+  <!-- hero reading: the 6% go line (ruby = the one actionable reading) -->
+  <g>
+    <text x="248" y="110" text-anchor="middle" class="gk ptr">6% = the go line</text>
+    <text x="248" y="130" text-anchor="middle" class="sys ptrsub">demand is real, start building</text>
+    <path d="M242,134 L254,134 L248,144 Z" fill="#cc342d"/>
+  </g>
+
+  <!-- meter track: DATA bands filled, no stroke, 4px outer radius via clip -->
+  <g clip-path="url(#o2-bar)">
+    <rect x="56"  y="150" width="96"  height="64" fill="#cc342d"/>
+    <rect x="152" y="150" width="96"  height="64" fill="#c47d16"/>
+    <rect x="248" y="150" width="128" height="64" fill="#3d9142"/>
+    <rect x="376" y="150" width="176" height="64" fill="#2e7d32"/>
+    <rect x="552" y="150" width="112" height="64" fill="#7d7d7d"/>
+  </g>
+
+  <!-- band labels: pct (label rung) + verdict (annotation rung), inside shape -->
+  <text x="104" y="180" text-anchor="middle" class="gk label">0-3%</text>
+  <text x="104" y="200" text-anchor="middle" class="sys annot">Kill / pivot</text>
+  <text x="200" y="180" text-anchor="middle" class="gk label">3-6%</text>
+  <text x="200" y="200" text-anchor="middle" class="sys annot">Iterate msg</text>
+  <text x="312" y="180" text-anchor="middle" class="gk label">6-10%</text>
+  <text x="312" y="200" text-anchor="middle" class="sys annot">Promising</text>
+  <text x="464" y="180" text-anchor="middle" class="gk label">10-20%</text>
+  <text x="464" y="200" text-anchor="middle" class="sys annot">Strong signal</text>
+  <text x="608" y="180" text-anchor="middle" class="gk label">20%+</text>
+  <text x="608" y="200" text-anchor="middle" class="sys annot">Suspicious?</text>
+
+  <!-- STRUCTURE: axis baseline + ticks, stroked ink, no fill -->
+  <line x1="56" y1="216" x2="664" y2="216" stroke="#3a3a3a" stroke-width="2"/>
+  <g stroke="#3a3a3a" stroke-width="2">
+    <line x1="56"  y1="216" x2="56"  y2="224"/>
+    <line x1="152" y1="216" x2="152" y2="224"/>
+    <line x1="376" y1="216" x2="376" y2="224"/>
+    <line x1="552" y1="216" x2="552" y2="224"/>
+  </g>
+  <text x="56"  y="242" text-anchor="middle" class="gk tick">0%</text>
+  <text x="152" y="242" text-anchor="middle" class="gk tick">3%</text>
+  <text x="376" y="242" text-anchor="middle" class="gk tick">10%</text>
+  <text x="552" y="242" text-anchor="middle" class="gk tick">20%</text>
+
+  <!-- the 6% go-line threshold: ruby, the hero action marker (structure, stroked) -->
+  <line x1="248" y1="146" x2="248" y2="228" stroke="#cc342d" stroke-width="2.5"/>
+  <text x="248" y="242" text-anchor="middle" class="gk tick" fill="#cc342d" font-weight="700">6%</text>
+
+  <!-- one basis line -->
+  <text x="360" y="278" text-anchor="middle" class="sys basis">Basis: form submits &#247; ad-campaign visits, 300 cold visitors, one channel</text>
+</svg>
diff --git a/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.30-exemplar-ab-comparison.md b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.30-exemplar-ab-comparison.md
new file mode 100644
index 000000000..419d48e50
--- /dev/null
+++ b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.30-exemplar-ab-comparison.md
@@ -0,0 +1,133 @@
+# 40.30 - Exemplar A/B: lesson 1.4 signal exhibit, O1 vs O2
+
+**Purpose:** the style gate for ADR 30.09 Phase A. One M1 exhibit (lesson
+1.4's smoke-test signal meter) rendered BOTH ways against the v3 exhibit
+spec, so Paul's eye-test picks O1 (hand-drawn-normalized) or O2
+(flat-vector). Neutral by design - this doc scores both on the same axes;
+it does not pre-decide the call.
+
+- **Exhibit rendered:** the cold-traffic conversion signal meter (visits →
+  signups → the conversion rate that reads go / iterate / kill, with 6% as
+  the go line). Same message in both variants; only the style variable moves.
+- **Spec bound:** `.okf/design/house-visual-spec.md` "v3 exhibit spec"
+  (grid W=720, 8-scale spacing, fill=data/stroke=structure, 5-rung type
+  scale, the ≥9px @390px floor formula, exhibit grammar, O1/O2 rubric).
+- **Files (do NOT overwrite the lesson's committed SVG):**
+  - O1: `40.30-exemplar-1.4-O1.svg`
+  - O2: `40.30-exemplar-1.4-O2.svg`
+  - Side-by-side (equal zoom, real webfonts): `40.30-exemplar-ab-sidebyside.png`
+
+## Side-by-side (equal zoom, rendered with the real webfonts)
+
+![O1 hand-drawn-normalized above, O2 flat-vector below, same exhibit at equal zoom](40.30-exemplar-ab-sidebyside.png)
+
+O1 links: [40.30-exemplar-1.4-O1.svg](40.30-exemplar-1.4-O1.svg) ·
+O2 links: [40.30-exemplar-1.4-O2.svg](40.30-exemplar-1.4-O2.svg)
+
+> Rendering note: the standalone `.svg` files reference Caveat / Space
+> Grotesk by family (the same way the lesson pages load them). Open them
+> inside the course (fonts loaded) or view the PNG above for the faithful
+> render - a raw file open with those fonts absent will substitute.
+
+---
+
+## Pass/fail gates (both MUST pass - not scored)
+
+Grammar checklist and the measured floor are gates, not preferences. Both
+variants clear both.
+
+| Gate | O1 | O2 | Evidence |
+|---|---|---|---|
+| One action title (a takeaway sentence, not a label) | PASS | PASS | "Your signup rate picks your move" |
+| One message (single point proved) | PASS | PASS | "Cold-traffic conversion, mapped to a decision" |
+| One basis line (source + scope) | PASS | PASS | "Basis: form submits ÷ ad-campaign visits, 300 cold visitors, one channel" |
+| Ruby-for-signal = one actionable reading | PASS | PASS | the 6% go line is the only ruby reading; bands are the gauge tone-scale |
+| Fill=data / stroke=structure | PASS | PASS | bands filled no-stroke; axis, ticks, threshold stroked no-fill |
+| Grid W=720, 8-scale spacing, 24 margins | PASS | PASS | 12:5 signal-meter ratio (720×300); every gap on the 4/8/12/16/24/32 rungs |
+| **≥9px @390px legibility floor (measured)** | **PASS** | **PASS** | see below |
+
+### Measured floor (the blocking gate) - real webfonts, container = 390px CSS
+
+Smallest text in each exhibit is the **basis line**. Measured in Chrome with
+Caveat / Space Grotesk actually loaded, the SVG scaled to a 390px container
+(scale = 390/720 = 0.5417):
+
+| Variant | Basis font (viewBox) | Rendered @390px | Floor (≥9px) | Font confirmed |
+|---|---|---|---|---|
+| O1 | 20px (Caveat x-height corrected) | **10.83px** | PASS (+1.83) | Caveat loaded |
+| O2 | 17px | **9.21px** | PASS (+0.21) | system-ui basis, Space Grotesk title |
+
+Both hold the floor by design (the spec's formula: O2 basis 17px → 9.21px;
+O1 basis 20px → 10.83px). O2 sits closest to the floor (17px is the exact
+canonical basis rung), which is correct - the spec sets it there on purpose.
+All larger rungs clear automatically. Band labels also verified to fit
+inside their bands with the real (condensed) fonts - tightest is O1
+"Iterate msg" at 90.4 of 96 viewBox units.
+
+---
+
+## Scored axes (where the two legitimately diverge - Paul's eye resolves)
+
+Same axes, both variants, 1-5. These are the trade-off, not a total: a high
+score on one is often the mirror of a risk on another. No sum, no winner
+declared.
+
+| Axis | O1 hand-drawn-normalized | O2 premium-editorial flat-vector |
+|---|---|---|
+| Perceived craft / "consulting-grade" | 3 - clean and disciplined, but the hand style caps how "premium" it can read | 5 - Space Grotesk + 4px radius + white card reads editorial/Stripe-Press |
+| Brand-identity fit (handwritten = house rule) | 5 - preserves the mermaid/Caveat brand rule intact | 2 - deliberately breaks it (that is the point of the test) |
+| Sam-trust (anti-marketing, not amateur, not generic-startup) | 3 - warm and human, but ADR's Sam-lens flagged hand-drawn as "amateur / unfinished" | 3 - crisp and trustworthy, but risks "generic startup" if it reads too polished |
+| Legibility at 390px | 4 - 10.83px basis, condensed Caveat stays readable | 4 - 9.21px basis, system-ui at the floor is clean and dense |
+| Consistency across 81 SVGs (the loudest premium signal per ADR D3) | 3 - hand style drifts stroke/texture more easily across many files | 5 - geometric spec is far easier to hold identical at scale |
+| Cost to adopt | 5 - cheapest, no restyle of the existing hand-drawn library | 2 - restyle every M1 SVG, then roll forward |
+
+**How the axes cut:** O1 wins on brand-continuity, warmth, and cost; it is
+the safe, cheap keep. O2 wins on perceived craft and scale-consistency -
+the two things Paul's 2026-07-31 "old-time / lacks infographic quality"
+assessment actually named - at the cost of breaking the handwritten house
+rule and a full M1 restyle. Sam-trust is a genuine wash: each carries a
+different, opposite risk (amateur vs generic), and only real reader signal
+settles it. The exhibit above is deliberately the smoke-test signal meter
+because its data-viz (semantic tone bands + ruby threshold) is where O2's
+flat-vector discipline shows the most and O1's hand style shows its warmth -
+the fairest single test of the divergence.
+
+---
+
+## Spec-ambiguity flags (rendered consistently across BOTH, so they don't bias the A/B)
+
+1. **Gauge tone-scale vs the single-ruby / green=money-only rules.** The
+   spec names `smoke-test-signal.svg` as THE gauge/meter archetype, whose
+   whole encoding is a bad→good tonal scale (ruby kill → amber → green go →
+   gray). That legitimately uses (a) red in the kill zone and (b) green in
+   the go zones, which brushes against "ruby marks the ONE actionable
+   reading" and "green stays money-only". Resolution used in BOTH variants:
+   the gauge tone-scale is treated as the meter archetype's data encoding;
+   the single hero **ruby** reading is reserved for the **6% go-line
+   pointer** (the number the exhibit exists to show), and green reads as
+   "go / proceed" not money. Applied identically to O1 and O2, so it does
+   not tilt the comparison. If Paul wants the letter of green=money-only
+   enforced, the go-zones would need a non-green positive tone (the palette
+   has none today - worth a spec note before M1 rollout).
+
+2. **Meter band widths are semi-linear, not strictly linear.** Low bands
+   (0-3, 3-6) get readable width even though they are narrow percentage
+   ranges, and 20%+ is a fixed cap. This matches the committed lesson SVG's
+   treatment and keeps the decision-relevant low end legible; it is a
+   meter-readability choice, identical in both.
+
+3. **Class names are generic (`.title`, `.label`, `.basis`).** Matches the
+   existing course-SVG convention and is correct for the shipping pattern
+   (each SVG loads as its own `<img src>` document). Only collides if
+   multiple of these SVGs are inlined into ONE HTML document - which the
+   lesson pages never do. (This bit the render harness mid-build and was
+   worked around by rendering each in isolation.)
+
+## Method (repeatable)
+
+- Rendered each SVG alone in an HTML page with Caveat + Space Grotesk from
+  Google Fonts, `await document.fonts.ready`, measured the smallest text's
+  computed font-size × (renderedWidth / viewBoxWidth) at a 390px container.
+- Screenshotted each at 720px (equal zoom) for the side-by-side.
+- Do NOT inline both SVGs in one page to measure - shared class names
+  cross-contaminate sizes; render each isolated.
diff --git a/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.30-exemplar-ab-sidebyside.png b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.30-exemplar-ab-sidebyside.png
new file mode 100644
index 000000000..32a2a4478
Binary files /dev/null and b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.30-exemplar-ab-sidebyside.png differ
diff --git a/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.31-sprint-y-classify-audit.md b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.31-sprint-y-classify-audit.md
new file mode 100644
index 000000000..9b8b58762
--- /dev/null
+++ b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.31-sprint-y-classify-audit.md
@@ -0,0 +1,191 @@
+# 40.31 — Sprint-Y classify-first audit (M1 SVGs, pre-T5)
+
+**Date:** 2026-08-01
+**Status:** Read-only audit — no SVGs edited
+**Scope:** the 5 M1 SVGs, ahead of T5 (style conversion). Outcome-independent —
+valid whether Paul picks O1 (hand-drawn-normalized), O2 (flat-vector), or a
+mix per ADR 30.09.
+
+**Binding sources:** `.okf/design/house-visual-spec.md` (hand-drawn section +
+v3 exhibit spec / O1-O2 rubric), `docs/projects/2605-tech-for-non-technical-founders/30-39-architecture-design/30.07-media-design-guidelines.md`.
+
+**Method:** for each SVG, every distinct visual element is classified CONVERT
+(generic hand-drawn styling — moves with whichever O1/O2 outcome wins),
+KEEP-AS-IS (carries meaning independent of style, cited to a spec rule), or
+REVIEW (ambiguous semantic-color usage that doesn't cleanly match the spec's
+literal color table — a judgment call for T5/Paul, not a style question).
+Legibility floor uses the v3 formula: `rendered_px = font_viewBox *
+390/W_viewBox`; the floor is 9px at 390 (a phone viewport).
+
+---
+
+## 1. `form-your-founding-hypothesis-90-minute-sprint/hypothesis-mad-libs.svg`
+
+viewBox 680×190. Only file that clears the legibility floor today.
+
+| Element | Convert/Keep | Reason |
+|---|---|---|
+| Cursive font stack (Caveat/Patrick Hand/Comic Sans) | CONVERT | O1/O2 divergent — O2 uses Space Grotesk for labels (v3 §6) |
+| Rotation wobble on pill rects (±0.6–0.8°) | CONVERT | O1 organic feel vs O2's no-wobble orthogonal routing (v3 §3, O1/O2 rubric) |
+| Paper-tint pill fills (#fff5f5 red / #fbe9ff purple) | CONVERT | O1 paper-tone background vs O2 "paper white on cream page" (v3 rubric) |
+| Pill rx=8 corners | CONVERT | O1 has no fixed-radius target (organic); O2 target is 4px (v3 §3) — needs a deliberate pick either way |
+| Labels inside pill shapes (customer/problem/approach/competition/differentiation each printed inside its own pill) | **KEEP-AS-IS** | Sweller split-attention rule — "Labels: INSIDE shapes... never bare diamonds," restated as non-negotiable exhibit grammar in v3 |
+| Red = customer/problem/approach; purple = competition/differentiation | REVIEW | Not literally "action/anti-pattern" vs "alternate path" per the color table — reads as a grouping convention (your-build vs market-context), not the spec's literal semantics. Flag for T5/Paul, don't auto-flatten |
+| Dash usage in caption | compliant, no finding | no "—" present |
+
+---
+
+## 2. `smoke-test-build-page/page-anatomy.svg`
+
+viewBox 800×600.
+
+| Element | Convert/Keep | Reason |
+|---|---|---|
+| Cursive font stack | CONVERT | same as above |
+| Rotation wobble on all 4 blocks (±0.2–0.5°) | CONVERT | same as above |
+| Paper-tint red-bordered blocks (#fff5f5/#cc342d) for headline/sub-headline/value-props | CONVERT | O1 paper palette vs O2 white-on-cream |
+| CTA block, solid red fill (`.block-cta`) | **KEEP-AS-IS (semantic)** | ruby = the one actionable reading — this IS the click-target, so red-for-action is correct; the hex may shift (#cc342d O1 → equivalent O2 ruby) but the assignment must survive conversion |
+| Labels inside blocks (HEADLINE, SUB-HEADLINE, VALUE PROP 1–4, CTA text all printed inside their own rect) | **KEEP-AS-IS** | Sweller rule, non-negotiable grammar |
+| `.note` text at 17px viewBox | **OFF-SPEC-TODAY** | renders 17×390/800 = **8.29px @390** — below the 9px floor |
+| viewBox 800×600, not W=720 | OFF-SPEC-TODAY | doesn't match the grid/column system or any v3 aspect-ratio bucket |
+
+---
+
+## 3. `smoke-test-wire-tracking/tracking-snippets.svg`
+
+viewBox 900×500.
+
+| Element | Convert/Keep | Reason |
+|---|---|---|
+| Cursive stack for headings/labels/wireframe text | CONVERT | same as above |
+| **Monospace (JetBrains Mono/Courier) for event names** (`→ page_view`, `→ cta_click`, `→ form_submit`) | **KEEP-AS-IS** | deliberate typographic split between prose and literal machine-readable tokens — this is the exact "mono code snippet that should stay mono" case; v3's font-swap rule (§6) only governs heading/label/running-text fonts, not literal code/event-name strings |
+| Rotation wobble on the 3 snippet boxes + wireframe (±0.2–0.4°) | CONVERT | same as above |
+| Purple Clarity box / red pixel box / amber(#b8860b) GA4 box | REVIEW | three tools get three colors as a categorical key, not literal action/alt-path/warning semantics — purple≠alt-path here, amber≠warning here. Flag for T5/Paul before deciding whether to keep as a house "3rd-party-tool key" convention or fold into one neutral color |
+| Dashed curved (Q-path) arrows with arrowhead marker | CONVERT-if-O2 | O2's connector spec wants orthogonal routing + filled-triangle arrowhead (9×7); O1 keeps organic curve + open hand-drawn caret (v3 §3) |
+| Event markers (`→ page_view` etc.) as bare text near the wireframe, not wrapped in a pill | REVIEW | functions like a connector label but isn't in "a paper-tone pill centered ON the line" per v3 §3 connector spec — T5 should decide whether to formalize as a pill during conversion |
+| `.sub` 16px, `.event` 16px, `.wf-text` 18px, `.cta-text` 18px | **OFF-SPEC-TODAY** | render 6.93px / 6.93px / 7.8px / 7.8px @390 — all below floor. `.heading` (28px→12.1px) and `.label` (22px→9.5px) clear it |
+| viewBox 900×500, not W=720 | OFF-SPEC-TODAY | same as above |
+
+---
+
+## 4. `smoke-test-landing-page-7-day-demand-test/smoke-test-signal.svg`
+
+viewBox 960×380. **This is the file the v3 spec cites by name as the canonical
+gauge/meter archetype** (house-visual-spec.md v3 §4: "this is the
+`smoke-test-signal.svg` archetype") — and it is also, today, the clearest
+instance of the "5.5–7px on a 390px phone" defect the same spec opens by
+describing.
+
+| Element | Convert/Keep | Reason |
+|---|---|---|
+| Cursive stack (Patrick Hand/Caveat) | CONVERT | same as above |
+| Ruby "Kill / pivot" 0-3% band | **KEEP-AS-IS** | literally the v3 spec's own worked example: "Ruby-for-signal convention: ruby marks the ONE actionable reading... this is the `smoke-test-signal.svg` archetype" |
+| Green "Promising" (6-10%) / "Strong signal" (10-20%) bands | **KEEP-AS-IS** | green = money/success-outcome only (house-spec table) — correctly scoped; this is the ONLY green usage across all 5 files |
+| Amber "Iterate msg" (3-6%) band | **KEEP-AS-IS** | amber = warning, used correctly — the one clean amber usage across all 5 files |
+| Gray "Suspicious?" (20%+) band | compliant, no finding | neutral/inconclusive reading, no semantic-color rule broken by using gray |
+| Band rects: filled, no stroke | **KEEP-AS-IS (compliant already)** | matches v3 §4 hard rule "DATA marks are FILLED, no stroke" — preserve when redrawing |
+| 6% threshold: solid line, stroke-width 3 | **OFF-SPEC-TODAY** | v3 §4 requires "a threshold is a 2px DASHED ink line perpendicular to the axis with a labeled tick" — this is solid AND 3px, wrong on both counts |
+| `.sub` 15px, `.band-pct` 20px, `.band-verd` 16px, `.tick` 15px, `.ptr` 17px (sub-label 14px), `.rule` 19px | **OFF-SPEC-TODAY** | render 6.09 / 8.13 / 6.5 / 6.09 / 6.91 (5.69) / 7.72 px @390 — every text class except `.title` (27px→10.97px) is below floor. Worst legibility failure of the 5 files by breadth (7 of 8 type classes fail) |
+| viewBox 960×380 | OFF-SPEC-TODAY | matches the exact "960-1000 viewBox" defect named in the spec intro; should be 720×300 per the v3 aspect-ratio table (signal meter = 12:5) |
+
+---
+
+## 5. `price-hypothesis-on-smoke-test-page/stripe-payment-link.svg`
+
+viewBox 960×360.
+
+| Element | Convert/Keep | Reason |
+|---|---|---|
+| Cursive stack | CONVERT | same as above |
+| Rotation wobble on both cards (±0.3°) | CONVERT | same as above |
+| Paper-tint card fills (#fff5f5 outcome / #fff8e0 risk) | CONVERT | O1 paper palette vs O2 white-on-cream |
+| Red CTA buttons on both cards | **KEEP-AS-IS (semantic)** | ruby = the actionable click-target on both cards — assignment must survive conversion even if hex shifts |
+| Purple bottom callout box (#fbe9ff/#a855f7) | REVIEW | wraps a synthesis statement, not an alternate path — same open question as the mad-libs/tracking-snippets purple usage |
+| Amber "RISK-REDUCTION FRAMING" card label/border (#b8860b) | REVIEW | second option label, not literally a warning — same open question as tracking-snippets' amber |
+| Labels inside/above their cards (OUTCOME FRAMING / RISK-REDUCTION FRAMING) and CTA text inside buttons | **KEEP-AS-IS** | Sweller rule |
+| Identical "$97" repeated on both cards, not colored green | compliant, no finding | correctly NOT treated as the money/success-outcome signal (it's a static repeated fact, not the reading the exhibit proves) |
+| `.note` 16px, `.card-label` 22px, `.cta-text` 16px, `.cta-price` 19px, `.card-note` 15px, `.callout` 17px | **OFF-SPEC-TODAY** | render 6.5 / 8.94 / 6.5 / 7.7 / 6.09 / 6.9 px @390 — every text class is below floor, including `.card-label` at 8.94px (just under). `.heading` (28px→11.4px) clears it |
+| viewBox 960×360, not W=720 | OFF-SPEC-TODAY | doesn't match the 3:2 comparison-card recommendation in the v3 aspect-ratio table |
+
+---
+
+## Consolidated KEEP-AS-IS list (feeds T5 — preserve regardless of O1/O2)
+
+1. **Sweller labels-inside-shapes** — every label lives inside or directly on
+   its own shape in all 5 files (pills, blocks, bars, cards, buttons). Never
+   redraw a bare/floating label. Non-negotiable exhibit grammar.
+2. **Dash discipline ("-" not "—")** — already compliant in all 5 files; must
+   not regress during redraw.
+3. **Monospace for literal event/code tokens** — `tracking-snippets.svg`'s
+   `→ page_view` / `→ cta_click` / `→ form_submit` stay in JetBrains
+   Mono/Courier even if the surrounding prose font switches to Space Grotesk
+   under O2. This is the one clear "should stay mono" case across all 5 files.
+4. **Ruby = the one actionable reading** — CTA buttons in `page-anatomy.svg`
+   and both `stripe-payment-link.svg` cards, and the "Kill/pivot" band in
+   `smoke-test-signal.svg` (the spec's own worked example of this rule).
+5. **Green = money/success-outcome only** — `smoke-test-signal.svg`'s
+   "Promising"/"Strong signal" bands are the sole green usage across all 5
+   files; keep that scarcity, don't spread green decoratively during redraw.
+6. **Amber = warning, used correctly once** — `smoke-test-signal.svg`'s
+   "Iterate msg" band. (Other amber usages are REVIEW items, not clean keeps
+   — see below.)
+7. **Filled-no-stroke data marks** — `smoke-test-signal.svg`'s band rects are
+   already fill-only, matching the v3 hard rule; preserve this when redrawing
+   as bars/charts.
+
+## REVIEW list (ambiguous semantic-color usage — Paul/T5 judgment call, not auto-convert)
+
+- Purple used as a 3rd/4th categorical color rather than literally
+  "alternate path": mad-libs' competition/differentiation pills,
+  tracking-snippets' Clarity box, stripe-payment-link's bottom callout.
+- Amber used as a 3rd categorical color rather than literally "warning":
+  tracking-snippets' GA4 box, stripe-payment-link's risk-reduction card.
+- tracking-snippets' event markers function as connector labels but aren't
+  wrapped in a pill per the v3 §3 connector spec — decide whether to
+  formalize during conversion.
+
+Decide once, apply everywhere: either these files intentionally established
+a house convention ("purple/amber = 3rd/4th category slot" beyond the
+literal 4-color table) worth keeping, or they should be flattened to neutral
+grays during T5. Either answer is fine — the point of this audit is that
+it's a decision, not a default.
+
+## Off-spec-today list (fix regardless of which O1/O2 outcome T5 ships)
+
+1. **Legibility floor violated in 4 of 5 files** (all but
+   `hypothesis-mad-libs.svg`, viewBox 680, which clears it today):
+   - `page-anatomy.svg`: `.note` 17px → 8.29px @390
+   - `tracking-snippets.svg`: `.sub`/`.event`/`.wf-text`/`.cta-text` →
+     6.93/6.93/7.8/7.8px @390
+   - `smoke-test-signal.svg`: 7 of 8 text classes fail (5.69–8.13px @390) —
+     worst breadth of the 5 files, and it's the spec's own cited defect
+     example
+   - `stripe-payment-link.svg`: 6 of 7 text classes fail (6.09–8.94px @390)
+2. **No file uses the canonical 720 viewBox width** — widths today are 680,
+   800, 900, 960, 960; none map to the grid/column system (12 cols, 24
+   margin, 12 gutter) or the v3 aspect-ratio table's recommended buckets.
+3. **`smoke-test-signal.svg`'s 6% threshold line is solid, 3px** — the v3
+   spec requires a threshold to be "a 2px dashed ink line perpendicular to
+   the axis with a labeled tick." Wrong on both style and width.
+4. **Stroke-width inconsistency**: `smoke-test-signal.svg`'s threshold line
+   (3px) exceeds the 2-2.5px range everywhere else uses;
+   `stripe-payment-link.svg`'s button stroke (1.5px) is thinner than its own
+   card stroke (2.5px) in the same file.
+5. **Corner radii are ungoverned** — rx ranges from 4 to 31 across the 5
+   files with no consistent application of either O1 ("n/a, organic curve")
+   or O2 (4px) — T5 needs to pick one value set systematically, not
+   file-by-file.
+
+---
+
+## Bottom line for T5
+
+- 7 KEEP-AS-IS items, all cited to a specific spec rule — these transfer
+  unchanged into whichever O1/O2 outcome ships.
+- 6 REVIEW items (purple/amber used as generic 3rd/4th category colors, and
+  one un-pilled connector label) — these need a decision before T5 redraws,
+  not a default flatten.
+- 5 off-spec-today findings, the biggest being the legibility floor failing
+  on 4 of 5 files (worst: `smoke-test-signal.svg`, the file the spec itself
+  names as the archetype) and no file using the canonical W=720 viewBox —
+  T5 fixes these in either O1 or O2, they are not style-dependent.