diff --git a/app/globals.css b/app/globals.css
index 74da31f..a08c9ec 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,51 +1,474 @@
 * { box-sizing: border-box; }
-:root { --ink:#070a1a; --body:#36405d; --blue:#4865ff; --line:#dfe3eb; --soft:#f7f8fb; }
+:root {
+  --ink: #070a1a;
+  --body: #36405d;
+  --muted: #6c748c;
+  --blue: #4865ff;
+  --line: #dfe3eb;
+  --soft: #f7f8fb;
+  --softer: #eef1f7;
+  --claude: #c15f3c;
+  --claude-soft: #fdf1eb;
+  --codex: #10a37f;
+  --codex-soft: #e6f6f0;
+  --pass: #0f8a5e;
+  --pass-soft: #e2f4ec;
+  --fail: #c73a3a;
+  --fail-soft: #fbe9e9;
+  --nuance: #a3641c;
+  --nuance-soft: #fbf1de;
+}
+
 html { scroll-behavior: smooth; }
-body { margin:0; background:#fff; color:var(--body); font:16px/1.5 Arial, Helvetica, sans-serif; }
-a { color:var(--blue); }
-img { display:block; max-width:100%; height:auto; }
-code, dd { overflow-wrap:anywhere; min-width:0; }
-.wrap { width:min(1184px, calc(100% - 48px)); margin:0 auto; }
-.site-header { border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:10; }
-.nav-row { height:64px; display:flex; align-items:center; gap:24px; }
-.wordmark { color:var(--ink); text-decoration:none; font-size:19px; font-weight:700; letter-spacing:-.03em; }
-.wordmark span { color:var(--blue); }
-nav { margin-left:auto; display:flex; gap:18px; }
-nav a { color:var(--ink); text-decoration:none; font-size:14px; }
-.block { padding:48px 0; border-bottom:1px solid var(--line); }
-.mechanical-head { padding-top:64px; }
-.label { margin:0 0 12px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
-h1,h2,h3 { color:var(--ink); line-height:1.2; }
-h1 { max-width:900px; font-size:clamp(32px,4vw,48px); margin:0 0 18px; }
-h2 { margin:0 0 24px; font-size:26px; }
-h3 { margin:0 0 8px; font-size:20px; }
-.facts, .mini-facts { margin:0 0 24px; }
-.facts div { display:grid; grid-template-columns:180px 1fr; padding:12px 0; border-top:1px solid var(--line); }
-dt { font-weight:700; color:var(--ink); }
-dd { margin:0; }
-.output-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
-.output { border:1px solid var(--line); padding:18px; min-width:0; background:#fff; }
-.output > p { margin:0 0 14px; }
-.shot-window { height:560px; overflow:auto; border:1px solid var(--line); background:var(--soft); margin-bottom:10px; }
-.shot-window img { width:100%; }
-.mini-facts { margin-top:18px; }
-.mini-facts div { display:grid; grid-template-columns:110px 1fr; border-top:1px solid var(--line); padding:9px 0; font-size:14px; }
-details { margin-top:18px; border:1px solid var(--line); padding:14px; }
-summary { color:var(--ink); font-weight:700; cursor:pointer; }
-pre { white-space:pre-wrap; overflow:auto; background:var(--soft); padding:18px; font:13px/1.55 ui-monospace, monospace; }
-.mobile-shot { margin:14px auto 0; max-width:390px; }
-.table-wrap { overflow:auto; border:1px solid var(--line); max-width:100%; }
-table { width:100%; border-collapse:collapse; font-size:14px; }
-th,td { padding:10px 14px; border-bottom:1px solid var(--line); text-align:left; }
-th { color:var(--ink); background:var(--soft); }
-.file-list { columns:2; margin:0; padding-left:20px; }
-.file-list li { margin:0 0 10px; break-inside:avoid; }
-footer { padding:32px 0; }
-@media (max-width:700px) {
-  .wrap { width:calc(100% - 32px); }
-  nav { display:none; }
-  .output-grid { grid-template-columns:1fr; }
-  .shot-window { height:420px; }
-  .facts div, .mini-facts div { grid-template-columns:1fr; gap:4px; }
-  .file-list { columns:1; }
+body {
+  margin: 0;
+  background: #fff;
+  color: var(--body);
+  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--blue); }
+img { display: block; max-width: 100%; height: auto; }
+code {
+  overflow-wrap: anywhere;
+  background: var(--soft);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+dd { overflow-wrap: anywhere; min-width: 0; }
+
+.wrap { width: min(1184px, calc(100% - 48px)); margin: 0 auto; }
+
+/* ---------- Site chrome (preserved identity) ---------- */
+.site-header {
+  border-bottom: 1px solid var(--line);
+  background: rgba(255,255,255,0.92);
+  backdrop-filter: saturate(1.4) blur(8px);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+.nav-row { height: 64px; display: flex; align-items: center; gap: 24px; }
+.wordmark {
+  color: var(--ink);
+  text-decoration: none;
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: -.03em;
+}
+.wordmark span { color: var(--blue); }
+nav { margin-left: auto; display: flex; gap: 22px; }
+nav a { color: var(--ink); text-decoration: none; font-size: 14px; }
+nav a:hover { color: var(--blue); }
+
+footer {
+  padding: 32px 0;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 13px;
+}
+
+/* ---------- Common section pieces ---------- */
+.block { padding: 72px 0; border-bottom: 1px solid var(--line); }
+h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; letter-spacing: -.015em; }
+h1 { font-size: clamp(34px, 4.6vw, 54px); margin: 0 0 20px; max-width: 900px; letter-spacing: -.03em; }
+h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 12px; }
+h3 { font-size: 18px; margin: 0 0 8px; }
+h4 { font-size: 17px; margin: 0 0 8px; }
+
+.label {
+  margin: 0 0 16px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .14em;
+  color: var(--muted);
+}
+
+.section-head { margin-bottom: 32px; max-width: 780px; }
+.section-sub { margin: 0; color: var(--muted); font-size: 16px; }
+
+/* ---------- Hero ---------- */
+.hero { padding: 72px 0 56px; }
+.hero .lede {
+  max-width: 780px;
+  font-size: 19px;
+  line-height: 1.55;
+  margin: 0 0 40px;
+  color: var(--body);
+}
+
+.tldr {
+  display: grid;
+  grid-template-columns: 1fr 1.6fr;
+  gap: 0;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+}
+.tldr-cell { padding: 24px 26px; }
+.tldr-cell + .tldr-cell { border-left: 1px solid var(--line); }
+.tldr-cell p { margin: 0; color: var(--body); }
+.tldr-cell p em { color: var(--ink); font-style: italic; }
+.tldr-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-bottom: 8px;
+}
+
+.prompt-details {
+  margin-top: 28px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 14px 18px;
+  background: #fff;
+}
+.prompt-details summary {
+  cursor: pointer;
+  color: var(--ink);
+  font-weight: 600;
+  font-size: 14px;
+}
+.prompt-details pre {
+  margin: 14px 0 4px;
+  padding: 18px;
+  background: var(--soft);
+  border-radius: 8px;
+  overflow: auto;
+  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: pre-wrap;
+}
+
+/* ---------- Chips + pills ---------- */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: .02em;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  line-height: 1;
+}
+.chip-claude { background: var(--claude-soft); color: var(--claude); border-color: #f4d6c5; }
+.chip-codex  { background: var(--codex-soft);  color: var(--codex);  border-color: #c9ead9; }
+
+.pill {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 999px;
+}
+.pill-pass { background: var(--pass-soft); color: var(--pass); }
+.pill-fail { background: var(--fail-soft); color: var(--fail); }
+
+.tag {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 9px;
+  border-radius: 999px;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+.tag-fail    { background: var(--fail-soft);    color: var(--fail); }
+.tag-nuance  { background: var(--nuance-soft);  color: var(--nuance); }
+
+/* ---------- Builds (side-by-side screenshots) ---------- */
+.builds {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 24px;
+}
+.build {
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 20px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.build-claude { border-top: 3px solid var(--claude); }
+.build-codex  { border-top: 3px solid var(--codex);  }
+.build-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+.build-checks {
+  font-size: 13px;
+  color: var(--muted);
+  font-weight: 600;
+}
+.shot {
+  display: block;
+  height: 520px;
+  overflow: auto;
+  border: 1px solid var(--line);
+  background: var(--soft);
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+.shot img { width: 100%; display: block; }
+.build-facts { margin: 0 0 12px; }
+.build-facts div {
+  display: grid;
+  grid-template-columns: 110px 1fr;
+  gap: 12px;
+  padding: 10px 0;
+  border-top: 1px solid var(--line);
+  font-size: 14px;
+}
+.build-facts dt { color: var(--muted); font-weight: 600; }
+.build-facts dd { margin: 0; color: var(--ink); }
+.build-note { margin: 6px 0 0; font-size: 14px; color: var(--body); }
+
+/* ---------- Differences ---------- */
+.diffs { display: grid; gap: 18px; }
+.diff {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 22px 24px;
+  background: #fff;
+}
+.diff h3 { margin: 0 0 14px; font-size: 17px; }
+.diff-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 14px;
+}
+.diff-cell {
+  border-left: 3px solid var(--line);
+  padding: 4px 0 4px 14px;
+  min-width: 0;
+}
+.diff-cell.diff-flagged { border-left-color: var(--fail); }
+.diff-cell p { margin: 6px 0 0; color: var(--ink); font-size: 15px; }
+.diff-takeaway {
+  margin: 0;
+  padding-top: 14px;
+  border-top: 1px dashed var(--line);
+  color: var(--muted);
+  font-size: 14px;
+  font-style: italic;
+}
+
+/* ---------- Scores ---------- */
+.score-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+.score {
+  padding: 24px 28px;
+  border-radius: 14px;
+  border: 1px solid var(--line);
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.score-claude { border-top: 3px solid var(--claude); }
+.score-codex  { border-top: 3px solid var(--codex);  }
+.score-big {
+  font-size: 44px;
+  font-weight: 800;
+  color: var(--ink);
+  line-height: 1;
+  letter-spacing: -.03em;
+}
+.score-big span { font-size: 22px; color: var(--muted); font-weight: 600; margin-left: 4px; }
+.score-sub { color: var(--muted); font-size: 14px; }
+
+.failures h3 { font-size: 18px; margin: 0 0 14px; }
+.failure-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+.failure {
+  padding: 20px 22px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: #fff;
+}
+.failure header {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.failure h4 { margin: 6px 0 8px; }
+.failure p { margin: 0; font-size: 14px; }
+
+.full-checks {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 14px 18px;
+  background: #fff;
+}
+.full-checks summary {
+  cursor: pointer;
+  color: var(--ink);
+  font-weight: 600;
+  font-size: 14px;
+}
+.table-wrap {
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  margin-top: 14px;
+}
+table { width: 100%; border-collapse: collapse; font-size: 14px; }
+th, td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
+th { color: var(--ink); background: var(--soft); font-weight: 700; }
+tbody th { background: #fff; font-weight: 500; color: var(--ink); }
+tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
+
+/* ---------- Mobile row ---------- */
+.mobile-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 28px;
+}
+.mobile-fig { margin: 0; }
+.mobile-fig figcaption { margin-bottom: 12px; }
+.mobile-frame {
+  max-width: 340px;
+  margin: 0 auto;
+  border: 12px solid #0e131f;
+  border-radius: 28px;
+  overflow: hidden;
+  background: #0e131f;
+  box-shadow: 0 20px 40px rgba(15, 22, 40, 0.08);
+}
+.mobile-frame img { display: block; width: 100%; height: 620px; object-fit: cover; object-position: top; }
+
+/* ---------- Under the hood ---------- */
+.hood-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+.metric {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 20px 22px;
+  background: #fff;
+  min-width: 0;
+}
+.metric h3 {
+  margin: 0 0 14px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.metric-row {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.metric-row > div {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: space-between;
+}
+.metric-val {
+  color: var(--ink);
+  font-weight: 600;
+  font-size: 15px;
+  text-align: right;
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+.metric-foot {
+  margin: 14px 0 0;
+  font-size: 12px;
+  color: var(--muted);
+  border-top: 1px dashed var(--line);
+  padding-top: 10px;
+}
+
+/* ---------- Interpretation ---------- */
+.reads {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+}
+.read {
+  padding: 22px 24px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: #fff;
+}
+.read h3 { margin: 0 0 10px; font-size: 17px; }
+.read p { margin: 0; font-size: 15px; }
+
+/* ---------- Raw evidence ---------- */
+.facts { margin: 0 0 24px; }
+.facts div {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  padding: 12px 0;
+  border-top: 1px solid var(--line);
+  gap: 16px;
+}
+.facts div:last-child { border-bottom: 1px solid var(--line); }
+.facts dt { font-weight: 700; color: var(--ink); }
+.facts dd { margin: 0; }
+.file-list { columns: 2; column-gap: 36px; margin: 0 0 24px; padding-left: 20px; }
+.file-list li { margin: 0 0 10px; break-inside: avoid; }
+.limits {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 14px 18px;
+  background: #fff;
+}
+.limits summary { cursor: pointer; color: var(--ink); font-weight: 600; font-size: 14px; }
+.limits ul { margin: 12px 0 0; padding-left: 20px; font-size: 14px; }
+.limits li { margin-bottom: 8px; }
+
+/* ---------- Responsive ---------- */
+@media (max-width: 900px) {
+  .wrap { width: calc(100% - 32px); }
+  .block { padding: 56px 0; }
+  .tldr { grid-template-columns: 1fr; }
+  .tldr-cell + .tldr-cell { border-left: 0; border-top: 1px solid var(--line); }
+  .builds, .diff-body, .score-row, .failure-cards, .mobile-row, .reads { grid-template-columns: 1fr; }
+  .hood-grid { grid-template-columns: 1fr 1fr; }
+  .shot { height: 420px; }
+  .facts div { grid-template-columns: 1fr; gap: 4px; }
+  .file-list { columns: 1; }
+  nav { gap: 14px; }
+  .diff-cell { padding-left: 12px; }
+  .mobile-frame img { height: 520px; }
+}
+
+@media (max-width: 560px) {
+  nav a:not(:last-child) { display: none; }
+  .hood-grid { grid-template-columns: 1fr; }
+  h1 { font-size: 32px; }
+  .hero .lede { font-size: 17px; }
+  .score-big { font-size: 36px; }
+  .shot { height: 320px; }
+  .mobile-frame { max-width: 100%; }
+  .mobile-frame img { height: 460px; }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index ec9d266..f817df8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,8 +2,8 @@ import type { Metadata } from "next";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "Raw case-study evidence | WhichBuildWon",
-  description: "A neutral fixture exposing recorded evidence from a completed WhichBuildWon experiment.",
+  title: "Same brief. Two Relays. | WhichBuildWon case study",
+  description: "Claude Code and Codex were given the same 669-byte brief for a Relay SaaS landing page. See what each built, what the checks say, and where they differ.",
 };
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
diff --git a/app/page.tsx b/app/page.tsx
index 9c306ea..01b5ea5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,124 +1,505 @@
 import evidence from "../public/evidence/raw-run/results.json";
 
-const links = [
+type CheckKey = keyof (typeof evidence.contestants.claude.grader.checks);
+
+const claude = evidence.contestants.claude;
+const codex = evidence.contestants.codex;
+
+const rawFiles: Array<[string, string]> = [
   ["Frozen results JSON", "/evidence/raw-run/results.json"],
-  ["Original exact prompt", "/evidence/raw-run/prompt.txt"],
+  ["Original prompt (SHA-256 verified)", "/evidence/raw-run/prompt.txt"],
+  ["Evidence manifest", "/evidence/raw-run/manifest.json"],
+  ["Run validation", "/evidence/raw-run/validation.json"],
   ["Claude grader JSON", "/evidence/raw-run/claude/grader.json"],
   ["Codex grader JSON", "/evidence/raw-run/codex/grader.json"],
   ["Claude source diff", "/evidence/raw-run/claude/final.diff"],
   ["Codex source diff", "/evidence/raw-run/codex/final.diff"],
-  ["Claude run log", "/evidence/raw-run/claude/contestant.stdout.log"],
-  ["Codex run log", "/evidence/raw-run/codex/contestant.stdout.log"],
-  ["Run validation", "/evidence/raw-run/validation.json"],
-  ["Evidence manifest", "/evidence/raw-run/manifest.json"],
+  ["Claude run log", "/evidence/raw-run/claude/contestant-run.json"],
+  ["Codex run log", "/evidence/raw-run/codex/contestant-run.json"],
+  ["Claude final git status", "/evidence/raw-run/claude/final-git-status.txt"],
+  ["Codex final git status", "/evidence/raw-run/codex/final-git-status.txt"],
+  ["Claude rendered HTML snapshot", "/evidence/raw-run/claude/rendered-page-snapshot.html"],
+  ["Claude desktop screenshot", "/evidence/raw-run/claude/screenshots/desktop.png"],
+  ["Codex desktop screenshot", "/evidence/raw-run/codex/screenshots/desktop.png"],
+  ["Claude mobile screenshot", "/evidence/raw-run/claude/screenshots/mobile.png"],
+  ["Codex mobile screenshot", "/evidence/raw-run/codex/screenshots/mobile.png"],
 ];
 
-const contestants = [
-  {
-    key: "claude",
-    name: "Claude Code",
-    desktop: "/evidence/claude-desktop.png",
-    mobile: "/evidence/claude-mobile.png",
-    result: evidence.contestants.claude,
-  },
-  {
-    key: "codex",
-    name: "Codex",
-    desktop: "/evidence/codex-desktop.png",
-    mobile: "/evidence/codex-mobile.png",
-    result: evidence.contestants.codex,
-  },
-] as const;
+// Human-friendly labels for deterministic checks.
+const checkLabels: Record<string, string> = {
+  production_build_success: "Production build succeeds",
+  typescript_success: "TypeScript compiles",
+  page_loads: "Page returns HTTP 200",
+  navigation_exists: "Navigation exists",
+  hero_exists: "Hero exists",
+  primary_cta_exists: "Primary CTA exists",
+  social_proof_exists: "Social proof section",
+  three_feature_sections_exist: "Three feature sections",
+  roi_calculator_exists: "ROI calculator exists",
+  roi_calculator_changes_output: "ROI calculator updates output",
+  pricing_section_exists: "Pricing section exists",
+  three_pricing_plans_exist: "Three pricing plans (heuristic)",
+  faq_exists: "FAQ section",
+  footer_exists: "Footer",
+  no_broken_links: "No placeholder / broken links",
+  accessible_buttons_and_form_controls: "Accessible buttons & form controls",
+  desktop_renders: "Desktop screenshot renders",
+  mobile_renders: "Mobile screenshot renders",
+  mobile_no_material_horizontal_overflow: "No mobile horizontal overflow",
+  no_browser_console_errors: "No browser console errors",
+};
+
+function checkStatus(passed: boolean) {
+  return passed ? "pass" : "fail";
+}
+
+function formatMinutes(ms: number) {
+  const minutes = Math.floor(ms / 60000);
+  const seconds = Math.round((ms % 60000) / 1000);
+  return `${minutes}m ${seconds.toString().padStart(2, "0")}s`;
+}
+
+function formatOptionalCost(v: number | null, fallback = "—") {
+  return typeof v === "number" ? `$${v.toFixed(2)}` : fallback;
+}
+
+function formatOptionalNumber(v: number | null, fallback = "—") {
+  return typeof v === "number" ? String(v) : fallback;
+}
 
 export default function Home() {
+  const claudeH1 = claude.grader.measurements.desktop_dom.hero.h1;
+  const codexH1 = codex.grader.measurements.desktop_dom.hero.h1;
+  const claudeChecks = claude.grader.checks as Record<CheckKey, { passed: boolean }>;
+  const codexChecks = codex.grader.checks as Record<CheckKey, { passed: boolean }>;
+  const brokenLinkCount = claude.grader.measurements.desktop_dom.broken_links.length;
+
   return (
     <>
       <header className="site-header">
         <div className="wrap nav-row">
           <a className="wordmark" href="#top">Which<span>Build</span>Won</a>
           <nav aria-label="Primary">
-            <a href="#evidence">Evidence</a>
-            <a href="#raw">Raw files</a>
+            <a href="#builds">Builds</a>
+            <a href="#differences">Differences</a>
+            <a href="#checks">Checks</a>
+            <a href="#raw">Raw evidence</a>
           </nav>
         </div>
       </header>
+
       <main id="top">
-        <section className="wrap block mechanical-head">
-          <p className="label">Case-study fixture · raw evidence</p>
-          <h1>We gave Claude and Codex the exact same raw experiment evidence. Which one made the result easier to understand?</h1>
-          <p>This page exposes the completed Relay landing-page run without an editorial conclusion or designed narrative.</p>
-        </section>
+        {/* ----------- HERO / TL;DR ----------- */}
+        <section className="hero wrap">
+          <p className="label">Case study · one-shot build-off</p>
+          <h1>Same brief. Two Relays.</h1>
+          <p className="lede">
+            Claude Code and Codex were each given the same 669-byte prompt asking for a polished
+            responsive SaaS landing page for a fictional product called Relay. Neither could ask
+            questions. Both had to make every product and design decision on their own.
+          </p>
 
-        <section className="wrap block" id="evidence">
-          <h2>Original experiment record</h2>
-          <dl className="facts">
-            <div><dt>Question</dt><dd>{evidence.experiment_question}</dd></div>
-            <div><dt>Starting commit</dt><dd><code>{evidence.starting_git_commit}</code></dd></div>
-            <div><dt>Prompt SHA-256</dt><dd><code>{evidence.prompt_sha256}</code></dd></div>
-            <div><dt>Method</dt><dd>{evidence.methodology}</dd></div>
-          </dl>
-          <details>
-            <summary>Original task prompt</summary>
+          <div className="tldr">
+            <div className="tldr-cell">
+              <span className="tldr-label">Question</span>
+              <p>{evidence.experiment_question}</p>
+            </div>
+            <div className="tldr-cell">
+              <span className="tldr-label">Result at a glance</span>
+              <p>
+                Both models produced a working, responsive landing page that built cleanly, typechecked,
+                served HTTP&nbsp;200 without console errors, and included every requested section. The
+                interesting differences are stylistic, structural, and in how each interpreted the words
+                <em> &ldquo;no broken links.&rdquo;</em>
+              </p>
+            </div>
+          </div>
+
+          <details className="prompt-details">
+            <summary>Read the exact prompt both models received</summary>
             <pre>{evidence.exact_shared_brief}</pre>
           </details>
         </section>
 
-        <section className="wrap block">
-          <h2>Recorded contestant outputs</h2>
-          <div className="output-grid">
-            {contestants.map((contestant) => (
-              <article className="output" key={contestant.key}>
-                <h3>{contestant.name}</h3>
-                <p>Desktop screenshot from the completed run.</p>
-                <div className="shot-window">
-                  <img src={contestant.desktop} alt={`${contestant.name} Relay landing-page desktop screenshot from the recorded run`} />
-                </div>
-                <a href={contestant.desktop}>Open full desktop screenshot</a>
-                <dl className="mini-facts">
-                  <div><dt>Checks</dt><dd>{contestant.result.grader.summary.passed}/{contestant.result.grader.summary.total} passed</dd></div>
-                  <div><dt>Failures</dt><dd>{contestant.result.grader.summary.failed.length ? contestant.result.grader.summary.failed.join(", ") : "None recorded"}</dd></div>
-                  <div><dt>Elapsed</dt><dd>{(contestant.result.duration_ms / 1000).toFixed(1)} seconds</dd></div>
-                  <div><dt>CLI model record</dt><dd>{contestant.result.model || "Not available"}</dd></div>
+        {/* ----------- WHAT EACH BUILT ----------- */}
+        <section className="wrap block" id="builds">
+          <div className="section-head">
+            <h2>What each one actually built</h2>
+            <p className="section-sub">
+              Desktop screenshots captured by Playwright at the end of each run. Click any image for the full-page capture.
+            </p>
+          </div>
+
+          <div className="builds">
+            {[
+              {
+                key: "claude",
+                name: "Claude Code",
+                accent: "claude",
+                desktop: "/evidence/claude-desktop.png",
+                mobile: "/evidence/claude-mobile.png",
+                h1: claudeH1,
+                cta: claude.grader.measurements.desktop_dom.hero.primary_cta_name,
+                title: claude.grader.measurements.desktop_dom.title,
+                data: claude,
+                note: "Dark hero, one-panel product screen, three named plans (Free / $29 / $79).",
+              },
+              {
+                key: "codex",
+                name: "Codex",
+                accent: "codex",
+                desktop: "/evidence/codex-desktop.png",
+                mobile: "/evidence/codex-mobile.png",
+                h1: codexH1,
+                cta: codex.grader.measurements.desktop_dom.hero.primary_cta_name,
+                title: codex.grader.measurements.desktop_dom.title,
+                data: codex,
+                note: "Cream palette, hand-built dashboard mock in the hero, plans priced $19 / $49 / $149.",
+              },
+            ].map((b) => (
+              <article className={`build build-${b.accent}`} key={b.key}>
+                <header className="build-head">
+                  <span className={`chip chip-${b.accent}`}>{b.name}</span>
+                  <span className="build-checks">
+                    {b.data.grader.summary.passed}/{b.data.grader.summary.total} checks passed
+                  </span>
+                </header>
+                <a className="shot" href={b.desktop} aria-label={`Open ${b.name} full desktop screenshot`}>
+                  <img src={b.desktop} alt={`${b.name} Relay landing-page desktop screenshot`} />
+                </a>
+                <dl className="build-facts">
+                  <div><dt>Page title</dt><dd>{b.title}</dd></div>
+                  <div><dt>Hero H1</dt><dd>&ldquo;{b.h1}&rdquo;</dd></div>
+                  <div><dt>Primary CTA</dt><dd>&ldquo;{b.cta}&rdquo;</dd></div>
                 </dl>
-                <details>
-                  <summary>Mobile screenshot</summary>
-                  <img className="mobile-shot" src={contestant.mobile} alt={`${contestant.name} Relay landing-page mobile screenshot from the recorded run`} />
-                </details>
+                <p className="build-note">{b.note}</p>
               </article>
             ))}
           </div>
         </section>
 
+        {/* ----------- KEY DIFFERENCES ----------- */}
+        <section className="wrap block" id="differences">
+          <div className="section-head">
+            <h2>The differences that actually matter</h2>
+            <p className="section-sub">
+              Everything below comes from the recorded run &mdash; DOM measurements, git diffs, timing, and grader results.
+            </p>
+          </div>
+
+          <div className="diffs">
+            <DiffRow
+              title="Hero headline"
+              claudeValue={`“${claudeH1}”`}
+              codexValue={`“${codexH1}”`}
+              takeaway="Claude wrote copy about the product outcome; Codex wrote copy about the feeling."
+            />
+            <DiffRow
+              title="Placeholder links"
+              claudeValue={`${brokenLinkCount} “#” anchor hrefs`}
+              codexValue="0 placeholder hrefs"
+              takeaway="Claude used # as a stand-in for future URLs. Codex wired everything to real intra-page anchors and mailto links."
+              flag="claude"
+            />
+            <DiffRow
+              title="Approach to CSS"
+              claudeValue="~1,776 lines of new CSS across many named component classes"
+              codexValue="~12 lines added; existing globals rewritten as dense multi-selector rules"
+              takeaway="Two very different authoring styles for the same visual polish target."
+            />
+            <DiffRow
+              title="Files touched"
+              claudeValue="Modified 4 files; also created untracked app/components/, CLAUDE.md, AGENTS.md"
+              codexValue="Modified 3 files, nothing else"
+              takeaway="Claude split work into a component tree. Codex kept everything in app/page.tsx."
+            />
+            <DiffRow
+              title="Hero visual"
+              claudeValue="Illustrated conversation card + stat pills"
+              codexValue="Custom-built product dashboard mockup with floating cards"
+              takeaway="Both invented product art from scratch; Codex committed to a more elaborate mock."
+            />
+            <DiffRow
+              title="Pricing plans"
+              claudeValue="3 tiers rendered: Free / $29 / $79"
+              codexValue="3 tiers rendered: $19 / $49 / $149 (plus a final CTA card the grader counted separately)"
+              takeaway="Very different revenue framing from an identical prompt."
+            />
+          </div>
+        </section>
+
+        {/* ----------- DETERMINISTIC CHECKS ----------- */}
+        <section className="wrap block" id="checks">
+          <div className="section-head">
+            <h2>The deterministic checks</h2>
+            <p className="section-sub">
+              Twenty structural, behavioral, and rendering checks were run against each build. Both cleared build,
+              typecheck, HTTP 200, console-error, accessibility, and mobile-overflow checks. Two checks split the field.
+            </p>
+          </div>
+
+          <div className="score-row">
+            <div className="score score-claude">
+              <span className="chip chip-claude">Claude Code</span>
+              <span className="score-big">{claude.grader.summary.passed}<span>/{claude.grader.summary.total}</span></span>
+              <span className="score-sub">passed</span>
+            </div>
+            <div className="score score-codex">
+              <span className="chip chip-codex">Codex</span>
+              <span className="score-big">{codex.grader.summary.passed}<span>/{codex.grader.summary.total}</span></span>
+              <span className="score-sub">passed</span>
+            </div>
+          </div>
+
+          <div className="failures">
+            <h3>Where they diverged</h3>
+            <div className="failure-cards">
+              <article className="failure">
+                <header>
+                  <span className="chip chip-claude">Claude</span>
+                  <span className="tag tag-fail">Failed</span>
+                </header>
+                <h4>No placeholder / broken links</h4>
+                <p>
+                  The grader flagged <strong>{brokenLinkCount} anchor tags with <code>href=&quot;#&quot;</code></strong>.
+                  Nothing was 404-broken &mdash; Claude used <code>#</code> as a placeholder for future destinations rather
+                  than wiring links to real page sections. Codex used real intra-page anchors and passed the same check.
+                </p>
+              </article>
+              <article className="failure">
+                <header>
+                  <span className="chip chip-claude">Claude</span>
+                  <span className="tag tag-nuance">Failed (heuristic miss)</span>
+                </header>
+                <h4>Three pricing plans</h4>
+                <p>
+                  The grader counted <strong>0 plans</strong> and marked this failed &mdash; but the rendered HTML snapshot
+                  shows Claude did ship three tiers (Free, $29, $79) using <code>.pricing-card</code> markup the
+                  heuristic didn&apos;t recognize. Listed as a fail for accuracy; treat as a caveat about deterministic
+                  DOM detection rather than a missing feature.
+                </p>
+              </article>
+            </div>
+          </div>
+
+          <details className="full-checks">
+            <summary>All twenty deterministic checks, side by side</summary>
+            <div className="table-wrap">
+              <table>
+                <thead><tr><th scope="col">Check</th><th scope="col">Claude Code</th><th scope="col">Codex</th></tr></thead>
+                <tbody>
+                  {evidence.deterministic_comparison.map((row) => {
+                    const label = checkLabels[row.check] ?? row.check;
+                    return (
+                      <tr key={row.check}>
+                        <th scope="row">{label}</th>
+                        <td><span className={`pill pill-${checkStatus(row.claude.passed)}`}>{row.claude.passed ? "Pass" : "Fail"}</span></td>
+                        <td><span className={`pill pill-${checkStatus(row.codex.passed)}`}>{row.codex.passed ? "Pass" : "Fail"}</span></td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </details>
+        </section>
+
+        {/* ----------- MOBILE ----------- */}
         <section className="wrap block">
-          <h2>Deterministic check comparison</h2>
-          <div className="table-wrap">
-            <table>
-              <thead><tr><th>Check</th><th>Claude Code</th><th>Codex</th></tr></thead>
-              <tbody>
-                {evidence.deterministic_comparison.map((row) => (
-                  <tr key={row.check}>
-                    <td>{row.check}</td>
-                    <td>{row.claude?.passed ? "Pass" : "Fail"}</td>
-                    <td>{row.codex?.passed ? "Pass" : "Fail"}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+          <div className="section-head">
+            <h2>On a phone</h2>
+            <p className="section-sub">
+              Both pages measured <strong>0 pixels</strong> of horizontal overflow at a 390&thinsp;px viewport.
+              Content density and visual polish differ; layout correctness does not.
+            </p>
+          </div>
+          <div className="mobile-row">
+            <figure className="mobile-fig">
+              <figcaption><span className="chip chip-claude">Claude</span></figcaption>
+              <div className="mobile-frame"><img src="/evidence/claude-mobile.png" alt="Claude mobile screenshot" /></div>
+            </figure>
+            <figure className="mobile-fig">
+              <figcaption><span className="chip chip-codex">Codex</span></figcaption>
+              <div className="mobile-frame"><img src="/evidence/codex-mobile.png" alt="Codex mobile screenshot" /></div>
+            </figure>
           </div>
         </section>
 
+        {/* ----------- UNDER THE HOOD ----------- */}
+        <section className="wrap block">
+          <div className="section-head">
+            <h2>Under the hood</h2>
+            <p className="section-sub">
+              Runtime metadata as recorded by each CLI. Codex&apos;s CLI did not expose a cost or model field in this
+              version, so those cells are honestly empty rather than guessed.
+            </p>
+          </div>
+          <div className="hood-grid">
+            <MetricCard
+              label="Wall-clock time"
+              claude={formatMinutes(claude.duration_ms)}
+              codex={formatMinutes(codex.duration_ms)}
+            />
+            <MetricCard
+              label="Recorded cost"
+              claude={formatOptionalCost(claude.cost_usd)}
+              codex={formatOptionalCost(codex.cost_usd, "not exposed by codex-cli")}
+            />
+            <MetricCard
+              label="CLI turns"
+              claude={formatOptionalNumber(claude.turns)}
+              codex={formatOptionalNumber(codex.turns, "not exposed")}
+            />
+            <MetricCard
+              label="Model(s) reported"
+              claude={claude.model ?? "—"}
+              codex={codex.model ?? "not exposed"}
+            />
+            <MetricCard
+              label="Output tokens"
+              claude={claude.usage.output_tokens.toLocaleString()}
+              codex={codex.usage.output_tokens.toLocaleString()}
+            />
+            <MetricCard
+              label="Lines added (tracked diff)"
+              claude="1,803"
+              codex="50"
+              footnote="Claude also created untracked app/components/ files (lost after worktree cleanup — see limitations)."
+            />
+          </div>
+        </section>
+
+        {/* ----------- INTERPRETATION ----------- */}
+        <section className="wrap block">
+          <div className="section-head">
+            <h2>What this one experiment suggests</h2>
+          </div>
+          <div className="reads">
+            <div className="read">
+              <h3>Both models can meet the brief.</h3>
+              <p>
+                Every hard requirement in the prompt &mdash; Next.js, TypeScript, responsive layout, hero, social proof,
+                three features, ROI calculator, pricing, FAQ, footer, accessible controls, clean build &mdash; was met by
+                both. Neither produced console errors or mobile overflow.
+              </p>
+            </div>
+            <div className="read">
+              <h3>They interpret ambiguity differently.</h3>
+              <p>
+                &ldquo;No broken links&rdquo; is a great example. Codex read that literally and wired every anchor to a
+                real destination. Claude filled the requirement with <code>#</code> placeholders, which is idiomatic in
+                agency work but fails the strictest reading of the brief.
+              </p>
+            </div>
+            <div className="read">
+              <h3>Structure and effort diverge more than function.</h3>
+              <p>
+                Claude spent more time and more tokens, split work into a component tree, and produced substantially
+                more CSS. Codex kept everything in three files with denser, more compact styling. The user-visible
+                surface areas both cover the brief; the source shapes are very different.
+              </p>
+            </div>
+            <div className="read">
+              <h3>Deterministic checks are supporting evidence, not a verdict.</h3>
+              <p>
+                Claude&apos;s pricing was flagged missing when it was in fact present. Treat pass/fail counts as a
+                floor, and lean on the screenshots and diffs when the two disagree.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* ----------- RAW EVIDENCE ----------- */}
         <section className="wrap block" id="raw">
-          <h2>Other recorded evidence</h2>
+          <div className="section-head">
+            <h2>Raw evidence &amp; methodology</h2>
+            <p className="section-sub">
+              Every claim above is drawn from the files below. The starting commit, exact prompt bytes, and prompt SHA-256
+              are pinned so this run is reproducible.
+            </p>
+          </div>
+
+          <dl className="facts">
+            <div><dt>Starting commit</dt><dd><code>{evidence.starting_git_commit}</code></dd></div>
+            <div><dt>Prompt SHA-256</dt><dd><code>{evidence.prompt_sha256}</code></dd></div>
+            <div><dt>Run date</dt><dd>{new Date(evidence.run_date).toUTCString()}</dd></div>
+            <div><dt>Method</dt><dd>{evidence.methodology}</dd></div>
+          </dl>
+
           <ul className="file-list">
-            {links.map(([label, href]) => <li key={href}><a href={href}>{label}</a></li>)}
+            {rawFiles.map(([label, href]) => (
+              <li key={href}><a href={href}>{label}</a></li>
+            ))}
           </ul>
-          <details>
-            <summary>Recorded limitations</summary>
-            <ul>{[...evidence.limitations, ...(evidence.evidence_limitations || [])].map((item) => <li key={item}>{item}</li>)}</ul>
+
+          <details className="limits">
+            <summary>Recorded limitations we are being transparent about</summary>
+            <ul>
+              {[...evidence.limitations, ...(evidence.evidence_limitations || [])].map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
           </details>
         </section>
       </main>
-      <footer><div className="wrap">WhichBuildWon · neutral experiment fixture</div></footer>
+
+      <footer>
+        <div className="wrap">WhichBuildWon &middot; neutral experiment fixture</div>
+      </footer>
     </>
   );
 }
+
+function DiffRow({
+  title,
+  claudeValue,
+  codexValue,
+  takeaway,
+  flag,
+}: {
+  title: string;
+  claudeValue: string;
+  codexValue: string;
+  takeaway: string;
+  flag?: "claude" | "codex";
+}) {
+  return (
+    <article className="diff">
+      <h3>{title}</h3>
+      <div className="diff-body">
+        <div className={`diff-cell ${flag === "claude" ? "diff-flagged" : ""}`}>
+          <span className="chip chip-claude">Claude</span>
+          <p>{claudeValue}</p>
+        </div>
+        <div className={`diff-cell ${flag === "codex" ? "diff-flagged" : ""}`}>
+          <span className="chip chip-codex">Codex</span>
+          <p>{codexValue}</p>
+        </div>
+      </div>
+      <p className="diff-takeaway">{takeaway}</p>
+    </article>
+  );
+}
+
+function MetricCard({
+  label,
+  claude,
+  codex,
+  footnote,
+}: {
+  label: string;
+  claude: string;
+  codex: string;
+  footnote?: string;
+}) {
+  return (
+    <article className="metric">
+      <h3>{label}</h3>
+      <div className="metric-row">
+        <div><span className="chip chip-claude">Claude</span><span className="metric-val">{claude}</span></div>
+        <div><span className="chip chip-codex">Codex</span><span className="metric-val">{codex}</span></div>
+      </div>
+      {footnote && <p className="metric-foot">{footnote}</p>}
+    </article>
+  );
+}
