From 69b039769130a77871b4a4ca09027a7797a8387b Mon Sep 17 00:00:00 2001
From: 0thernet <benzguo@gmail.com>
Date: Sun, 27 Sep 2026 18:25:41 -0400
Subject: [PATCH 1/6] Recover quiet Gobstopper homepage and mobile layout

---
 site/app/_components/site-chrome.tsx |  30 +-
 site/app/globals.css                 | 189 +----------
 site/app/hero-field.tsx              |  98 ------
 site/app/hero-graphic.tsx            | 153 ---------
 site/app/layout.tsx                  |   2 +-
 site/app/page.tsx                    | 456 +++++++++++++--------------
 6 files changed, 235 insertions(+), 693 deletions(-)
 delete mode 100644 site/app/hero-field.tsx
 delete mode 100644 site/app/hero-graphic.tsx

diff --git a/site/app/_components/site-chrome.tsx b/site/app/_components/site-chrome.tsx
index b638a307..2185597e 100644
--- a/site/app/_components/site-chrome.tsx
+++ b/site/app/_components/site-chrome.tsx
@@ -17,6 +17,14 @@ import { supportProfile } from "../support-profile";
 // eslint-disable-next-line @next/next/no-img-element
 const productMark = <img alt="" height={20} src="/icon.png" width={20} />;
 
+const headerLinks: readonly { href: string; label: string; section?: string }[] = [
+  { href: "/docs", label: "Docs", section: "/docs" },
+  { href: "/benchmarks", label: "Benchmarks", section: "/benchmarks" },
+  { href: "/compare/claude-code-compact", label: "Compare", section: "/compare" },
+  { href: "/blog", label: "Blog", section: "/blog" },
+  { href: GITHUB_URL, label: "GitHub" },
+];
+
 export function SiteHeader({ path }: Readonly<{ path?: CanonicalPagePath }>) {
   return (
     <>
@@ -30,22 +38,12 @@ export function SiteHeader({ path }: Readonly<{ path?: CanonicalPagePath }>) {
         brand="Gobstopper"
         brandMark="/marks/gobstopper.svg"
         brandLabel="Gobstopper home"
-        className={
-          path === "/"
-            ? "site-header hraness-material-chrome"
-            : "site-header"
-        }
-        links={[
-          { href: "/#model", label: "Model" },
-          { href: "/#interfaces", label: "Interfaces" },
-          { href: "/docs", label: "Docs" },
-          { href: "/methodology", label: "Methodology" },
-          { href: "/benchmarks", label: "Benchmarks" },
-          { href: "/compare/claude-code-compact", label: "Compare" },
-          { href: "/blog", label: "Blog" },
-          { href: ARCHITECTURE_URL, label: "Architecture" },
-          { href: GITHUB_URL, label: "GitHub" },
-        ]}
+        className="site-header hraness-material-chrome"
+        links={headerLinks.map(({ href, label, section }) => ({
+          href,
+          label,
+          current: path !== undefined && section !== undefined && path.startsWith(section),
+        }))}
       />
     </>
   );
diff --git a/site/app/globals.css b/site/app/globals.css
index 033a46f7..1d7c96d0 100644
--- a/site/app/globals.css
+++ b/site/app/globals.css
@@ -17,8 +17,6 @@
 :root {
   --hraness-site-accent: var(--primary);
   --hraness-site-accent-ink: var(--primary-foreground);
-  --inverse-background: #14202a;
-  --gobstopper-code-foreground: #eef2ea;
   --font-heading: var(--font-text);
   font-synthesis: none;
   line-height: 1.55;
@@ -70,39 +68,9 @@ a:focus-visible {
   block-size: 1.25em;
 }
 
-.gobstopper-marketing-hero .hraness-marketing-hero__heading {
-  max-inline-size: 22ch;
-}
-
-.hraness-marketing-stats {
-  --hraness-marketing-fact-columns: 4;
-}
-
-.transcript {
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  border-radius: 0;
-}
-
-.hraness-marketing-proof-frame__content > .transcript {
-  padding: 1.15rem 1.25rem;
-}
-
-.record-link,
-.interface-link {
-  margin: 0;
-  font-size: 0.95rem;
-  font-weight: 500;
-}
-
-.hraness-marketing-section__body > .record-link {
-  justify-self: start;
-}
-
 /* Links inside body copy stay underlined; the grammar's buttons do not. */
-.record-link a,
-.interface-link a,
 .install-note a,
+.gob-proof__note a,
 .hraness-marketing-maker__links a,
 .hraness-marketing-question__answer a {
   color: var(--foreground);
@@ -111,31 +79,13 @@ a:focus-visible {
   text-underline-offset: 0.18em;
 }
 
-.record-link a:hover,
-.interface-link a:hover,
 .install-note a:hover,
+.gob-proof__note a:hover,
 .hraness-marketing-maker__links a:hover,
 .hraness-marketing-question__answer a:hover {
   text-decoration-color: currentColor;
 }
 
-/* The trace section: the heading group stays at the top of its column and
- * follows the reader while the trace and record scroll past. */
-#trace[data-layout="split"] {
-  align-items: start;
-}
-
-@media (min-width: 48.01rem) {
-  #trace > .hraness-marketing-section__heading-group {
-    position: sticky;
-    inset-block-start: 5rem;
-  }
-}
-
-.hraness-marketing-interface pre {
-  flex: 1 1 auto;
-}
-
 .install-command {
   white-space: pre;
 }
@@ -221,12 +171,6 @@ a { text-underline-offset: 0.2em; }
 .document-page article ol { list-style: decimal; padding-left: 1.5rem; margin: 1rem 0; }
 .document-page article li + li { margin-top: 0.5rem; }
 
-/* The product's command transcript retains its fixed code contrast. */
-.gobstopper-marketing-hero .hraness-marketing-proof-frame {
-  --hraness-marketing-inverse: var(--inverse-background);
-  --hraness-marketing-inverse-ink: var(--gobstopper-code-foreground);
-}
-
 /* The existing grammar owns layout and controls. Lantern supplies only material
    paint; these bridges keep old compiled peers and their focus rules intact. */
 [data-hraness-material="lantern"] .hraness-marketing-header.hraness-material-chrome {
@@ -235,20 +179,6 @@ a { text-underline-offset: 0.2em; }
   background: var(--hraness-material-chrome-paint, var(--hraness-material-plane));
   border-block-end-color: var(--hraness-material-seam);
 }
-@media (max-width: 48rem) {
-  /* Wrapped navigation has a variable height; keep anchor headings unobscured. */
-  [data-hraness-material="lantern"] .hraness-marketing-header.hraness-material-chrome {
-    position: static;
-  }
-}
-[data-hraness-marketing-preset="editorial"] .hraness-material-wall > .hraness-marketing-hero {
-  padding-inline: var(--hraness-marketing-gutter);
-}
-[data-hraness-material="lantern"] .hraness-marketing-proof-frame.hraness-material-pane {
-  --hraness-marketing-line: var(--hraness-material-seam);
-  --hraness-marketing-surface: var(--hraness-material-plane);
-  box-shadow: var(--hraness-material-lift);
-}
 
 /* A framed component already draws its own boundary; a ruled section directly
    after it would stack a second hairline on the card edge. */
@@ -280,8 +210,6 @@ a { text-underline-offset: 0.2em; }
   color: var(--hraness-material-ink);
 }
 
-.gobstopper-topic-icon { display: block; width: 88px; height: 88px; margin: 0 0 18px; }
-
 .gob-agent-marks {
   display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center;
 }
@@ -290,119 +218,6 @@ a { text-underline-offset: 0.2em; }
   margin-block-end: 2rem;
 }
 
