diff --git a/app/globals.css b/app/globals.css
index 74da31f..fc29873 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,51 +1,533 @@
 * { box-sizing: border-box; }
-:root { --ink:#070a1a; --body:#36405d; --blue:#4865ff; --line:#dfe3eb; --soft:#f7f8fb; }
+
+:root {
+  --ink: #10131d;
+  --body: #525866;
+  --muted: #7a8190;
+  --blue: #4d5df5;
+  --blue-dark: #2d36bc;
+  --line: #dfe2e8;
+  --soft-line: #eceef2;
+  --paper: #fbfaf7;
+  --white: #fff;
+  --violet: #5d52e8;
+  --violet-soft: #efedff;
+  --green: #137762;
+  --green-soft: #e7f4ef;
+  --yellow: #f8cf63;
+}
+
 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: var(--paper);
+  color: var(--body);
+  font: 16px/1.55 Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+main, header, footer, section, article, aside, div { min-width: 0; }
+img { display: block; max-width: 100%; height: auto; }
+a { color: inherit; }
+button, summary, a { -webkit-tap-highlight-color: transparent; }
+svg { display: block; }
+code, dd { overflow-wrap: anywhere; }
+.wrap { width: min(1180px, calc(100% - 56px)); margin-inline: auto; }
+
+.site-header {
+  position: sticky;
+  z-index: 20;
+  top: 0;
+  border-bottom: 1px solid rgba(16, 19, 29, .1);
+  background: rgba(251, 250, 247, .92);
+  backdrop-filter: blur(16px);
+}
+.nav-row { display: flex; height: 68px; align-items: center; gap: 18px; }
+.wordmark {
+  color: var(--ink);
+  font-size: 19px;
+  font-weight: 800;
+  letter-spacing: -.045em;
+  text-decoration: none;
+}
+.wordmark span { color: var(--blue); }
+.case-tag {
+  border-left: 1px solid var(--line);
+  padding-left: 18px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+nav { display: flex; margin-left: auto; align-items: center; gap: 28px; }
+nav a { color: #333946; font-size: 13px; font-weight: 700; text-decoration: none; }
+nav a:hover, nav a:focus-visible { color: var(--blue); }
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .72fr);
+  gap: 72px;
+  padding-top: 108px;
+  padding-bottom: 78px;
+}
+.hero-copy { align-self: center; }
+.eyebrow {
+  margin: 0 0 16px;
+  color: var(--blue-dark);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: .13em;
+  text-transform: uppercase;
+}
+h1, h2, h3, blockquote, p { text-wrap: pretty; }
+h1, h2, h3 {
+  color: var(--ink);
+  font-weight: 760;
+  letter-spacing: -.05em;
+  line-height: 1.04;
+}
+h1 { max-width: 740px; margin: 0; font-size: clamp(52px, 6.8vw, 86px); }
+.dek {
+  max-width: 710px;
+  margin: 28px 0 26px;
+  color: #404653;
+  font-size: clamp(18px, 2vw, 22px);
+  line-height: 1.5;
+}
+.text-link, .build-meta a, .score-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--blue-dark);
+  font-size: 13px;
+  font-weight: 800;
+  text-decoration: none;
+}
+.text-link { padding-bottom: 3px; border-bottom: 1px solid currentColor; }
+.text-link svg, .build-meta svg, .score-link svg, .evidence-index svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.5;
+  transition: transform 160ms ease;
+}
+.text-link:hover svg, .build-meta a:hover svg, .score-link:hover svg, .evidence-index a:hover svg { transform: translateX(3px); }
+
+.verdict-card {
+  position: relative;
+  overflow: hidden;
+  align-self: center;
+  padding: 28px;
+  border: 1px solid #1d2231;
+  border-radius: 3px;
+  background: var(--ink);
+  box-shadow: 16px 16px 0 #e7e4dc;
+  color: #c9cdd5;
+}
+.verdict-card::before {
+  position: absolute;
+  top: -80px;
+  right: -60px;
+  width: 210px;
+  height: 210px;
+  border-radius: 50%;
+  background: rgba(77, 93, 245, .32);
+  content: "";
+  filter: blur(2px);
+}
+.verdict-topline {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  color: #aeb4c1;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+.live-dot { display: inline-flex; align-items: center; gap: 6px; }
+.live-dot::before { width: 6px; height: 6px; border-radius: 50%; background: #6ee7b7; content: ""; }
+.verdict-number {
+  position: relative;
+  margin: 30px 0 3px;
+  color: var(--white);
+  font-size: 78px;
+  font-weight: 800;
+  letter-spacing: -.07em;
+  line-height: .9;
+}
+.verdict-number span { color: #7b8498; font-size: 30px; letter-spacing: -.03em; }
+.verdict-card h2 { position: relative; margin: 18px 0 13px; color: var(--white); font-size: 24px; }
+.verdict-card > p:not(.verdict-number) { position: relative; margin: 0; font-size: 13px; line-height: 1.65; }
+.verdict-card .verdict-scope {
+  margin-top: 21px !important;
+  padding-top: 17px;
+  border-top: 1px solid #303647;
+  color: #8f97a8;
+  font-size: 11px !important;
+}
+.question-strip {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: 170px 1fr;
+  gap: 24px;
+  align-items: start;
+  margin-top: 24px;
+  padding-top: 28px;
+  border-top: 1px solid var(--line);
+}
+.question-strip span {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+.question-strip p { max-width: 850px; margin: 0; color: var(--ink); font-size: 21px; font-weight: 700; line-height: 1.35; }
+
+.build-intro { padding: 104px 0 112px; border-top: 1px solid var(--line); background: #f1f0eb; }
+.section-heading { max-width: 760px; margin-bottom: 48px; }
+.section-heading h2, .checks-copy h2 { margin: 0; font-size: clamp(36px, 4.4vw, 58px); }
+.section-heading > p:last-child, .split-heading > p, .checks-copy > p {
+  margin: 20px 0 0;
+  color: #626977;
+  font-size: 17px;
+  line-height: 1.65;
+}
+.build-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
+.build-card {
+  padding: 24px;
+  border: 1px solid #d7d8da;
+  border-top: 4px solid var(--violet);
+  border-radius: 4px;
+  background: var(--white);
+}
+.build-card.green { border-top-color: var(--green); }
+.build-card-head {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 20px;
+  min-height: 205px;
+  padding: 4px 2px 24px;
+}
+.build-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
+.build-kicker span:first-child { color: var(--ink); font-size: 13px; font-weight: 800; }
+.build-kicker span:last-child {
+  padding: 4px 7px;
+  border-radius: 999px;
+  background: var(--violet-soft);
+  color: #4f43d9;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.green .build-kicker span:last-child { background: var(--green-soft); color: #0c654f; }
+.build-card h3 { max-width: 400px; margin: 0; font-size: clamp(25px, 2.5vw, 34px); }
+.build-card-head p { max-width: 440px; margin: 14px 0 0; color: #686f7d; font-size: 14px; line-height: 1.6; }
+.score-badge {
+  display: flex;
+  width: 67px;
+  height: 67px;
+  align-items: baseline;
+  justify-content: center;
+  padding-top: 17px;
+  border: 1px solid #dadce3;
+  border-radius: 50%;
+  color: var(--ink);
+}
+.score-badge strong { font-size: 23px; line-height: 1; }
+.score-badge span { color: var(--muted); font-size: 10px; }
+.capture-shell {
+  overflow: hidden;
+  border: 1px solid #cfd2d9;
+  border-radius: 5px;
+  background: #e8e9ec;
+  box-shadow: 0 14px 35px rgba(27, 31, 41, .1);
+}
+.browser-bar {
+  display: flex;
+  height: 34px;
+  align-items: center;
+  gap: 5px;
+  padding: 0 10px;
+  border-bottom: 1px solid #d7d9de;
+  background: #f7f7f8;
+}
+.browser-bar > span { width: 6px; height: 6px; border-radius: 50%; background: #c6c9cf; }
+.browser-bar > div {
+  width: 42%;
+  margin: 0 auto;
+  padding: 3px 8px;
+  border: 1px solid #e0e1e4;
+  border-radius: 4px;
+  background: var(--white);
+  color: #a1a5ad;
+  font-size: 7px;
+  line-height: 1;
+  text-align: center;
+}
+.capture-scroll {
+  height: min(58vw, 720px);
+  min-height: 520px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-color: #b7bac3 transparent;
+  scrollbar-width: thin;
+}
+.capture-scroll img { width: 100%; height: auto; }
+.build-meta { display: flex; justify-content: space-between; gap: 16px; padding: 18px 2px 0; color: var(--muted); font-size: 11px; }
+.build-meta a { font-size: 11px; }
+.mobile-proof { margin-top: 18px; border-top: 1px solid var(--soft-line); padding-top: 16px; }
+.mobile-proof summary, .limitations summary { color: #3b414d; font-size: 12px; font-weight: 800; cursor: pointer; }
+.phone-frame {
+  width: min(320px, 100%);
+  max-height: 690px;
+  margin: 22px auto 5px;
+  overflow-y: auto;
+  border: 7px solid #171a21;
+  border-radius: 24px;
+  background: var(--white);
+  box-shadow: 0 18px 35px rgba(27, 31, 41, .18);
+  scrollbar-width: thin;
+}
+.phone-frame img { width: 100%; }
+
+.comparison { padding-top: 112px; padding-bottom: 120px; }
+.split-heading { display: grid; max-width: none; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; }
+.split-heading > p { margin: 0 0 4px; }
+.comparison-table { border-top: 1px solid #cfd2d8; }
+.comparison-row {
+  display: grid;
+  grid-template-columns: .62fr 1fr 1fr;
+  gap: 34px;
+  padding: 25px 0;
+  border-bottom: 1px solid var(--line);
+  color: #555c69;
+  font-size: 14px;
+  line-height: 1.6;
+}
+.comparison-header {
+  padding: 14px 0;
+  color: var(--ink);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.comparison-header > div { display: flex; align-items: center; }
+.dimension { color: var(--ink); font-weight: 800; }
+.comparison-row strong { color: #292e39; }
+.agent-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; }
+.violet-dot { background: var(--violet); }
+.green-dot { background: var(--green); }
+
+.checks-section { padding: 110px 0; background: #10131d; color: #aeb4c0; }
+.checks-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 105px; align-items: start; }
+.checks-copy .eyebrow { color: #8f99ff; }
+.checks-copy h2 { color: var(--white); }
+.checks-copy > p { color: #aeb4c0; }
+.pass-list { display: grid; gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; }
+.pass-list li { display: flex; gap: 11px; align-items: flex-start; color: #d3d6dd; font-size: 13px; }
+.pass-list svg {
+  width: 17px;
+  height: 17px;
+  flex: 0 0 auto;
+  margin-top: 2px;
+  fill: none;
+  stroke: #6ee7b7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}
+.scoreboard { padding: 30px; border: 1px solid #313746; border-radius: 3px; background: #161a25; }
+.score-row { display: grid; grid-template-columns: 100px 1fr 55px; gap: 16px; align-items: center; padding: 13px 0; }
+.score-row > div:first-child { display: flex; align-items: center; color: var(--white); font-size: 13px; }
+.score-row b { color: var(--white); font-size: 15px; text-align: right; }
+.score-track { height: 6px; overflow: hidden; border-radius: 999px; background: #2e3442; }
+.score-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c89ff, #5ce0b8); }
+.miss-card {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 4px 18px;
+  margin-top: 15px;
+  padding: 17px 18px;
+  border-left: 3px solid var(--yellow);
+  background: #222735;
+}
+.miss-card > span {
+  grid-column: 1 / -1;
+  color: #aeb4c0;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+.miss-card strong { color: var(--white); font-size: 13px; }
+.miss-card p { margin: 0; color: #9da4b2; font-size: 11px; text-align: right; }
+.detector-miss { border-left-color: #8f99ff; }
+.score-link { margin-top: 27px; color: #aeb6ff; }
+
+.takeaway { display: grid; grid-template-columns: 1fr 320px; gap: 90px; align-items: end; padding-top: 116px; padding-bottom: 116px; }
+.takeaway blockquote {
+  max-width: 800px;
+  margin: 0;
+  color: var(--ink);
+  font-size: clamp(32px, 4.3vw, 55px);
+  font-weight: 720;
+  letter-spacing: -.045em;
+  line-height: 1.13;
+}
+.takeaway aside { padding-top: 17px; border-top: 3px solid var(--ink); }
+.takeaway aside span { color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
+.takeaway aside p { margin: 14px 0 0; color: #666d79; font-size: 13px; line-height: 1.65; }
+
+.method-section { padding: 108px 0 95px; border-top: 1px solid var(--line); background: #eeeee9; }
+.method-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 28px; border-top: 1px solid #cfd1d1; }
+.method-facts div {
+  display: grid;
+  grid-template-columns: 145px 1fr;
+  gap: 16px;
+  padding: 18px 20px 18px 0;
+  border-bottom: 1px solid #cfd1d1;
+}
+.method-facts div:nth-child(odd) { border-right: 1px solid #cfd1d1; }
+.method-facts div:nth-child(even) { padding-left: 20px; }
+.method-facts dt {
+  color: #757b84;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.method-facts dd { margin: 0; color: #303540; font-size: 12px; }
+.method-facts code { font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.prompt-disclosure { margin-top: 30px; border: 1px solid #c9cbcd; background: var(--paper); }
+.prompt-disclosure summary { display: flex; justify-content: space-between; gap: 30px; padding: 19px 21px; color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; }
+.prompt-disclosure summary span:last-child { color: var(--muted); font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
+pre {
+  max-height: 440px;
+  margin: 0;
+  overflow: auto;
+  padding: 24px;
+  border-top: 1px solid var(--line);
+  background: #171a22;
+  color: #e3e6ed;
+  font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: pre-wrap;
+}
+.evidence-index { display: grid; grid-template-columns: 160px 1fr; gap: 20px; margin-top: 55px; }
+.evidence-index > p { margin: 4px 0 0; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
+.evidence-index ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
+.evidence-index a {
+  display: flex;
+  min-height: 46px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 13px;
+  border: 1px solid #d0d2d3;
+  background: rgba(255, 255, 255, .46);
+  color: #353b46;
+  font-size: 11px;
+  font-weight: 700;
+  text-decoration: none;
+}
+.evidence-index a:hover { border-color: var(--blue); color: var(--blue-dark); }
+.evidence-index svg { width: 14px; height: 14px; flex: 0 0 auto; }
+.limitations { margin-top: 28px; padding: 17px 0; border-top: 1px solid #cfd1d1; border-bottom: 1px solid #cfd1d1; }
+.limitations ul { display: grid; gap: 10px; margin: 18px 0 0; padding-left: 20px; color: #626873; font-size: 12px; }
+
+.site-footer { padding: 34px 0; background: #10131d; }
+.footer-row { display: flex; align-items: center; gap: 30px; }
+.footer-mark { color: var(--white); }
+.footer-row p { margin: 0 auto; color: #7f8797; font-size: 11px; }
+.footer-row > a:last-child { color: #b8bec9; font-size: 11px; font-weight: 700; text-decoration: none; }
+
+@media (max-width: 960px) {
+  .hero { grid-template-columns: 1fr 340px; gap: 38px; }
+  .checks-grid { gap: 55px; }
+  .takeaway { grid-template-columns: 1fr 260px; gap: 50px; }
+  .evidence-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 820px) {
+  .wrap { width: min(calc(100% - 40px), 680px); }
+  nav { display: none; }
+  .case-tag { margin-left: auto; }
+  .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 72px; padding-bottom: 65px; }
+  .verdict-card { max-width: 520px; }
+  .question-strip { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
+  .build-intro, .comparison, .checks-section, .method-section { padding-top: 78px; padding-bottom: 82px; }
+  .build-grid, .checks-grid { grid-template-columns: 1fr; }
+  .build-card-head { min-height: auto; }
+  .capture-scroll { height: 680px; min-height: 0; }
+  .split-heading { grid-template-columns: 1fr; gap: 12px; }
+  .comparison-row { grid-template-columns: 135px 1fr 1fr; gap: 20px; }
+  .checks-grid { gap: 50px; }
+  .takeaway { grid-template-columns: 1fr; gap: 48px; padding-top: 82px; padding-bottom: 82px; }
+  .takeaway aside { max-width: 420px; }
+  .method-facts { grid-template-columns: 1fr; }
+  .method-facts div:nth-child(odd) { border-right: 0; }
+  .method-facts div:nth-child(even) { padding-left: 0; }
+  .evidence-index { grid-template-columns: 1fr; gap: 12px; }
+}
+
+@media (max-width: 620px) {
+  .wrap { width: calc(100% - 32px); }
+  .site-header { position: relative; }
+  .nav-row { height: 62px; }
+  .wordmark { font-size: 17px; }
+  .case-tag { font-size: 9px; }
+  .hero { padding-top: 58px; padding-bottom: 55px; }
+  h1 { font-size: clamp(47px, 14vw, 66px); }
+  .dek { margin-top: 22px; font-size: 18px; }
+  .verdict-card { margin-right: 8px; padding: 24px; box-shadow: 8px 8px 0 #e7e4dc; }
+  .verdict-number { font-size: 66px; }
+  .question-strip p { font-size: 18px; }
+  .section-heading { margin-bottom: 35px; }
+  .section-heading h2, .checks-copy h2 { font-size: 38px; }
+  .section-heading > p:last-child, .split-heading > p, .checks-copy > p { font-size: 15px; }
+  .build-card { padding: 16px; }
+  .build-card-head { grid-template-columns: 1fr; gap: 16px; padding-bottom: 21px; }
+  .build-kicker { margin-bottom: 16px; }
+  .build-card h3 { max-width: 300px; font-size: 28px; }
+  .score-badge { width: auto; height: auto; justify-content: flex-start; gap: 2px; padding: 0; border: 0; border-radius: 0; }
+  .score-badge strong { font-size: 18px; }
+  .capture-scroll { height: 515px; }
+  .build-meta { align-items: flex-start; flex-direction: column; gap: 7px; }
+  .comparison-table { border-top: 0; }
+  .comparison-header { display: none; }
+  .comparison-row { grid-template-columns: 1fr; gap: 10px; padding: 25px 0; }
+  .comparison-row > div:not(.dimension) { position: relative; padding-left: 18px; }
+  .comparison-row > div:not(.dimension)::before {
+    position: absolute;
+    top: 8px;
+    left: 0;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--violet);
+    content: "";
+  }
+  .comparison-row > div:last-child::before { background: var(--green); }
+  .scoreboard { padding: 20px 16px; }
+  .score-row { grid-template-columns: 82px 1fr 49px; gap: 10px; }
+  .miss-card { grid-template-columns: 1fr; }
+  .miss-card p { text-align: left; }
+  .takeaway blockquote { font-size: 35px; }
+  .method-facts div { grid-template-columns: 1fr; gap: 5px; }
+  .prompt-disclosure summary { align-items: flex-start; flex-direction: column; gap: 6px; }
+  .evidence-index ul { grid-template-columns: 1fr; }
+  .footer-row { align-items: flex-start; flex-direction: column; gap: 13px; }
+  .footer-row p { margin: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  * { transition-duration: .01ms !important; }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index ec9d266..5e07487 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: "Claude Code vs Codex: One Brief, Two Builds | WhichBuildWon",
+  description: "A screenshot-led case study comparing how Claude Code and Codex answered the same one-shot SaaS landing-page brief.",
 };
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
diff --git a/app/page.tsx b/app/page.tsx
index 9c306ea..308a85f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,124 +1,350 @@
-import evidence from "../public/evidence/raw-run/results.json";
+import Image, { type StaticImageData } from "next/image";
 
-const links = [
-  ["Frozen results JSON", "/evidence/raw-run/results.json"],
-  ["Original exact prompt", "/evidence/raw-run/prompt.txt"],
-  ["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"],
-];
+import claudeDesktop from "../public/evidence/claude-desktop.png";
+import claudeMobile from "../public/evidence/claude-mobile.png";
+import codexDesktop from "../public/evidence/codex-desktop.png";
+import codexMobile from "../public/evidence/codex-mobile.png";
+import evidence from "../public/evidence/raw-run/results.json";
 
-const contestants = [
+const builds = [
   {
     key: "claude",
     name: "Claude Code",
-    desktop: "/evidence/claude-desktop.png",
-    mobile: "/evidence/claude-mobile.png",
-    result: evidence.contestants.claude,
+    label: "Product-dense",
+    headline: "Run your team's ops on autopilot",
+    description:
+      "A dark, compact SaaS page built around task UI, customer quotes, and three output-focused feature sections.",
+    desktop: claudeDesktop,
+    mobile: claudeMobile,
+    accent: "violet",
+    score: evidence.contestants.claude.grader.summary.passed,
+    duration: "12m 24s",
   },
   {
     key: "codex",
     name: "Codex",
-    desktop: "/evidence/codex-desktop.png",
-    mobile: "/evidence/codex-mobile.png",
-    result: evidence.contestants.codex,
+    label: "Editorial",
+    headline: "Less busywork. More momentum.",
+    description:
+      "An airy, white-and-green page that explains Relay as a three-step workflow, with bespoke product illustrations throughout.",
+    desktop: codexDesktop,
+    mobile: codexMobile,
+    accent: "green",
+    score: evidence.contestants.codex.grader.summary.passed,
+    duration: "7m 35s",
   },
 ] as const;
 
+const rawFiles = [
+  ["Frozen result", "/evidence/raw-run/results.json"],
+  ["Exact shared prompt", "/evidence/raw-run/prompt.txt"],
+  ["Claude checks", "/evidence/raw-run/claude/grader.json"],
+  ["Codex checks", "/evidence/raw-run/codex/grader.json"],
+  ["Claude rendered snapshot", "/evidence/raw-run/claude/rendered-page-snapshot.html"],
+  ["Claude source diff", "/evidence/raw-run/claude/final.diff"],
+  ["Codex source diff", "/evidence/raw-run/codex/final.diff"],
+  ["Run validation", "/evidence/raw-run/validation.json"],
+  ["Evidence manifest", "/evidence/raw-run/manifest.json"],
+] as const;
+
+function ArrowIcon() {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true">
+      <path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true">
+      <path d="m3.25 8.25 3 3 6.5-6.5" />
+    </svg>
+  );
+}
+
+function DesktopCapture({ image, name }: { image: StaticImageData; name: string }) {
+  return (
+    <div className="capture-shell">
+      <div className="browser-bar" aria-hidden="true">
+        <span />
+        <span />
+        <span />
+        <div>relay.test</div>
+      </div>
+      <div className="capture-scroll">
+        <Image
+          src={image}
+          alt={`${name} desktop Relay landing page from the recorded run`}
+          sizes="(max-width: 820px) calc(100vw - 40px), 45vw"
+        />
+      </div>
+    </div>
+  );
+}
+
 export default function Home() {
   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 className="wordmark" href="#top" aria-label="WhichBuildWon home">
+            Which<span>Build</span>Won
+          </a>
+          <div className="case-tag">Case study 001</div>
+          <nav aria-label="Case study navigation">
+            <a href="#builds">The builds</a>
+            <a href="#differences">Differences</a>
             <a href="#evidence">Evidence</a>
-            <a href="#raw">Raw files</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 className="hero wrap">
+          <div className="hero-copy">
+            <p className="eyebrow">One brief · two agents · one shot</p>
+            <h1>Same brief. Two very different instincts.</h1>
+            <p className="dek">
+              Claude went dense and product-led. Codex went spacious and editorial. Both built working,
+              responsive SaaS pages; only Codex cleared every recorded check.
+            </p>
+            <a className="text-link" href="#builds">
+              Compare the builds <ArrowIcon />
+            </a>
+          </div>
+
+          <aside className="verdict-card" aria-label="Experiment result">
+            <div className="verdict-topline">
+              <span>Requirements result</span>
+              <span className="live-dot">Recorded</span>
+            </div>
+            <p className="verdict-number">20<span>/20</span></p>
+            <h2>Codex cleared the checklist.</h2>
+            <p>
+              Claude passed 18/20. One miss was real—20 placeholder links. The other was a detector miss:
+              its screenshot visibly contains three pricing cards.
+            </p>
+            <p className="verdict-scope">A requirements result, not a universal or visual verdict.</p>
+          </aside>
+
+          <div className="question-strip">
+            <span>The question</span>
+            <p>{evidence.experiment_question}</p>
+          </div>
         </section>
 
-        <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>
-            <pre>{evidence.exact_shared_brief}</pre>
-          </details>
+        <section className="build-intro" id="builds">
+          <div className="wrap">
+            <div className="section-heading">
+              <p className="eyebrow">What they actually built</p>
+              <h2>Two complete answers to the same prompt</h2>
+              <p>The screenshots below are the primary evidence. Scroll inside either frame to inspect the full page.</p>
+            </div>
+
+            <div className="build-grid">
+              {builds.map((build) => (
+                <article className={`build-card ${build.accent}`} key={build.key}>
+                  <div className="build-card-head">
+                    <div>
+                      <div className="build-kicker">
+                        <span>{build.name}</span>
+                        <span>{build.label}</span>
+                      </div>
+                      <h3>“{build.headline}”</h3>
+                      <p>{build.description}</p>
+                    </div>
+                    <div className="score-badge" aria-label={`${build.score} of 20 checks passed`}>
+                      <strong>{build.score}</strong>
+                      <span>/20</span>
+                    </div>
+                  </div>
+
+                  <DesktopCapture image={build.desktop} name={build.name} />
+
+                  <div className="build-meta">
+                    <span>{build.duration} recorded elapsed</span>
+                    <a href={`/evidence/${build.key}-desktop.png`}>
+                      Open full capture <ArrowIcon />
+                    </a>
+                  </div>
+
+                  <details className="mobile-proof">
+                    <summary>See recorded mobile capture</summary>
+                    <div className="phone-frame">
+                      <Image
+                        src={build.mobile}
+                        alt={`${build.name} mobile Relay landing page from the recorded run`}
+                        sizes="320px"
+                      />
+                    </div>
+                  </details>
+                </article>
+              ))}
+            </div>
+          </div>
         </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`} />
+        <section className="comparison wrap" id="differences">
+          <div className="section-heading split-heading">
+            <div>
+              <p className="eyebrow">The meaningful differences</p>
+              <h2>Same checklist. Different product stories.</h2>
+            </div>
+            <p>
+              Neither agent merely filled a template. Their choices changed how Relay feels, how quickly the page moves,
+              and what a buyer learns first.
+            </p>
+          </div>
+
+          <div className="comparison-table" role="table" aria-label="Build comparison">
+            <div className="comparison-row comparison-header" role="row">
+              <div role="columnheader">Dimension</div>
+              <div role="columnheader"><span className="agent-dot violet-dot" />Claude Code</div>
+              <div role="columnheader"><span className="agent-dot green-dot" />Codex</div>
+            </div>
+            <div className="comparison-row" role="row">
+              <div className="dimension" role="cell">Visual direction</div>
+              <div role="cell"><strong>Dense and interface-led.</strong> A dark purple hero, compact cards, gradients, and detailed task UI.</div>
+              <div role="cell"><strong>Airy and editorial.</strong> A white hero, oversized type, restrained color, and roomy illustrated sections.</div>
+            </div>
+            <div className="comparison-row" role="row">
+              <div className="dimension" role="cell">Feature story</div>
+              <div role="cell">Three outputs: meeting summaries, status reports, and intelligent task routing.</div>
+              <div role="cell">A three-step workflow: connect tools, describe the outcome, then see the work improve.</div>
+            </div>
+            <div className="comparison-row" role="row">
+              <div className="dimension" role="cell">Trust pattern</div>
+              <div role="cell">Team logos followed immediately by three customer quote cards.</div>
+              <div role="cell">Team logos and a “2,000+ growing teams” cue in the hero, with one customer quote beside the calculator.</div>
+            </div>
+            <div className="comparison-row" role="row">
+              <div className="dimension" role="cell">Mobile treatment</div>
+              <div role="cell">Reflows the same dense component sequence into a long single column.</div>
+              <div role="cell">Stacks the alternating narrative into a more spacious single-column sequence.</div>
+            </div>
+          </div>
+        </section>
+
+        <section className="checks-section">
+          <div className="wrap checks-grid">
+            <div className="checks-copy">
+              <p className="eyebrow">What the checks add</p>
+              <h2>Both pages worked. Codex left fewer loose ends.</h2>
+              <p>
+                Both builds compiled, typechecked, rendered at desktop and mobile, avoided console errors and mobile
+                overflow, and shipped ROI calculators whose output changed under test.
+              </p>
+              <ul className="pass-list">
+                <li><CheckIcon /> Production build and TypeScript passed</li>
+                <li><CheckIcon /> Responsive captures rendered with no material horizontal overflow</li>
+                <li><CheckIcon /> Navigation, hero, features, ROI, pricing, FAQ, and footer were present</li>
+                <li><CheckIcon /> Buttons and form controls passed the accessibility check</li>
+              </ul>
+            </div>
+
+            <div className="scoreboard">
+              <div className="score-row">
+                <div>
+                  <span className="agent-dot green-dot" />
+                  <strong>Codex</strong>
+                </div>
+                <div className="score-track"><span style={{ width: "100%" }} /></div>
+                <b>20/20</b>
+              </div>
+              <div className="score-row">
+                <div>
+                  <span className="agent-dot violet-dot" />
+                  <strong>Claude</strong>
                 </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>
-                </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>
-              </article>
-            ))}
+                <div className="score-track"><span style={{ width: "90%" }} /></div>
+                <b>18/20</b>
+              </div>
+              <div className="miss-card real-miss">
+                <span>Claude miss · substantive</span>
+                <strong>20 links pointed to “#”</strong>
+                <p>The no-broken-links check failed.</p>
+              </div>
+              <div className="miss-card detector-miss">
+                <span>Claude miss · heuristic</span>
+                <strong>Pricing plan count returned 0</strong>
+                <p>The capture visibly shows three tiers; the structural detector did not recognize them.</p>
+              </div>
+              <a className="score-link" href="/evidence/raw-run/results.json">
+                Inspect the frozen result <ArrowIcon />
+              </a>
+            </div>
           </div>
         </section>
 
-        <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>
+        <section className="takeaway wrap">
+          <div className="takeaway-main">
+            <p className="eyebrow">What this run suggests</p>
+            <blockquote>
+              A one-shot brief was enough for both agents to produce coherent, visually distinct product pages. In this
+              run, Codex followed the testable requirements more completely; the screenshots still leave the question
+              of taste to the reader.
+            </blockquote>
           </div>
+          <aside>
+            <span>Keep the scope honest</span>
+            <p>This was one task and one run per agent. No visual winner was selected, and the record does not establish that either agent is universally better.</p>
+          </aside>
         </section>
 
-        <section className="wrap block" id="raw">
-          <h2>Other recorded evidence</h2>
-          <ul className="file-list">
-            {links.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>
+        <section className="method-section" id="evidence">
+          <div className="wrap">
+            <div className="section-heading split-heading">
+              <div>
+                <p className="eyebrow">Method &amp; evidence</p>
+                <h2>Same start. Same prompt. Same grader.</h2>
+              </div>
+              <p>{evidence.methodology}</p>
+            </div>
+
+            <dl className="method-facts">
+              <div><dt>Run</dt><dd>August 26, 2026 · sequential clean worktrees</dd></div>
+              <div><dt>Starting commit</dt><dd><code>{evidence.starting_git_commit}</code></dd></div>
+              <div><dt>Claude model record</dt><dd>{evidence.contestants.claude.model}</dd></div>
+              <div><dt>Codex model record</dt><dd>Not available in the recorded result</dd></div>
+            </dl>
+
+            <details className="prompt-disclosure">
+              <summary>
+                <span>Read the exact shared prompt</span>
+                <span>Prompt SHA-256 · {evidence.prompt_sha256.slice(0, 12)}…</span>
+              </summary>
+              <pre>{evidence.exact_shared_brief}</pre>
+            </details>
+
+            <div className="evidence-index">
+              <p>Raw evidence</p>
+              <ul>
+                {rawFiles.map(([label, href]) => (
+                  <li key={href}>
+                    <a href={href}>{label}<ArrowIcon /></a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <details className="limitations">
+              <summary>Recorded limitations and evidence notes</summary>
+              <ul>
+                {evidence.limitations.map((item) => <li key={item}>{item}</li>)}
+              </ul>
+            </details>
+          </div>
         </section>
       </main>
-      <footer><div className="wrap">WhichBuildWon · neutral experiment fixture</div></footer>
+
+      <footer className="site-footer">
+        <div className="wrap footer-row">
+          <a className="wordmark footer-mark" href="#top">Which<span>Build</span>Won</a>
+          <p>One prompt. Two builds. The evidence decides what it can.</p>
+          <a href="#top">Back to top ↑</a>
+        </div>
+      </footer>
     </>
   );
 }