-/* ── Hero: ambient compaction field ─────────────────────────────────────── */
-.gob-opening { position: relative; overflow: clip; }
-.gob-opening .gobstopper-marketing-hero { position: relative; z-index: 1; }
-/* The shared backdrop is measured against the hero column; this opening lets
-   the field span the full wall so the haze dies at the viewport edges. */
-.gob-opening .hraness-marketing-hero-backdrop { margin-inline: calc(50% - 50vw); }
-.gob-opening .gobstopper-marketing-hero::before {
-  content: ""; position: absolute; inset: -2rem -4rem; z-index: -1; pointer-events: none;
-  background: radial-gradient(ellipse 72% 64% at 50% 55%, color-mix(in srgb, var(--background) 82%, transparent), color-mix(in srgb, var(--background) 50%, transparent) 58%, transparent);
-}
-.gob-field { pointer-events: none; z-index: 0; position: absolute; inset: 0; overflow: clip; }
-.gob-field::after {
-  content: ""; pointer-events: none; position: absolute; inset: 0;
-  background:
-    linear-gradient(to right,
-      var(--background),
-      color-mix(in srgb, var(--background) 78%, transparent) 5%,
-      color-mix(in srgb, var(--background) 42%, transparent) 11%,
-      color-mix(in srgb, var(--background) 15%, transparent) 18%,
-      transparent 25%,
-      transparent 75%,
-      color-mix(in srgb, var(--background) 15%, transparent) 82%,
-      color-mix(in srgb, var(--background) 42%, transparent) 89%,
-      color-mix(in srgb, var(--background) 78%, transparent) 95%,
-      var(--background)),
-    linear-gradient(to bottom, var(--background), transparent 20%, transparent 84%, var(--background));
-}
-.gob-edges { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
-.gob-edge {
-  fill: none; stroke: var(--gob-edge-color, color-mix(in srgb, var(--muted) 55%, transparent));
-  stroke-width: 1.1px; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke;
-  opacity: calc(.3 + var(--hraness-hero-proximity, 0) * .7); transition: opacity .45s;
-}
-.gob-edge--pulse { stroke-dasharray: 5 55; stroke-dashoffset: calc(var(--hraness-hero-proximity, 0) * -24px); }
-.gob-edge-label {
-  position: absolute; translate: -50% -50%; padding: .12rem .4rem; border-radius: 999px;
-  background: color-mix(in srgb, var(--hraness-material-plane) 78%, transparent);
-  color: var(--muted); font: italic .5625rem var(--font-mono); letter-spacing: .02em;
-  white-space: nowrap; opacity: calc(.25 + var(--hraness-hero-proximity, 0) * .75); transition: opacity .45s;
-}
-.gob-field-note {
-  position: absolute; left: var(--x); top: var(--y); inline-size: var(--w);
-  translate: -50% -50%; rotate: var(--r, 0deg); pointer-events: none;
-  padding: .8rem .95rem; border: 1px solid var(--hraness-material-seam); border-radius: .8rem;
-  background: color-mix(in srgb, var(--hraness-material-plane) 90%, transparent);
-  box-shadow: var(--hraness-material-lift);
-  opacity: calc(.46 + var(--hraness-hero-proximity, 0) * .54);
-  filter: blur(calc((1 - var(--hraness-hero-proximity, 0)) * 1.9px));
-  transform: translate(var(--hraness-hero-drift-x, 0px), var(--hraness-hero-drift-y, 0px));
-}
-.gob-field-note-type {
-  display: inline-block; margin-block-end: .45rem; padding: .1rem .42rem; border-radius: 999px;
-  background: color-mix(in srgb, var(--gob-note-accent, var(--hraness-site-accent)) 12%, transparent);
-  color: var(--gob-note-accent, var(--hraness-site-accent));
-  font: 600 .5625rem var(--font-mono); letter-spacing: .09em; text-transform: uppercase;
-}
-.gob-field-note[data-type="session"] { --gob-note-accent: light-dark(#2b5fbf, #7ea4f0); }
-.gob-field-note[data-type="snapshot"] { --gob-note-accent: light-dark(#8b631f, #d6b670); }
-.gob-field-note[data-type="elision"] { --gob-note-accent: light-dark(#1f6f54, #6fc2a0); }
-.gob-field-note[data-type="digest"] { --gob-note-accent: light-dark(#386345, #a7c397); }
-.gob-field-note[data-type="threshold"] { --gob-note-accent: light-dark(#8a4a2c, #d88d64); }
-.gob-field-note[data-type="event"] { --gob-note-accent: light-dark(#6d5a8a, #a793cf); }
-.gob-field-note[data-type="verify"] { --gob-note-accent: light-dark(#4a7a78, #7fb5b2); }
-.gob-field-note[data-type="provider"] { --gob-note-accent: light-dark(#2b5fbf, #7ea4f0); }
-.gob-field-note[data-type="undo"] { --gob-note-accent: var(--muted); }
-.gob-field-note[data-type="strategy"] { --gob-note-accent: light-dark(#4a7a78, #7fb5b2); }
-.gob-field-note-title { margin: 0 0 .3rem; font: 600 .8125rem/1.25 var(--font-text); letter-spacing: -.005em; }
-.gob-field-note[data-type="undo"] .gob-field-note-title { font-family: var(--font-mono); font-weight: 500; }
-.gob-field-note-body { margin: 0; color: var(--muted); font-size: .6875rem; line-height: 1.5; }
-.gob-field-note[data-type="undo"] .gob-field-note-body { white-space: pre-line; font-family: var(--font-mono); }
-.gob-field-note-tags { display: flex; flex-wrap: wrap; gap: .3rem .45rem; margin-block-start: .55rem; }
-.gob-field-note-tags span { color: var(--muted); font: .5625rem var(--font-mono); letter-spacing: .02em; }
-@media (prefers-reduced-motion: reduce) {
-  .gob-field-note { transform: none; }
-  .gob-edge, .gob-edge-label, .gob-field-note { transition: none; }
-}
-@media (forced-colors: active) { .gob-field { display: none; } }
-
-/* ── Hero: context-occupancy sawtooth ───────────────────────────────────── */
-.gob-sawtooth {
-  padding: 1rem 1.15rem .9rem;
-  border-bottom: 1px solid var(--line);
-  cursor: ew-resize; touch-action: pan-y;
-}
-.gob-sawtooth-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; align-items: baseline; }
-.gob-sawtooth-title { font: .68rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
-.gob-sawtooth-readout { font: .72rem var(--font-mono); color: var(--foreground); white-space: nowrap; }
-.gob-sawtooth-chart { display: block; width: 100%; height: auto; margin-block: .4rem .2rem; }
-.gob-sawtooth-grid { stroke: var(--line); stroke-width: .5; stroke-dasharray: 2 5; }
-.gob-sawtooth-tick { fill: var(--muted); font: .55rem var(--font-mono); }
-.gob-sawtooth-axislabel { fill: var(--muted); font: .55rem var(--font-mono); letter-spacing: .04em; }
-.gob-sawtooth-floor { fill: color-mix(in srgb, var(--hraness-site-accent) 7%, transparent); }
-.gob-sawtooth-trigger { stroke: light-dark(#8a4a2c, #d88d64); stroke-width: 1; stroke-dasharray: 4 4; }
-.gob-sawtooth-provider { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 4; }
-.gob-sawtooth-series { fill: none; stroke: var(--hraness-site-accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
-.gob-sawtooth-event path { fill: var(--hraness-site-accent); }
-.gob-sawtooth-event text { fill: var(--muted); font: .52rem var(--font-mono); }
-.gob-sawtooth-playhead { stroke: var(--foreground); stroke-width: 1; opacity: .5; }
-.gob-sawtooth-dot--gob { fill: var(--hraness-site-accent); }
-.gob-sawtooth-dot--pro { fill: var(--muted); }
-.gob-sawtooth-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .7rem; color: var(--muted); }
-.gob-sawtooth-legend span { display: inline-flex; align-items: center; gap: .4rem; }
-.gob-sawtooth-swatch { display: inline-block; width: 1.1rem; height: .14rem; border-radius: 999px; }
-.gob-sawtooth-swatch--pro { background: var(--muted); }
-.gob-sawtooth-swatch--gob { background: var(--hraness-site-accent); }
-
-/* A deliberately larger hero than the shared h1 token, in the same face. */
-.gobstopper-marketing-hero .hraness-marketing-hero__heading { font-size: clamp(2.8rem, 4.8vw, 4.5rem); line-height: 1.06; letter-spacing: -.05em; }
 .document-page { font-size: 1rem; line-height: 1.75; }
 .document-page :is(h1, h2, h3) { letter-spacing: -.025em; }
 
-/* Keep the appearance panel inside the viewport when navigation wraps. */
-@media (max-width: 48rem) {
-  [data-hraness-material="lantern"] .site-header.hraness-material-chrome { position: relative; }
-  .site-header .hraness-marketing-header__actions { margin-inline-start: auto; }
-}
diff --git a/site/app/hero-field.tsx b/site/app/hero-field.tsx
deleted file mode 100644
index 89878647..00000000
--- a/site/app/hero-field.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import type { CSSProperties } from "react";
-
-type FieldNote = {
-  id: string;
-  type: "session" | "snapshot" | "elision" | "digest" | "threshold" | "event" | "verify" | "provider" | "undo" | "strategy";
-  title: string;
-  body: string;
-  x: number;
-  y: number;
-  rotate: number;
-  width: number;
-  tags?: string[];
-};
-
-const notes: FieldNote[] = [
-  { id: "claude", type: "session", title: "claude session 034…", body: "Live, provider-served. ~333k context; native compaction left it alone.", x: 7, y: 24, rotate: 1.4, width: 184 },
-  { id: "codex", type: "session", title: "codex session", body: "Idle. Its own JSONL dialect, parsed into the same record model.", x: 47, y: 10, rotate: -1.2, width: 178 },
-  { id: "trigger", type: "threshold", title: "trigger 250k", body: "A plan stages below the line; a validated copy publishes on the cross.", x: 84, y: 13, rotate: 1.7, width: 182 },
-  { id: "snapshot", type: "snapshot", title: "vault snap_7d3e", body: "Content-addressed. Taken before a single byte is rewritten.", x: 3, y: 56, rotate: -1.6, width: 186 },
-  { id: "elide", type: "elision", title: "elide ×43", body: "Stale tool outputs stubbed in the copy; no record deleted, linkage intact.", x: 31, y: 40, rotate: -0.8, width: 196 },
-  { id: "digest", type: "digest", title: "digest injected", body: "A compact state card carries the conversation forward.", x: 62, y: 49, rotate: 0.9, width: 180 },
-  { id: "verify", type: "verify", title: "verify clean", body: "Parent chains, ordinals, and structure checked after every rewrite.", x: 92, y: 60, rotate: -1.1, width: 190 },
-  { id: "provider", type: "provider", title: "provider /compact", body: "Provider compaction stays the provider's own control; released builds leave it off.", x: 96, y: 34, rotate: 0.6, width: 188 },
-  { id: "undo", type: "undo", title: "$ gobstopper undo", body: "prepares archived content\nunder a fresh session identity", x: 13, y: 80, rotate: -2, width: 198 },
-  { id: "event", type: "event", title: "compaction-events-v1", body: "Best-effort events: snapshot refs and available measurements.", x: 48, y: 84, rotate: 1.5, width: 196 },
-  { id: "strategy", type: "strategy", title: "strategy auto", body: "Picks by transcript shape: elide, structured, scored, or provider delegation.", x: 78, y: 87, rotate: -2.2, width: 196 },
-];
-
-const edges = [
-  { from: "trigger", to: "claude", label: "watches", pulse: true },
-  { from: "claude", to: "snapshot", label: "snapshots first" },
-  { from: "snapshot", to: "elide", label: "guards" },
-  { from: "elide", to: "digest", label: "carries state", pulse: true },
-  { from: "digest", to: "verify", label: "checks" },
-  { from: "provider", to: "claude", label: "delegates" },
-  { from: "codex", to: "elide", label: "candidate" },
-  { from: "digest", to: "event", label: "emits" },
-  { from: "undo", to: "snapshot", label: "restores" },
-  { from: "strategy", to: "elide", label: "selects", pulse: true },
-  { from: "undo", to: "event", label: "replays" },
-  { from: "verify", to: "provider", label: "returns to" },
-];
-
-const noteById = new Map(notes.map((note) => [note.id, note]));
-
-function edgePath(from: FieldNote, to: FieldNote) {
-  const midX = (from.x + to.x) / 2;
-  const bend = Math.min(10, 0.5 * Math.abs(from.y - to.y) + 5);
-  const topY = Math.min(from.y, to.y) - bend;
-  return `M ${from.x} ${from.y} Q ${midX} ${topY} ${to.x} ${to.y}`;
-}
-
-function edgeMid(from: FieldNote, to: FieldNote) {
-  const midX = (from.x + to.x) / 2;
-  const bend = Math.min(10, 0.5 * Math.abs(from.y - to.y) + 5);
-  const topY = Math.min(from.y, to.y) - bend;
-  return [(from.x + 2 * midX + to.x) / 4, (from.y + 2 * topY + to.y) / 4] as const;
-}
-
-/** Product-owned routing artwork. The shared HeroBackdrop owns pointer light,
- * proximity, offscreen suspension, and reduced-motion behavior. */
-export function HeroField() {
-  return (
-    <div aria-hidden="true" className="gob-field">
-      <svg className="gob-edges" preserveAspectRatio="none" viewBox="0 0 100 100">
-        {edges.map((edge) => {
-          const from = noteById.get(edge.from);
-          const to = noteById.get(edge.to);
-          if (from === undefined || to === undefined) return null;
-          return <path key={`${edge.from}-${edge.to}`} className={edge.pulse === true ? "gob-edge gob-edge--pulse" : "gob-edge"} d={edgePath(from, to)} data-hraness-hero-item="" />;
-        })}
-      </svg>
-      {edges.map((edge) => {
-        const from = noteById.get(edge.from);
-        const to = noteById.get(edge.to);
-        if (from === undefined || to === undefined) return null;
-        const [x, y] = edgeMid(from, to);
-        return <span key={`label-${edge.from}-${edge.to}`} className="gob-edge-label" data-hraness-hero-item="" style={{ left: `${x}%`, top: `${y}%` }}>{edge.label}</span>;
-      })}
-      {notes.map((note) => (
-        <article
-          key={note.id}
-          className="gob-field-note"
-          data-hraness-hero-item=""
-          data-type={note.type}
-          style={{
-            "--x": `${note.x}%`, "--y": `${note.y}%`, "--w": `${note.width}px`, "--r": `${note.rotate}deg`,
-          } as CSSProperties}
-        >
-          <span className="gob-field-note-type">{note.type}</span>
-          <p className="gob-field-note-title">{note.title}</p>
-          <p className="gob-field-note-body">{note.body}</p>
-          {note.tags !== undefined && <div className="gob-field-note-tags">{note.tags.map((tag) => <span key={tag}>#{tag}</span>)}</div>}
-        </article>
-      ))}
-    </div>
-  );
-}
diff --git a/site/app/hero-graphic.tsx b/site/app/hero-graphic.tsx
deleted file mode 100644
index 4784a6b7..00000000
--- a/site/app/hero-graphic.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-
-// Illustrative sawtooth: context occupancy per turn under two policies.
-// The provider compacts once, late, near the top of the window; a 250k/40k
-// Gobstopper policy compacts at every crossing of the trigger line.
-const TURNS = 28;
-const RISE = 34; // tokens per turn, in thousands
-const FLOOR = 40;
-const TRIGGER = 250;
-const CEILING = 1000;
-const PROVIDER_DROP_AT = 26.5;
-const PROVIDER_AFTER = 90;
-const PERIOD = (TRIGGER - FLOOR) / RISE;
-
-function gobstopperAt(turn: number) {
-  return FLOOR + (turn % PERIOD) * RISE;
-}
-
-function providerAt(turn: number) {
-  if (turn < PROVIDER_DROP_AT) return Math.min(920, FLOOR + turn * RISE);
-  return PROVIDER_AFTER + (turn - PROVIDER_DROP_AT) * RISE;
-}
-
-const W = 720;
-const H = 252;
-const PAD_L = 46;
-const PAD_R = 14;
-const PAD_T = 16;
-const PAD_B = 30;
-const plotW = W - PAD_L - PAD_R;
-const plotH = H - PAD_T - PAD_B;
-
-const xFor = (turn: number) => PAD_L + (turn / TURNS) * plotW;
-const yFor = (k: number) => PAD_T + plotH - (k / CEILING) * plotH;
-
-function gobstopperPath() {
-  const points: string[] = [`M ${xFor(0)} ${yFor(FLOOR)}`];
-  let ctx = FLOOR;
-  for (let t = 0; t <= TURNS; t += 0.5) {
-    const next = FLOOR + (t % PERIOD) * RISE;
-    if (next < ctx) {
-      // Compaction: drop vertically to the floor at this turn.
-      points.push(`L ${xFor(t)} ${yFor(FLOOR)}`);
-    }
-    ctx = next;
-    points.push(`L ${xFor(t)} ${yFor(ctx)}`);
-  }
-  return points.join(" ");
-}
-
-function providerPath() {
-  const points: string[] = [`M ${xFor(0)} ${yFor(providerAt(0))}`];
-  for (let t = 0.5; t <= TURNS; t += 0.5) {
-    const prev = providerAt(t - 0.5);
-    const next = providerAt(t);
-    if (next < prev) points.push(`L ${xFor(t)} ${yFor(next)}`);
-    points.push(`L ${xFor(t)} ${yFor(next)}`);
-  }
-  return points.join(" ");
-}
-
-// Compaction-event ticks: each Gobstopper drop.
-const dropTurns: number[] = [];
-for (let t = PERIOD; t <= TURNS; t += PERIOD) dropTurns.push(t);
-const dropLabels = ["elide ×43", "compact", "elide ×38", "compact"];
-
-const GOB_PATH = gobstopperPath();
-const PROVIDER_PATH = providerPath();
-
-/**
- * The hero's context-occupancy sawtooth. A playhead sweeps across the chart;
- * pointer position scrubs it and the readout reports both policies' context
- * at that turn. Idle motion resumes a few seconds after the pointer rests.
- */
-export function HeroGraphic() {
-  const [frac, setFrac] = useState(0.62);
-  const lastPointer = useRef(-1e4);
-  const frame = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-    let raf = 0;
-    const tick = () => {
-      if (performance.now() - lastPointer.current > 3200) {
-        const t = performance.now() / 1000;
-        setFrac(0.5 + 0.46 * Math.sin(t * 0.21));
-      }
-      raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, []);
-
-  const onMove = (event: React.PointerEvent) => {
-    const rect = frame.current?.getBoundingClientRect();
-    if (rect === undefined || rect.width === 0) return;
-    lastPointer.current = performance.now();
-    setFrac(Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width)));
-  };
-
-  const turn = frac * TURNS;
-  const gob = gobstopperAt(turn);
-  const pro = providerAt(turn);
-  const px = PAD_L + frac * plotW;
-
-  return (
-    <div className="gob-sawtooth" ref={frame} onPointerMove={onMove}>
-      <div className="gob-sawtooth-head">
-        <span className="gob-sawtooth-title">context occupancy · 1M-token window</span>
-        <span className="gob-sawtooth-readout" aria-hidden="true">
-          turn {Math.round(turn)} · gobstopper ~{Math.round(gob)}k · provider ~{Math.round(pro)}k
-        </span>
-      </div>
-      <svg className="gob-sawtooth-chart" viewBox={`0 0 ${W} ${H}`} role="img" aria-label="Context occupancy per turn: the provider compacts once near the top of the window; Gobstopper compacts at each 250k trigger crossing.">
-        {/* Window guides */}
-        {[0, 250, 500, 750, 1000].map((k) => (
-          <g key={k}>
-            <line className="gob-sawtooth-grid" x1={PAD_L} x2={W - PAD_R} y1={yFor(k)} y2={yFor(k)} />
-            <text className="gob-sawtooth-tick" x={PAD_L - 8} y={yFor(k) + 4} textAnchor="end">{k === 0 ? "0" : `${k}k`}</text>
-          </g>
-        ))}
-        {/* Trigger line and floor band */}
-        <rect className="gob-sawtooth-floor" x={PAD_L} y={yFor(FLOOR)} width={plotW} height={yFor(0) - yFor(FLOOR)} />
-        <line className="gob-sawtooth-trigger" x1={PAD_L} x2={W - PAD_R} y1={yFor(TRIGGER)} y2={yFor(TRIGGER)} />
-        <text className="gob-sawtooth-axislabel" x={W - PAD_R - 4} y={yFor(TRIGGER) - 6} textAnchor="end">trigger {TRIGGER}k</text>
-        <text className="gob-sawtooth-axislabel" x={PAD_L + 6} y={yFor(FLOOR) - 4}>floor {FLOOR}k</text>
-        {/* Series */}
-        <path className="gob-sawtooth-provider" d={PROVIDER_PATH} />
-        <path className="gob-sawtooth-series" d={GOB_PATH} />
-        {/* Compaction events */}
-        {dropTurns.map((t, i) => (
-          <g key={t} className="gob-sawtooth-event">
-            <path d={`M ${xFor(t) - 5} ${yFor(FLOOR) + 12} L ${xFor(t)} ${yFor(FLOOR) + 5} L ${xFor(t) + 5} ${yFor(FLOOR) + 12} Z`} />
-            {dropLabels[i] !== undefined && (
-              <text x={xFor(t)} y={yFor(FLOOR) + 26} textAnchor="middle">{dropLabels[i]}</text>
-            )}
-          </g>
-        ))}
-        {/* Playhead */}
-        <line className="gob-sawtooth-playhead" x1={px} x2={px} y1={PAD_T} y2={yFor(0)} />
-        <circle className="gob-sawtooth-dot gob-sawtooth-dot--gob" cx={px} cy={yFor(gob)} r={3.5} />
-        <circle className="gob-sawtooth-dot gob-sawtooth-dot--pro" cx={px} cy={yFor(pro)} r={3.5} />
-        <text className="gob-sawtooth-axislabel" x={W - PAD_R - 4} y={H - 6} textAnchor="end">turns →</text>
-      </svg>
-      <div className="gob-sawtooth-legend">
-        <span><i className="gob-sawtooth-swatch gob-sawtooth-swatch--pro" />provider: one late compaction</span>
-        <span><i className="gob-sawtooth-swatch gob-sawtooth-swatch--gob" />gobstopper: every crossing, early</span>
-      </div>
-    </div>
-  );
-}
diff --git a/site/app/layout.tsx b/site/app/layout.tsx
index c0fc1de2..db55c018 100644
--- a/site/app/layout.tsx
+++ b/site/app/layout.tsx
@@ -143,7 +143,7 @@ export default function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en" data-hraness-theme="paper" data-hraness-material="lantern" data-hraness-pattern="mesh" data-palette="tokyo-night" className={initialPalette.className} suppressHydrationWarning>
+    <html lang="en" data-hraness-theme="paper" data-hraness-material="lantern" data-hraness-pattern="none" data-palette="tokyo-night" className={initialPalette.className} suppressHydrationWarning>
       <head>
         {/* eslint-disable-next-line @next/next/no-sync-scripts */}
         <script src="/theme-bootstrap.js" />
diff --git a/site/app/page.tsx b/site/app/page.tsx
index 45c8fbeb..f5e3ac88 100644
--- a/site/app/page.tsx
+++ b/site/app/page.tsx
@@ -1,36 +1,20 @@
 import {
-  MarketingCallToAction,
-  MarketingInstallPanel,
-  MarketingInterfaceGrid,
-  MarketingMaker,
+  MarketingFlow,
   MarketingPage,
-  MarketingPrimitives,
-  MarketingProofFrame,
   MarketingQuestionList,
-  MarketingRelated,
   MarketingSection,
-  MarketingTrustBoundary,
   ProductHero,
   ProviderMarkChip,
 } from "@hraness/design-kit/react/server";
 import { product, type PortfolioProductId } from "@hraness/design-kit/portfolio";
 
 import { SiteHeader, SiteFooter } from "./_components/site-chrome";
-import { HeroField } from "./hero-field";
-import { HeroGraphic } from "./hero-graphic";
 import { publishedRelease } from "./publication";
 
-
-function TopicIcon({ slug }: Readonly<{ slug: string }>) {
-  return (
-    <img className="gobstopper-topic-icon" src={`/icons/${slug}.svg`} alt="" aria-hidden="true" width="88" height="88" loading="lazy" decoding="async" />
-  );
-}
-
-/** A related-product card from the portfolio snapshot: mark, name, and one-line role. */
+/** A related product from the portfolio snapshot: name, address, and one-line role. */
 function related(id: PortfolioProductId, name: string) {
-  const { canonicalUrl, mark, oneLiner } = product(id);
-  return { href: canonicalUrl, mark, name, role: oneLiner };
+  const { canonicalUrl, oneLiner } = product(id);
+  return { href: canonicalUrl, name, role: oneLiner };
 }
 
 const releaseVersion = publishedRelease?.version;
@@ -38,44 +22,85 @@ const repository = "https://github.com/hraness/gobstopper";
 
 const heading = "Context compaction you can undo.";
 const summary =
-  "A local proxy that keeps long sessions in Claude Code, Codex, opencode, Crush, Aider, Goose, and other agents under a context threshold. Past it, each request keeps the task and the newest turns word for word and drops old tool output the agent can read again, following CliffCompaction's rule. File commands preview the same kind of cut on saved sessions and write a smaller copy. Every original byte stays in a local vault you can search and restore from.";
-const footnote =
-  "Free and open source (MIT or Apache-2.0). Installs with Cargo and needs Rust 1.85 or newer; the proxy also needs curl 8.3 or newer. Runs on your machine with no account.";
+  "Gobstopper is a free, open-source command-line tool that makes long coding sessions smaller. Its local proxy keeps each request from Claude Code, Codex, and other agents under a token threshold by summarizing older turns and sending the newest ones word for word. On saved sessions it writes a smaller copy, and every original byte stays in a local vault you can search and restore from.";
+const facts =
+  "MIT or Apache-2.0 · Installs with Cargo (Rust 1.85 or newer) · The proxy needs curl 8.3 or newer · Runs on your machine, no account";
+
+const agents = ["claudecode", "codex", "opencode", "crush", "aider", "goose"] as const;
 
-const primitives = [
+const steps = [
   {
-    icon: "session-detection",
-    label: "Session detection",
-    summary: "Finds sessions in the Codex and Claude Code stores. Reports measured context separately from estimates and missing usage. Recent file activity cannot tell you whether another process is using a session.",
+    label: "Start the proxy with your agent",
+    code: "gobstopper proxy run -- claude",
+    detail: "It starts on a free local port, points the agent's ANTHROPIC_BASE_URL and OPENAI_BASE_URL at itself, and stops when the agent exits. Use `gobstopper proxy serve` for a background proxy on 127.0.0.1:8260.",
   },
   {
-    icon: "edit-ir",
-    label: "A few kinds of edit",
-    summary: "Strategies propose replacing stale tool output, inserting a digest, or having the provider compact. Gobstopper checks supported record links, order, and tool-call pairs before writing a copy. Those checks do not establish that a provider can resume it.",
+    label: "Small requests pass through",
+    detail: "Requests under the threshold, 128,000 estimated tokens by default, go to the provider unchanged.",
   },
   {
-    icon: "strategies",
-    label: "Strategies",
-    summary: "The default, auto, picks a strategy from the transcript. Sawtooth recommends provider compaction, elide replaces eligible stale tool output, cliff keeps the newest assistant steps and drops older tool results over 500 bytes, and structured writes a state card from metadata. For running sessions in Claude Code, Codex, and OpenAI-compatible agents, gobstopper proxy applies CliffCompaction's rule to each outgoing request. Scored ranks candidates; optional on-device models can score or draft cards. Agentic accepts edits proposed by a program you trust.",
+    label: "Large requests keep the recent work",
+    detail: "Past the threshold, the system prompt, the first task, and at least the last three turns go out word for word. Older turns become one summary that keeps human and assistant text and tool results up to 500 characters. Longer tool results are dropped, because the agent can read the file or rerun the command.",
   },
   {
-    icon: "presets-config",
-    label: "Presets, plugins and config",
-    summary: "Set defaults once, override them per provider or per session, and save named presets. Plugins are versioned bundles pinned to an exact executable, and Gobstopper checks every edit they return. The older command hook still works once you trust it explicitly.",
+    label: "Check what it did",
+    code: "gobstopper proxy status",
+    detail: "Shows the running proxy's settings, how many requests it compacted, and the estimated tokens saved. Session files stay unchanged.",
   },
+] as const;
+
+const ways = [
   {
-    icon: "undo-vault",
-    label: "Undo vault",
-    summary: "Before writing a separate Claude Code or Codex copy, Gobstopper archives the original and prepared bytes. Search the snapshot for a missing record, read its saved text, or use undo to prepare a restored copy with a new session identity.",
+    label: "Proxy",
+    summary: "Point an agent's provider address at the proxy, or let `proxy run` start one for a single session. Replay a recorded session to see what the proxy would have sent, without calling a provider.",
+    code: `gobstopper proxy run -- claude
+ANTHROPIC_BASE_URL=http://127.0.0.1:8260 claude
+gobstopper proxy replay <session>`,
   },
   {
-    icon: "telemetry-eval",
-    label: "Telemetry and eval",
-    summary: "Events link snapshots with observed usage. Eval compares strategies on frozen input, checks supported structures, and counts which sampled details remain. It reports missing measurements and coverage; model judgments, billing, and successful task continuation need separate evidence.",
+    label: "Saved sessions",
+    summary: "Find Claude Code and Codex sessions, preview a plan, and prepare a separate smaller copy. Check it for problems that would break resume, and keep the original for recovery.",
+    code: `gobstopper plan <session> --trigger 250000
+gobstopper apply <session> --strategy elide
+gobstopper verify <session> && gobstopper undo <session>`,
+  },
+  {
+    label: "Watcher and hooks",
+    summary: "The watcher checks sessions every 30 seconds by default and can prepare separate copies. Dry-run mode previews its decisions. Hook setup writes a settings file for you to review and does not change provider settings.",
+    code: `gobstopper watch --dry-run --once
+gobstopper install-hooks --output ./hook-candidates.json`,
+  },
+  {
+    label: "Your program",
+    summary: "A preset command receives the transcript as normalized JSON and returns edits. It runs only after you mark it trusted. Package it as a versioned plugin bundle to pin the exact executable.",
+    code: `[presets.my-policy]
+strategy = "elide"
+keep_recent_tool_outputs = 4
+
+[presets.custom]
+command = "node my-editor.js"
+trusted_legacy_command = true`,
   },
 ] as const;
 
-const agents = ["claudecode", "codex", "opencode", "crush", "aider", "goose"] as const;
+const inside = [
+  {
+    label: "Strategies",
+    detail: "The default, auto, picks a strategy from the transcript. Elide replaces eligible stale tool output, cliff keeps the newest assistant steps and drops older tool results over 500 bytes, structured writes a state card from metadata, and sawtooth recommends provider compaction. Scored ranks candidates; optional on-device models can score them or draft cards.",
+  },
+  {
+    label: "Undo vault",
+    detail: "Before writing a separate Claude Code or Codex copy, Gobstopper archives the original and prepared bytes. Search a snapshot for a missing record, read its saved text, or run `undo` to prepare a restored copy with a new session identity.",
+  },
+  {
+    label: "Presets and plugins",
+    detail: "Set defaults once, override them per provider or per session, and save named presets. Plugins are versioned bundles pinned to an exact executable, and Gobstopper checks every edit they return.",
+  },
+  {
+    label: "Eval and telemetry",
+    detail: "Eval compares strategies on frozen input, checks supported structures, and counts which sampled details remain. Events link snapshots with observed usage and report missing measurements as missing.",
+  },
+] as const;
 
 const trust = [
   {
@@ -84,7 +109,7 @@ const trust = [
   },
   {
     label: "Source files stay unchanged",
-    detail: "Claude Code and Codex compaction writes a separate copy and archives the original and prepared bytes. Snapshot readers coordinate with cleanup, and damaged recovery data stops cleanup. Keep backups of the vault: local snapshots depend on your storage.",
+    detail: "Claude Code and Codex compaction writes a separate copy and archives the original and prepared bytes. Damaged recovery data stops cleanup. Keep backups of the vault: local snapshots depend on your storage.",
   },
   {
     label: "Automatic provider compaction is disabled",
@@ -94,6 +119,10 @@ const trust = [
     label: "Unknown outcomes stay unknown",
     detail: "If a provider operation has an uncertain result, Gobstopper does not retry it automatically after a restart or cooldown. Missing usage stays unmeasured. Hook observations do not establish that Gobstopper caused a compaction.",
   },
+  {
+    label: "Smaller is not the same as better",
+    detail: "Copy checks cover record links, order, and tool-call pairs. They do not establish that a provider can resume the copy, that every task fact survives, or what you will be billed.",
+  },
 ] as const;
 
 const questions = [
@@ -123,6 +152,14 @@ const questions = [
   },
 ] as const;
 
+const relatedProducts = [
+  related("xcb", "xcb"),
+  related("wrench", "Ghostget"),
+  related("aicharts", "AI Charts"),
+  related("peopleblade", "PeopleBlade"),
+  related("kb", "Wordcell"),
+] as const;
+
 function withCode(text: string) {
   return text.split("`").map((part, index) => (index % 2 === 1 ? <code key={index}>{part}</code> : part));
 }
@@ -139,7 +176,7 @@ const structuredData = {
 
 export default function Home() {
   return (
-    <div data-hraness-marketing-preset="editorial">
+    <div data-hraness-marketing-preset="editorial" data-hraness-pattern="none" className="gob-home">
       <script
         dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
         type="application/ld+json"
@@ -148,250 +185,193 @@ export default function Home() {
 
       <main id="main" tabIndex={-1}>
         <MarketingPage>
-          <div className="hraness-material-wall gob-opening">
-            <ProductHero
-              backdrop={<HeroField />}
-              align="start"
-              actions={[
-                { href: "#install", label: "Install Gobstopper" },
-                { href: "/benchmarks", label: "See the benchmarks" },
-              ]}
-              boundary={footnote}
-              className="gobstopper-marketing-hero"
-              eyebrow="Session compaction tool"
-              frame={(
-                <MarketingProofFrame
-                  className="hraness-material-pane"
-                  caption="On a 333k-token Claude Code session, Claude's own autocompact cut the resume context by 82% and then said unfinished renames were done. Gobstopper's elide and compacted strategies cut about 30% and recalled the task correctly. One session, recorded on an earlier build; not a general benchmark."
-                  credit="Recorded September 17, 2026 · chart is illustrative"
-                  title="The smallest context forgot the task."
-                >
-                  <HeroGraphic />
-                  <pre className="transcript" tabIndex={0}><code>{`# input tokens on resume · recalled?
-no compaction     312,722  yes
-elide             219,167  yes
-compacted         220,447  yes
-autocompact 100    56,300  no`}</code></pre>
-                </MarketingProofFrame>
-              )}
-              heading={heading}
-              headingId="hero-title"
-              name=""
-              summary={summary}
-            />
-          </div>
-
-          <MarketingPrimitives
-            heading="You decide when to compact and how."
-            headingId="model-title"
-            id="model"
-            items={primitives.map((primitive) => ({
-              example: <TopicIcon slug={primitive.icon} />,
-              label: primitive.label,
-              summary: primitive.summary,
-            }))}
-            label=""
-            summary="Set a threshold, compare strategies on frozen input, and inspect the candidate before provider resume. Smaller context, cache behavior and task quality need separate evidence."
+          <ProductHero
+            backdrop={false}
+            align="start"
+            actions={[
+              { href: "#install", label: "Install Gobstopper" },
+              { href: "/benchmarks", label: "See the benchmarks", emphasis: "secondary" },
+            ]}
+            boundary={facts}
+            className="gob-hero"
+            eyebrow="Session compaction tool"
+            heading={heading}
+            headingId="hero-title"
+            name=""
+            summary={summary}
           />
 
+          <figure className="gob-proof" aria-labelledby="proof-title">
+            <figcaption className="gob-proof__head">
+              <span id="proof-title">Resume trial on one 333k-token Claude Code session</span>
+              <span className="gob-proof__date">September 17, 2026</span>
+            </figcaption>
+            <pre className="gob-code gob-proof__table" tabIndex={0}><code>{`strategy          input tokens on resume   recalled the task?
+no compaction          312,722               yes
+elide                  219,167               yes
+compacted              220,447               yes
+autocompact 100         56,300               no`}</code></pre>
+            <p className="gob-proof__note">
+              Claude&apos;s own autocompact cut the resume context by 82% and then said unfinished renames were done. Gobstopper&apos;s elide and compacted strategies cut about 30% and recalled the task correctly. One session on an earlier build, not a general benchmark.{" "}
+              <a href="/benchmarks">All dated measurements</a>
+            </p>
+          </figure>
+
+          <MarketingSection
+            heading="It keeps each request under a threshold you choose."
+            headingId="how-title"
+            id="how"
+            label="How the proxy works"
+            summary="No model call writes the summary, and each compaction starts again from the full history your agent resends, so a summary is never summarized."
+          >
+            <MarketingFlow
+              ariaLabel="How the proxy works"
+              className="gob-steps"
+              steps={steps.map(({ detail, label, ...rest }) => ({
+                label,
+                detail: detail.replaceAll("`", ""),
+                ...("code" in rest ? { code: rest.code } : {}),
+              }))}
+            />
+          </MarketingSection>
+
           <MarketingSection
             heading="Works with the agents you already use."
             headingId="agents-title"
             id="agents"
-            label=""
-            summary="The proxy speaks Anthropic Messages, OpenAI Responses, and OpenAI Chat Completions. Any agent that accepts a custom provider address can point at it; Claude Code and Codex routing is live-checked and the rest are contract-tested."
+            label="Agents"
+            summary="The proxy speaks Anthropic Messages, OpenAI Responses, and OpenAI Chat Completions. Any agent that accepts a custom provider address can point at it. Claude Code and Codex routing is live-checked; the others are contract-tested."
           >
             <div className="gob-agent-marks">
               {agents.map((agent) => (
-                <ProviderMarkChip key={agent} mark={agent} size={34} />
+                <ProviderMarkChip key={agent} mark={agent} size={32} />
               ))}
             </div>
           </MarketingSection>
 
-          <MarketingInterfaceGrid
+          <MarketingSection
             heading="In front of your agent, on saved sessions, or from your own code."
             headingId="interfaces-title"
             id="interfaces"
-            interfaces={[
-              {
-                label: "Proxy",
-                summary: "Point an agent's provider address at the proxy, or let proxy run start one for a single session. Replay a recorded session to see what the proxy would have sent, without calling a provider.",
-                example: (
-                  <>
-                    <TopicIcon slug="watcher" />
-                    <pre tabIndex={0}><code>{`gobstopper proxy run -- claude
-ANTHROPIC_BASE_URL=http://127.0.0.1:8260 claude
-gobstopper proxy replay <session>`}</code></pre>
-                  </>
-                ),
-              },
-              {
-                label: "CLI",
-                summary: "Find sessions, preview a plan, and prepare a separate Codex or Claude Code copy. Inspect its supported structures and keep the original for recovery.",
-                example: (
-                  <>
-                    <TopicIcon slug="cli" />
-                    <pre tabIndex={0}><code>{`gobstopper plan <session> --trigger 250000
-gobstopper apply <session> --strategy elide
-gobstopper verify <session> && gobstopper undo <session>`}</code></pre>
-                  </>
-                ),
-              },
-              {
-                label: "Watcher and hooks",
-                summary: "The watcher checks sessions every 30 seconds by default and can prepare separate Claude Code or Codex copies. Dry-run mode previews the decisions. Hook setup writes a settings candidate for you to review; it does not change provider settings.",
-                example: (
-                  <>
-                    <TopicIcon slug="presets-config" />
-                    <pre tabIndex={0}><code>{`gobstopper watch --dry-run --once
-gobstopper install-hooks --output ./hook-candidates.json`}</code></pre>
-                  </>
-                ),
-              },
-              {
-                label: "Your program",
-                summary: "A preset command receives the transcript as normalized JSON and returns edits. It runs only after you mark it trusted. Package it as a versioned plugin bundle to pin the exact executable.",
-                example: (
-                  <>
-                    <TopicIcon slug="custom-program" />
-                    <pre tabIndex={0}><code>{`[presets.my-policy]
-strategy = "elide"
-keep_recent_tool_outputs = 4
-
-[presets.custom]
-command = "node my-editor.js"
-trusted_legacy_command = true`}</code></pre>
-                  </>
-                ),
-              },
-            ]}
-            label=""
+            label="Four ways to run it"
             summary="Built-in strategies and trusted programs go through the same checks before Gobstopper writes a copy."
-          />
+          >
+            <div className="gob-rows">
+              {ways.map((way) => (
+                <div className="gob-row" key={way.label}>
+                  <div className="gob-row__text">
+                    <h3>{way.label}</h3>
+                    <p>{withCode(way.summary)}</p>
+                  </div>
+                  <pre className="gob-code" tabIndex={0}><code>{way.code}</code></pre>
+                </div>
+              ))}
+            </div>
+          </MarketingSection>
+
+          <MarketingSection
+            heading="What's inside."
+            headingId="model-title"
+            id="model"
+            label="Parts"
+            summary="Set a threshold, compare strategies on frozen input, and inspect the candidate before you resume it."
+          >
+            <dl className="gob-list">
+              {inside.map((item) => (
+                <div key={item.label}>
+                  <dt>{item.label}</dt>
+                  <dd>{withCode(item.detail)}</dd>
+                </div>
+              ))}
+            </dl>
+          </MarketingSection>
 
           <MarketingSection
             heading="What Gobstopper won't do."
             headingId="boundary-title"
             id="boundary"
-            label=""
-            summary="A compaction that breaks resume or hides a failure is worse than none."
+            label="Limits"
+            summary="A compaction that breaks resume or hides a failure is worse than none. The commands enforce these rules, and tests cover them."
           >
-            <MarketingTrustBoundary
-              heading="Rules the code enforces."
-              headingId="kernel-title"
-              id="kernel"
-              items={trust}
-              label=""
-              summary="Each rule is checked by the commands themselves and covered by tests."
-            />
+            <dl className="gob-list">
+              {trust.map((item) => (
+                <div key={item.label}>
+                  <dt>{item.label}</dt>
+                  <dd>{item.detail}</dd>
+                </div>
+              ))}
+            </dl>
           </MarketingSection>
 
-          <MarketingInstallPanel
-            eyebrow=""
+          <MarketingSection
             heading="Install and inspect your first session."
             headingId="install-title"
             id="install"
+            label="Install"
+            summary="This installs the current source build, which this page describes. It needs Rust 1.85 or newer."
           >
-            <p className="install-note">This installs the current source build, which this page describes.</p>
-            <pre className="install-command" tabIndex={0}><code>{`cargo install --git ${repository} gobstopper --locked
+            <div className="gob-install">
+              <pre className="gob-code install-command" tabIndex={0}><code>{`cargo install --git ${repository} gobstopper --locked
 gobstopper --help`}</code></pre>
-            <pre className="install-command" tabIndex={0}><code>{`gobstopper proxy run -- claude    # one Claude Code session through the proxy
+              <pre className="gob-code install-command" tabIndex={0}><code>{`gobstopper proxy run -- claude    # one Claude Code session through the proxy
 gobstopper proxy serve            # background proxy on http://127.0.0.1:8260
 gobstopper proxy status           # requests compacted, estimated tokens saved`}</code></pre>
-            <pre className="install-command" tabIndex={0}><code>{`gobstopper detect
-gobstopper plan <session> --trigger 250000`}</code></pre>
-            {publishedRelease === null ? (
-              <p className="install-note">No release yet.</p>
-            ) : (
-              <>
+              <pre className="gob-code install-command" tabIndex={0}><code>{`gobstopper detect                         # list sessions and their size
+gobstopper plan <session> --trigger 250000   # preview a compaction; changes nothing`}</code></pre>
+              {publishedRelease === null ? (
+                <p className="install-note">No release yet.</p>
+              ) : (
                 <p className="install-note">
                   Latest tagged release: <a href={`${repository}/releases/tag/v${releaseVersion}`}>v{releaseVersion}</a>.{" "}
-                  <a href={publishedRelease.verificationRun}>See how this release was verified</a>.{" "}
+                  <a href={publishedRelease.verificationRun}>See how this release was verified</a>.
                 </p>
-              </>
-            )}
-            <p className="install-note">
-              Needs Rust 1.85 or newer. Gobstopper reads Codex and Claude Code session data on your
-              machine. Built-in inspection makes no model call. If you enable a remote scorer,
-              it receives selected transcript text; trusted plugins run your code.{" "}
-              <a href="/docs#install--use">Read the full reference</a>.
-            </p>
-            <p className="install-note">
-              <a href={`${repository}/blob/main/docs/assurance/qualification.json`}>Provider support status</a>{" · "}
-              <a href={`${repository}/blob/main/docs/assurance/operations.md`}>Recovery runbook</a>{" · "}
-              <a href={`${repository}/blob/main/verify/README.md`}>Verification scopes and assumptions</a>
-            </p>
-          </MarketingInstallPanel>
+              )}
+              <p className="install-note">
+                Gobstopper reads Codex and Claude Code session data on your machine. Built-in
+                inspection makes no model call. If you enable a remote scorer, it receives
+                selected transcript text; trusted plugins run your code.{" "}
+                <a href="/docs#install--use">Read the full reference</a>.
+              </p>
+              <p className="install-note">
+                <a href={`${repository}/blob/main/docs/assurance/qualification.json`}>Provider support status</a>{" · "}
+                <a href={`${repository}/blob/main/docs/assurance/operations.md`}>Recovery runbook</a>{" · "}
+                <a href={`${repository}/blob/main/verify/README.md`}>Verification scopes and assumptions</a>
+              </p>
+            </div>
+          </MarketingSection>
 
           <MarketingQuestionList
             heading="Before you install."
             headingId="questions-title"
             id="questions"
-            label=""
+            label="Questions"
             questions={questions.map(({ answer, question }) => ({
               answer: <p>{withCode(answer)}</p>,
               question,
             }))}
           />
 
-          <MarketingMaker
+          <MarketingSection
             heading="Built by Hraness."
             headingId="maker-title"
             id="maker"
-            label=""
-            links={[
-              { href: "https://hraness.com", label: "hraness.com" },
-              { href: "https://x.com/hraness", label: "@hraness" },
-              { href: repository, label: "GitHub" },
-            ]}
+            label="Maker"
+            summary="Hraness is a software studio in Puerto Rico. We build tools that give AI agents memory, context, web access, and a record of their work, and we make apps and sourced archives for people. Hraness publishes Gobstopper under your choice of the MIT or Apache-2.0 license."
           >
-            <p>
-              Hraness is a software studio in Puerto Rico. We build tools that give AI
-              agents memory, context, web access, and a record of their work, and we
-              make apps and sourced archives for people. Hraness publishes Gobstopper
-              under your choice of the MIT or Apache-2.0 license.
+            <ul className="gob-related" aria-label="More from Hraness">
+              {relatedProducts.map((item) => (
+                <li key={item.href}>
+                  <a href={item.href}>{item.name}</a>
+                  <span>{item.role}</span>
+                </li>
+              ))}
+            </ul>
+            <p className="install-note">
+              <a href="https://hraness.com">hraness.com</a>{" · "}
+              <a href="https://x.com/hraness">@hraness</a>{" · "}
+              <a href={repository}>GitHub</a>
             </p>
-          </MarketingMaker>
-
-          <MarketingRelated
-            groups={[
-              {
-                heading: "The agent platform",
-                headingId: "related-tools",
-                summary: "Tools for the accounts, web reads, and models your agent runs on.",
-                items: [
-                  related("wrench", "Ghostget"),
-                  related("xcb", "xcb"),
-                  related("aicharts", "AI Charts"),
-                ],
-              },
-              {
-                heading: "The personal apps",
-                headingId: "related-apps",
-                items: [
-                  related("peopleblade", "PeopleBlade"),
-                  related("soulscrape", "Soulscrape"),
-                  related("message-like-me", "Textbutler"),
-                  related("kb", "Wordcell"),
-                ],
-              },
-            ]}
-            heading="More from Hraness."
-            headingId="related-title"
-            label="Related"
-            summary="Other tools your agent can use alongside Gobstopper."
-          />
-
-          <MarketingCallToAction
-            actions={[
-              { href: "#install", label: "Install Gobstopper" },
-              { href: "/benchmarks", label: "See the benchmarks" },
-            ]}
-            footnote={footnote}
-            heading="Make your next long session smaller."
-            headingId="cta-title"
-            summary="Set a trigger, compare a strategy, and keep the exact source behind every prepared copy."
-          />
+          </MarketingSection>
         </MarketingPage>
       </main>
 

From e0279e0a912d01d19424d0d06999b1ff55b30abe Mon Sep 17 00:00:00 2001
From: 0thernet <benzguo@gmail.com>
Date: Sun, 27 Sep 2026 18:29:32 -0400
Subject: [PATCH 2/6] Adopt released quiet foundations and verify real proof

---
 site/app/_components/site-chrome.tsx          |   1 -
 site/app/globals.css                          |   4 +-
 site/bun.lock                                 |   8 +-
 site/package.json                             |   4 +-
 site/tests/home.test.tsx                      |  10 +-
 site/tests/source.test.ts                     |   4 +-
 site/tests/ui-styles.test.tsx                 |  29 ++---
 .../hraness-lantern/lantern-material.css      |  43 ++-----
 site/vendor/hraness-lantern/provenance.json   |   4 +-
 .../product-marketing-preset.css              | 109 +++++++-----------
 site/vendor/hraness-marketing/provenance.json |   4 +-
 site/vendor/paper-theme/provenance.json       |   2 +-
 12 files changed, 80 insertions(+), 142 deletions(-)

diff --git a/site/app/_components/site-chrome.tsx b/site/app/_components/site-chrome.tsx
index 2185597e..2ee3b559 100644
--- a/site/app/_components/site-chrome.tsx
+++ b/site/app/_components/site-chrome.tsx
@@ -75,7 +75,6 @@ export function SiteFooter({ path }: Readonly<{ path?: CanonicalPagePath }>) {
       </MarketingSiteFooter>
       <div className="network-footer">
         <HranessSiteFooter
-          placement="flow"
           mailingList={{ kind: "none" }}
           support={supportProfile}
         />
diff --git a/site/app/globals.css b/site/app/globals.css
index 1d7c96d0..92e51eca 100644
--- a/site/app/globals.css
+++ b/site/app/globals.css
@@ -29,7 +29,7 @@
 :root,
 [data-hraness-marketing-preset="editorial"] {
   --hraness-marketing-display-font: var(--font-text);
-  --hraness-marketing-display-weight: 600;
+  --hraness-marketing-display-weight: 550;
 }
 
 * {
@@ -154,7 +154,7 @@ a { text-underline-offset: 0.2em; }
 }
 .document-page h1, .document-page h2, .document-page h3 { text-wrap: balance; line-height: 1.2; }
 .document-page h2 { margin-top: 2.5rem; padding-top: 1.25rem; }
-.document-page pre { overflow-x: auto; padding: 1rem; border: 1px solid var(--ui-surface-edge, var(--hraness-material-seam)); border-radius: .875rem; background: var(--surface); box-shadow: var(--elevation-inset, var(--hraness-material-inset)); }
+.document-page pre { overflow-x: auto; padding: 1rem; border: 1px solid var(--ui-surface-edge, var(--hraness-material-seam)); border-radius: .875rem; background: var(--surface); }
 .document-page code { font-family: var(--font-mono); font-size: 0.92em; }
 .document-page table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
 .document-page th, .document-page td { border-bottom: 1px solid var(--line); padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; }
diff --git a/site/bun.lock b/site/bun.lock
index d6e02d6a..de717157 100644
--- a/site/bun.lock
+++ b/site/bun.lock
@@ -5,8 +5,8 @@
     "": {
       "name": "gobstopper-site",
       "dependencies": {
-        "@hraness/design-kit": "github:hraness/design-kit#v0.21.0",
-        "@hraness/site-footer": "github:hraness/site-footer#v0.19.3",
+        "@hraness/design-kit": "github:hraness/design-kit#v0.23.0",
+        "@hraness/site-footer": "github:hraness/site-footer#v0.20.0",
         "@hraness/ui": "github:hraness/ui#v0.5.18",
         "@hraness/web-discovery": "github:hraness/web-discovery#v0.9.0",
         "next": "16.3.3",
@@ -86,9 +86,9 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.1", "", { "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" } }, "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA=="],
 
-    "@hraness/design-kit": ["@hraness/design-kit@github:hraness/design-kit#4c3f7c9", { "dependencies": { "@hugeicons/core-free-icons": "4.2.3", "@stylexjs/stylex": "0.19.0", "motion": "12.42.0", "next-themes": "0.4.6", "react-aria-components": "1.19.0", "recharts": "3.8.0", "sugar-high": "^1.2.1", "web-haptics": "0.0.6" }, "peerDependencies": { "@hraness/ui": ">=0.5.16 <0.6.0", "react": ">=18 <20", "react-dom": ">=18 <20" }, "optionalPeers": ["@hraness/ui"] }, "hraness-design-kit-4c3f7c9", "sha512-7SfYsa39IMWkb67vXWBK5xJ5l7nrotVERD/KnhogvJObxLBfvxLLl6qBY9Q6QK0uxBE5LTzRT/huciboQf91nw=="],
+    "@hraness/design-kit": ["@hraness/design-kit@github:hraness/design-kit#585fba2", { "dependencies": { "@hugeicons/core-free-icons": "4.2.3", "@stylexjs/stylex": "0.19.0", "motion": "12.42.0", "next-themes": "0.4.6", "react-aria-components": "1.19.0", "recharts": "3.8.0", "sugar-high": "^1.2.1", "web-haptics": "0.0.6" }, "peerDependencies": { "@hraness/ui": ">=0.5.16 <0.6.0", "react": ">=18 <20", "react-dom": ">=18 <20" }, "optionalPeers": ["@hraness/ui"] }, "hraness-design-kit-585fba2", "sha512-VlxOg8iAQ59LzbkBnt1EB1ikiu8jEuxku9yK+skfuozYtFFxEq9/JHE1xiyYHzSR0EmNCMKt0AGJjpuTIief9w=="],
 
-    "@hraness/site-footer": ["@hraness/site-footer@github:hraness/site-footer#4f38057", { "peerDependencies": { "react": ">=18 <20" }, "optionalPeers": ["react"] }, "hraness-site-footer-4f38057", "sha512-bFOLkhPmTpkESiDhmJhAPVIjLZHoaCSbD9BEW2D1h676n2J2H123wATpI5nVUUvZw7/mCVSy6hpUN6jq0N6lQQ=="],
+    "@hraness/site-footer": ["@hraness/site-footer@github:hraness/site-footer#4244dc5", { "peerDependencies": { "react": ">=18 <20" }, "optionalPeers": ["react"] }, "hraness-site-footer-4244dc5", "sha512-5F4KwQ0ZrjwQjHNDAkBuhI5U7d7+gPMSluyuP0ZHkKdpahbomcxr4UtmQVp7ZJcTHuodHyaRKkIz9SK5y82mOQ=="],
 
     "@hraness/ui": ["@hraness/ui@github:hraness/ui#1d43aa9", { "dependencies": { "@hugeicons/core-free-icons": "4.2.3", "@hugeicons/react": "^1.1.9", "@stylexjs/stylex": "0.19.0", "clsx": "^2.1.1", "parse5": "8.0.1", "react-aria": "3.50.0", "react-aria-components": "1.19.0" }, "peerDependencies": { "@babel/core": "7.29.7", "@stylexjs/babel-plugin": "0.19.0", "@types/babel__core": "7.20.5", "@types/bun": "1.3.14", "@types/node": "^20.19.0 || >=22.12.0", "lightningcss": "1.33.0", "next": "16.2.12 || 16.3.3", "react": ">=18 <20", "react-dom": ">=18 <20", "typescript": "6.0.3", "vite": "7.3.6 || 8.2.1" }, "optionalPeers": ["@babel/core", "@stylexjs/babel-plugin", "@types/babel__core", "@types/bun", "@types/node", "lightningcss", "next", "typescript", "vite"] }, "hraness-ui-1d43aa9", "sha512-KH4pv6P1/DoG1moNhSj4ekFtpPMilqgPzFGOWKL2I0gWVJgfXwDnoJLj3FIjWLItTMvSfm1B8Yt8pg77/a1vmg=="],
 
diff --git a/site/package.json b/site/package.json
index 2407a102..8cc0045a 100644
--- a/site/package.json
+++ b/site/package.json
@@ -22,8 +22,8 @@
     "build:theme": "bun scripts/build-theme-bootstrap.ts"
   },
   "dependencies": {
-    "@hraness/design-kit": "github:hraness/design-kit#v0.21.0",
-    "@hraness/site-footer": "github:hraness/site-footer#v0.19.3",
+    "@hraness/design-kit": "github:hraness/design-kit#v0.23.0",
+    "@hraness/site-footer": "github:hraness/site-footer#v0.20.0",
     "@hraness/ui": "github:hraness/ui#v0.5.18",
     "@hraness/web-discovery": "github:hraness/web-discovery#v0.9.0",
     "next": "16.3.3",
diff --git a/site/tests/home.test.tsx b/site/tests/home.test.tsx
index c6fbbfa3..21bff3bf 100644
--- a/site/tests/home.test.tsx
+++ b/site/tests/home.test.tsx
@@ -34,7 +34,7 @@ test("every public route has one optional support footer without product signup"
 test("the homepage shares the README identity and installs the guarded source build", () => {
   const html = renderToStaticMarkup(<Home />);
   expect(html.match(/<h1\b/gu)).toHaveLength(1);
-  expect(html).toContain("Every original byte stays in a local vault you can search and restore from.");
+  expect(html).toContain("Before writing a separate Claude Code or Codex copy, Gobstopper archives the original and prepared bytes.");
   expect(html).toContain("cargo install --git https://github.com/hraness/gobstopper gobstopper --locked");
   expect(html).not.toContain("--tag v");
   if (publishedRelease === null) {
@@ -43,7 +43,7 @@ test("the homepage shares the README identity and installs the guarded source bu
     expect(html).toContain(`href="https://github.com/hraness/gobstopper/releases/tag/v${publishedRelease.version}"`);
     expect(html).toContain(publishedRelease.verificationRun);
   }
-  expect(html).toMatch(/automatic provider compaction is disabled/iu);
+  expect(html).toMatch(/automatic provider compaction stays disabled/iu);
   expect(html).toMatch(/refuses automatic provider compaction[^.]+auto_compact_closed/u);
   expect(html).not.toContain("hraness.com/gobstopper");
   expect(html).toContain("gobstopper proxy serve");
@@ -88,12 +88,12 @@ test("scopes the editorial preset to the homepage header and real command exampl
     .on('[data-hraness-marketing-preset="editorial"] .hraness-marketing-header.hraness-material-chrome', {
       element() { elements.push("header"); },
     })
-    .on('[data-hraness-marketing-preset="editorial"] #main .hraness-material-wall .hraness-marketing-proof-frame.hraness-material-pane', {
+    .on('[data-hraness-marketing-preset="editorial"] #main .gob-proof', {
       element() { elements.push("proof"); },
     })
     .transform(html);
   expect(elements).toEqual(["header", "proof"]);
-  expect(html).toContain("autocompact 100    56,300  no");
+  expect(html).toMatch(/autocompact 100\s+56,300\s+no/u);
   expect(html).not.toContain("--in-place");
   // Retired or nonexistent flags must not appear in homepage examples.
   expect(html).not.toContain("--double-buffer");
@@ -102,7 +102,7 @@ test("scopes the editorial preset to the homepage header and real command exampl
   expect(html).not.toContain("command = [");
   expect(html).toContain("trusted_legacy_command = true");
   expect(html).toContain('href="/docs#install--use"');
-  expect(html).toContain("On a 333k-token Claude Code session");
+  expect(html).toContain("Resume trial on one 333k-token Claude Code session");
 });
 
 
diff --git a/site/tests/source.test.ts b/site/tests/source.test.ts
index 5ef2024d..362c5291 100644
--- a/site/tests/source.test.ts
+++ b/site/tests/source.test.ts
@@ -64,7 +64,7 @@ describe("Gobstopper site source contract", () => {
       read("app/readme.generated.ts"),
     ]);
     expect(packageJson).toContain('"@hraness/ui": "github:hraness/ui#v0.5.18"');
-    expect(packageJson).toContain('"@hraness/design-kit": "github:hraness/design-kit#v0.21.0"');
+    expect(packageJson).toContain('"@hraness/design-kit": "github:hraness/design-kit#v0.23.0"');
     expect(chrome).toContain('import { AskAiAboutThis } from "@hraness/ui"');
     expect(chrome).toContain('url={absoluteUrl(path)}');
     expect(generated).toContain('export const readmeTitle = "Gobstopper";');
@@ -89,7 +89,7 @@ describe("Gobstopper site source contract", () => {
       expect(globals).toContain(`.document-page ${level} { `);
       expect(globals).toContain(`font-size: var(--hraness-type-${level}-size)`);
     }
-    expect(home).toContain("<div data-hraness-marketing-preset=\"editorial\">");
+    expect(home).toContain("data-hraness-marketing-preset=\"editorial\"");
     expect(home).not.toContain("relationship:");
   });
 
diff --git a/site/tests/ui-styles.test.tsx b/site/tests/ui-styles.test.tsx
index 1f19c765..800c3803 100644
--- a/site/tests/ui-styles.test.tsx
+++ b/site/tests/ui-styles.test.tsx
@@ -108,24 +108,19 @@ test("delivers material chrome and reduced-transparency fallback through the exi
   expect(forcedPlane).toBe(true);
 });
 
-test("keeps wrapped phone navigation in flow while preserving desktop sticky chrome", async () => {
+test("keeps the shared sticky header and scrollable phone navigation", async () => {
   const { root } = await compiled;
-  let desktopSticky = false;
-  const phoneOverrides: Rule[] = [];
+  let sticky = false;
+  let phoneScroll = false;
+  let phoneTargets = false;
   root.walkRules(rule => {
-    if (rule.selector === ".hraness-marketing-header") {
-      rule.walkDecls("position", declaration => { if (declaration.value === "sticky") desktopSticky = true; });
-    }
-    if (rule.selector === '[data-hraness-material="lantern"] .hraness-marketing-header.hraness-material-chrome') {
-      rule.walkDecls("position", declaration => { if (declaration.value === "static") phoneOverrides.push(rule); });
-    }
+    if (rule.selector === ".hraness-marketing-header") rule.walkDecls("position", declaration => { if (declaration.value === "sticky") sticky = true; });
+    const parent = rule.parent;
+    if (parent?.type !== "atrule" || parent.name !== "media" || !parent.params.includes("48rem")) return;
+    if (rule.selector === ".hraness-marketing-header__nav") rule.walkDecls("overflow-x", declaration => { if (declaration.value === "auto") phoneScroll = true; });
+    if (rule.selector === ".hraness-marketing-header__nav a") rule.walkDecls("min-block-size", declaration => { if (declaration.value === "2.75rem") phoneTargets = true; });
   });
-  expect(desktopSticky).toBe(true);
-  expect(phoneOverrides).toHaveLength(1);
-  const parent = phoneOverrides[0]!.parent;
-  expect(parent?.type).toBe("atrule");
-  if (parent?.type !== "atrule") throw new Error("Phone chrome override must be scoped by a media query");
-  expect(parent.name).toBe("media");
-  expect(parent.params.replaceAll(/\s/gu, "")).toBe("(max-width:48rem)");
-  expect(phoneOverrides[0]!.nodes.filter(node => node.type === "decl").map(node => [node.prop, node.value])).toEqual([["position", "static"]]);
+  expect(sticky).toBe(true);
+  expect(phoneScroll).toBe(true);
+  expect(phoneTargets).toBe(true);
 });
diff --git a/site/vendor/hraness-lantern/lantern-material.css b/site/vendor/hraness-lantern/lantern-material.css
index 24b83049..c81a9256 100644
--- a/site/vendor/hraness-lantern/lantern-material.css
+++ b/site/vendor/hraness-lantern/lantern-material.css
@@ -12,12 +12,11 @@
     --hraness-material-muted: var(--muted, var(--ui-muted-foreground, CanvasText));
     --hraness-material-seam: color-mix(in oklch, var(--hraness-material-ink) 5%, var(--hraness-material-plane));
     --hraness-material-outline: transparent;
-    --hraness-pattern-cells: linear-gradient(145deg, rgb(255 255 255 / 0.05), transparent 48%, rgb(0 0 0 / 0.035));
-    --hraness-pattern-cells-size: var(--hraness-material-module) var(--hraness-material-module);
     --hraness-material-edge: rgb(255 255 255 / 0.14);
     --hraness-material-shade: rgb(0 0 0 / 0.14);
     --hraness-material-warm-plane: color-mix(in oklch, var(--hraness-material-warm) 12%, var(--hraness-material-plane));
     --hraness-material-rest: inset 0 1px 0 var(--hraness-material-edge), 0 2px 5px rgb(0 0 0 / 0.05), 0 10px 28px -14px rgb(0 0 0 / 0.14);
+    --hraness-material-raised: inset 0 1px 0 var(--hraness-material-edge), 0 1px 3px rgb(0 0 0 / 0.08);
     --hraness-material-inset: inset 2px 3px 7px rgb(0 0 0 / 0.08), inset -1px -1px 2px rgb(255 255 255 / 0.1);
     --hraness-material-lift: inset 0 1px 0 var(--hraness-material-edge), -3px -3px 10px rgb(255 255 255 / 0.04), 2px 4px 8px rgb(0 0 0 / 0.07), 8px 18px 40px rgb(0 0 0 / 0.09);
     --hraness-material-focus: var(--focus, var(--ui-ring, Highlight));
@@ -26,28 +25,9 @@
 }
 
 @layer components.hraness-design-kit.legacy {
-  /* Set the pattern on the palette/material boundary, or on one field. */
-  :is([data-hraness-pattern="cells"], [data-hraness-pattern="weave"], [data-hraness-pattern="contour"], [data-hraness-pattern="mesh"]) {
-    --hraness-material-wall-images: initial;
-    --hraness-pattern-decoration: initial;
-  }
-  [data-hraness-pattern="cells"] {
-    --hraness-pattern-image: var(--hraness-pattern-cells);
-    --hraness-pattern-size: var(--hraness-pattern-cells-size, 48rem 48rem);
-  }
-  [data-hraness-pattern="weave"] {
-    --hraness-pattern-image: repeating-conic-gradient(from 45deg, color-mix(in srgb, var(--primary, var(--ui-primary, CanvasText)) 5%, transparent) 0% 25%, transparent 0% 50%);
-    --hraness-pattern-size: 1.5rem 1.5rem;
-  }
-  [data-hraness-pattern="contour"] {
-    --hraness-pattern-image: repeating-radial-gradient(ellipse at 24% 62%, transparent 0 2.2rem, color-mix(in srgb, var(--primary, var(--ui-primary, CanvasText)) 9%, transparent) 2.25rem 2.3rem, transparent 2.35rem 4.4rem);
-    --hraness-pattern-size: 100% 100%;
-  }
-  [data-hraness-pattern="mesh"] {
-    --hraness-pattern-image: radial-gradient(circle at center, color-mix(in srgb, var(--primary, var(--ui-primary, CanvasText)) 18%, transparent) 1px, transparent 1.5px);
-    --hraness-pattern-size: 1.5rem 1.5rem;
-  }
-  [data-hraness-pattern="none"] {
+  /* Patterns are retired. The attribute values stay valid for compatibility,
+     and every one paints the uninterrupted palette background. */
+  :is([data-hraness-pattern="cells"], [data-hraness-pattern="weave"], [data-hraness-pattern="contour"], [data-hraness-pattern="mesh"], [data-hraness-pattern="none"]) {
     --hraness-pattern-image: none;
     --hraness-pattern-decoration: none;
     --hraness-marketing-field-images: none;
@@ -101,18 +81,11 @@
     }
   }
 
-  /* Glazing uses shaded faces rather than drawn seams, with a warm band
-   * of transmitted light. Its edges suggest a rounded enclosure without
-   * distorting the document, blurring text, or masking brand artwork. */
+  /* The wall is a flat palette plane. Its retired shaded faces, grain,
+   * patterns, and light washes no longer paint, whatever tokens say. */
   :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-wall) {
     background-color: var(--background, var(--ui-background, Canvas));
-    background-image: var(--hraness-material-wall-images,
-      var(--hraness-material-wall-grain, none),
-      var(--hraness-pattern-image, var(--hraness-material-wall-cells, var(--hraness-pattern-cells))),
-      radial-gradient(ellipse at var(--hraness-hero-light-x, 68%) var(--hraness-hero-light-y, 32%), color-mix(in srgb, var(--hraness-material-warm) 22%, transparent), transparent 68%),
-      linear-gradient(110deg, color-mix(in srgb, var(--hraness-material-cool) 14%, transparent), transparent 38%, rgb(255 255 255 / 0.04) 65%, transparent));
-    background-size: 64px 64px, var(--hraness-pattern-size, var(--hraness-material-wall-cell-size, var(--hraness-material-module)) var(--hraness-material-wall-cell-size, var(--hraness-material-module))), 100% 100%, 100% 100%;
-    background-position: 0 0, center top, center top, center top;
+    background-image: none;
     color: var(--hraness-material-ink);
   }
 
@@ -206,7 +179,6 @@
       --hraness-material-chrome-paint: var(--surface, var(--ui-background, Canvas));
       --hraness-material-chrome-blur: none;
     }
-    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-wall) { background-image: none; }
   }
   @media (forced-colors: active) {
     [data-hraness-material="lantern"] {
@@ -220,6 +192,7 @@
       --hraness-material-warm-plane: Canvas;
       --hraness-material-warm: Highlight;
       --hraness-material-edge: transparent;
+      --hraness-material-raised: none;
       --hraness-material-inset: none;
       --hraness-material-lift: none;
     }
diff --git a/site/vendor/hraness-lantern/provenance.json b/site/vendor/hraness-lantern/provenance.json
index 37a9f355..87508480 100644
--- a/site/vendor/hraness-lantern/provenance.json
+++ b/site/vendor/hraness-lantern/provenance.json
@@ -3,13 +3,13 @@
   "contractVersion": 1,
   "source": {
     "repository": "https://github.com/hraness/design-kit",
-    "commit": "d38d13c07d7956d02ddfbca8d32aa2066d88fbd3",
+    "commit": "3df4c411c7f5e5cbc02448463571696f0d47cee5",
     "export": "@hraness/design-kit/lantern-material.css"
   },
   "files": {
     "lantern-material.css": {
       "path": "src/lantern-material.css",
-      "sha256": "fc456d2c7b51b37b51d6b086be90f102ca856c07849a0d7487b2e74e8981f8ac"
+      "sha256": "7d455c4eabdf3204f2b5cf3b0497de1f722f007ab0bd25013e9ba5691a60c863"
     },
     "check.mjs": {
       "path": "scripts/check-lantern-material-snapshot.mjs",
diff --git a/site/vendor/hraness-marketing/product-marketing-preset.css b/site/vendor/hraness-marketing/product-marketing-preset.css
index 765da2bc..5fabb8cc 100644
--- a/site/vendor/hraness-marketing/product-marketing-preset.css
+++ b/site/vendor/hraness-marketing/product-marketing-preset.css
@@ -1,4 +1,7 @@
-/* Opt-in marketing contract 1. Asset URLs stay relative in packages and snapshots. */
+/* Opt-in marketing contract 1, Quiet direction. Asset URLs stay relative in
+   packages and snapshots. Instrument Serif stays vendored for products that
+   opt in explicitly; no preset uses it by default, so it is never downloaded
+   unless a product sets it as its display face. */
 @font-face {
   font-family: "Instrument Serif";
   src: url("./fonts/instrument-serif/instrument-serif-latin-400.woff2") format("woff2");
@@ -9,42 +12,39 @@
 
 @layer components.hraness-design-kit.legacy {
   :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
-    --hraness-marketing-display-font: "Instrument Serif", Georgia, serif;
-    --hraness-marketing-h1-size: clamp(3rem, 2.1rem + 4.2vw, 5.5rem);
-    --hraness-marketing-h1-leading: 1.02;
-    --hraness-marketing-h1-tracking: -.025em;
-    --hraness-marketing-h2-size: clamp(2.125rem, 1.45rem + 2.6vw, 3.5rem);
-    --hraness-marketing-h2-leading: 1.08;
-    --hraness-marketing-h2-tracking: -.02em;
-    /* Tier and proof headings. The display face stays at or above 1.75rem,
-       where its narrow counters remain legible. */
-    --hraness-marketing-h3-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
-    --hraness-marketing-h3-leading: 1.1;
-    --hraness-marketing-display-weight: 400;
+    /* Quiet display role: the body sans at a semibold weight with tight
+       tracking, not a serif. */
+    --hraness-marketing-display-font: var(--font-text, "Nebula Sans", ui-sans-serif, system-ui, sans-serif);
+    --hraness-marketing-display-weight: 550;
+    --hraness-marketing-h1-size: clamp(2.375rem, 1.55rem + 3.6vw, 4.5rem);
+    --hraness-marketing-h1-leading: 1.04;
+    --hraness-marketing-h1-tracking: -.035em;
+    --hraness-marketing-h2-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
+    --hraness-marketing-h2-leading: 1.1;
+    --hraness-marketing-h2-tracking: -.028em;
+    --hraness-marketing-h3-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
+    --hraness-marketing-h3-leading: 1.2;
     --hraness-marketing-content-measure: 70rem;
     --hraness-marketing-header-measure: 76rem;
     --hraness-marketing-header-height: 3.25rem;
     --hraness-sticky-offset: calc(var(--hraness-marketing-header-height) + 1px);
     --hraness-marketing-gutter: 2rem;
-    --hraness-marketing-hero-space: clamp(4rem, 8vw, 7rem) clamp(4.5rem, 9vw, 8rem);
+    --hraness-marketing-hero-space: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
     --hraness-marketing-story-space: 5rem;
-    --hraness-marketing-summary-leading: 1.65;
+    --hraness-marketing-summary-leading: 1.6;
     --hraness-marketing-header-action-height: 2.25rem;
     --hraness-marketing-field-ink: var(--foreground, var(--ui-foreground, CanvasText));
     --hraness-marketing-field-muted: color-mix(in oklch, var(--foreground, var(--ui-foreground, CanvasText)) 12%, var(--muted, var(--ui-muted-foreground, CanvasText)));
     --hraness-marketing-link: var(--primary, var(--ui-primary, LinkText));
-    --hraness-marketing-field-gradient: radial-gradient(ellipse at var(--hraness-hero-light-x, 68%) var(--hraness-hero-light-y, 32%), color-mix(in oklch, var(--primary, var(--ui-primary, CanvasText)) 9%, var(--background, Canvas)), var(--background, Canvas) 72%);
-    --hraness-marketing-field-images: var(--hraness-pattern-decoration, url("./marketing-assets/grain.svg"), var(--hraness-pattern-image, url("./marketing-assets/cells.svg")), var(--hraness-marketing-field-gradient));
-    --hraness-marketing-field-size: 64px 64px, var(--hraness-pattern-size, 48rem 48rem), 100% 100%;
-    --hraness-material-wall-grain: url("./marketing-assets/grain.svg");
-    --hraness-material-wall-cells: var(--hraness-pattern-image, url("./marketing-assets/cells.svg"));
-    --hraness-material-wall-cell-size: calc(var(--hraness-material-module, 6rem) * 8);
+    /* Retired textures: the field paints the flat palette background. */
+    --hraness-marketing-field-images: none;
+    --hraness-marketing-field-size: auto;
     --hraness-marketing-terminal-background: var(--surface, var(--ui-card, Canvas));
     --hraness-marketing-terminal-ink: var(--foreground, var(--ui-foreground, CanvasText));
     --hraness-marketing-terminal-muted: var(--muted, var(--ui-muted-foreground, CanvasText));
     --hraness-marketing-terminal-command: var(--primary, var(--ui-primary, LinkText));
-    --hraness-marketing-terminal-chrome: linear-gradient(to bottom, color-mix(in oklch, var(--surface, Canvas) 96%, white), var(--surface, Canvas));
-    --hraness-marketing-terminal-shadow: var(--hraness-material-lift, inset 0 1px 0 rgb(255 255 255 / 0.12), 0 2px 5px rgb(0 0 0 / 0.08), 0 24px 56px -24px rgb(0 0 0 / 0.26));
+    --hraness-marketing-terminal-chrome: var(--surface, var(--ui-card, Canvas));
+    --hraness-marketing-terminal-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground, var(--ui-foreground, CanvasText)) 12%, transparent);
   }
 
   [data-hraness-marketing-preset="minimal"] {
@@ -64,41 +64,14 @@
     --hraness-marketing-field-images: none;
   }
 
-  :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
-    --hraness-pattern-cells: url("./marketing-assets/cells.svg");
-    --hraness-pattern-cells-size: 48rem 48rem;
-  }
-  /* Set the pattern on the palette/material boundary, or on one field. */
-  :is([data-hraness-pattern="cells"], [data-hraness-pattern="weave"], [data-hraness-pattern="contour"], [data-hraness-pattern="mesh"]) {
-    --hraness-material-wall-images: initial;
-    --hraness-pattern-decoration: initial;
-  }
-  [data-hraness-pattern="cells"] {
-    --hraness-pattern-image: var(--hraness-pattern-cells);
-    --hraness-pattern-size: var(--hraness-pattern-cells-size, 48rem 48rem);
-  }
-  [data-hraness-pattern="weave"] {
-    --hraness-pattern-image: repeating-conic-gradient(from 45deg, color-mix(in srgb, var(--primary, var(--ui-primary, CanvasText)) 5%, transparent) 0% 25%, transparent 0% 50%);
-    --hraness-pattern-size: 1.5rem 1.5rem;
-  }
-  [data-hraness-pattern="contour"] {
-    --hraness-pattern-image: repeating-radial-gradient(ellipse at 24% 62%, transparent 0 2.2rem, color-mix(in srgb, var(--primary, var(--ui-primary, CanvasText)) 9%, transparent) 2.25rem 2.3rem, transparent 2.35rem 4.4rem);
-    --hraness-pattern-size: 100% 100%;
-  }
-  [data-hraness-pattern="mesh"] {
-    --hraness-pattern-image: radial-gradient(circle at center, color-mix(in srgb, var(--primary, var(--ui-primary, CanvasText)) 18%, transparent) 1px, transparent 1.5px);
-    --hraness-pattern-size: 1.5rem 1.5rem;
-  }
-  [data-hraness-pattern="none"] {
+  /* Patterns are retired. The attribute values stay valid for compatibility,
+     and every one paints the uninterrupted palette background. */
+  :is([data-hraness-pattern="cells"], [data-hraness-pattern="weave"], [data-hraness-pattern="contour"], [data-hraness-pattern="mesh"], [data-hraness-pattern="none"]) {
     --hraness-pattern-image: none;
     --hraness-pattern-decoration: none;
     --hraness-marketing-field-images: none;
     --hraness-material-wall-images: none;
   }
-  :is([data-hraness-pattern="cells"], [data-hraness-pattern="weave"], [data-hraness-pattern="contour"], [data-hraness-pattern="mesh"]) {
-    --hraness-marketing-field-images: url("./marketing-assets/grain.svg"), var(--hraness-pattern-image), var(--hraness-marketing-field-gradient);
-    --hraness-marketing-field-size: 64px 64px, var(--hraness-pattern-size), 100% 100%;
-  }
 
   /* Role-local bindings override the legacy role defaults as well as serving
      compiled recipes. Application headings outside these hooks stay untouched. */
@@ -124,8 +97,10 @@
     --hraness-marketing-frame-radius: 1.125rem;
     --hraness-marketing-section-space: var(--hraness-marketing-story-space);
     --hraness-marketing-action-height: 2.625rem;
-    --hraness-marketing-line: color-mix(in srgb, var(--hraness-marketing-ink) 5%, transparent);
-    --hraness-marketing-chrome-rule: 1px solid transparent;
+    --hraness-marketing-line: color-mix(in srgb, var(--hraness-marketing-ink) 12%, transparent);
+    --hraness-marketing-chrome-rule: 1px solid var(--hraness-marketing-line);
+    --hraness-marketing-chrome-shadow: none;
+    --hraness-marketing-surface-shadow: 0 0 0 1px var(--hraness-marketing-line);
     --hraness-marketing-shadow: var(--hraness-marketing-terminal-shadow);
     --hraness-marketing-frame-chrome: var(--hraness-marketing-terminal-chrome);
   }
@@ -178,6 +153,12 @@
   :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-header .hraness-marketing-action {
     min-block-size: var(--hraness-marketing-header-action-height);
   }
+  /* Phone headers keep 44px targets on both rows. */
+  @media (max-width: 48rem) {
+    :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
+      --hraness-marketing-header-action-height: 2.75rem;
+    }
+  }
   @media (pointer: coarse) {
     :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
       --hraness-marketing-header-action-height: 3rem;
@@ -191,12 +172,11 @@
     padding-inline: var(--hraness-marketing-gutter);
   }
 
-  /* This is a background on a flow container, never an overlay on content. */
+  /* The field is a flow container on the flat palette background. The retired
+     grain, cell, and pattern textures never paint, whatever tokens say. */
   :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]).hraness-marketing-field,
   :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-field {
-    background-image: var(--hraness-marketing-field-images);
-    background-position: 0 0, center top, 0 0;
-    background-size: var(--hraness-marketing-field-size);
+    background-image: none;
     color: var(--hraness-marketing-field-ink);
     position: relative;
   }
@@ -257,24 +237,15 @@
   @media (max-width: 760px) {
     :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
       --hraness-marketing-gutter: 1.25rem;
-      --hraness-marketing-hero-space: 3.5rem 4.5rem;
+      --hraness-marketing-hero-space: 2.75rem 3rem;
       --hraness-marketing-story-space: 3.5rem;
-      --hraness-marketing-field-size: 64px 64px, var(--hraness-pattern-size, 36rem 36rem), 100% 100%;
       --hraness-material-module: 4.5rem;
-      --hraness-pattern-cells-size: 36rem 36rem;
     }
     [data-hraness-marketing-preset="minimal"] {
       --hraness-marketing-hero-space: 2rem 3rem;
       --hraness-marketing-story-space: 3rem;
     }
   }
-  @media (prefers-reduced-transparency: reduce) {
-    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]).hraness-marketing-field,
-    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-field {
-      background-image: none;
-      background-color: var(--background, Canvas);
-    }
-  }
   @media (forced-colors: active) {
     :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
       --hraness-marketing-field-images: none;
diff --git a/site/vendor/hraness-marketing/provenance.json b/site/vendor/hraness-marketing/provenance.json
index 72cb4ece..ec9a4580 100644
--- a/site/vendor/hraness-marketing/provenance.json
+++ b/site/vendor/hraness-marketing/provenance.json
@@ -3,13 +3,13 @@
   "contractVersion": 1,
   "source": {
     "repository": "https://github.com/hraness/design-kit",
-    "commit": "8937fceab35ae5bf591202bde3d641d48cec7f46",
+    "commit": "3df4c411c7f5e5cbc02448463571696f0d47cee5",
     "export": "@hraness/design-kit/product-marketing-preset.css"
   },
   "files": {
     "product-marketing-preset.css": {
       "path": "src/product-marketing-preset.css",
-      "sha256": "279d8878f8e233e355202c9e0a19797a32ea7999486e711dae7836497879a1e6"
+      "sha256": "f410fdaec2bc7b5d3316b499689b060c34cb38e66662e0ed2bbfbd7dfa70ef4e"
     },
     "fonts/instrument-serif/instrument-serif-latin-400.woff2": {
       "path": "src/fonts/instrument-serif/instrument-serif-latin-400.woff2",
diff --git a/site/vendor/paper-theme/provenance.json b/site/vendor/paper-theme/provenance.json
index 049642b7..4920b5a9 100644
--- a/site/vendor/paper-theme/provenance.json
+++ b/site/vendor/paper-theme/provenance.json
@@ -3,7 +3,7 @@
   "contractVersion": 1,
   "source": {
     "repository": "https://github.com/hraness/design-kit",
-    "commit": "8937fceab35ae5bf591202bde3d641d48cec7f46",
+    "commit": "3df4c411c7f5e5cbc02448463571696f0d47cee5",
     "export": "@hraness/design-kit/paper-theme.css"
   },
   "files": {

From a6a2f7f7686480e84ce6825868f759f692872d18 Mon Sep 17 00:00:00 2001
From: 0thernet <benzguo@gmail.com>
Date: Sun, 27 Sep 2026 19:55:29 -0400
Subject: [PATCH 3/6] Verify the full public site and native appearance
 controls in CI

---
 .github/workflows/ci.yml                   |  44 ++++++-
 .github/workflows/verify-production.yml    |  55 +++++++++
 site/.gitignore                            |   3 +
 site/app/globals.css                       |   6 +-
 site/bun.lock                              |   3 +
 site/package.json                          |   8 +-
 site/scripts/check-public-site-browser.mjs | 136 +++++++++++++++++++++
 7 files changed, 249 insertions(+), 6 deletions(-)
 create mode 100644 .github/workflows/verify-production.yml
 create mode 100644 site/scripts/check-public-site-browser.mjs

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e8672644..117bb7a4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -189,19 +189,59 @@ jobs:
             ${{ runner.temp }}/stress-evidence/*.json
             ${{ runner.temp }}/stress-evidence/*.log
 
+  site:
+    name: Public site build and browser
+    runs-on: ubuntu-24.04
+    timeout-minutes: 12
+    defaults:
+      run:
+        working-directory: site
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+      - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: 1.3.14
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: 24
+          package-manager-cache: false
+      - uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: ~/.bun/install/cache
+          key: bun-site-${{ runner.os }}-${{ hashFiles('site/bun.lock') }}
+          restore-keys: bun-site-${{ runner.os }}-
+      - run: bun install --frozen-lockfile --ignore-scripts
+      - name: Run the complete site gate and production build
+        run: bun run check
+      - name: Verify public routes and appearance
+        env:
+          GOBSTOPPER_BROWSER_EXECUTABLE: /usr/bin/google-chrome
+        run: bun run check:public-site:browser
+      - name: Retain screenshots and browser evidence
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: public-site-browser
+          path: site/.impeccable/review/public-*
+          include-hidden-files: true
+          retention-days: 7
+
   required:
     name: Required
     if: always()
-    needs: [quality, msrv, formal, core-proofs, transcript-proofs, bounded-stress]
+    needs: [quality, msrv, formal, core-proofs, transcript-proofs, bounded-stress, site]
     runs-on: ubuntu-24.04
     timeout-minutes: 5
     steps:
       - name: Require every verification gate
         env:
+          SITE: ${{ needs.site.result }}
           QUALITY: ${{ needs.quality.result }}
           MSRV: ${{ needs.msrv.result }}
           FORMAL: ${{ needs.formal.result }}
           CORE_PROOFS: ${{ needs.core-proofs.result }}
           TRANSCRIPT_PROOFS: ${{ needs.transcript-proofs.result }}
           BOUNDED_STRESS: ${{ needs.bounded-stress.result }}
-        run: test "$QUALITY" = success && test "$MSRV" = success && test "$FORMAL" = success && test "$CORE_PROOFS" = success && test "$TRANSCRIPT_PROOFS" = success && test "$BOUNDED_STRESS" = success
+        run: test "$SITE" = success && test "$QUALITY" = success && test "$MSRV" = success && test "$FORMAL" = success && test "$CORE_PROOFS" = success && test "$TRANSCRIPT_PROOFS" = success && test "$BOUNDED_STRESS" = success
diff --git a/.github/workflows/verify-production.yml b/.github/workflows/verify-production.yml
new file mode 100644
index 00000000..0666f1ee
--- /dev/null
+++ b/.github/workflows/verify-production.yml
@@ -0,0 +1,55 @@
+name: Production public site browser
+on:
+  workflow_dispatch:
+permissions:
+  contents: read
+concurrency:
+  group: production-public-browser-${{ github.ref }}
+  cancel-in-progress: true
+jobs:
+  browser:
+    runs-on: ubuntu-24.04
+    timeout-minutes: 10
+    defaults:
+      run:
+        working-directory: site
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+      - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: 1.3.14
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: 24
+          package-manager-cache: false
+      - uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: ~/.bun/install/cache
+          key: bun-${{ runner.os }}-${{ hashFiles('site/bun.lock') }}
+          restore-keys: bun-${{ runner.os }}-
+      - run: bun install --frozen-lockfile --ignore-scripts
+      - name: Verify the live public routes
+        env:
+          GOBSTOPPER_BROWSER_EXECUTABLE: /usr/bin/google-chrome
+        run: bun run check:public-site:browser --production
+      - name: Save public page screenshots
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: production-public-site-browser
+          path: site/.impeccable/review/public-*
+          include-hidden-files: true
+          retention-days: 7
+  required:
+    name: Required
+    if: always()
+    needs: browser
+    runs-on: ubuntu-24.04
+    timeout-minutes: 5
+    steps:
+      - name: Require live browser verification
+        env:
+          RESULT: ${{ needs.browser.result }}
+        run: test "$RESULT" = success
diff --git a/site/.gitignore b/site/.gitignore
index 5b66bfc1..a92a9f02 100644
--- a/site/.gitignore
+++ b/site/.gitignore
@@ -33,3 +33,6 @@ yarn-error.log*
 next-env.d.ts
 *.tsbuildinfo
 /public/theme-bootstrap.js
+
+# Local browser verification evidence
+/.impeccable/
diff --git a/site/app/globals.css b/site/app/globals.css
index 92e51eca..1290c821 100644
--- a/site/app/globals.css
+++ b/site/app/globals.css
@@ -50,6 +50,11 @@ body {
   text-rendering: optimizeLegibility;
 }
 
+.hraness-marketing-header .hraness-design-palette-menu > summary {
+  min-inline-size: max(2.75rem, var(--interactive-target-compact, 2.75rem));
+  min-block-size: max(2.75rem, var(--interactive-target-compact, 2.75rem));
+}
+
 code,
 kbd,
 samp,
@@ -220,4 +225,3 @@ a { text-underline-offset: 0.2em; }
 
 .document-page { font-size: 1rem; line-height: 1.75; }
 .document-page :is(h1, h2, h3) { letter-spacing: -.025em; }
-
diff --git a/site/bun.lock b/site/bun.lock
index de717157..302c59fa 100644
--- a/site/bun.lock
+++ b/site/bun.lock
@@ -21,6 +21,7 @@
         "@types/react-dom": "19.2.3",
         "eslint": "9.39.4",
         "eslint-config-next": "16.3.3",
+        "playwright-core": "1.61.1",
         "postcss": "8.5.28",
         "tailwindcss": "4.2.1",
         "typescript": "6.0.3",
@@ -822,6 +823,8 @@
 
     "picomatch": ["picomatch@4.0.7", "", {}, "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA=="],
 
+    "playwright-core": ["playwright-core@1.61.1", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg=="],
+
     "possible-typed-array-names": ["possible-typed-array-names@1.1.0", "", {}, "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg=="],
 
     "postcss": ["postcss@8.5.28", "", { "dependencies": { "nanoid": "^3.3.18", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A=="],
diff --git a/site/package.json b/site/package.json
index 8cc0045a..54fd221e 100644
--- a/site/package.json
+++ b/site/package.json
@@ -19,7 +19,8 @@
     "test": "bun test ./tests/source.test.ts ./tests/home.test.tsx ./tests/compare.test.tsx ./scripts/readme-html.test.ts ./tests/ui-styles.test.tsx ./tests/blog.test.tsx",
     "typecheck": "tsc --noEmit",
     "check": "bun run check:theme && bun run sync:readme && bun run sync:blog && bun run test && bun run lint && bun run typecheck && bun run build",
-    "build:theme": "bun scripts/build-theme-bootstrap.ts"
+    "build:theme": "bun scripts/build-theme-bootstrap.ts",
+    "check:public-site:browser": "bun scripts/check-public-site-browser.mjs"
   },
   "dependencies": {
     "@hraness/design-kit": "github:hraness/design-kit#v0.23.0",
@@ -38,9 +39,10 @@
     "@types/react-dom": "19.2.3",
     "eslint": "9.39.4",
     "eslint-config-next": "16.3.3",
+    "playwright-core": "1.61.1",
+    "postcss": "8.5.28",
     "tailwindcss": "4.2.1",
-    "typescript": "6.0.3",
-    "postcss": "8.5.28"
+    "typescript": "6.0.3"
   },
   "type": "module"
 }
diff --git a/site/scripts/check-public-site-browser.mjs b/site/scripts/check-public-site-browser.mjs
new file mode 100644
index 00000000..c62d9c1b
--- /dev/null
+++ b/site/scripts/check-public-site-browser.mjs
@@ -0,0 +1,136 @@
+import assert from 'node:assert/strict';
+import { spawn } from 'node:child_process';
+import { once } from 'node:events';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { createServer } from 'node:net';
+import { isAbsolute, resolve } from 'node:path';
+import { parseArgs } from 'node:util';
+import { chromium } from 'playwright-core';
+
+const { values } = parseArgs({ options: { production: { type: 'boolean', default: false } }, strict: true });
+const repository = resolve(import.meta.dirname, '..');
+const artifacts = resolve(repository, '.impeccable/review', `public-${Date.now()}`);
+await mkdir(artifacts, { recursive: true });
+const routes = ['/', '/docs', '/benchmarks', '/methodology', '/compare/claude-code-compact', '/compare/cliffcompaction', '/blog', '/blog/introducing-gobstopper', '/blog/proofs-for-the-admission-math', '/blog/vault-models-that-fail-on-purpose', '/missing-public-verification'];
+const errors = [];
+const records = [];
+const startedAt = Date.now();
+let server;
+let browser;
+let activePage;
+let cleanupPromise;
+let origin = 'https://gobstopper.sh';
+const pause = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+async function until(check, label, timeout = 5000) {
+  const deadline = Date.now() + timeout;
+  while (Date.now() < deadline) { if (await check()) return; await pause(50); }
+  throw new Error(`Timed out: ${label}`);
+}
+async function stopServer() {
+  if (!server || server.exitCode !== null || server.signalCode !== null) return;
+  const exited = once(server, 'exit');
+  server.kill('SIGTERM');
+  await Promise.race([exited, pause(5000)]);
+  if (server.exitCode === null && server.signalCode === null) { server.kill('SIGKILL'); await exited; }
+}
+function cleanup() {
+  return cleanupPromise ??= (async () => {
+    try { await browser?.close(); } finally { await stopServer(); }
+  })();
+}
+const deadline = setTimeout(() => { console.error('Public browser verification exceeded four minutes.'); void cleanup().finally(() => process.exit(1)); }, 240000);
+for (const signal of ['SIGINT', 'SIGTERM']) process.once(signal, () => { void cleanup().finally(() => process.exit(1)); });
+try {
+  if (!values.production) {
+    const socket = createServer();
+    socket.listen(0, '127.0.0.1'); await once(socket, 'listening');
+    const port = socket.address().port;
+    await new Promise(resolve => socket.close(resolve));
+    origin = `http://127.0.0.1:${port}`;
+    server = spawn(process.execPath, [resolve(repository, 'node_modules/next/dist/bin/next'), 'start', '--hostname', '127.0.0.1', '--port', String(port)], {
+      cwd: repository, stdio: ['ignore', 'inherit', 'inherit'], env: process.env,
+    });
+    server.once('error', error => errors.push(`Server: ${error.message}`));
+    await until(async () => { assert.equal(server.exitCode, null, 'Owned Next server exited'); return fetch(origin, { signal: AbortSignal.timeout(1000) }).then(r => r.ok, () => false); }, 'Next production server', 30000);
+  }
+  const executablePath = process.env.GOBSTOPPER_BROWSER_EXECUTABLE;
+  if (executablePath) assert.ok(isAbsolute(executablePath), 'Explicit browser executable must be absolute');
+  browser = await chromium.launch({ headless: true, ...(executablePath ? { executablePath } : { channel: 'chrome' }) });
+  for (const width of [360, 390, 1440]) for (const theme of ['light', 'dark']) {
+    const context = await browser.newContext({ viewport: { width, height: width === 360 ? 740 : width === 390 ? 844 : 900 }, colorScheme: theme, reducedMotion: 'reduce', serviceWorkers: 'block' });
+    const page = await context.newPage(); activePage = page;
+    page.setDefaultTimeout(10000);
+    page.on('pageerror', error => errors.push(error.message));
+    page.on('console', message => { if (message.type() === 'error' && !message.location().url.includes('/missing-public-verification')) errors.push(message.text()); });
+    page.on('response', response => { if (response.status() >= 400 && !response.url().includes('/missing-public-verification')) errors.push(`HTTP ${response.status()} ${new URL(response.url()).pathname}`); });
+    for (const path of routes) {
+      const label = `${path === '/' ? 'home' : path.slice(1).replaceAll('/', '-')}-${width}-${theme}`;
+      const response = await page.goto(origin + path, { waitUntil: 'load' });
+      assert.equal(response.status(), path === '/missing-public-verification' ? 404 : 200, label);
+      await page.evaluate(async () => { await document.fonts.ready; });
+      assert.match(await page.title(), /Gobstopper/i, label);
+      assert.equal(await page.locator('h1').count(), 1, label);
+      assert.equal(await page.locator('#hraness-site-footer').count(), 1, label);
+      assert.equal(await page.locator('iframe').count(), 0, 'Retired embedded preview stays absent');
+      await until(() => page.evaluate(() => document.documentElement.dataset.theme).then(value => value === theme), `${label}: resolved theme`);
+      await page.screenshot({ path: resolve(artifacts, `${label}.jpg`), type: 'jpeg', quality: 90, fullPage: true, animations: 'disabled' });
+      const metrics = await page.evaluate(() => {
+        const header = document.querySelector('.hraness-marketing-header');
+        const footer = document.querySelector('#hraness-site-footer');
+        const inner = footer.querySelector('.hraness-site-footer__inner');
+        const main = document.querySelector('main');
+        const rect = element => { const r = element.getBoundingClientRect(); return { top: r.top, bottom: r.bottom, left: r.left, right: r.right, height: r.height, width: r.width }; };
+        return { overflow: document.documentElement.scrollWidth - innerWidth, header: rect(header), headerPosition: getComputedStyle(header).position, footer: rect(footer), footerInner: rect(inner), footerPosition: getComputedStyle(inner).position, main: rect(main), font: getComputedStyle(document.body).fontFamily, targets: [...header.querySelectorAll('a, button, summary')].map(a => ({ label: a.getAttribute('href') ?? a.getAttribute('aria-label'), navigation: Boolean(a.closest('nav')), ...rect(a) })) };
+      });
+      assert.ok(metrics.overflow <= 1, `${label}: document overflow`);
+      assert.match(metrics.font, /Nebula Sans/, label);
+      assert.equal(metrics.headerPosition, 'sticky', label);
+      assert.ok(metrics.header.height <= (width < 600 ? 140 : 90), `${label}: header height`);
+      assert.ok(['static', 'relative'].includes(metrics.footerPosition), `${label}: footer in flow`);
+      assert.ok(metrics.footer.top >= metrics.main.bottom - 1, `${label}: footer follows main`);
+      assert.ok(metrics.footer.height >= metrics.footerInner.height - 1, `${label}: footer reserves its footprint`);
+      for (const target of metrics.targets) assert.ok(target.height >= 44 && target.width >= 44 && (target.navigation || (target.left >= -1 && target.right <= width + 1)), `${label}: visible 44px header target ${target.label} (${target.width} × ${target.height})`);
+      for (const link of await page.locator('.hraness-marketing-header nav a').all()) {
+        await link.scrollIntoViewIfNeeded();
+        const box = await link.boundingBox();
+        assert.ok(box.x >= -1 && box.x + box.width <= width + 1, `${label}: every navigation link can be brought into view`);
+      }
+      await page.evaluate(() => scrollTo({ top: 500, behavior: 'instant' }));
+      const moved = await page.evaluate(() => ({ scroll: scrollY, header: document.querySelector('.hraness-marketing-header').getBoundingClientRect().top, footer: document.querySelector('#hraness-site-footer').getBoundingClientRect().top }));
+      assert.ok(Math.abs(moved.header) <= 1, `${label}: sticky chrome`);
+      assert.ok(Math.abs(moved.footer + moved.scroll - metrics.footer.top) <= 2, `${label}: footer scrolls with document`);
+      records.push({ route: path, width, theme, status: response.status(), metrics });
+    }
+    await page.goto(origin, { waitUntil: 'load' });
+    const trigger = page.locator('.hraness-design-palette-menu > summary');
+    await until(() => page.locator('.hraness-design-palette-menu').getAttribute('data-ready').then(value => value === 'true'), 'hydrated appearance control');
+    await trigger.click();
+    await page.getByRole('radio', { name: 'Dark', exact: true }).check();
+    await until(() => page.evaluate(() => document.documentElement.dataset.theme).then(value => value === 'dark'), 'dark appearance applied');
+    await page.locator('.hraness-marketing-header__nav a[href="/docs"]').click();
+    await page.waitForURL(origin + '/docs');
+    await until(() => page.evaluate(() => document.documentElement.dataset.theme).then(value => value === 'dark'), 'appearance persists across real navigation');
+    const appearanceMenu = page.locator('.hraness-design-palette-menu');
+    if (await appearanceMenu.evaluate(element => element.open)) await page.keyboard.press('Escape');
+    await trigger.click();
+    assert.equal(await appearanceMenu.evaluate(element => element.open), true, 'appearance menu opens');
+    await page.keyboard.press('Escape');
+    assert.equal(await appearanceMenu.evaluate(element => element.open), false, 'Escape closes appearance menu');
+    await until(() => trigger.evaluate(element => document.activeElement === element), 'appearance Escape returns focus');
+    await page.locator('.hraness-marketing-header a[href="/#install"]').click();
+    await page.waitForURL(origin + '/#install');
+    await until(() => page.locator('#install').evaluate(element => element.getBoundingClientRect().top >= document.querySelector('.hraness-marketing-header').getBoundingClientRect().bottom - 1), 'install anchor clears sticky chrome');
+    await context.close();
+  }
+  assert.deepEqual(errors, [], 'No browser runtime or resource errors');
+  const receipt = { origin, production: values.production, sourceSha: process.env.GITHUB_SHA ?? null, startedAt: new Date(startedAt).toISOString(), completedAt: new Date().toISOString(), durationMs: Date.now() - startedAt, browserErrors: errors, pagesChecked: records.length, records };
+  await writeFile(resolve(artifacts, 'verification.json'), JSON.stringify(receipt, null, 2));
+  console.log(JSON.stringify({ ...receipt, records: undefined, artifacts }, null, 2));
+} catch (error) {
+  if (activePage && !activePage.isClosed()) await activePage.screenshot({ path: resolve(artifacts, 'failure.png'), fullPage: true }).catch(() => {});
+  await writeFile(resolve(artifacts, 'failure.json'), JSON.stringify({ message: String(error), origin, errors, records }, null, 2));
+  throw error;
+} finally {
+  clearTimeout(deadline);
+  await cleanup();
+}

From 731e066a6a956bb68341854e9c98419bb953da3b Mon Sep 17 00:00:00 2001
From: 0thernet <benzguo@gmail.com>
Date: Sun, 27 Sep 2026 20:16:46 -0400
Subject: [PATCH 4/6] Keep mobile header compact and verify uncropped browser
 evidence

---
 site/app/_components/site-chrome.tsx       | 2 +-
 site/app/globals.css                       | 7 +++++++
 site/scripts/check-public-site-browser.mjs | 6 ++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/site/app/_components/site-chrome.tsx b/site/app/_components/site-chrome.tsx
index 2ee3b559..bfdd2582 100644
--- a/site/app/_components/site-chrome.tsx
+++ b/site/app/_components/site-chrome.tsx
@@ -32,7 +32,7 @@ export function SiteHeader({ path }: Readonly<{ path?: CanonicalPagePath }>) {
         Skip to content
       </a>
       <MarketingSiteHeader
-        action={{ href: "/#install", label: "Install Gobstopper" }}
+        action={{ href: "/#install", label: "Install" }}
         ariaLabel="Primary navigation"
         trailing={<ThemeMenuButton aria-label="Appearance" />}
         brand="Gobstopper"
diff --git a/site/app/globals.css b/site/app/globals.css
index 1290c821..001c264c 100644
--- a/site/app/globals.css
+++ b/site/app/globals.css
@@ -55,6 +55,13 @@ body {
   min-block-size: max(2.75rem, var(--interactive-target-compact, 2.75rem));
 }
 
+.hraness-marketing-action[data-emphasis="primary"] {
+  background: var(--primary);
+  border: 1px solid var(--primary);
+  box-shadow: none;
+  color: var(--primary-foreground);
+}
+
 code,
 kbd,
 samp,
diff --git a/site/scripts/check-public-site-browser.mjs b/site/scripts/check-public-site-browser.mjs
index c62d9c1b..845561f8 100644
--- a/site/scripts/check-public-site-browser.mjs
+++ b/site/scripts/check-public-site-browser.mjs
@@ -73,16 +73,18 @@ try {
       assert.equal(await page.locator('#hraness-site-footer').count(), 1, label);
       assert.equal(await page.locator('iframe').count(), 0, 'Retired embedded preview stays absent');
       await until(() => page.evaluate(() => document.documentElement.dataset.theme).then(value => value === theme), `${label}: resolved theme`);
-      await page.screenshot({ path: resolve(artifacts, `${label}.jpg`), type: 'jpeg', quality: 90, fullPage: true, animations: 'disabled' });
+      const screenshot = await page.screenshot({ path: resolve(artifacts, `${label}.png`), fullPage: true, animations: 'disabled' });
+      assert.equal(screenshot.readUInt32BE(16), width, `${label}: full-page screenshot width`);
       const metrics = await page.evaluate(() => {
         const header = document.querySelector('.hraness-marketing-header');
         const footer = document.querySelector('#hraness-site-footer');
         const inner = footer.querySelector('.hraness-site-footer__inner');
         const main = document.querySelector('main');
         const rect = element => { const r = element.getBoundingClientRect(); return { top: r.top, bottom: r.bottom, left: r.left, right: r.right, height: r.height, width: r.width }; };
-        return { overflow: document.documentElement.scrollWidth - innerWidth, header: rect(header), headerPosition: getComputedStyle(header).position, footer: rect(footer), footerInner: rect(inner), footerPosition: getComputedStyle(inner).position, main: rect(main), font: getComputedStyle(document.body).fontFamily, targets: [...header.querySelectorAll('a, button, summary')].map(a => ({ label: a.getAttribute('href') ?? a.getAttribute('aria-label'), navigation: Boolean(a.closest('nav')), ...rect(a) })) };
+        return { overflow: document.documentElement.scrollWidth - innerWidth, bodyOverflow: document.body.scrollWidth - innerWidth, bodyWidth: document.body.getBoundingClientRect().width, header: rect(header), headerPosition: getComputedStyle(header).position, footer: rect(footer), footerInner: rect(inner), footerPosition: getComputedStyle(inner).position, main: rect(main), font: getComputedStyle(document.body).fontFamily, targets: [...header.querySelectorAll('a, button, summary')].map(a => ({ label: a.getAttribute('href') ?? a.getAttribute('aria-label'), navigation: Boolean(a.closest('nav')), ...rect(a) })) };
       });
       assert.ok(metrics.overflow <= 1, `${label}: document overflow`);
+      assert.ok(metrics.bodyOverflow <= 1 && metrics.bodyWidth <= width + 1, `${label}: body overflow`);
       assert.match(metrics.font, /Nebula Sans/, label);
       assert.equal(metrics.headerPosition, 'sticky', label);
       assert.ok(metrics.header.height <= (width < 600 ? 140 : 90), `${label}: header height`);

From 4f2e56e9ff8830ff839c68dacfe65d952e771ec8 Mon Sep 17 00:00:00 2001
From: 0thernet <benzguo@gmail.com>
Date: Sun, 27 Sep 2026 20:33:06 -0400
Subject: [PATCH 5/6] Give narrow header links full-width tap targets

---
 site/app/globals.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/site/app/globals.css b/site/app/globals.css
index 001c264c..036cb7a5 100644
--- a/site/app/globals.css
+++ b/site/app/globals.css
@@ -55,6 +55,11 @@ body {
   min-block-size: max(2.75rem, var(--interactive-target-compact, 2.75rem));
 }
 
+.hraness-marketing-header nav a {
+  min-inline-size: 2.75rem;
+  justify-content: center;
+}
+
 .hraness-marketing-action[data-emphasis="primary"] {
   background: var(--primary);
   border: 1px solid var(--primary);

From 07de56b7ba08e6e336f32c775c2b15ac23a0f24f Mon Sep 17 00:00:00 2001
From: 0thernet <benzguo@gmail.com>
Date: Sun, 27 Sep 2026 20:44:04 -0400
Subject: [PATCH 6/6] Keep every header control at a usable target size

---
 site/app/globals.css                       | 7 +++----
 site/scripts/check-public-site-browser.mjs | 3 ++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/app/globals.css b/site/app/globals.css
index 036cb7a5..e786157e 100644
--- a/site/app/globals.css
+++ b/site/app/globals.css
@@ -50,13 +50,12 @@ body {
   text-rendering: optimizeLegibility;
 }
 
+.hraness-marketing-header :is(a, button, summary),
 .hraness-marketing-header .hraness-design-palette-menu > summary {
   min-inline-size: max(2.75rem, var(--interactive-target-compact, 2.75rem));
   min-block-size: max(2.75rem, var(--interactive-target-compact, 2.75rem));
-}
-
-.hraness-marketing-header nav a {
-  min-inline-size: 2.75rem;
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
 }
 
diff --git a/site/scripts/check-public-site-browser.mjs b/site/scripts/check-public-site-browser.mjs
index 845561f8..dd422030 100644
--- a/site/scripts/check-public-site-browser.mjs
+++ b/site/scripts/check-public-site-browser.mjs
@@ -91,7 +91,8 @@ try {
       assert.ok(['static', 'relative'].includes(metrics.footerPosition), `${label}: footer in flow`);
       assert.ok(metrics.footer.top >= metrics.main.bottom - 1, `${label}: footer follows main`);
       assert.ok(metrics.footer.height >= metrics.footerInner.height - 1, `${label}: footer reserves its footprint`);
-      for (const target of metrics.targets) assert.ok(target.height >= 44 && target.width >= 44 && (target.navigation || (target.left >= -1 && target.right <= width + 1)), `${label}: visible 44px header target ${target.label} (${target.width} × ${target.height})`);
+      const undersizedTargets = metrics.targets.filter(target => target.height < 44 || target.width < 44 || (!target.navigation && (target.left < -1 || target.right > width + 1)));
+      assert.deepEqual(undersizedTargets, [], `${label}: all header targets must be visible and at least 44px: ${JSON.stringify(undersizedTargets)}`);
       for (const link of await page.locator('.hraness-marketing-header nav a').all()) {
         await link.scrollIntoViewIfNeeded();
         const box = await link.boundingBox();