From 6c8c9c528cf72ce2d947da584602cdc5a22ee707 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 00:51:44 -0700
Subject: [PATCH 01/28] chore: stop ignoring .tmp/ (scratch demos land here)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .gitignore | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index a02b96fa..9db80d47 100644
--- a/.gitignore
+++ b/.gitignore
@@ -90,6 +90,3 @@ packages/*/assets/
 
 # Local Mintlify dev server log (transient)
 mint-dev.log
-
-# local scratch (dev logs, probe scripts)
-/.tmp/

From ddcedc6acce0bc81547019c99011b7abfdee01cc Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 01:43:38 -0700
Subject: [PATCH 02/28] docs: add audit poster restructure + dashboard
 restraint spec
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Calms /policies and /projects toward the agenteye demo aesthetic
(strip scanlines, gridline overlays, hard-offset shadows) and
restructures /audit into a single-screen poster + four below-fold
sections (strengths / quirks / how to improve / come back better).
Pink migrates from #e4587d → #e4587c throughout.

Also ignores .superpowers/ — the brainstorming companion's scratch
directory.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .gitignore                                    |   3 +
 ...6-06-11-audit-poster-restructure-design.md | 295 ++++++++++++++++++
 2 files changed, 298 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-06-11-audit-poster-restructure-design.md

diff --git a/.gitignore b/.gitignore
index 9db80d47..d161b0e6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -90,3 +90,6 @@ packages/*/assets/
 
 # Local Mintlify dev server log (transient)
 mint-dev.log
+
+# superpowers brainstorm session scratch
+.superpowers/
diff --git a/docs/superpowers/specs/2026-06-11-audit-poster-restructure-design.md b/docs/superpowers/specs/2026-06-11-audit-poster-restructure-design.md
new file mode 100644
index 00000000..5004bf0a
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-11-audit-poster-restructure-design.md
@@ -0,0 +1,295 @@
+# Audit poster restructure + dashboard restraint
+
+**Date:** 2026-06-11
+**Branch:** `luv-434`
+**Status:** design — awaiting review
+
+## Goal
+
+Pull the failproofai dashboard's visual treatment back toward the calm aesthetic of the
+agenteye demo (dark canvas, sharp 1px borders, no decorative overlays). Concurrently
+restructure `/audit` into a single-screen poster + four below-fold sections. The audit
+poster is the only quirk-bearing surface; `/policies` and `/projects` become calm, info-
+dense surfaces with no brutalist decoration.
+
+## Scope
+
+### In scope
+
+- Strip body-level decoration site-wide (scanlines, dual gridline overlay, noise filter,
+  per-page hard-offset shadows, text-shadow stamps).
+- Migrate the brand pink from `#e4587d` to `#e4587c` everywhere it appears (one hex digit;
+  ~36 references across 4 CSS files).
+- Rebuild `/audit` into 5 sections with a new component layout.
+- Restyle `/policies` and `/projects` to use only the calm base styles.
+- Keep the current top-nav (no sidebar swap).
+
+### Out of scope
+
+- Reminder delivery mechanism (email / push / cron). UI for selecting a cadence ships;
+  the dispatch backend ships in a follow-up.
+- Perks fulfillment (what "pro features for a month" unlocks, the entitlement system,
+  invite tracking). UI for the share-to-unlock card ships; the backend ships in a
+  follow-up.
+- Rarity data collection. The poster reads `archetypeRarityPct` and `scoreRank` from a
+  new (mocked-for-now) field on the audit result; a separate task populates them from
+  real aggregate data.
+- Mobile layout polish. The current `/audit` desktop-first treatment carries over.
+- Top-nav → sidebar migration. Considered and rejected (option C, scope question).
+- Animation tuning. Existing sigil reveal animation is dropped; no new animations.
+
+## Visual system change (cross-cutting)
+
+### Body atmosphere — strip
+
+In `app/globals.css`:
+
+- Remove `body::before` (engineering-plate cross-hatch gridlines at 96px and 24px tile
+  sizes).
+- Remove `body::after` (fractalNoise SVG overlay).
+- Replace the body background-image stack with a single soft cyan/teal radial glow at
+  top-right plus the existing bottom-left pink glow, attached to `background-attachment:
+  fixed`. Net visual: a calm, slightly atmospheric dark canvas — closer to the demo's
+  "soft glow around the app frame" feel.
+
+In `app/audit/audit-styles.css`:
+
+- Remove `.scanline-overlay`.
+- Remove every `box-shadow: NNpx NNpx 0 0 var(--accent-pink-shadow)` declaration (hard-
+  offset pink stamps) — except the share-button hover state, which is the only
+  interaction that earns the effect.
+- Remove every `repeating-linear-gradient(…)` declaration used as a per-section
+  background (the pink+green gridlines on `.archetype-frame`, `.empty-panel`,
+  `.score-share-card`, `.showoff-cta`, `.share-card`).
+- Remove every `text-shadow: NNpx NNpx 0 var(--accent-pink-shadow)` declaration (the
+  hard-stamp shadow on display-font headings).
+- Remove every `box-shadow: 6px 6px 0 0 var(--accent-pink-shadow)` style (similar
+  treatment on `.sigil-wrap[data-bare="true"]`, `.empty-glyph-grid`, the project list
+  empty-state grid).
+
+### Pink color migration
+
+Replace `#e4587d` with `#e4587c` (RGB 228,88,125 → 228,88,124) in:
+
+| File | Refs |
+|---|---|
+| `app/globals.css` | `--accent-pink` token + a few inline rgbs |
+| `app/audit/audit-styles.css` | bulk of refs (~25) |
+| `assets/audit/poster-styles.css` | poster-export styles |
+| `assets/audit/styles.css` | shared audit assets |
+
+The derived `rgba(228, 88, 125, X)` values also become `rgba(228, 88, 124, X)`. The hex
+delta is subliminal but the design system needs the canonical value.
+
+### Surfaces that calm down
+
+Apply this rule globally: `1px solid var(--line-2)` borders, `var(--bg-2)` fill, no
+shadows, no inner backgrounds with gridlines. Internal dividers become `1px dashed
+var(--line)`. This is the demo's atomic look.
+
+Affected classes (existing): `.archetype-frame`, `.strength-row` container,
+`.score-share-card`, `.finding`, `.policy-card`, `.share-card`, `.empty-panel`,
+`.running-panel`, `.showoff-cta`, `.panel`.
+
+## `/audit` page — new structure
+
+```
+┌──────────────────────────────────────────────┐
+│  01  POSTER  (single screen, fits viewport)  │
+├──────────────────────────────────────────────┤
+│  02  STRENGTHS — what it's great at          │
+├──────────────────────────────────────────────┤
+│  03  QUIRKS — what to improve                │
+├──────────────────────────────────────────────┤
+│  04  HOW TO IMPROVE — install/configure      │
+├──────────────────────────────────────────────┤
+│  05  COME BACK BETTER — reminder + perks     │
+└──────────────────────────────────────────────┘
+```
+
+Each section sits in a calm shell: header row (small green eyebrow `// label` + a small
+section count on the right), then a plain lowercase title, then content. 1px solid
+divider between sections.
+
+### Section 01 — Poster
+
+A self-contained PNG-capture region. Anything inside this region must work as a stand-
+alone shareable image. Layout (3-column grid: score · persona · sigil):
+
+| Slot | Content |
+|---|---|
+| Top-left | `▣ failproof_ai · audit` wordmark (small, ink color, brand mark pink) |
+| Top-right | `№ 01 of 08 · audited 2026-06-11` (archetype index from data + date) |
+| Body left | `87 / 100` (display font, 76px, pink); below: `top 15%` (small caps, green) |
+| Body center | `the optimist` (display font, 32px, lowercase); below: 3-keyword strip `pace · conviction · forgetful` (green · ink · pink); below: `// only 12% of agents are this archetype` (rarity) |
+| Body right | 8×8 sigil tile (12px cells, 1px border, no plate, no animation, no stacked shadows) |
+| Bottom-right | `audit yours → failproof.ai` (small horizontal text, green) |
+
+The capture region uses a `1px dashed var(--accent-pink-soft)` outer border to read as a
+poster-like edge. A subtle radial pink glow at top-right gives the poster a hint of
+depth without competing with the body.
+
+**Outside the capture region** (UI only, not part of the PNG): a row of three share
+buttons — `[ 𝕏 post your archetype ] [ in share on linkedin ] [ ↓ download poster ]` —
+plus a scroll hint `scroll for full report ↓`.
+
+Dropped from the current Identity hero: hard-offset shadow, archetype index "corner"
+labels (TL/TR/BL/BR positioned text), dashed-frame chrome, sigil plate with crosshair
+marks, sigil reveal animation, archetype "tagline" prose line, archetype "common in"
+meta grid, archetype closing line, signature receipt block.
+
+### Section 02 — Strengths · "what it's great at"
+
+3 rows; each: `✓` glyph · headline + sub-detail · right-aligned metric with small-caps
+unit label. No card chrome, no hover backgrounds, no checkmark backdrop. 1px dashed
+divider between rows.
+
+The metric units currently fluctuate (sessions / 18-of-18 / 80k cap). The spec keeps
+this — uniform metrics would be a separate spec — but adds a note to the implementation:
+prefer `N / M sessions` framing when possible, fall back to absolute counts.
+
+### Section 03 — Quirks · "what to improve"
+
+A 4-column table:
+
+| Col | Width | Content |
+|---|---|---|
+| `time` | 60px | timestamp like `09:14` (5-sec resolution) |
+| `what slipped` | 1fr | tool call + arg; below in dim: `would've been caught by: <policy-slug>` |
+| `severity` | 80px | pill (low / medium / high) — color-coded |
+| `seen` | 70px | `new` · `2× this wk` · `recurring` |
+
+Section header on the right shows `N slipped through`. The row is a plain grid; no card
+chrome, no corner crosshairs, no per-finding numbered card.
+
+The current 4-quadrant `.finding-body` (description · evidence · cost · fix) is
+collapsed. Evidence + fix are accessible via an inline expander (chevron on the row), or
+deferred to the "how to improve" section below — they're not duplicated on the row
+itself.
+
+### Section 04 — How to improve · "install or configure"
+
+A small card per recommended action. Each card:
+
+- Left: title (`install <code>no-sensitive-files</code>` or `configure …`); below:
+  `would catch quirk #N · <short description>`; below: `$ failproofai install <slug>`
+  (green, monospace, dashed top-divider above it).
+- Right: install/configure button (pink outlined, small caps, primary affordance).
+
+Card chrome: `1px solid var(--line-2)`, background `var(--bg-2)`. No shadows. 10px gap
+between cards.
+
+The mapping from quirk → fix is explicit in copy (`would catch quirk #1`) — this is the
+only cross-reference between sections.
+
+### Section 05 — Come back better · "build the habit"
+
+Two side-by-side cards, equal width:
+
+**Left card — Set a reminder.** Title + one-sentence sub. A row of 4 cadence buttons:
+`3d` · `7d` · `14d` · `30d`. The current selection (`7d` default) has a pink filled
+outline; the others are plain 1px ink-color outlines. Clicking a cadence persists the
+choice (UI-only in this spec; backend dispatch is out of scope).
+
+**Right card — Unlock failproof perks.** Title + sub: `share with 3 friends → unlock
+pro features for a month.` Progress bar (6px tall, pink fill on dark track), `1 of 3
+invited · 2 to go` text, `invite a friend` button (pink outlined). Footer: `// invites
+are tracked by signup — they have to run an audit too.`
+
+Both card backgrounds are `var(--bg-2)` with `1px solid var(--line-2)` borders. No
+shadows.
+
+The perks card UI is real; the backend that tracks invites + grants entitlement is
+out of scope. The component should accept `inviteCount` and `inviteTarget` as props
+and render proportionally — the placeholder values (1/3) come from a mock for now.
+
+## `/policies` and `/projects` — calm-down
+
+The structure does not change. Only the styles do:
+
+- `app/projects/page.tsx` already wraps in `.report` + `.section` chrome — that stays.
+  The inner empty-state pixel grid loses its hard-offset shadow.
+- The inner `ProjectList` component currently uses Tailwind utilities that resolve to
+  the audit palette through shadcn aliases. It calms automatically once the underlying
+  tokens (`--card`, `--border`, etc.) lose their decorative treatments. No component
+  changes expected.
+- `app/policies/page.tsx` wraps `HooksClient`. The client uses `Button`, `lucide` icons,
+  and table-style activity. Same auto-calm via tokens. No restructure.
+- Section headers in both pages keep the existing `━━ <label>` glyph + green eyebrow
+  pattern — that pattern matches the demo's `// raw events from agents` motif.
+
+## Component map (old → new)
+
+| Old file | Action | Notes |
+|---|---|---|
+| `_components/identity-section.tsx` | renamed → `audit-poster.tsx` | rebuilt to the 3-column poster layout above |
+| `_components/sigil.tsx` | simplified | drop `.sigil-plate`, `.sigil-mark` corner crosshairs, `.sigil-strip` header/footer, animation; keep just the 8×8 grid. Reused by the new `audit-poster.tsx`. |
+| `_components/strengths-section.tsx` | restyled in place | drop hard borders + hover backgrounds; rows become demo-style |
+| `_components/findings-section.tsx` | renamed → `quirks-section.tsx` | restructured as a 4-column table; per-finding card chrome dropped |
+| `_components/score-section.tsx` | **deleted** | score + tier + share moved into the poster |
+| `_components/show-off-cta.tsx` | **deleted** | poster owns sharing now |
+| `_components/share-dock.tsx` | **deleted** | floating dock redundant given poster share buttons |
+| `_components/share-templates.ts` | kept | template copy still drives the X / LinkedIn intent URLs |
+| `_components/policies-section.tsx` | renamed → `how-to-improve-section.tsx` | restyled to fix-card layout; copy reframed around "would catch quirk #N" |
+| `_components/return-section.tsx` | renamed → `come-back-better-section.tsx` | restructured as 2 side-by-side cards (reminder + perks) |
+| `_components/report-footer.tsx` | kept | already calm |
+| `_components/empty-state.tsx` | restyled | drop hard-offset shadow, drop gridline background |
+| `_components/run-progress.tsx`, `audit-progress-strip.tsx`, `rerun-button.tsx`, `auth-dialog.tsx` | restyled | drop the loud bits, no structural changes |
+
+The audit dashboard's outer shell (`audit-dashboard.tsx`) wires up the new component
+list. The `Sigil` component continues to be reused by the share template / poster export.
+
+## Data dependencies
+
+| Field | Source | Status |
+|---|---|---|
+| `score` (0-100) | existing `scoring.ts` | ready |
+| `archetype.name` (e.g., `"the optimist"`) | existing `archetypes.ts` | ready |
+| `archetype.index` (e.g., `"01"`) | existing `archetypes.ts` | ready |
+| `archetype.keywords` (3 strings) | existing `archetypes.ts` | ready |
+| `archetype.signature` (3-line trace) | existing `archetypes.ts` | not used on poster (preserved for future use) |
+| `archetypeRarityPct` (e.g., `12`) | **NEW** — seed value | seeded from snapshot data |
+| `scoreRank` (e.g., `top 15%`) | **NEW** — derived from aggregate distribution | seeded from snapshot data |
+| `auditDate` (ISO date) | existing `cachedAt` | ready, reformatted |
+| `reminderCadence` (3 / 7 / 14 / 30 days) | **NEW** — user setting | UI ships; dispatch is a follow-up |
+| `inviteCount`, `inviteTarget` | **NEW** — mock for now | UI ships; tracking backend is a follow-up |
+
+The 5 NEW fields land on the audit result shape as an additive change. None block UI
+shipping — they default to placeholder values until the backing data is wired up. The
+poster's rarity line falls back to nothing (no fake numbers) when the field is missing.
+
+## Out-of-scope follow-ups (worth tracking)
+
+1. Reminder dispatch backend (cron + email/push)
+2. Perks fulfillment + invite tracking (entitlements, share-link tracking, audit-run
+   verification)
+3. Aggregate rarity data pipeline (population of `archetypeRarityPct`, `scoreRank`)
+4. Mobile layout audit + responsive polish
+5. Poster PNG export quality at 1080×1080 / 1200×630 ratios
+6. Brand wordmark / logo asset for the poster (current `▣ failproof_ai · audit` is a
+   text mark — designers may want a proper monogram)
+
+## Testing
+
+- Visual regression: snapshot the new audit page, policies page, projects page in CI
+  (Playwright + screenshot diff). Re-baseline once the design lands.
+- Unit: pink hex check — grep for any remaining `#e4587d` in CSS/TS, fail CI.
+- Unit: poster PNG capture — exercise the `html2canvas` flow against the new poster
+  HTML, assert all 8 required elements are present in the captured DOM.
+- Manual: each archetype renders the poster correctly (run the page for each of the 8
+  archetypes — sigil + keywords + name + rarity).
+- Manual: rarity field missing → rarity line is omitted, not zeroed.
+
+## Open questions
+
+These are not blockers for the design doc, but the implementation plan should resolve
+each before code is shipped:
+
+1. The "audited 2026-06-11" date on the poster — does it use the local browser timezone
+   or UTC? The poster might be shared across timezones — UTC is safer, browser-local is
+   more meaningful to the original viewer. Recommend UTC + ISO date format.
+2. Score rank ("top 15%") — calculated against what cohort? Global all-time? Last 30
+   days? Same-archetype users? The framing changes whether "top 15%" is impressive.
+3. Perks card copy — "pro features for a month" promises something we haven't built.
+   Acceptable to ship as aspirational, or rephrase to a softer hook ("share to support
+   the project") until perks are real?

From c8c692794e2859d024943429af982db9fc65023e Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 01:52:15 -0700
Subject: [PATCH 03/28] docs: revert /policies + /projects headings to plain
 title case
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Spec amendment: when /policies and /projects calm down, their
headings revert to the plain English wording from commit a0a18415
(Policies / Configure Policies / Projects), not the current
brutalist lowercase + ━━ glyph + green eyebrow chrome. These are
utility surfaces — the audit poster keeps its lowercase character,
they don't need to.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 ...6-06-11-audit-poster-restructure-design.md | 61 +++++++++++++++----
 1 file changed, 49 insertions(+), 12 deletions(-)

diff --git a/docs/superpowers/specs/2026-06-11-audit-poster-restructure-design.md b/docs/superpowers/specs/2026-06-11-audit-poster-restructure-design.md
index 5004bf0a..7502d5b8 100644
--- a/docs/superpowers/specs/2026-06-11-audit-poster-restructure-design.md
+++ b/docs/superpowers/specs/2026-06-11-audit-poster-restructure-design.md
@@ -205,18 +205,55 @@ and render proportionally — the placeholder values (1/3) come from a mock for
 
 ## `/policies` and `/projects` — calm-down
 
-The structure does not change. Only the styles do:
-
-- `app/projects/page.tsx` already wraps in `.report` + `.section` chrome — that stays.
-  The inner empty-state pixel grid loses its hard-offset shadow.
-- The inner `ProjectList` component currently uses Tailwind utilities that resolve to
-  the audit palette through shadcn aliases. It calms automatically once the underlying
-  tokens (`--card`, `--border`, etc.) lose their decorative treatments. No component
-  changes expected.
-- `app/policies/page.tsx` wraps `HooksClient`. The client uses `Button`, `lucide` icons,
-  and table-style activity. Same auto-calm via tokens. No restructure.
-- Section headers in both pages keep the existing `━━ <label>` glyph + green eyebrow
-  pattern — that pattern matches the demo's `// raw events from agents` motif.
+The structure does not change. Styles calm down AND headings revert to the plain
+title-case wording that existed prior to the brutalist redesign (reference: commit
+[`a0a18415`](https://github.com/FailproofAI/failproofai/commit/a0a18415c5ee93d13bfb64985616b0bbb1346b4d)).
+
+These two pages are utility surfaces, not brand artifacts — they get sharp English
+headings, not the lowercase + `// comment` style we kept for the audit poster. The
+visual languages diverge by purpose: the audit page is a poster, `/policies` and
+`/projects` are dashboards.
+
+### `/policies` headings (revert wording, drop chrome)
+
+| Element | Current | Revert to |
+|---|---|---|
+| Page heading (activity tab) | `Policies` (lowercase via `textTransform: none` + `section-h` chrome) | **`Policies`** plain title case, no chrome |
+| Page heading (configure tab) | `what to stop them doing.` | **`Configure Policies`** |
+| Subheading prose | `{evaluationsHeading}.toLowerCase()` + `enabled policies N/M` | **`{evaluationsHeading}`** in its original title case (`Policy evaluations across …`) |
+| Tab labels | `Activity` / `Configure` (already correct in `TabBar`) | unchanged |
+
+Drop the `section-h-dot` ping animation next to the activity heading — the
+`evaluationsHeading` prose carries the "live" signal already.
+
+### `/projects` headings (revert wording, drop chrome)
+
+| Element | Current | Revert to |
+|---|---|---|
+| Section eyebrow | `━━ projects` glyph + `● N folders` meta | **drop entirely** |
+| Page heading | `your agent footprint.` (lowercase, period) | **`Projects`** plain title case |
+| Empty-state copy | `no projects found in the .claude/projects directory.` (with pink `<code>` highlight) | **`No projects found in the .claude/projects directory.`** plain sentence case |
+| Empty-state pixel grid | renders with `boxShadow: 4px 4px 0 0 var(--accent-pink-shadow)` | drop the shadow; keep the grid |
+
+### Inner components — auto-calm via tokens
+
+- `ProjectList` uses Tailwind utilities that resolve to the audit palette through
+  shadcn aliases (`bg-card`, `border-border`, `text-muted-foreground`, …). It calms
+  automatically once the underlying tokens lose their decorative treatments. No
+  component changes expected.
+- `HooksClient` uses `Button`, `lucide` icons, and a table-style activity list. Same
+  auto-calm via tokens. No restructure.
+
+### Style scope
+
+- Wrap-up containers (`.report`, `.section`) stay — they're the calm shell that the
+  demo also uses (max-width + horizontal padding).
+- All instances of `section-h` styling that previously rendered the `━━` glyph + green
+  eyebrow on `/policies` and `/projects` are replaced with plain `<h1>` / `<h2>` tags
+  using `text-2xl font-semibold tracking-tight text-foreground` (or equivalent).
+- The `section-mast` row that held the eyebrow + count meta is dropped on these two
+  pages.
+- `section-h-dot` is dropped on `/policies`.
 
 ## Component map (old → new)
 

From f0240e2631ac447c4cfc3b0f72ec8d61a9e6e724 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 01:56:58 -0700
Subject: [PATCH 04/28] style: calm site chrome + revert /policies + /projects
 to plain headings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pink migrates from #e4587d → #e4587c across 4 CSS files (36 refs,
no functional change to the human eye but the design token is now
canonical).

Body atmosphere strips down to a single soft cyan glow at the
top-right; the engineering-plate gridline + noise overlays go away
and the dual radial gradients collapse to one. Closer to the
agenteye demo's calm-with-a-hint feel.

/policies and /projects revert to plain title-case English
headings (Policies / Configure Policies / Projects) — these are
utility surfaces, not brand artifacts. The brutalist ━━ glyph +
green eyebrow + lowercase-with-period treatment leaves with them;
the audit page keeps it. Empty-state pixel grid on /projects
loses its hard-offset pink shadow.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/audit/audit-styles.css     | 40 +++++++++++++++++-----------------
 app/globals.css                | 33 ++++------------------------
 app/policies/hooks-client.tsx  | 16 ++++++++++----
 app/projects/page.tsx          | 37 ++++++++++++-------------------
 assets/audit/poster-styles.css |  2 +-
 assets/audit/styles.css        | 22 +++++++++----------
 6 files changed, 62 insertions(+), 88 deletions(-)

diff --git a/app/audit/audit-styles.css b/app/audit/audit-styles.css
index 120dcac3..eca88321 100644
--- a/app/audit/audit-styles.css
+++ b/app/audit/audit-styles.css
@@ -24,7 +24,7 @@
   padding: 48px 56px;
   display: flex; flex-direction: column;
   background:
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.025) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.025) 0 1px, transparent 1px 16px),
     repeating-linear-gradient(90deg, rgba(102,209,181,0.025) 0 1px, transparent 1px 16px),
     var(--bg-2);
 }
@@ -257,7 +257,7 @@
   margin-right: auto;
   border: 1px solid var(--line-2);
   background:
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.025) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.025) 0 1px, transparent 1px 16px),
     repeating-linear-gradient(90deg, rgba(102,209,181,0.025) 0 1px, transparent 1px 16px),
     var(--bg-2);
   padding: 56px 56px 48px;
@@ -474,7 +474,7 @@
   background:
     /* faint pink+green gridlines — same recipe as `.archetype-frame` so the
        sigil reads as a smaller specimen of the same instrument family */
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.04) 0 1px, transparent 1px 12px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.04) 0 1px, transparent 1px 12px),
     repeating-linear-gradient(90deg, rgba(102,209,181,0.04) 0 1px, transparent 1px 12px),
     var(--bg);
   border: 1px solid var(--line-2);
@@ -561,7 +561,7 @@
 .sigil .px.p  {
   background: var(--accent-pink);
   /* subtle inner glow on accent cells so they pop without breaking pixel-craft */
-  box-shadow: 0 0 4px rgba(228, 88, 125, 0.45);
+  box-shadow: 0 0 4px rgba(228, 88, 124, 0.45);
 }
 .sigil .px.g  {
   background: var(--accent-green);
@@ -851,8 +851,8 @@
 .score-share-card {
   padding: 22px 24px 20px;
   background:
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.03) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228,88,125,0.03) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
     var(--bg-2);
 }
 
@@ -1011,9 +1011,9 @@
   background: var(--dim);
 }
 .ss-chip.missing {
-  border-color: rgba(228, 88, 125, 0.6);
+  border-color: rgba(228, 88, 124, 0.6);
   color: var(--accent-pink);
-  background: rgba(228, 88, 125, 0.06);
+  background: rgba(228, 88, 124, 0.06);
 }
 .ss-chip.missing .dot { background: var(--accent-pink); }
 .ss-chip.enabled {
@@ -1255,8 +1255,8 @@
   padding: 28px 32px;
   border: 1px solid var(--line-2);
   background:
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.025) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228,88,125,0.025) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.025) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.025) 0 1px, transparent 1px 16px),
     var(--bg-2);
   color: var(--ink);
   text-decoration: none;
@@ -1266,8 +1266,8 @@
 .showoff-cta:hover {
   border-color: var(--ink-2);
   background:
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.04) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228,88,125,0.04) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.04) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.04) 0 1px, transparent 1px 16px),
     var(--bg-3);
 }
 .showoff-cta::before {
@@ -1448,8 +1448,8 @@
 .share-card {
   border: 1px solid var(--accent-pink);
   background:
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.02) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228,88,125,0.02) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.02) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.02) 0 1px, transparent 1px 16px),
     var(--bg-2);
   padding: 32px;
   position: relative;
@@ -1650,8 +1650,8 @@
   padding: 18px 20px;
   border: 1px solid var(--accent-pink);
   background:
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.03) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228,88,125,0.03) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
     var(--bg-2);
 }
 .return-status .rs-row {
@@ -1674,7 +1674,7 @@
 }
 .rs-dot-pink {
   background: var(--accent-pink);
-  box-shadow: 0 0 8px rgba(228,88,125,0.55);
+  box-shadow: 0 0 8px rgba(228, 88, 124,0.55);
   animation: pulseDot 1.6s ease-in-out infinite;
 }
 .rs-dot-green {
@@ -1729,7 +1729,7 @@
   display: grid; place-items: center;
   padding: 32px 16px;
   background:
-    radial-gradient(ellipse 1000px 700px at 30% 20%, rgba(228,88,125,0.08) 0%, transparent 60%),
+    radial-gradient(ellipse 1000px 700px at 30% 20%, rgba(228, 88, 124,0.08) 0%, transparent 60%),
     rgba(8,8,10,0.78);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
@@ -1747,8 +1747,8 @@
   padding: 32px 32px 28px;
   border: 1px solid var(--accent-pink);
   background:
-    repeating-linear-gradient(0deg,  rgba(228,88,125,0.03) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228,88,125,0.03) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg,  rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
     var(--bg-2);
   box-shadow: 8px 8px 0 0 var(--accent-pink-shadow);
   font-family: var(--font-mono);
diff --git a/app/globals.css b/app/globals.css
index df777e86..5fa8a09f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -38,10 +38,10 @@
   --dim: #5e5c58;
   --line: #25252b;
   --line-2: #32323a;
-  --accent-pink: #e4587d;
-  --accent-pink-soft: rgba(228, 88, 125, 0.7);
+  --accent-pink: #e4587c;
+  --accent-pink-soft: rgba(228, 88, 124, 0.7);
   --accent-pink-shadow: #a83a5a;
-  --accent-pink-bg: rgba(228, 88, 125, 0.12);
+  --accent-pink-bg: rgba(228, 88, 124, 0.12);
   --accent-green: #66d1b5;
   --accent-green-shadow: #3e9a82;
   --accent-green-bg: rgba(102, 209, 181, 0.10);
@@ -109,9 +109,7 @@ html, body, #root {
 body {
   background-color: var(--bg);
   background-image:
-    radial-gradient(ellipse 1200px 800px at 70% -10%, rgba(228, 88, 125, 0.055) 0%, transparent 60%),
-    radial-gradient(ellipse 1000px 700px at 0% 100%, rgba(102, 209, 181, 0.04) 0%, transparent 55%),
-    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0,0,0,0.45) 100%),
+    radial-gradient(ellipse 1000px 600px at 85% -10%, rgba(102, 209, 181, 0.045) 0%, transparent 60%),
     linear-gradient(180deg, #16161a 0%, #0f0f12 100%);
   background-attachment: fixed;
   position: relative;
@@ -120,29 +118,6 @@ body {
 button { font-family: inherit; cursor: pointer; }
 a { color: inherit; }
 
-/* engineering-plate cross-hatch + grain — site-wide atmosphere */
-body::before {
-  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
-  background-image:
-    linear-gradient(0deg, rgba(255,255,255,0.018) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
-    linear-gradient(0deg, rgba(255,255,255,0.012) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
-  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
-  opacity: 0.7;
-}
-body::after {
-  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.82  0 0 0 0 0.78  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
-  opacity: 0.4;
-  mix-blend-mode: overlay;
-}
-
-body > * {
-  position: relative;
-  z-index: 3;
-}
-
 /* shrink scrollbars without breaking the dark theme */
 ::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-track { background: var(--bg-2); }
diff --git a/app/policies/hooks-client.tsx b/app/policies/hooks-client.tsx
index d605f482..88bbc93a 100644
--- a/app/policies/hooks-client.tsx
+++ b/app/policies/hooks-client.tsx
@@ -1663,9 +1663,17 @@ export default function HooksClient({ initialTab = "activity" }: { initialTab?:
   return (
     <main className="report">
       <section className="section" data-screen-label="policies">
-        <h2 className="section-h" style={{ textTransform: "none" }}>
-          {activeTab === "activity" ? "Policies" : "what to stop them doing."}
-          {activeTab === "activity" && <span className="section-h-dot" aria-hidden />}
+        <h2
+          style={{
+            fontFamily: "var(--font-mono)",
+            fontSize: 24,
+            fontWeight: 600,
+            letterSpacing: "-0.01em",
+            color: "var(--ink)",
+            margin: "0 0 16px",
+          }}
+        >
+          {activeTab === "activity" ? "Policies" : "Configure Policies"}
         </h2>
         {activeTab === "activity" ? (
           <div
@@ -1688,7 +1696,7 @@ export default function HooksClient({ initialTab = "activity" }: { initialTab?:
                 minWidth: 0,
               }}
             >
-              {evaluationsHeading.toLowerCase()}
+              {evaluationsHeading}
               {policyCounts && (
                 <span style={{ color: "var(--dim)" }}>
                   {" · "}enabled policies{" "}
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index ed46ea48..27311bc3 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -1,12 +1,4 @@
-/** Projects page — lists all Claude Agent SDK project folders.
- *
- * Wrapped in the audit `.report` + `.section` chrome so the page picks up
- * the unified design system: mono fonts, section masthead with the ━━
- * glyph + green eyebrow label, and the dashed-frame `.panel` around the
- * project list when it's populated. The inner ProjectList component is
- * unchanged — every Tailwind utility it uses (bg-card, text-foreground,
- * border-border, …) now resolves to the audit palette globally.
- */
+/** Projects page — lists all Claude Agent SDK project folders. */
 import { Suspense } from "react";
 import { notFound } from "next/navigation";
 import { getCachedProjectFolders } from "@/lib/projects";
@@ -26,17 +18,17 @@ export default async function ProjectsPage() {
   return (
     <main className="report">
       <section className="section" data-screen-label="projects">
-        <div className="section-mast">
-          <div className="section-label">
-            <span className="glyph">━━</span> projects
-          </div>
-          <div className="section-meta">
-            <span className={count > 0 ? "g" : "p"}>●</span>{" "}
-            {count} {count === 1 ? "folder" : "folders"}
-          </div>
-        </div>
-        <h2 className="section-h" style={{ textTransform: "none" }}>
-          your agent footprint.
+        <h2
+          style={{
+            fontFamily: "var(--font-mono)",
+            fontSize: 24,
+            fontWeight: 600,
+            letterSpacing: "-0.01em",
+            color: "var(--ink)",
+            margin: "0 0 24px",
+          }}
+        >
+          Projects
         </h2>
 
         {count === 0 ? (
@@ -54,7 +46,6 @@ export default async function ProjectsPage() {
                   padding: 12,
                   border: "1px solid var(--line-2)",
                   background: "var(--bg)",
-                  boxShadow: "4px 4px 0 0 var(--accent-pink-shadow)",
                 }}
               >
                 {Array.from({ length: 36 }).map((_, i) => {
@@ -72,7 +63,7 @@ export default async function ProjectsPage() {
               </div>
             </div>
             <p style={{ color: "var(--ink-2)", marginBottom: 8 }}>
-              no projects found in the <code style={{ color: "var(--accent-pink)" }}>.claude/projects</code> directory.
+              No projects found in the <code>.claude/projects</code> directory.
             </p>
             <p
               style={{
@@ -81,7 +72,7 @@ export default async function ProjectsPage() {
                 letterSpacing: "0.05em",
               }}
             >
-              run an agent in any folder and it will show up here.
+              Run an agent in any folder and it will show up here.
             </p>
           </div>
         ) : (
diff --git a/assets/audit/poster-styles.css b/assets/audit/poster-styles.css
index ad3a5712..637d8b9d 100644
--- a/assets/audit/poster-styles.css
+++ b/assets/audit/poster-styles.css
@@ -56,7 +56,7 @@
 .poster {
   position: relative;
   background:
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.03) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
     repeating-linear-gradient(90deg, rgba(102,209,181,0.025) 0 1px, transparent 1px 16px),
     var(--bg-2);
   border: 1px solid var(--line-2);
diff --git a/assets/audit/styles.css b/assets/audit/styles.css
index 3d12cbe0..de074784 100644
--- a/assets/audit/styles.css
+++ b/assets/audit/styles.css
@@ -21,10 +21,10 @@
   --dim: #5e5c58;
   --line: #25252b;
   --line-2: #32323a;
-  --accent-pink: #e4587d;
-  --accent-pink-soft: rgba(228, 88, 125, 0.7);
+  --accent-pink: #e4587c;
+  --accent-pink-soft: rgba(228, 88, 124, 0.7);
   --accent-pink-shadow: #a83a5a;
-  --accent-pink-bg: rgba(228, 88, 125, 0.12);
+  --accent-pink-bg: rgba(228, 88, 124, 0.12);
   --accent-green: #66d1b5;
   --accent-green-shadow: #3e9a82;
   --accent-green-bg: rgba(102, 209, 181, 0.10);
@@ -52,7 +52,7 @@ html, body, #root {
 body {
   background-color: var(--bg);
   background-image:
-    radial-gradient(ellipse 1200px 800px at 70% -10%, rgba(228, 88, 125, 0.055) 0%, transparent 60%),
+    radial-gradient(ellipse 1200px 800px at 70% -10%, rgba(228, 88, 124, 0.055) 0%, transparent 60%),
     radial-gradient(ellipse 1000px 700px at 0% 100%, rgba(102, 209, 181, 0.04) 0%, transparent 55%),
     radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0,0,0,0.45) 100%),
     linear-gradient(180deg, #16161a 0%, #0f0f12 100%);
@@ -216,7 +216,7 @@ a { color: inherit; text-decoration: none; }
   position: relative;
   border: 1px solid var(--line-2);
   background:
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.025) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.025) 0 1px, transparent 1px 16px),
     repeating-linear-gradient(90deg, rgba(102,209,181,0.025) 0 1px, transparent 1px 16px),
     var(--bg-2);
   padding: 56px 56px 48px;
@@ -805,8 +805,8 @@ a { color: inherit; text-decoration: none; }
   padding: 28px 32px;
   border: 1px solid var(--line-2);
   background:
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.025) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228,88,125,0.025) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.025) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.025) 0 1px, transparent 1px 16px),
     var(--bg-2);
   color: var(--ink);
   text-decoration: none;
@@ -816,8 +816,8 @@ a { color: inherit; text-decoration: none; }
 .showoff-cta:hover {
   border-color: var(--ink-2);
   background:
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.04) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228,88,125,0.04) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.04) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.04) 0 1px, transparent 1px 16px),
     var(--bg-3);
 }
 .showoff-cta::before {
@@ -995,8 +995,8 @@ a { color: inherit; text-decoration: none; }
 .share-card {
   border: 1px solid var(--accent-pink);
   background:
-    repeating-linear-gradient(0deg, rgba(228,88,125,0.02) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228,88,125,0.02) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.02) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.02) 0 1px, transparent 1px 16px),
     var(--bg-2);
   padding: 32px;
   position: relative;

From 79ac0680185e523ce5f8fae41aeb9495a98e1d3e Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 02:10:11 -0700
Subject: [PATCH 05/28] feat(audit): restructure into 5-section flow with
 shareable poster
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the brutalist identity hero + score + show-off CTA + share
dock + findings + policies + return triumvirate with a single
calm flow:

  01 Poster        single-screen shareable artifact (score, persona,
                   keywords, rarity, sigil tile, share row)
  02 Strengths    ✓ row list — what it's great at
  03 Quirks        4-column table — what slipped through
  04 How to improve  fix cards mapping each fix to a quirk
  05 Come back better  reminder cadence picker + perks card

The poster owns sharing (X / LinkedIn intent + PNG download); the
old floating share-dock is gone. Sigil drops its instrument plate +
crosshair marks + reveal animation — bare 8×8 grid, framed by the
poster itself.

New social-proof.ts seeds archetype rarity and score-rank bands
from a static snapshot — swap for live aggregates when the
pipeline lands. The reminder card preserves the existing auth +
/api/auth/reminder flow but adds a 3d/7d/14d/30d cadence picker.

Deleted: identity-section, score-section, show-off-cta, share-dock,
findings-section, policies-section, return-section.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/audit/_components/audit-dashboard.tsx     |  92 +---
 app/audit/_components/audit-poster.tsx        | 273 +++++++++
 .../_components/come-back-better-section.tsx  | 311 +++++++++++
 app/audit/_components/findings-section.tsx    | 135 -----
 .../_components/how-to-improve-section.tsx    | 165 ++++++
 app/audit/_components/identity-section.tsx    | 126 -----
 app/audit/_components/policies-section.tsx    | 194 -------
 app/audit/_components/quirks-section.tsx      |  75 +++
 app/audit/_components/return-section.tsx      | 416 --------------
 app/audit/_components/score-section.tsx       | 179 ------
 app/audit/_components/share-dock.tsx          | 265 ---------
 app/audit/_components/show-off-cta.tsx        | 135 -----
 app/audit/_components/sigil.tsx               |  75 +--
 app/audit/_components/strengths-section.tsx   |  52 +-
 app/audit/audit-styles.css                    | 516 ++++++++++++++++++
 src/audit/social-proof.ts                     |  34 ++
 16 files changed, 1433 insertions(+), 1610 deletions(-)
 create mode 100644 app/audit/_components/audit-poster.tsx
 create mode 100644 app/audit/_components/come-back-better-section.tsx
 delete mode 100644 app/audit/_components/findings-section.tsx
 create mode 100644 app/audit/_components/how-to-improve-section.tsx
 delete mode 100644 app/audit/_components/identity-section.tsx
 delete mode 100644 app/audit/_components/policies-section.tsx
 create mode 100644 app/audit/_components/quirks-section.tsx
 delete mode 100644 app/audit/_components/return-section.tsx
 delete mode 100644 app/audit/_components/score-section.tsx
 delete mode 100644 app/audit/_components/share-dock.tsx
 delete mode 100644 app/audit/_components/show-off-cta.tsx
 create mode 100644 src/audit/social-proof.ts

diff --git a/app/audit/_components/audit-dashboard.tsx b/app/audit/_components/audit-dashboard.tsx
index bd9d9388..3da689fa 100644
--- a/app/audit/_components/audit-dashboard.tsx
+++ b/app/audit/_components/audit-dashboard.tsx
@@ -3,30 +3,31 @@
 /**
  * Top-level client wrapper for /audit.
  *
- * Composes the personality report: classify the agent into one of 8
- * archetypes, derive a score + tier, render the IdentitySection +
- * ShowOff + Strengths + Score (with leaderboard) + Findings + Policies
- * + Return-loop CTA.
+ * Composes the calm personality report: classify the agent into one of
+ * 8 archetypes, derive a score, and render the 5-section flow:
  *
- * Empty / running states fall back to the existing EmptyState and
- * RunProgress components.
+ *   01 AuditPoster — single-screen shareable poster
+ *   02 StrengthsSection — what it's great at
+ *   03 QuirksSection — what slipped through
+ *   04 HowToImproveSection — install / configure
+ *   05 ComeBackBetterSection — reminder + perks
+ *
+ * Empty / running states fall back to EmptyState and RunProgress.
  */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getAuditResultAction } from "@/app/actions/get-audit-result";
 import type { AuditResult, RunAuditOptions } from "@/src/audit/types";
 import { classifyAgent } from "@/src/audit/archetypes";
-import { COHORT_SIZE, deriveScore, gradeFor, projectedScore, type Grade } from "@/src/audit/scoring";
+import { deriveScore, gradeFor, projectedScore } from "@/src/audit/scoring";
 import { deriveStrengths } from "@/src/audit/strengths";
 import { deriveFindings } from "@/src/audit/findings";
 import { usePostHog } from "@/contexts/PostHogContext";
 
-import { IdentitySection } from "./identity-section";
-import { ShareDock } from "./share-dock";
+import { AuditPoster } from "./audit-poster";
 import { StrengthsSection } from "./strengths-section";
-import { ScoreSection } from "./score-section";
-import { FindingsSection } from "./findings-section";
-import { PoliciesSection } from "./policies-section";
-import { ReturnSection } from "./return-section";
+import { QuirksSection } from "./quirks-section";
+import { HowToImproveSection } from "./how-to-improve-section";
+import { ComeBackBetterSection } from "./come-back-better-section";
 import { ReportFooter } from "./report-footer";
 import { EmptyState } from "./empty-state";
 import { RunProgress } from "./run-progress";
@@ -58,11 +59,6 @@ interface Props {
   totalCatalogSize: number;
 }
 
-function inferWindow(params: RunAuditOptions | undefined): string {
-  if (!params?.since) return "all time";
-  return params.since;
-}
-
 function inferProjectName(result: AuditResult, override?: string): string {
   if (override && override.trim()) return override;
   // Pick the cwd that appears in the most examples — proxy for "your
@@ -249,9 +245,7 @@ export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Pr
     <MainReport
       result={result}
       cachedAt={cachedAt}
-      params={params}
       projectFromUrl={projectFromUrl}
-      totalCatalogSize={totalCatalogSize}
       isRunning={running}
       rerunStatus={rerunStatus}
       onRerun={(source) => startRerun(source)}
@@ -263,9 +257,7 @@ export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Pr
 interface MainReportProps {
   result: AuditResult;
   cachedAt: string | null;
-  params: RunAuditOptions | undefined;
   projectFromUrl?: string;
-  totalCatalogSize: number;
   isRunning: boolean;
   rerunStatus: RerunStatus;
   onRerun: (source: RerunSource) => void;
@@ -275,9 +267,7 @@ interface MainReportProps {
 function MainReport({
   result,
   cachedAt,
-  params,
   projectFromUrl,
-  totalCatalogSize,
   isRunning,
   rerunStatus,
   onRerun,
@@ -294,14 +284,10 @@ function MainReport({
   const projectedGrade = gradeFor(projected);
   const strengths = useMemo(() => deriveStrengths(result), [result]);
   const findings = useMemo(() => deriveFindings(result), [result]);
-  // Renamed from `window` to avoid shadowing the browser global — any
-  // future `window.*` reference added inside MainReport would silently
-  // bind to a string and crash at runtime.
-  const scopeWindow = inferWindow(params);
 
-  // One pass over result.results derives both counts; score-section and
-  // return-section also need `missing` but they take it from us via props
-  // / `result` shape, so deduplicate the scan here.
+  // One pass over result.results: detectors triggered + missing prescribed
+  // policies. Both feed PostHog instrumentation; `missing` also feeds the
+  // poster's share-text template.
   const { detectorsTriggered, missing } = useMemo(() => {
     let detectorsTriggered = 0;
     let missing = 0;
@@ -340,54 +326,37 @@ function MainReport({
     detectorsTriggered,
   ]);
 
-  /** Identity hero ref — captured to PNG by the share buttons. */
-  const identityFrameRef = useRef<HTMLDivElement>(null);
+  /** Poster ref — captured to PNG by the poster's share buttons. */
+  const posterRef = useRef<HTMLDivElement>(null);
 
   return (
     <div className="app">
       <AuditProgressStrip status={rerunStatus} onDismiss={onDismissRerun} />
-      <div className="scanline-overlay" />
       <div className="app-shell">
         <div className="report">
-          <IdentitySection
-            ref={identityFrameRef}
+          <AuditPoster
+            ref={posterRef}
             archetypeKey={classification.archetype}
-            secondaryKey={classification.secondary}
-            toolCalls={result.eventsScanned ?? 0}
-            sessions={result.transcripts.scanned}
-            window={scopeWindow}
             seed={classification.variantSeed}
-          />
-          <StrengthsSection
-            strengths={strengths}
-            totalDetectorsTriggered={detectorsTriggered}
-            totalDetectorsAvailable={totalCatalogSize}
-          />
-          <ScoreSection
-            result={result}
             score={score}
             grade={grade}
-            archetypeKey={classification.archetype}
-            project={project}
+            missing={missing}
+            auditedAt={cachedAt ?? new Date().toISOString()}
           />
-          <ReturnSection
+          <StrengthsSection strengths={strengths} />
+          <QuirksSection findings={findings} />
+          <HowToImproveSection
             result={result}
+            projected={projected}
+            projectedGrade={projectedGrade}
+          />
+          <ComeBackBetterSection
             isRunning={isRunning}
             onRerun={() => onRerun("return_section")}
           />
-          <FindingsSection findings={findings} />
-          <PoliciesSection result={result} projected={projected} projectedGrade={projectedGrade} />
         </div>
         <ReportFooter cachedAt={cachedAt} />
       </div>
-      <ShareDock
-        frameRef={identityFrameRef}
-        archetypeKey={classification.archetype}
-        seed={classification.variantSeed}
-        score={score}
-        grade={grade}
-        missing={missing}
-      />
     </div>
   );
 }
@@ -408,7 +377,6 @@ function ShellEmpty({ running, mode = "no-cache", rerunStatus, onDismissRerun, o
   return (
     <div className="app">
       <AuditProgressStrip status={rerunStatus} onDismiss={onDismissRerun} />
-      <div className="scanline-overlay" />
       <div className="app-shell">
         <div className="report">
           {running ? (
diff --git a/app/audit/_components/audit-poster.tsx b/app/audit/_components/audit-poster.tsx
new file mode 100644
index 00000000..eaaa5aea
--- /dev/null
+++ b/app/audit/_components/audit-poster.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+/**
+ * Section 01 — AUDIT POSTER. The single-screen shareable above-the-fold
+ * artifact. Replaces the old IdentitySection + ScoreSection + ShareDock
+ * triumvirate.
+ *
+ * Layout (inside the PNG capture region):
+ *
+ *   ┌─────────────────────────────────────────────────────────────┐
+ *   │  ▣ failproof_ai · audit       № 01 of 08 · audited <date>   │
+ *   ├─────────────────────────────────────────────────────────────┤
+ *   │                                                             │
+ *   │   <score>/100    the optimist            ▓░▓░▓░▓░           │
+ *   │   <rank>         pace · conviction · forgetful  ░▓░▓░▓░▓    │
+ *   │                  // only N% of agents are this archetype   │
+ *   │                                                             │
+ *   ├─────────────────────────────────────────────────────────────┤
+ *   │                                  audit yours → failproof.ai │
+ *   └─────────────────────────────────────────────────────────────┘
+ *
+ * Outside the capture region: three share buttons + scroll hint.
+ */
+import React, { forwardRef, useMemo, useState } from "react";
+import { pickArchetypeVariant, type ArchetypeKey } from "@/src/audit/archetypes";
+import { type Grade } from "@/src/audit/scoring";
+import { getArchetypeRarityPct, getScoreRank } from "@/src/audit/social-proof";
+import { copyOrDownloadCard, downloadCard, shareCardNative, shareCardToastMessage } from "@/lib/share-card";
+import { toast } from "@/app/components/toast";
+import { usePostHog } from "@/contexts/PostHogContext";
+import { Sigil } from "./sigil";
+import { X_TEMPLATES, LI_TEMPLATES, pickTemplate, type ShareCtx } from "./share-templates";
+
+const SITE_URL = "https://befailproof.ai";
+const X_INTENT = (text: string) =>
+  `https://x.com/intent/tweet?text=${encodeURIComponent(text)}`;
+const LI_INTENT = (text: string) =>
+  `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(SITE_URL)}&summary=${encodeURIComponent(text)}`;
+
+interface Props {
+  archetypeKey: ArchetypeKey;
+  /** Stable seed for variant selection (project name is the natural fit). */
+  seed: string;
+  score: number;
+  grade: Grade;
+  /** Count of unenabled prescribed policies — passed to the share-text
+   *  templates, not rendered on the poster itself. */
+  missing: number;
+  /** Audit timestamp (ISO string from cache). Rendered as ISO date in the
+   *  top-right meta. UTC to keep the poster timezone-stable across shares. */
+  auditedAt: string;
+}
+
+export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoster(
+  { archetypeKey, seed, score, grade, missing, auditedAt }: Props,
+  posterRef,
+) {
+  const archetype = useMemo(
+    () => pickArchetypeVariant(archetypeKey, seed),
+    [archetypeKey, seed],
+  );
+  const rarityPct = getArchetypeRarityPct(archetypeKey);
+  const scoreRank = getScoreRank(score);
+  const indexLabel = String(archetype.index).padStart(2, "0");
+  const auditedDate = useMemo(() => formatAuditedDate(auditedAt), [auditedAt]);
+
+  const { capture } = usePostHog();
+  const [busy, setBusy] = useState<null | "x" | "linkedin" | "download">(null);
+
+  const captureCardBlob = async (): Promise<Blob | null> => {
+    const node = (posterRef as React.MutableRefObject<HTMLDivElement | null>)?.current;
+    if (!node) return null;
+    node.classList.add("capturing");
+    try {
+      if (typeof document !== "undefined" && document.fonts?.ready) await document.fonts.ready;
+      await new Promise<void>((r) => requestAnimationFrame(() => r()));
+      const html2canvas = (await import("html2canvas")).default;
+      const canvas = await html2canvas(node, {
+        backgroundColor: "#0e0e11",
+        scale: 2,
+        logging: false,
+        useCORS: true,
+      });
+      return await new Promise<Blob | null>((resolve) => {
+        canvas.toBlob((blob) => resolve(blob), "image/png");
+      });
+    } finally {
+      node.classList.remove("capturing");
+    }
+  };
+
+  const filenameFor = (channel: "x" | "linkedin" | "download") =>
+    `failproofai-${channel}-${grade.toLowerCase()}-${score}.png`;
+
+  const handleShare = async (channel: "x" | "linkedin" | "download") => {
+    if (busy) return;
+    setBusy(channel);
+    capture("audit_card_share_clicked", {
+      channel,
+      source: "poster",
+      score,
+      grade,
+      missing_policies: missing,
+    });
+    try {
+      const blob = await captureCardBlob().catch(() => null);
+      if (!blob) {
+        capture("audit_card_capture_completed", {
+          trigger: channel === "download" ? "download" : `share_${channel}`,
+          status: "error",
+          image_method: "failed",
+          source: "poster",
+        });
+        toast(shareCardToastMessage("failed"));
+        return;
+      }
+
+      if (channel === "download") {
+        const ok = downloadCard(blob, filenameFor(channel));
+        const method = ok ? "download" : "failed";
+        capture("audit_card_capture_completed", {
+          trigger: "download",
+          status: ok ? "success" : "error",
+          image_method: method,
+          source: "poster",
+        });
+        toast(shareCardToastMessage(method));
+        return;
+      }
+
+      const shareCtx: ShareCtx = {
+        score,
+        arch: archetype.name.toLowerCase(),
+        grade,
+        missing,
+      };
+      const shareText = channel === "x"
+        ? pickTemplate(X_TEMPLATES, seed, shareCtx)
+        : pickTemplate(LI_TEMPLATES, seed, shareCtx);
+      const native = await shareCardNative(blob, filenameFor(channel), shareText);
+      if (native) {
+        capture("audit_card_capture_completed", {
+          trigger: `share_${channel}`,
+          status: "success",
+          image_method: "native",
+          source: "poster",
+        });
+        toast(shareCardToastMessage("native"));
+        return;
+      }
+
+      const fallbackMethod = await copyOrDownloadCard(blob, filenameFor(channel));
+      capture("audit_card_capture_completed", {
+        trigger: `share_${channel}`,
+        status: "success",
+        image_method: fallbackMethod,
+        source: "poster",
+      });
+      toast(shareCardToastMessage(fallbackMethod));
+      const intent = channel === "x" ? X_INTENT(shareText) : LI_INTENT(shareText);
+      globalThis.open(intent, "_blank", "noopener,noreferrer");
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <section className="poster-section" data-screen-label="01 Poster">
+      <div className="poster" ref={posterRef}>
+        <header className="poster-head">
+          <span className="poster-wordmark">
+            <span className="poster-mark" aria-hidden="true">▣</span>
+            failproof_ai <span className="poster-sep">·</span> audit
+          </span>
+          <span className="poster-meta">
+            <span className="poster-ix">№ {indexLabel}</span>
+            <span className="of"> of 08</span>
+            <span className="poster-sep"> · </span>
+            audited {auditedDate}
+          </span>
+        </header>
+
+        <div className="poster-body">
+          <div className="poster-score">
+            <span className="score-n">{score}</span>
+            <span className="score-of">/100</span>
+            <span className="score-rank">{scoreRank}</span>
+          </div>
+
+          <div className="poster-persona">
+            <h1 className="persona-name">{archetype.name}</h1>
+            <div className="persona-keywords">
+              {archetype.keywords.map((k, i) => (
+                <React.Fragment key={k}>
+                  <span className={`kw kw-${i}`}>{k}</span>
+                  {i < archetype.keywords.length - 1 && (
+                    <span className="kw-sep">·</span>
+                  )}
+                </React.Fragment>
+              ))}
+            </div>
+            {typeof rarityPct === "number" && (
+              <div className="persona-rarity">
+                <span className="lbl">{"// only"}</span>{" "}
+                <span className="pct">{rarityPct}%</span>{" "}
+                <span className="lbl">of agents are this archetype</span>
+              </div>
+            )}
+          </div>
+
+          <div className="poster-sigil">
+            <Sigil archetypeKey={archetypeKey} />
+          </div>
+        </div>
+
+        <footer className="poster-foot">
+          <span className="poster-cta">
+            audit yours <span className="arrow">→</span> failproof.ai
+          </span>
+        </footer>
+      </div>
+
+      <div className="poster-share-row">
+        <button
+          type="button"
+          className="poster-share-btn"
+          onClick={() => handleShare("x")}
+          disabled={busy !== null}
+        >
+          <span className="mark" aria-hidden="true">𝕏</span>
+          {busy === "x" ? "rendering…" : "post your archetype"}
+        </button>
+        <button
+          type="button"
+          className="poster-share-btn"
+          onClick={() => handleShare("linkedin")}
+          disabled={busy !== null}
+        >
+          <span className="mark" aria-hidden="true">in</span>
+          {busy === "linkedin" ? "rendering…" : "share on linkedin"}
+        </button>
+        <button
+          type="button"
+          className="poster-share-btn"
+          onClick={() => handleShare("download")}
+          disabled={busy !== null}
+        >
+          <span className="mark" aria-hidden="true">↓</span>
+          {busy === "download" ? "rendering…" : "download poster"}
+        </button>
+      </div>
+
+      <div className="poster-scroll-hint" aria-hidden="true">
+        scroll for full report <span className="arrow">↓</span>
+      </div>
+    </section>
+  );
+});
+
+/** UTC ISO date (YYYY-MM-DD) so the poster's date stays timezone-stable
+ *  across the geographies it gets shared into. */
+function formatAuditedDate(iso: string): string {
+  try {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return iso;
+    const y = d.getUTCFullYear();
+    const m = String(d.getUTCMonth() + 1).padStart(2, "0");
+    const day = String(d.getUTCDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  } catch {
+    return iso;
+  }
+}
diff --git a/app/audit/_components/come-back-better-section.tsx b/app/audit/_components/come-back-better-section.tsx
new file mode 100644
index 00000000..269e1cb4
--- /dev/null
+++ b/app/audit/_components/come-back-better-section.tsx
@@ -0,0 +1,311 @@
+"use client";
+
+/**
+ * Section 05 — COME BACK BETTER. "build the habit."
+ *
+ * Two side-by-side cards:
+ *
+ *  • Reminder — set a reminder cadence (3d / 7d / 14d / 30d). The cadence
+ *    selection persists through /api/auth/reminder. Anon users get the
+ *    AuthDialog first; authed-with-existing-reminder users see the next
+ *    audit date and can reset.
+ *
+ *  • Unlock perks — share with N friends to unlock pro features for a
+ *    month. UI only — invite tracking + entitlement is a follow-up; the
+ *    button opens the same X share intent the poster uses.
+ *
+ * Re-audit moves out of this section: a small inline "or re-audit now"
+ * link sits under the reminder card so the affordance survives without
+ * dominating the layout.
+ */
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { usePostHog } from "@/contexts/PostHogContext";
+import { isAbortError } from "@/lib/fetch-with-timeout";
+import { AuthDialog, type AuthedUser } from "./auth-dialog";
+
+interface Props {
+  isRunning: boolean;
+  onRerun: () => void;
+}
+
+const DEFAULT_REMINDER_DAYS = 7;
+const REMINDER_OPTIONS = [3, 7, 14, 30] as const;
+type Cadence = typeof REMINDER_OPTIONS[number];
+
+const PERKS_TARGET = 3;
+const PERKS_PERK = "share with 3 friends → unlock pro features for a month.";
+const PERKS_INVITE_URL =
+  "https://x.com/intent/tweet?text=" +
+  encodeURIComponent("just got my agent audited at failproof.ai — it's free, takes 30s. you should run yours too 👀");
+
+type AuthStatus =
+  | { kind: "unknown" }
+  | { kind: "anon" }
+  | { kind: "authed"; user: { id: string; email: string } };
+
+interface Reminder {
+  next_audit_at: number;
+  user_email: string;
+  set_at: number;
+}
+
+function daysUntil(unixSecs: number): number {
+  const nowSecs = Math.floor(Date.now() / 1000);
+  return Math.max(0, Math.ceil((unixSecs - nowSecs) / 86400));
+}
+
+function formatNextAudit(unixSecs: number): string {
+  const d = new Date(unixSecs * 1000);
+  return d.toLocaleDateString(undefined, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+// Mock: invite count is UI state until the backend tracking lands. Per
+// the spec the user is seeding the data — for now the count is 0 and
+// the button just opens a share intent.
+const SEED_INVITE_COUNT = 0;
+
+export function ComeBackBetterSection({ isRunning, onRerun }: Props) {
+  const { capture } = usePostHog();
+  const [authStatus, setAuthStatus] = useState<AuthStatus>({ kind: "unknown" });
+  const [reminder, setReminder] = useState<Reminder | null>(null);
+  const [cadence, setCadence] = useState<Cadence>(DEFAULT_REMINDER_DAYS);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [reminderBusy, setReminderBusy] = useState(false);
+  const [inviteCount] = useState<number>(SEED_INVITE_COUNT);
+  const ctaShownRef = useRef(false);
+  const lastRefreshAtRef = useRef(0);
+
+  const refreshStatus = useCallback(async () => {
+    lastRefreshAtRef.current = Date.now();
+    try {
+      const res = await fetch("/api/auth/status", { cache: "no-store" });
+      const body = (await res.json()) as {
+        authenticated?: boolean;
+        user?: { id: string; email: string };
+        reminder?: Reminder | null;
+      };
+      if (body.authenticated && body.user) {
+        setAuthStatus({ kind: "authed", user: body.user });
+        setReminder(body.reminder ?? null);
+      } else {
+        setAuthStatus({ kind: "anon" });
+        setReminder(null);
+      }
+    } catch {
+      setAuthStatus({ kind: "anon" });
+      setReminder(null);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshStatus();
+    const REFRESH_MIN_INTERVAL_MS = 5_000;
+    const maybeRefresh = () => {
+      if (Date.now() - lastRefreshAtRef.current < REFRESH_MIN_INTERVAL_MS) return;
+      void refreshStatus();
+    };
+    const onFocus = () => maybeRefresh();
+    const onVisibility = () => {
+      if (document.visibilityState === "visible") maybeRefresh();
+    };
+    window.addEventListener("focus", onFocus);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      window.removeEventListener("focus", onFocus);
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [refreshStatus]);
+
+  useEffect(() => {
+    if (ctaShownRef.current) return;
+    if (authStatus.kind === "unknown") return;
+    ctaShownRef.current = true;
+    capture("audit_reminder_cta_shown", {
+      auth_state: authStatus.kind,
+      has_existing_reminder: reminder !== null,
+      source: "come_back_better_section",
+    });
+  }, [authStatus, capture, reminder]);
+
+  const persistReminder = useCallback(
+    async (inDays: number): Promise<Reminder | null> => {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), 10_000);
+      try {
+        setReminderBusy(true);
+        const res = await fetch("/api/auth/reminder", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ in_days: inDays }),
+          signal: controller.signal,
+        });
+        if (!res.ok) {
+          if (res.status === 401) {
+            setAuthStatus({ kind: "anon" });
+            setReminder(null);
+          }
+          capture("audit_reminder_saved", {
+            status: `http_${res.status}`,
+            source: "come_back_better_section",
+            cadence_days: inDays,
+          });
+          return null;
+        }
+        const body = (await res.json()) as { reminder?: Reminder };
+        capture("audit_reminder_saved", {
+          status: body.reminder ? "success" : "empty",
+          source: "come_back_better_section",
+          cadence_days: inDays,
+        });
+        return body.reminder ?? null;
+      } catch (err) {
+        const kind = isAbortError(err) ? "timeout" : "error";
+        capture("audit_reminder_saved", {
+          status: kind,
+          source: "come_back_better_section",
+          cadence_days: inDays,
+        });
+        return null;
+      } finally {
+        clearTimeout(timer);
+        setReminderBusy(false);
+      }
+    },
+    [capture],
+  );
+
+  const handleCadenceClick = useCallback(
+    async (next: Cadence) => {
+      setCadence(next);
+      capture("audit_reminder_cta_clicked", {
+        auth_state: authStatus.kind,
+        has_existing_reminder: reminder !== null,
+        cadence_days: next,
+        source: "come_back_better_section",
+      });
+      if (authStatus.kind === "authed") {
+        const saved = await persistReminder(next);
+        if (saved) setReminder(saved);
+        return;
+      }
+      if (authStatus.kind === "anon") {
+        setDialogOpen(true);
+      }
+    },
+    [authStatus, capture, persistReminder, reminder],
+  );
+
+  const handleAuthed = useCallback(
+    async (user: AuthedUser) => {
+      setAuthStatus({ kind: "authed", user });
+      capture("audit_auth_completed", {
+        source: "come_back_better_section",
+      });
+      const saved = await persistReminder(cadence);
+      if (saved) setReminder(saved);
+    },
+    [cadence, capture, persistReminder],
+  );
+
+  const handleInvite = useCallback(() => {
+    capture("audit_perks_invite_clicked", {
+      invite_count: inviteCount,
+      target: PERKS_TARGET,
+      source: "come_back_better_section",
+    });
+    globalThis.open(PERKS_INVITE_URL, "_blank", "noopener,noreferrer");
+  }, [capture, inviteCount]);
+
+  const handleRerunInline = useCallback(() => {
+    if (isRunning) return;
+    onRerun();
+  }, [isRunning, onRerun]);
+
+  const days = reminder ? daysUntil(reminder.next_audit_at) : 0;
+  const remaining = Math.max(0, PERKS_TARGET - inviteCount);
+  const progressPct = Math.min(
+    100,
+    Math.round((inviteCount / PERKS_TARGET) * 100),
+  );
+
+  return (
+    <section className="audit-sec" data-screen-label="05 Come back better">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">05</span>{"// come back better"}
+        </span>
+      </div>
+      <h2 className="audit-sec-title">build the habit</h2>
+
+      <div className="cbb-grid">
+        {/* Reminder card */}
+        <div className="cbb-card">
+          <div className="cbb-card-title">set a reminder</div>
+          <div className="cbb-card-sub">
+            {reminder
+              ? `next audit set for ${formatNextAudit(reminder.next_audit_at)} · in ${days} day${days === 1 ? "" : "s"}.`
+              : "we'll nudge you when your next audit is due. pick the cadence:"}
+          </div>
+          <div className="cadence-row">
+            {REMINDER_OPTIONS.map((d) => (
+              <button
+                key={d}
+                type="button"
+                className={`cadence-btn${cadence === d ? " on" : ""}`}
+                disabled={reminderBusy || authStatus.kind === "unknown"}
+                onClick={() => void handleCadenceClick(d)}
+              >
+                {d}d
+              </button>
+            ))}
+          </div>
+          <button
+            type="button"
+            className="cbb-link"
+            disabled={isRunning}
+            onClick={handleRerunInline}
+          >
+            {isRunning ? "scanning…" : "or re-audit now →"}
+          </button>
+        </div>
+
+        {/* Perks card */}
+        <div className="cbb-card">
+          <div className="cbb-card-title">unlock failproof perks</div>
+          <div className="cbb-card-sub">{PERKS_PERK}</div>
+          <div className="perks-progress" aria-hidden="true">
+            <span style={{ width: `${progressPct}%` }} />
+          </div>
+          <div className="perks-meta">
+            <strong>
+              {inviteCount} of {PERKS_TARGET}
+            </strong>{" "}
+            invited · {remaining} to go
+          </div>
+          <button type="button" className="invite-btn" onClick={handleInvite}>
+            invite a friend
+          </button>
+          <div className="cbb-foot">
+            {"// invites are tracked by signup — they have to run an audit too."}
+          </div>
+        </div>
+      </div>
+
+      <AuthDialog
+        open={dialogOpen}
+        source="return_section"
+        headline="oops — you are unknown."
+        reason="verify yourself to get the re-audit reminder."
+        onClose={() => setDialogOpen(false)}
+        onAuthed={(u) => {
+          setDialogOpen(false);
+          void handleAuthed(u);
+        }}
+      />
+    </section>
+  );
+}
diff --git a/app/audit/_components/findings-section.tsx b/app/audit/_components/findings-section.tsx
deleted file mode 100644
index 1a28f09c..00000000
--- a/app/audit/_components/findings-section.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-"use client";
-
-/**
- * Section 04 — FINDINGS. "your agent has some quirks."
- *
- * Per-finding cards with four blocks: what happened / what this costs /
- * evidence sample / the fix. Data sourced from `src/audit/findings.ts`.
- */
-import React, { useState } from "react";
-import type { FindingCard } from "@/src/audit/findings";
-import { usePostHog } from "@/contexts/PostHogContext";
-
-interface Props {
-  findings: FindingCard[];
-}
-
-export function FindingsSection({ findings }: Props) {
-  if (findings.length === 0) return null;
-
-  return (
-    <section className="section" data-screen-label="04 Findings">
-      <div className="section-mast">
-        <div className="section-label">
-          <span className="glyph">━━</span> findings{" "}
-          <span style={{ color: "var(--dim)" }}>·</span> ranked by impact
-        </div>
-        <div className="section-meta">
-          <span className="p">●</span> {findings.length} detector{findings.length === 1 ? "" : "s"} triggered
-        </div>
-      </div>
-      <h2 className="section-h">your agent has some quirks.</h2>
-
-      <div className="findings-list">
-        {findings.map((f) => <Finding key={f.sourceSlug} f={f} />)}
-      </div>
-    </section>
-  );
-}
-
-function Finding({ f }: { f: FindingCard }) {
-  const { capture } = usePostHog();
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    try {
-      await navigator.clipboard.writeText(f.fix.install);
-      setCopied(true);
-      capture("audit_copy_clicked", {
-        source: "findings_section",
-        item_type: "single_policy_install_command",
-        policy_name: f.fix.slug,
-        finding_slug: f.sourceSlug,
-      });
-      setTimeout(() => setCopied(false), 1500);
-    } catch { /* ignore */ }
-  };
-
-  return (
-    <article className="finding">
-      <header className="finding-head">
-        <div className="finding-num">№{f.num}</div>
-        <div className="finding-title">{f.title}</div>
-        <div className="finding-count">
-          {f.count}×
-          <span className="label">occurrences</span>
-        </div>
-      </header>
-      <div className="finding-meta">
-        <span>
-          <span style={{ color: "var(--dim)" }}>policy</span>{" "}
-          <span className="policy">{f.policy}</span>
-        </span>
-        <span className="sep">·</span>
-        <span>{f.projects} {f.projects === 1 ? "project" : "projects"}</span>
-        <span className="sep">·</span>
-        <span>last seen {f.lastSeen}</span>
-        {f.alreadyEnabled && (
-          <>
-            <span className="sep">·</span>
-            <span style={{ color: "var(--accent-green)" }}>enforced</span>
-          </>
-        )}
-      </div>
-      <div className="finding-body">
-        <div className="finding-block">
-          <div className="fb-label">what happened</div>
-          <div className="fb-body">{f.body}</div>
-        </div>
-        <div className="finding-block">
-          <div className="fb-label cost">what this costs</div>
-          <div className="fb-body">{f.cost}</div>
-        </div>
-        <div className="finding-block">
-          <div className="fb-label">evidence · sample</div>
-          <div className="fb-evidence">
-            {f.evidence.map((e, i) => {
-              if (e.kind === "comment") {
-                return <div key={i} className="comment">{e.text}</div>;
-              }
-              if (e.kind === "err") {
-                return <div key={i} className="err">{e.text}</div>;
-              }
-              return (
-                <div key={i}>
-                  <span className="arrow">→ </span>
-                  <span>{e.text}</span>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-        <div className="finding-block">
-          <div className="fb-label fix">the fix</div>
-          <div className="fb-fix">
-            <span className="slug">{f.fix.slug}</span>
-            <div style={{ color: "var(--ink-2)" }}>{f.fix.desc}</div>
-            {f.fix.alsoCoveredBy && (
-              <div style={{ color: "var(--dim)", fontSize: 11, marginTop: 4 }}>
-                also covered by{" "}
-                <span style={{ color: "var(--accent-green)" }}>{f.fix.alsoCoveredBy}</span>
-              </div>
-            )}
-            <code className="cmd" onClick={handleCopy} style={{ cursor: "pointer" }}>
-              <span className="prompt">$</span>{f.fix.install}{" "}
-              <span style={{ color: "var(--dim)", marginLeft: 8, fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase" }}>
-                {copied ? "copied" : "click to copy"}
-              </span>
-            </code>
-          </div>
-        </div>
-      </div>
-    </article>
-  );
-}
diff --git a/app/audit/_components/how-to-improve-section.tsx b/app/audit/_components/how-to-improve-section.tsx
new file mode 100644
index 00000000..ba4acb72
--- /dev/null
+++ b/app/audit/_components/how-to-improve-section.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+/**
+ * Section 04 — HOW TO IMPROVE. "install or configure."
+ *
+ * Calm fix-card list. Each card: title (`install <slug>`), what it
+ * blocks, install command (`$ failproofai policy add <slug>`), and an
+ * install button. Maps detector hits + unenabled-builtin hits onto the
+ * smallest set of prescribed policies that closes the slipping-through
+ * window — same logic the old PoliciesSection used, in a calmer shell.
+ */
+import React, { useMemo, useState } from "react";
+import type { AuditResult } from "@/src/audit/types";
+import { type Grade, tierName } from "@/src/audit/scoring";
+import { usePostHog } from "@/contexts/PostHogContext";
+
+interface Props {
+  result: AuditResult;
+  projected: number;
+  projectedGrade: Grade;
+}
+
+const DETECTOR_TO_PRIMARY_POLICY: Record<string, string> = {
+  "redundant-cd-cwd":          "warn-repeated-tool-calls",
+  "prefer-edit-over-read-cat": "block-read-outside-cwd",
+  "prefer-edit-over-sed-awk":  "warn-repeated-tool-calls",
+  "prefer-write-over-heredoc": "block-env-files",
+  "sleep-polling-loop":        "warn-background-process",
+  "find-from-root":            "block-read-outside-cwd",
+  "git-commit-no-verify":      "warn-git-amend",
+  "reread-after-edit":         "warn-repeated-tool-calls",
+};
+
+const POLICY_DESC: Record<string, string> = {
+  "warn-repeated-tool-calls": "warns when the same tool is called 3+ times with identical parameters — catches the loops before they spiral.",
+  "block-read-outside-cwd":   "denies any file read whose absolute path falls outside the project root, including symlinks.",
+  "block-env-files":          "blocks reads and writes of `.env` files at the tool layer.",
+  "block-secrets-write":      "blocks writes to .pem, id_rsa, credentials.json, and other secret-key files.",
+  "warn-background-process":  "warns before starting nohup / & / screen / tmux / disown processes that get forgotten about.",
+  "warn-git-amend":           "warns before amending git commits — dangerous-commit-flag class.",
+  "require-ci-green-before-stop": "requires CI checks to pass on HEAD before the agent declares the task done.",
+};
+
+function shortName(name: string): string {
+  const slash = name.indexOf("/");
+  return slash >= 0 ? name.slice(slash + 1) : name;
+}
+
+interface FixCard {
+  name: string;
+  desc: string;
+  hits: number;
+  projects: number;
+  viaList: string[];
+}
+
+function buildFixes(result: AuditResult): FixCard[] {
+  const enabledSet = new Set(result.enabledBuiltinNames ?? []);
+  const buckets = new Map<string, { hits: number; projects: number; sources: Set<string> }>();
+
+  for (const row of result.results) {
+    if (row.hits === 0) continue;
+
+    let target: string;
+    let isFromDetector = false;
+    if (row.source === "audit-detector") {
+      const mapped = DETECTOR_TO_PRIMARY_POLICY[shortName(row.name)];
+      if (!mapped) continue;
+      target = mapped;
+      isFromDetector = true;
+    } else if (row.source === "builtin" && !row.enabledInConfig) {
+      target = shortName(row.name);
+    } else {
+      continue;
+    }
+
+    if (enabledSet.has(target)) continue;
+
+    const bucket = buckets.get(target) ?? { hits: 0, projects: 0, sources: new Set() };
+    bucket.hits += row.hits;
+    bucket.projects = Math.max(bucket.projects, row.projects);
+    bucket.sources.add(isFromDetector ? shortName(row.name) : "self");
+    buckets.set(target, bucket);
+  }
+
+  return [...buckets.entries()]
+    .sort((a, b) => b[1].hits - a[1].hits)
+    .map(([name, b]) => ({
+      name,
+      desc: POLICY_DESC[name] ?? "enable this builtin policy to close the gap.",
+      hits: b.hits,
+      projects: b.projects,
+      viaList: [...b.sources].filter((s) => s !== "self"),
+    }));
+}
+
+export function HowToImproveSection({ result, projected, projectedGrade }: Props) {
+  const fixes = useMemo(() => buildFixes(result), [result]);
+  if (fixes.length === 0) return null;
+
+  return (
+    <section className="audit-sec" data-screen-label="04 How to improve">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">04</span>{"// how to improve"}
+        </span>
+        <span className="audit-sec-meta">
+          enable all {fixes.length === 1 ? "one" : fixes.length} → projected{" "}
+          <strong>{projected}</strong> · {tierName(projectedGrade).toLowerCase()}
+        </span>
+      </div>
+      <h2 className="audit-sec-title">install or configure</h2>
+
+      <div className="fix-list">
+        {fixes.map((f, i) => (
+          <FixRow key={f.name} fix={f} idx={i} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function FixRow({ fix, idx }: { fix: FixCard; idx: number }) {
+  const { capture } = usePostHog();
+  const [copied, setCopied] = useState(false);
+  const install = `failproof policy add ${fix.name}`;
+  const quirkRef = `quirk #${idx + 1}`;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(install);
+      setCopied(true);
+      capture("audit_copy_clicked", {
+        source: "how_to_improve_section",
+        item_type: "single_policy_install_command",
+        policy_name: fix.name,
+        policy_rank: idx + 1,
+      });
+      setTimeout(() => setCopied(false), 1500);
+    } catch { /* ignore */ }
+  };
+
+  return (
+    <article className="fix-card">
+      <div className="fix-body">
+        <div className="fix-title">
+          install <code>{fix.name}</code>
+        </div>
+        <div className="fix-blocks">
+          would catch <strong>{quirkRef}</strong> · {fix.desc}
+        </div>
+        <div className="fix-cmd">
+          <span className="prompt">$</span>{install}
+        </div>
+      </div>
+      <button
+        type="button"
+        className="fix-install-btn"
+        onClick={handleCopy}
+      >
+        {copied ? "copied" : "copy"}
+      </button>
+    </article>
+  );
+}
diff --git a/app/audit/_components/identity-section.tsx b/app/audit/_components/identity-section.tsx
deleted file mode 100644
index 9c2df894..00000000
--- a/app/audit/_components/identity-section.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client";
-
-/**
- * Section 01 — IDENTITY. The hero. Big archetype name with hard-offset
- * stamp shadow, sigil to the right, keywords strip, "common in / primary
- * risk" meta grid, and the closing one-liner.
- *
- * Layout uses the ported `.archetype-frame` / `.arch-mast` / `.arch-body`
- * classes from audit-styles.css. Data sources from `src/audit/archetypes.ts`.
- *
- * The variant copy (tagline / keywords / common / risk / closing) is
- * picked deterministically from a multi-variant catalog using the `seed`
- * prop — typically the inferred project name. Same seed → same persona
- * blurb across renders; different seeds → different copy. So two users
- * who both land on "the optimist" see different language for it.
- *
- * Exposes a `frameRef` forwarded onto the `.archetype-frame` element so
- * the ShowOff "make poster" action can capture it via html2canvas.
- */
-import React, { forwardRef, useMemo } from "react";
-import { ARCHETYPES, pickArchetypeVariant, type ArchetypeKey } from "@/src/audit/archetypes";
-import { type Grade } from "@/src/audit/scoring";
-import { Sigil } from "./sigil";
-
-interface Props {
-  archetypeKey: ArchetypeKey;
-  secondaryKey: ArchetypeKey;
-  toolCalls: number;
-  sessions: number;
-  /** "30d", "7d", etc. shown in the target line; "all time" otherwise. */
-  window: string;
-  /** Stable seed for variant selection (project name is the natural fit). */
-  seed: string;
-}
-
-export const IdentitySection = forwardRef<HTMLDivElement, Props>(function IdentitySection(
-  { archetypeKey, secondaryKey, toolCalls, sessions, window, seed }: Props,
-  frameRef,
-) {
-  // `pickArchetypeVariant` re-hashes the seed string via djb2 + 4 mix
-  // passes per axis. Deterministic over (archetypeKey, seed) so memoize.
-  const archetype = useMemo(
-    () => pickArchetypeVariant(archetypeKey, seed),
-    [archetypeKey, seed],
-  );
-  const secondary = secondaryKey !== archetypeKey ? ARCHETYPES[secondaryKey] : null;
-
-  return (
-    <section className="identity" data-screen-label="01 Identity">
-      <div className="archetype-frame" ref={frameRef}>
-        <span className="corner tl">┌ identity</span>
-        <span className="corner tr">v1.0 ┐</span>
-        <span className="corner bl">└ № {archetype.index} / 08</span>
-        <span className="corner br">archetype ┘</span>
-
-        <div className="arch-mast">
-          <div className="arch-mast-left">
-            <div className="arch-eyebrow">
-              ━━ identity <span className="ix">·</span> your agent&apos;s archetype
-            </div>
-            <div className="arch-target">
-              detected from{" "}
-              <span style={{ color: "var(--ink)" }}>{toolCalls.toLocaleString()}</span>
-              {" "}tool calls
-              <span className="slash">/</span>
-              <span style={{ color: "var(--ink)" }}>{sessions}</span>
-              {" "}sessions
-              <span className="slash">/</span>
-              <span style={{ color: "var(--ink)" }}>{window}</span>
-              <span className="live">
-                <span className="dot-live"></span>live
-              </span>
-            </div>
-          </div>
-          <div className="arch-counter">
-            <div>
-              № {archetype.index}<span className="of"> of 08</span>
-            </div>
-            <div style={{ color: "var(--ink-2)", marginTop: 4 }}>archetype</div>
-          </div>
-        </div>
-
-        <div className="arch-body">
-          <div>
-            <h1 className="arch-name">{archetype.name}</h1>
-            <p className="arch-tagline">{archetype.tagline}</p>
-
-            {secondary && (
-              <div className="arch-secondary">
-                <span className="with">with</span>
-                <span className="name">{secondary.name.replace("the ", "")}</span>
-                <span className="with">tendencies</span>
-              </div>
-            )}
-
-            <div className="arch-keywords">
-              {archetype.keywords.map((k, i) => (
-                <React.Fragment key={k}>
-                  <span className="kw">{k}</span>
-                  {i < archetype.keywords.length - 1 && (
-                    <span className="kw-sep">·</span>
-                  )}
-                </React.Fragment>
-              ))}
-            </div>
-
-            <div className="arch-meta-grid">
-              <div className="arch-meta-item">
-                <span className="label">common in</span>
-                <span className="body">{archetype.common}</span>
-              </div>
-              <div className="arch-meta-item">
-                <span className="label p">primary risk</span>
-                <span className="body">{archetype.risk}</span>
-              </div>
-            </div>
-
-            <div className="arch-closing">— {archetype.closing}</div>
-          </div>
-
-          <Sigil archetypeKey={archetypeKey} />
-        </div>
-      </div>
-    </section>
-  );
-});
diff --git a/app/audit/_components/policies-section.tsx b/app/audit/_components/policies-section.tsx
deleted file mode 100644
index b118f248..00000000
--- a/app/audit/_components/policies-section.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-"use client";
-
-/**
- * Section 05 — PRESCRIBED POLICIES. "enable these. close the gap."
- *
- * Grid of unenabled-builtin cards with install commands + projected
- * score uplift callout.
- *
- * Sources two layers of "hits":
- *   1. Unenabled builtin policies that fired on their own
- *   2. Audit detectors → mapped via DETECTOR_TO_POLICY in findings.ts.
- *      The detector's hits get attributed to its primary policy so the
- *      report frames everything as failproofai-coverable.
- *
- * Same policy can collect hits from multiple sources; we sum them and
- * render one card per policy.
- */
-import React, { useMemo, useState } from "react";
-import type { AuditResult } from "@/src/audit/types";
-import { type Grade, tierName } from "@/src/audit/scoring";
-import { usePostHog } from "@/contexts/PostHogContext";
-
-interface Props {
-  result: AuditResult;
-  projected: number;
-  projectedGrade: Grade;
-}
-
-// Mirror of DETECTOR_TO_POLICY in findings.ts. Could re-export but keep
-// the dependency tree shallow — both modules are stable.
-const DETECTOR_TO_PRIMARY_POLICY: Record<string, string> = {
-  "redundant-cd-cwd":          "warn-repeated-tool-calls",
-  "prefer-edit-over-read-cat": "block-read-outside-cwd",
-  "prefer-edit-over-sed-awk":  "warn-repeated-tool-calls",
-  "prefer-write-over-heredoc": "block-env-files",
-  "sleep-polling-loop":        "warn-background-process",
-  "find-from-root":            "block-read-outside-cwd",
-  "git-commit-no-verify":      "warn-git-amend",
-  "reread-after-edit":         "warn-repeated-tool-calls",
-};
-
-const POLICY_DESC: Record<string, string> = {
-  "warn-repeated-tool-calls": "warns when the same tool is called 3+ times with identical parameters — catches the loops before they spiral.",
-  "block-read-outside-cwd":   "denies any file read whose absolute path falls outside the project root, including symlinks.",
-  "block-env-files":          "blocks reads and writes of `.env` files at the tool layer.",
-  "block-secrets-write":      "blocks writes to .pem, id_rsa, credentials.json, and other secret-key files.",
-  "warn-background-process":  "warns before starting nohup / & / screen / tmux / disown processes that get forgotten about.",
-  "warn-git-amend":           "warns before amending git commits — dangerous-commit-flag class.",
-  "require-ci-green-before-stop": "requires CI checks to pass on HEAD before the agent declares the task done.",
-};
-
-function shortName(name: string): string {
-  const slash = name.indexOf("/");
-  return slash >= 0 ? name.slice(slash + 1) : name;
-}
-
-interface PolicyCard {
-  name: string;        // short slug
-  desc: string;        // displayTitle (low-res) or impact
-  catches: string;     // "would have caught X occurrences..." copy
-  hits: number;
-}
-
-function buildPolicyCards(result: AuditResult): PolicyCard[] {
-  const enabledSet = new Set(result.enabledBuiltinNames ?? []);
-  // policyName → aggregated counts
-  const buckets = new Map<string, { hits: number; projects: number; sources: Set<string> }>();
-
-  for (const row of result.results) {
-    if (row.hits === 0) continue;
-
-    let target: string;
-    let isFromDetector = false;
-    if (row.source === "audit-detector") {
-      const mapped = DETECTOR_TO_PRIMARY_POLICY[shortName(row.name)];
-      if (!mapped) continue;
-      target = mapped;
-      isFromDetector = true;
-    } else if (row.source === "builtin" && !row.enabledInConfig) {
-      target = shortName(row.name);
-    } else {
-      continue; // already-enabled builtins don't need to be prescribed
-    }
-
-    // Skip if the target policy is already in the user's enabled set
-    // (detector hits would land there in production already).
-    if (enabledSet.has(target)) continue;
-
-    const bucket = buckets.get(target) ?? { hits: 0, projects: 0, sources: new Set() };
-    bucket.hits += row.hits;
-    bucket.projects = Math.max(bucket.projects, row.projects);
-    bucket.sources.add(isFromDetector ? shortName(row.name) : "self");
-    buckets.set(target, bucket);
-  }
-
-  return [...buckets.entries()]
-    .sort((a, b) => b[1].hits - a[1].hits)
-    .map(([name, b]) => {
-      const viaList = [...b.sources].filter((s) => s !== "self");
-      const viaCopy = viaList.length > 0
-        ? ` (via ${viaList.join(", ")})`
-        : "";
-      const catches = `would have caught ${b.hits} occurrence${b.hits === 1 ? "" : "s"} across ${b.projects} project${b.projects === 1 ? "" : "s"}${viaCopy}.`;
-      return {
-        name,
-        desc: POLICY_DESC[name] ?? "enable this builtin policy to close the gap.",
-        catches,
-        hits: b.hits,
-      };
-    });
-}
-
-export function PoliciesSection({ result, projected, projectedGrade }: Props) {
-  // Builds a Map+Set aggregation + sort over result.results — non-trivial.
-  // Memoize so unrelated parent re-renders don't recompute every frame.
-  const policies = useMemo(() => buildPolicyCards(result), [result]);
-
-  if (policies.length === 0) return null;
-
-  return (
-    <section className="section" data-screen-label="05 Policies">
-      <div className="section-mast">
-        <div className="section-label">
-          <span className="glyph">━━</span> policies{" "}
-          <span style={{ color: "var(--dim)" }}>·</span> prescribed
-        </div>
-        <div className="section-meta">
-          {policies.length} polic{policies.length === 1 ? "y" : "ies"}{" "}
-          <span style={{ color: "var(--dim)" }}>·</span>{" "}
-          <span className="g">covers your slipping-through hits</span>
-        </div>
-      </div>
-      <h2 className="section-h">enable these. close the gap.</h2>
-
-      <div className="policy-callout">
-        <span>
-          enable all {policies.length === 1 ? "one" : policies.length}
-        </span>
-        <span className="arrow">→</span>
-        <span>projected score</span>
-        <span className="new-score">{projected}</span>
-        <span style={{ color: "var(--dim)" }}>·</span>
-        <span className="new-tier">{tierName(projectedGrade)}</span>
-      </div>
-
-      <div className="policies-grid">
-        {policies.map((p, i) => (
-          <PolicyTile key={p.name} policy={p} idx={i} />
-        ))}
-      </div>
-    </section>
-  );
-}
-
-function PolicyTile({ policy, idx }: { policy: PolicyCard; idx: number }) {
-  const { capture } = usePostHog();
-  const [copied, setCopied] = useState(false);
-  const install = `failproof policy add ${policy.name}`;
-
-  const handleCopy = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    try {
-      await navigator.clipboard.writeText(install);
-      setCopied(true);
-      capture("audit_copy_clicked", {
-        source: "policies_section",
-        item_type: "single_policy_install_command",
-        policy_name: policy.name,
-        policy_rank: idx + 1,
-      });
-      setTimeout(() => setCopied(false), 1500);
-    } catch { /* ignore */ }
-  };
-
-  return (
-    <article className="policy-card">
-      <div className="head">
-        <div className="policy-name">{policy.name}</div>
-        <div className="policy-slug">№{String(idx + 1).padStart(2, "0")}</div>
-      </div>
-      <div className="policy-desc">{policy.desc}</div>
-      <div className="policy-impact">
-        <span className="check">✓</span>{policy.catches}
-      </div>
-      <div className="policy-install">
-        <span className="prompt">$</span>
-        <span>{install}</span>
-        <span className="copy" onClick={handleCopy}>
-          {copied ? "copied" : "copy"}
-        </span>
-      </div>
-    </article>
-  );
-}
diff --git a/app/audit/_components/quirks-section.tsx b/app/audit/_components/quirks-section.tsx
new file mode 100644
index 00000000..a074a74d
--- /dev/null
+++ b/app/audit/_components/quirks-section.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+/**
+ * Section 03 — QUIRKS. "what to improve."
+ *
+ * 4-column table: when · what slipped (+ policy that would've caught it) ·
+ * severity pill · recurrence. Each row corresponds to a triggered
+ * detector. No per-finding card chrome, no 4-quad body, no corner
+ * crosshairs — evidence and fix live in section 04 (How to improve).
+ */
+import React from "react";
+import type { FindingCard } from "@/src/audit/findings";
+
+interface Props {
+  findings: FindingCard[];
+}
+
+type Severity = "low" | "medium" | "high";
+
+/** Heuristic severity from occurrence count — until the audit pipeline
+ *  carries a real severity field. Tuned so a single occurrence reads as
+ *  low and >5 reads as high. */
+function severityFromCount(count: number): Severity {
+  if (count >= 6) return "high";
+  if (count >= 2) return "medium";
+  return "low";
+}
+
+function recurrenceLabel(count: number): string {
+  if (count <= 1) return "new";
+  if (count < 10) return `${count}× seen`;
+  return "recurring";
+}
+
+export function QuirksSection({ findings }: Props) {
+  if (findings.length === 0) return null;
+
+  return (
+    <section className="audit-sec" data-screen-label="03 Quirks">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">03</span>{"// quirks"}
+        </span>
+        <span className="audit-sec-meta">{findings.length} slipped through</span>
+      </div>
+      <h2 className="audit-sec-title">what to improve</h2>
+
+      <div className="quirks-table">
+        <div className="quirks-thead">
+          <span>when</span>
+          <span>what slipped</span>
+          <span>severity</span>
+          <span>seen</span>
+        </div>
+        {findings.map((f) => {
+          const sev = severityFromCount(f.count);
+          return (
+            <div key={f.sourceSlug} className="quirks-row">
+              <span className="q-when">{f.lastSeen}</span>
+              <span className="q-what">
+                <span className="q-title">{f.title}</span>
+                <span className="q-policy">
+                  would&apos;ve been caught by:{" "}
+                  <code>{f.policy}</code>
+                </span>
+              </span>
+              <span className={`q-pill q-pill-${sev}`}>{sev}</span>
+              <span className="q-recur">{recurrenceLabel(f.count)}</span>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
diff --git a/app/audit/_components/return-section.tsx b/app/audit/_components/return-section.tsx
deleted file mode 100644
index a22ca354..00000000
--- a/app/audit/_components/return-section.tsx
+++ /dev/null
@@ -1,416 +0,0 @@
-"use client";
-
-/**
- * Section 06 — NEXT AUDIT / "come back better." Re-audit loop CTA.
- *
- * Behavior matrix:
- *   - unknown (probe in flight)  → buttons disabled
- *   - anon (no session)          → [ set a reminder ] opens AuthDialog,
- *                                  on success we flip to the authed panel
- *                                  below and persist the 7-day reminder.
- *   - authed (any)               → consolidated status panel: "signed in as
- *                                  …" + either the persisted "next audit in
- *                                  X days" line OR a "no reminder set yet"
- *                                  line with an inline [ set a reminder ]
- *                                  button. The reminder persists across
- *                                  reloads via ~/.failproofai/next-audit.json
- *                                  — same as the CLI's auth.json.
- *
- * Also exposes [ re-audit now ] next to [ install policies ] so the user
- * can trigger a fresh scan inline without leaving the page. The button
- * fires POST /api/audit/run (same backend the empty-state CTA uses).
- */
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import type { AuditResult } from "@/src/audit/types";
-import { usePostHog } from "@/contexts/PostHogContext";
-import { isAbortError } from "@/lib/fetch-with-timeout";
-import { AuthDialog, type AuthedUser } from "./auth-dialog";
-
-interface Props {
-  result: AuditResult;
-  /** Lifted by AuditDashboard so the bottom button and the top-of-page
-   *  re-audit bar share state — only one rerun at a time. */
-  isRunning: boolean;
-  /** Lifted handler. Drives the sticky progress strip + soft refresh. */
-  onRerun: () => void;
-}
-
-const BULK_INSTALL_CMD = "failproofai policies --install";
-const DEFAULT_REMINDER_DAYS = 7;
-
-type AuthStatus =
-  | { kind: "unknown" }
-  | { kind: "anon" }
-  | { kind: "authed"; user: { id: string; email: string } };
-
-interface Reminder {
-  next_audit_at: number; // unix seconds
-  user_email: string;
-  set_at: number;
-}
-
-function daysUntil(unixSecs: number): number {
-  const nowSecs = Math.floor(Date.now() / 1000);
-  return Math.max(0, Math.ceil((unixSecs - nowSecs) / 86400));
-}
-
-function formatNextAudit(unixSecs: number): string {
-  const d = new Date(unixSecs * 1000);
-  return d.toLocaleDateString(undefined, {
-    weekday: "short",
-    month: "short",
-    day: "numeric",
-  });
-}
-
-export function ReturnSection({ result, isRunning, onRerun }: Props) {
-  const { capture } = usePostHog();
-  const hasUnenabled = result.results.some(
-    (r) => r.source === "builtin" && !r.enabledInConfig && r.hits > 0,
-  );
-
-  const [copied, setCopied] = useState(false);
-  const [authStatus, setAuthStatus] = useState<AuthStatus>({ kind: "unknown" });
-  const [reminder, setReminder] = useState<Reminder | null>(null);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [reminderBusy, setReminderBusy] = useState(false);
-  const ctaShownRef = useRef(false);
-  /** Throttle gate for focus/visibility-triggered refreshStatus calls —
-   *  rapid alt-tabbing would otherwise hit /api/auth/status (two disk
-   *  reads each) once per event. */
-  const lastRefreshAtRef = useRef(0);
-
-  // Probe /api/auth/status on mount — also returns the persisted reminder
-  // when one exists and belongs to the active session.
-  const refreshStatus = useCallback(async () => {
-    lastRefreshAtRef.current = Date.now();
-    try {
-      const res = await fetch("/api/auth/status", { cache: "no-store" });
-      const body = (await res.json()) as {
-        authenticated?: boolean;
-        user?: { id: string; email: string };
-        reminder?: Reminder | null;
-      };
-      if (body.authenticated && body.user) {
-        setAuthStatus({ kind: "authed", user: body.user });
-        setReminder(body.reminder ?? null);
-      } else {
-        setAuthStatus({ kind: "anon" });
-        setReminder(null);
-      }
-    } catch {
-      setAuthStatus({ kind: "anon" });
-      setReminder(null);
-    }
-  }, []);
-
-  useEffect(() => {
-    void refreshStatus();
-    // Re-probe whenever the tab regains focus or visibility — picks up
-    // CLI `failproofai auth login` / `logout` and api-server restarts
-    // without the user having to hit reload manually. Throttled to 5s so
-    // rapid alt-tabbing (a focus + a visibility event for one switch)
-    // doesn't double-fire.
-    const REFRESH_MIN_INTERVAL_MS = 5_000;
-    const maybeRefresh = () => {
-      if (Date.now() - lastRefreshAtRef.current < REFRESH_MIN_INTERVAL_MS) return;
-      void refreshStatus();
-    };
-    const onFocus = () => maybeRefresh();
-    const onVisibility = () => {
-      if (document.visibilityState === "visible") maybeRefresh();
-    };
-    window.addEventListener("focus", onFocus);
-    document.addEventListener("visibilitychange", onVisibility);
-    return () => {
-      window.removeEventListener("focus", onFocus);
-      document.removeEventListener("visibilitychange", onVisibility);
-    };
-  }, [refreshStatus]);
-
-  // Fire-once "user saw the reminder CTA" event so we can compute the
-  // funnel shown → clicked → auth → saved. We wait until the auth probe
-  // finishes — before that the buttons are disabled and the CTA isn't
-  // really "shown".
-  useEffect(() => {
-    if (ctaShownRef.current) return;
-    if (authStatus.kind === "unknown") return;
-    ctaShownRef.current = true;
-    capture("audit_reminder_cta_shown", {
-      auth_state: authStatus.kind,
-      has_existing_reminder: reminder !== null,
-      source: "return_section",
-    });
-  }, [authStatus, capture, reminder]);
-
-  const persistReminder = useCallback(async (): Promise<Reminder | null> => {
-    // 10s ceiling so a hung route can't permanently disable the CTA.
-    const controller = new AbortController();
-    const timer = setTimeout(() => controller.abort(), 10_000);
-    try {
-      setReminderBusy(true);
-      const res = await fetch("/api/auth/reminder", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ in_days: DEFAULT_REMINDER_DAYS }),
-        signal: controller.signal,
-      });
-      if (!res.ok) {
-        // A 401 here means our local "authed" view of the world is out of
-        // date — the server-side session was revoked or expired between the
-        // status probe and this write. Flip back to anon so the user can
-        // re-authenticate instead of leaving them on a panel whose actions
-        // silently no-op.
-        if (res.status === 401) {
-          setAuthStatus({ kind: "anon" });
-          setReminder(null);
-        }
-        capture("audit_reminder_saved", {
-          status: `http_${res.status}`,
-          source: "return_section",
-        });
-        return null;
-      }
-      const body = (await res.json()) as { reminder?: Reminder };
-      capture("audit_reminder_saved", {
-        status: body.reminder ? "success" : "empty",
-        source: "return_section",
-      });
-      return body.reminder ?? null;
-    } catch (err) {
-      const kind = isAbortError(err) ? "timeout" : "error";
-      capture("audit_reminder_saved", {
-        status: kind,
-        source: "return_section",
-      });
-      return null;
-    } finally {
-      clearTimeout(timer);
-      setReminderBusy(false);
-    }
-  }, [capture]);
-
-  const handleInstall = async () => {
-    capture("audit_install_policies_clicked", {
-      source: "return_section",
-    });
-    try {
-      await navigator.clipboard.writeText(BULK_INSTALL_CMD);
-      setCopied(true);
-      capture("audit_copy_clicked", {
-        source: "return_section_install_policies",
-        item_type: "bulk_install_command",
-      });
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      /* ignore */
-    }
-  };
-
-  const handleSetReminder = useCallback(async () => {
-    if (authStatus.kind === "unknown") return;
-    capture("audit_reminder_cta_clicked", {
-      auth_state: authStatus.kind,
-      has_existing_reminder: reminder !== null,
-      source: "return_section",
-    });
-    if (authStatus.kind === "authed") {
-      const next = await persistReminder();
-      if (next) setReminder(next);
-      return;
-    }
-    setDialogOpen(true);
-  }, [authStatus, capture, persistReminder, reminder]);
-
-  const handleAuthed = useCallback(
-    async (user: AuthedUser) => {
-      setAuthStatus({ kind: "authed", user });
-      capture("audit_auth_completed", {
-        source: "return_section",
-      });
-      // The dialog opened because the user wanted a reminder → persist
-      // immediately, no second click required.
-      const next = await persistReminder();
-      if (next) setReminder(next);
-    },
-    [capture, persistReminder],
-  );
-
-  // Re-audit is now lifted into AuditDashboard so the top-of-page bar and
-  // this bottom button share state — concurrent clicks are impossible and
-  // success path soft-refreshes the report rather than reloading the page.
-  // PostHog `source: "return_section"` capture happens inside the lifted
-  // handler via the `source` argument it receives.
-  const handleRerun = useCallback(() => {
-    if (isRunning) return;
-    onRerun();
-  }, [isRunning, onRerun]);
-
-  const authed = authStatus.kind === "authed";
-  const hasReminder = authed && reminder !== null;
-  const days = reminder ? daysUntil(reminder.next_audit_at) : 0;
-  const authedEmail =
-    authStatus.kind === "authed" ? authStatus.user.email : "";
-
-  return (
-    <section className="section" data-screen-label="06 Next audit">
-      <div className="section-mast">
-        <div className="section-label">
-          <span className="glyph">━━</span> next audit{" "}
-          <span style={{ color: "var(--dim)" }}>·</span> improvement
-        </div>
-        <div className="section-meta">
-          <span className="g">●</span> recommended in 7d
-        </div>
-      </div>
-      <h2 className="section-h">come back better.</h2>
-
-      <div className="return-hook">
-        <div className="label">━━ the loop</div>
-        <h3>re-audit in 7 days.</h3>
-        <p>
-          after the prescribed policies have been live for a week, we&apos;ll show
-          your before/after score and which detectors went quiet.
-        </p>
-        <p style={{ marginTop: 16, color: "var(--dim)" }}>
-          most agents move from C to B in one session. some make it in a day.
-        </p>
-
-        {/* Once authed, the section stays in the consolidated status panel —
-            with the reminder line if one is set, or a "no reminder yet" line
-            + inline [ set a reminder ] button otherwise. The anonymous CTA
-            layout only shows for genuinely-unauthed sessions. The action
-            buttons ([ set a reminder ] / [ re-audit now ] / [ install
-            policies ]) are identical in both branches — extracted into
-            <ReturnActions> below to keep them in sync. */}
-        {authed ? (
-          <div className="return-status">
-            {hasReminder && reminder ? (
-              <div className="rs-row rs-row-primary">
-                <span className="rs-dot rs-dot-pink" aria-hidden="true" />
-                <span>
-                  next audit set for{" "}
-                  <span className="rs-strong">{formatNextAudit(reminder.next_audit_at)}</span>
-                  {" "}<span style={{ color: "var(--dim)" }}>·</span>{" "}
-                  <span className="rs-strong">in {days} day{days === 1 ? "" : "s"}</span>
-                </span>
-              </div>
-            ) : (
-              <div className="rs-row rs-row-primary">
-                <span className="rs-dot rs-dot-pink" aria-hidden="true" />
-                <span>
-                  <span className="rs-strong">no reminder set yet</span>
-                  {" "}<span style={{ color: "var(--dim)" }}>·</span>{" "}
-                  recommended in {DEFAULT_REMINDER_DAYS} days
-                </span>
-              </div>
-            )}
-            <div className="rs-row">
-              <span className="rs-dot rs-dot-green" aria-hidden="true" />
-              <span>
-                signed in as <span className="rs-email">{authedEmail}</span>
-              </span>
-            </div>
-            <ReturnActions
-              style={{ marginTop: 18 }}
-              showSetReminder={!hasReminder}
-              setReminderDisabled={reminderBusy}
-              reminderBusy={reminderBusy}
-              rerunBusy={isRunning}
-              hasUnenabled={hasUnenabled}
-              copied={copied}
-              onSetReminder={handleSetReminder}
-              onRerun={handleRerun}
-              onInstall={handleInstall}
-            />
-          </div>
-        ) : (
-          <ReturnActions
-            showSetReminder
-            setReminderDisabled={authStatus.kind === "unknown" || reminderBusy}
-            reminderBusy={reminderBusy}
-            rerunBusy={isRunning}
-            hasUnenabled={hasUnenabled}
-            copied={copied}
-            onSetReminder={handleSetReminder}
-            onRerun={handleRerun}
-            onInstall={handleInstall}
-          />
-        )}
-      </div>
-
-      <AuthDialog
-        open={dialogOpen}
-        source="return_section"
-        headline="oops — you are unknown."
-        reason="verify yourself to get the re-audit reminder."
-        onClose={() => setDialogOpen(false)}
-        onAuthed={(u) => {
-          setDialogOpen(false);
-          void handleAuthed(u);
-        }}
-      />
-    </section>
-  );
-}
-
-interface ReturnActionsProps {
-  /** Whether to render the `[ set a reminder ]` button. False when the
-   *  user already has a reminder set (the authed-with-reminder case
-   *  shows the panel meta instead). */
-  showSetReminder: boolean;
-  setReminderDisabled: boolean;
-  reminderBusy: boolean;
-  rerunBusy: boolean;
-  hasUnenabled: boolean;
-  copied: boolean;
-  onSetReminder: () => void;
-  onRerun: () => void;
-  onInstall: () => void;
-  style?: React.CSSProperties;
-}
-
-/** Action button strip shared by the authed and anon branches. Extracted
- *  to keep the three buttons in sync — the prior inline copies had
- *  already drifted on margin-top styling. */
-function ReturnActions(props: ReturnActionsProps): React.ReactElement {
-  const {
-    showSetReminder,
-    setReminderDisabled,
-    reminderBusy,
-    rerunBusy,
-    hasUnenabled,
-    copied,
-    onSetReminder,
-    onRerun,
-    onInstall,
-    style,
-  } = props;
-  return (
-    <div className="return-actions" style={style}>
-      {showSetReminder && (
-        <button
-          type="button"
-          className="share-btn"
-          onClick={onSetReminder}
-          disabled={setReminderDisabled}
-        >
-          {reminderBusy ? "[ saving… ]" : "[ set a reminder ]"}
-        </button>
-      )}
-      <button
-        type="button"
-        className="share-btn alt"
-        onClick={onRerun}
-        disabled={rerunBusy}
-      >
-        {rerunBusy ? "[ scanning… ]" : "[ re-audit now ]"}
-      </button>
-      {hasUnenabled && (
-        <button type="button" className="share-btn alt" onClick={onInstall}>
-          {copied ? "[ ✓ copied — paste in your shell ]" : "[ install policies ]"}
-        </button>
-      )}
-    </div>
-  );
-}
diff --git a/app/audit/_components/score-section.tsx b/app/audit/_components/score-section.tsx
deleted file mode 100644
index 0ee5b814..00000000
--- a/app/audit/_components/score-section.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-"use client";
-
-/**
- * Section 03 — SCORE CARD.
- *
- * Left column only: YOUR AUDIT SCORE (big number, tier badge, progress
- * bar, 3 stat boxes, prescribed-policies chip strip).
- *
- * Share actions have moved to IdentitySection below the archetype sigil.
- */
-import React, { useMemo } from "react";
-import type { AuditResult } from "@/src/audit/types";
-import { ARCHETYPES, type ArchetypeKey } from "@/src/audit/archetypes";
-import { type Grade } from "@/src/audit/scoring";
-
-const GRADE_THRESHOLDS: { g: Grade; t: number }[] = [
-  { g: "S", t: 90 }, { g: "A", t: 80 }, { g: "B", t: 71 },
-  { g: "C", t: 55 }, { g: "D", t: 40 },
-];
-
-function pointsToNextFor(score: number): { next: Grade; delta: number } {
-  for (const { g, t } of GRADE_THRESHOLDS) {
-    if (score < t) return { next: g, delta: t - score };
-  }
-  return { next: "S", delta: 0 };
-}
-
-interface Props {
-  result: AuditResult;
-  score: number;
-  grade: Grade;
-  archetypeKey: ArchetypeKey;
-  /** Display name shown in the card header. */
-  project: string;
-}
-
-export function ScoreSection({ result, score, grade, archetypeKey, project }: Props) {
-  const archetype = ARCHETYPES[archetypeKey];
-  // Cheap scan of 5 thresholds — plain computation. React Compiler memoizes
-  // the surrounding render anyway, and `useMemo` here tripped the
-  // preserve-manual-memoization rule.
-  const pointsToNext = pointsToNextFor(score);
-
-  /** Slipping-through builtin policies (the same heuristic ReturnSection uses
-   *  for its [install policies] CTA). Used as the "policies missing" stat. */
-  const missing = useMemo(
-    () => result.results.filter((r) => r.source === "builtin" && !r.enabledInConfig && r.hits > 0).length,
-    [result],
-  );
-
-  /** Rough "days to fix" — capped 1..14. One day per slipping policy, with a
-   *  baseline of 3d on any non-S grade. */
-  const daysToFix = useMemo(() => {
-    if (grade === "S" || missing === 0) return 0;
-    return Math.max(1, Math.min(14, missing + 1));
-  }, [grade, missing]);
-
-  /** % of 0–100 bar to fill — simply score/100. */
-  const progressPct = score;
-
-  /** Top-N slipping policies → chip strip on the left card. Capped at 6. */
-  const policyChips = useMemo(() => {
-    const slipping = result.results
-      .filter((r) => r.source === "builtin" && !r.enabledInConfig && r.hits > 0)
-      .sort((a, b) => b.hits - a.hits)
-      .slice(0, 6)
-      .map((r) => ({ name: shortPolicyLabel(r.name), missing: true as const }));
-    const enabled = result.results
-      .filter((r) => r.source === "builtin" && r.enabledInConfig)
-      .slice(0, Math.max(0, 6 - slipping.length))
-      .map((r) => ({ name: shortPolicyLabel(r.name), missing: false as const }));
-    return [...slipping, ...enabled];
-  }, [result]);
-
-  return (
-    <section className="section" data-screen-label="03 Score">
-      <div className="section-mast">
-        <div className="section-label">
-          <span className="glyph">━━</span> score
-          <span style={{ color: "var(--accent-green)", marginLeft: 10, letterSpacing: "0.04em", textTransform: "none", fontSize: 11 }}>· SEE HOW YOUR AGENT IS PERFORMING</span>
-        </div>
-      </div>
-      <h2 className="section-h">your audit score.</h2>
-
-      <div className="panel score-share-card">
-        <div className="score-card-header">
-          <span style={{ color: "var(--ink)" }}>{project}</span>
-          <span style={{ color: "var(--dim)" }}> · </span>
-          <span style={{ color: "var(--accent-pink)" }}>{archetype.name.toLowerCase()}</span>
-        </div>
-
-        <div className="ss-score-row">
-          <span className={"ss-score g-" + grade}>{score}</span>
-          <span className="ss-score-of">/100</span>
-        </div>
-
-        <div className="ss-tier-row">
-          <span className={"ss-tier-badge g-" + grade}>{grade} tier</span>
-          <span className="ss-arch">{archetype.name.toLowerCase()}</span>
-        </div>
-
-        <div className="ss-progress-label">
-          <span style={{ color: "var(--dim)" }}>score</span>
-          {pointsToNext.delta > 0 ? (
-            <span style={{ color: "var(--accent-pink)" }}>
-              +{pointsToNext.delta} pts to {pointsToNext.next} tier
-            </span>
-          ) : (
-            <span style={{ color: "var(--accent-green)" }}>top tier ✓</span>
-          )}
-        </div>
-        <div className="ss-progress-track">
-          {[40, 55, 71, 80, 90].map((t) => (
-            <div key={t} className="ss-progress-tick" style={{ left: `${t}%` }} />
-          ))}
-          <div
-            className="ss-progress-fill audit-bar-fill"
-            style={{ ["--bar-width" as string]: `${progressPct}%` }}
-          />
-        </div>
-        <div className="ss-grade-stops">
-          {(["D", "C", "B", "A", "S"] as Grade[]).map((g, i) => {
-            const pos = [40, 55, 71, 80, 90][i];
-            return (
-              <span
-                key={g}
-                className={"ss-grade-stop" + (grade === g ? " active" : "")}
-                style={{ left: `${pos}%` }}
-              >{g}</span>
-            );
-          })}
-        </div>
-
-        <div className="ss-stats">
-          <div className="ss-stat">
-            <div className="ss-stat-n" style={{ color: "var(--amber)" }}>{missing}</div>
-            <div className="ss-stat-l">policies<br />missing</div>
-          </div>
-          <div className="ss-stat">
-            <div className="ss-stat-n" style={{ color: "var(--accent-pink)" }}>
-              +{pointsToNext.delta}
-            </div>
-            <div className="ss-stat-l">pts to<br />{pointsToNext.next} tier</div>
-          </div>
-          <div className="ss-stat">
-            <div className="ss-stat-n" style={{ color: "var(--accent-green)" }}>
-              {daysToFix === 0 ? "—" : `~${daysToFix}d`}
-            </div>
-            <div className="ss-stat-l">est.<br />to fix</div>
-          </div>
-        </div>
-
-        {policyChips.length > 0 && (
-          <>
-            <div className="ss-policy-label">policy status</div>
-            <div className="ss-policy-chips">
-              {policyChips.map((p, i) => (
-                <span
-                  key={i}
-                  className={"ss-chip" + (p.missing ? " missing" : " enabled")}
-                >
-                  <span className="dot" aria-hidden="true" />
-                  {p.name}
-                </span>
-              ))}
-            </div>
-          </>
-        )}
-      </div>
-    </section>
-  );
-}
-
-/** Drop the "failproofai/" namespace prefix builtin policies carry so chips
- *  stay compact (`block-sudo` reads better than `failproofai/block-sudo`). */
-function shortPolicyLabel(name: string): string {
-  const slash = name.indexOf("/");
-  return slash >= 0 ? name.slice(slash + 1) : name;
-}
diff --git a/app/audit/_components/share-dock.tsx b/app/audit/_components/share-dock.tsx
deleted file mode 100644
index b71f9910..00000000
--- a/app/audit/_components/share-dock.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-"use client";
-
-/**
- * Floating share dock — always-visible bottom-right panel on the /audit
- * dashboard. Three buttons (X, LinkedIn, download) that all share the
- * `.share-btn` styling used by the inline buttons in `identity-section`,
- * so the visual rhythm carries between surfaces.
- *
- * Capture flow:
- *   1. Dock click → ref'd `.archetype-frame` is captured to a PNG blob
- *      via html2canvas.
- *   2. `copyOrDownloadCard` writes the blob to the clipboard if the
- *      browser supports it, falling back to a download. The user gets a
- *      toast telling them what to do next.
- *   3. For shares, the X / LinkedIn intent window opens with the
- *      templated text.
- *
- * UX:
- *   - Collapses to a single 48px pink FAB via a header caret. Preference
- *     persists across page navigations within a session.
- *   - Slide-in animation on mount (respects prefers-reduced-motion).
- *   - Hidden on viewports < 760px (mobile) — the inline buttons are
- *     already visible there and a floating dock would cover content.
- *   - Hidden until the archetype hero has actually mounted (frameRef
- *     resolves to a node). On the empty / running states we render
- *     nothing.
- */
-import React, { useEffect, useState } from "react";
-import { type ArchetypeKey, pickArchetypeVariant } from "@/src/audit/archetypes";
-import { type Grade } from "@/src/audit/scoring";
-import { copyOrDownloadCard, downloadCard, shareCardNative, shareCardToastMessage } from "@/lib/share-card";
-import { toast } from "@/app/components/toast";
-import { usePostHog } from "@/contexts/PostHogContext";
-import { X_TEMPLATES, LI_TEMPLATES, pickTemplate, type ShareCtx } from "./share-templates";
-
-const SITE_URL = "https://befailproof.ai";
-const X_INTENT = (text: string) =>
-  `https://x.com/intent/tweet?text=${encodeURIComponent(text)}`;
-const LI_INTENT = (text: string) =>
-  `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(SITE_URL)}&summary=${encodeURIComponent(text)}`;
-
-const COLLAPSED_KEY = "failproofai:audit:share-dock-collapsed";
-
-interface Props {
-  /** Ref to the `.archetype-frame` to capture. Same node `identity-section`
-   *  forwards into IdentitySection's `frameRef`. */
-  frameRef: React.RefObject<HTMLDivElement | null>;
-  archetypeKey: ArchetypeKey;
-  /** Seed for deterministic archetype-variant copy. Same as IdentitySection's
-   *  `seed` prop — usually the inferred project name. */
-  seed: string;
-  score: number;
-  grade: Grade;
-  missing: number;
-}
-
-export function ShareDock({ frameRef, archetypeKey, seed, score, grade, missing }: Props) {
-  const [collapsed, setCollapsed] = useState(false);
-  const [busy, setBusy] = useState<null | "x" | "linkedin" | "download">(null);
-  const { capture } = usePostHog();
-  const archetype = pickArchetypeVariant(archetypeKey, seed);
-  const archetypeDisplayName = archetype.name;
-
-  // Restore collapsed preference from sessionStorage on first mount.
-  useEffect(() => {
-    try {
-      if (typeof window !== "undefined" && window.sessionStorage.getItem(COLLAPSED_KEY) === "1") {
-        setCollapsed(true);
-      }
-    } catch { /* private mode, etc. — fall through to default */ }
-  }, []);
-
-  const toggle = (next: boolean) => {
-    setCollapsed(next);
-    try { window.sessionStorage.setItem(COLLAPSED_KEY, next ? "1" : "0"); } catch { /* ignore */ }
-    capture("audit_share_dock_toggled", { collapsed: next });
-  };
-
-  const captureCardBlob = async (): Promise<Blob | null> => {
-    const node = frameRef.current;
-    if (!node) return null;
-    node.classList.add("capturing");
-    try {
-      if (typeof document !== "undefined" && document.fonts?.ready) await document.fonts.ready;
-      await new Promise<void>((r) => requestAnimationFrame(() => r()));
-      const html2canvas = (await import("html2canvas")).default;
-      const canvas = await html2canvas(node, {
-        backgroundColor: "#0e0e11",
-        scale: 2,
-        logging: false,
-        useCORS: true,
-      });
-      return await new Promise<Blob | null>((resolve) => {
-        canvas.toBlob((blob) => resolve(blob), "image/png");
-      });
-    } finally {
-      node.classList.remove("capturing");
-    }
-  };
-
-  const filenameFor = (channel: "x" | "linkedin" | "download") =>
-    `failproofai-${channel}-${grade.toLowerCase()}-${score}.png`;
-
-  const handleShare = async (channel: "x" | "linkedin" | "download") => {
-    if (busy) return;
-    setBusy(channel);
-    capture("audit_card_share_clicked", {
-      channel: channel === "download" ? "download" : channel,
-      source: "dock",
-      score,
-      grade,
-      missing_policies: missing,
-    });
-    try {
-      const blob = await captureCardBlob().catch(() => null);
-      if (!blob) {
-        capture("audit_card_capture_completed", {
-          trigger: channel === "download" ? "download" : `share_${channel}`,
-          status: "error",
-          image_method: "failed",
-          source: "dock",
-        });
-        toast(shareCardToastMessage("failed"));
-        return;
-      }
-
-      // Dedicated "save audit-card" button: always download, never clipboard.
-      if (channel === "download") {
-        const ok = downloadCard(blob, filenameFor(channel));
-        const method = ok ? "download" : "failed";
-        capture("audit_card_capture_completed", {
-          trigger: "download",
-          status: ok ? "success" : "error",
-          image_method: method,
-          source: "dock",
-        });
-        toast(shareCardToastMessage(method));
-        return;
-      }
-
-      // X / LinkedIn share: try the native share sheet with file first
-      // (one-tap "image attached" on iOS / Android / recent Safari / recent
-      // Chrome). Fall back to clipboard + opening the intent URL when the
-      // native share sheet isn't available or the user dismissed it.
-      const shareCtx: ShareCtx = {
-        score,
-        arch: archetypeDisplayName.toLowerCase(),
-        grade,
-        missing,
-      };
-      // One of five tone-matched templates (quirky for X, professional for
-      // LinkedIn), chosen deterministically from the behaviour-fingerprint
-      // seed so the copy fits this run and stays stable on re-share.
-      const shareText = channel === "x"
-        ? pickTemplate(X_TEMPLATES, seed, shareCtx)
-        : pickTemplate(LI_TEMPLATES, seed, shareCtx);
-      const native = await shareCardNative(blob, filenameFor(channel), shareText);
-      if (native) {
-        capture("audit_card_capture_completed", {
-          trigger: `share_${channel}`,
-          status: "success",
-          image_method: "native",
-          source: "dock",
-        });
-        toast(shareCardToastMessage("native"));
-        return;
-      }
-
-      const fallbackMethod = await copyOrDownloadCard(blob, filenameFor(channel));
-      capture("audit_card_capture_completed", {
-        trigger: `share_${channel}`,
-        status: "success",
-        image_method: fallbackMethod,
-        source: "dock",
-      });
-      toast(shareCardToastMessage(fallbackMethod));
-      const intent = channel === "x"
-        ? X_INTENT(shareText)
-        : LI_INTENT(shareText);
-      globalThis.open(intent, "_blank", "noopener,noreferrer");
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  // Render the collapsed FAB. Single pink-tile pulse that re-expands the dock.
-  if (collapsed) {
-    return (
-      <button
-        type="button"
-        className="share-dock-fab"
-        aria-label="Expand share dock"
-        onClick={() => toggle(false)}
-      >
-        <span aria-hidden="true">𝕏</span>
-      </button>
-    );
-  }
-
-  return (
-    <aside
-      className="share-dock"
-      aria-label="Share your audit"
-      data-busy={busy ? "true" : undefined}
-    >
-      <header className="share-dock-head">
-        <span className="share-dock-eyebrow"><span aria-hidden="true">━━</span>share your audit</span>
-        <button
-          type="button"
-          className="share-dock-caret"
-          onClick={() => toggle(true)}
-          aria-label="Collapse share dock"
-        >
-          <span aria-hidden="true">▾</span>
-        </button>
-      </header>
-      <div className="share-dock-stack">
-        <button
-          type="button"
-          className="share-btn share-btn--x"
-          onClick={() => handleShare("x")}
-          disabled={busy !== null}
-        >
-          <span className="share-btn-mark share-btn-mark--x" aria-hidden="true">𝕏</span>
-          <span className="share-btn-body">
-            <span className="share-btn-eyebrow">share on</span>
-            <span className="share-btn-label">{busy === "x" ? "rendering…" : "X · Twitter"}</span>
-          </span>
-          <span className="share-btn-arrow" aria-hidden="true">→</span>
-        </button>
-        <button
-          type="button"
-          className="share-btn share-btn--li"
-          onClick={() => handleShare("linkedin")}
-          disabled={busy !== null}
-        >
-          <span className="share-btn-mark share-btn-mark--li" aria-hidden="true">in</span>
-          <span className="share-btn-body">
-            <span className="share-btn-eyebrow">share on</span>
-            <span className="share-btn-label">{busy === "linkedin" ? "rendering…" : "LinkedIn"}</span>
-          </span>
-          <span className="share-btn-arrow" aria-hidden="true">→</span>
-        </button>
-        <button
-          type="button"
-          className="share-btn share-btn--dl"
-          onClick={() => handleShare("download")}
-          disabled={busy !== null}
-        >
-          <span className="share-btn-mark share-btn-mark--dl" aria-hidden="true">↓</span>
-          <span className="share-btn-body">
-            <span className="share-btn-eyebrow">save</span>
-            <span className="share-btn-label">{busy === "download" ? "rendering…" : "audit-card"}</span>
-          </span>
-          <span className="share-btn-arrow" aria-hidden="true">↓</span>
-        </button>
-      </div>
-      <footer className="share-dock-foot">
-        <span aria-hidden="true">▮▮</span>image auto-attaches via paste
-      </footer>
-    </aside>
-  );
-}
-
-ShareDock.displayName = "ShareDock";
diff --git a/app/audit/_components/show-off-cta.tsx b/app/audit/_components/show-off-cta.tsx
deleted file mode 100644
index 5662a4ad..00000000
--- a/app/audit/_components/show-off-cta.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-"use client";
-
-/**
- * Section 01b — SHOW OFF CTA. Big bordered strip directly after the
- * identity card. Sigil on the left, "show off your agent." headline +
- * sub on the middle, "→ MAKE POSTER" action button on the right.
- *
- * Clicking the action captures the IdentitySection's archetype-frame
- * DOM via html2canvas and triggers a PNG download. The capture target
- * is passed in via a ref (avoids querying the DOM by class).
- */
-import React, { useState } from "react";
-import { ARCHETYPES, type ArchetypeKey } from "@/src/audit/archetypes";
-import { usePostHog } from "@/contexts/PostHogContext";
-import { Sigil } from "./sigil";
-
-interface Props {
-  archetypeKey: ArchetypeKey;
-  /** Ref to the IdentitySection's `.archetype-frame` div — captured to PNG. */
-  identityFrameRef: React.RefObject<HTMLDivElement | null>;
-}
-
-function buildFilename(archetypeKey: ArchetypeKey): string {
-  const date = new Date().toISOString().slice(0, 10);
-  return `failproofai-${archetypeKey}-${date}.png`;
-}
-
-export function ShowOffCTA({ archetypeKey, identityFrameRef }: Props) {
-  const archetype = ARCHETYPES[archetypeKey];
-  const { capture } = usePostHog();
-  const [state, setState] = useState<"idle" | "busy" | "done" | "error">("idle");
-
-  const handleMakePoster = async () => {
-    const node = identityFrameRef.current;
-    if (!node || state === "busy") return;
-    capture("audit_poster_clicked", {
-      archetype: archetypeKey,
-    });
-    setState("busy");
-    /** Add a capture-only class that locks font sizes, the grid layout,
-     *  and disables clamp()/text-shadow rules html2canvas renders
-     *  unreliably. CSS lives in audit-styles.css under `.capturing`. */
-    node.classList.add("capturing");
-    try {
-      // Wait for the display font (Bitcount Prop Single) to load — otherwise
-      // html2canvas captures a fallback that has different metrics and the
-      // archetype name overlaps the tagline / sigil column.
-      if (typeof document !== "undefined" && document.fonts?.ready) {
-        await document.fonts.ready;
-      }
-      // Force a single rAF so the .capturing class is applied to layout
-      // before html2canvas reads computed styles.
-      await new Promise<void>((r) => requestAnimationFrame(() => r()));
-
-      const html2canvas = (await import("html2canvas")).default;
-      // Bleed: include the frame's 8px box-shadow in the capture rect.
-      const bleed = 12;
-      const canvas = await html2canvas(node, {
-        backgroundColor: "#131316",
-        scale: 2,
-        logging: false,
-        useCORS: true,
-        x: -bleed,
-        y: -bleed,
-        width: node.offsetWidth + bleed * 2,
-        height: node.offsetHeight + bleed * 2,
-        windowWidth: Math.max(1100, node.offsetWidth + bleed * 2),
-      });
-      await new Promise<void>((resolve) => {
-        canvas.toBlob((blob) => {
-          if (!blob) { resolve(); return; }
-          const url = URL.createObjectURL(blob);
-          const a = document.createElement("a");
-          a.href = url;
-          a.download = buildFilename(archetypeKey);
-          document.body.appendChild(a);
-          a.click();
-          document.body.removeChild(a);
-          URL.revokeObjectURL(url);
-          resolve();
-        }, "image/png");
-      });
-      capture("audit_poster_completed", {
-        status: "success",
-        archetype: archetypeKey,
-      });
-      setState("done");
-      setTimeout(() => setState("idle"), 2000);
-    } catch (err) {
-      console.error("poster capture failed:", err);
-      capture("audit_poster_completed", {
-        status: "error",
-        archetype: archetypeKey,
-      });
-      setState("error");
-      setTimeout(() => setState("idle"), 2000);
-    } finally {
-      node.classList.remove("capturing");
-    }
-  };
-
-  const actionLabel =
-    state === "busy" ? "rendering…"
-      : state === "done" ? "downloaded ✓"
-        : state === "error" ? "render failed"
-          : "make poster";
-
-  return (
-    <section className="showoff" data-screen-label="01b Show off">
-      <button
-        type="button"
-        className="showoff-cta"
-        onClick={handleMakePoster}
-        disabled={state === "busy"}
-        style={{ cursor: state === "busy" ? "wait" : "pointer", width: "100%", textAlign: "left" }}
-      >
-        <span className="showoff-glyph" aria-hidden="true">
-          <Sigil archetypeKey={archetypeKey} hideLabel />
-        </span>
-        <span className="showoff-copy">
-          <span className="showoff-label">━━ shareable poster</span>
-          <span className="showoff-headline">show off your agent.</span>
-          <span className="showoff-sub">
-            generate a one-page poster of your {archetype.name}.
-            score, percentile, sigil. ready to post.
-          </span>
-        </span>
-        <span className="showoff-action">
-          <span className="showoff-arrow">→</span>
-          <span className="showoff-action-label">{actionLabel}</span>
-        </span>
-      </button>
-    </section>
-  );
-}
diff --git a/app/audit/_components/sigil.tsx b/app/audit/_components/sigil.tsx
index 32e7a75e..079b91ad 100644
--- a/app/audit/_components/sigil.tsx
+++ b/app/audit/_components/sigil.tsx
@@ -1,39 +1,22 @@
 "use client";
 
 /**
- * Pixel sigil — renders an 8x8 grid from the SIGILS table.
+ * Pixel sigil — 8×8 grid for the archetype. Bare implementation: no plate,
+ * no crosshairs, no reveal animation. The poster owns whatever framing it
+ * wants around the sigil.
  *
- * Each archetype has an 8x8 character grid where:
- *   . = empty cell    o = ink (foreground)
- *   p = pink accent   g = green accent    d = dim
- *
- * Two rendering modes:
- *
- *  • Default (used on the audit hero, identity-section): wraps the grid in
- *    a brutalist "instrument plate" — register crosshairs at the four
- *    corners, a header strip with the archetype index + an 8×8 coordinate
- *    label, the pixel grid mounted on a dashed inner frame with 20px cells,
- *    a footer strip naming the archetype, and a stacked pink + dim hard-
- *    offset shadow for depth. Cells fade in along a diagonal wave on
- *    mount (`--cx` / `--cy` custom properties), guarded by
- *    `prefers-reduced-motion`.
- *
- *  • hideLabel (used in the ShowOff CTA + html2canvas capture): a bare
- *    `.sigil` grid with no plate or labels, so the showoff card can scale
- *    the sigil down independently and html2canvas doesn't have to capture
- *    the new plate chrome.
+ * Cell letters: `.` empty · `o` ink · `p` pink accent · `g` green accent ·
+ * `d` dim.
  */
 import React from "react";
-import { ARCHETYPES, SIGILS, type ArchetypeKey } from "@/src/audit/archetypes";
+import { SIGILS, type ArchetypeKey } from "@/src/audit/archetypes";
 
 interface Props {
   archetypeKey: ArchetypeKey;
-  hideLabel?: boolean;
 }
 
-export function Sigil({ archetypeKey, hideLabel }: Props) {
+export function Sigil({ archetypeKey }: Props) {
   const grid = SIGILS[archetypeKey] ?? SIGILS.optimist;
-  const archetype = ARCHETYPES[archetypeKey];
   const cells: React.ReactElement[] = [];
 
   for (let y = 0; y < 8; y++) {
@@ -45,49 +28,9 @@ export function Sigil({ archetypeKey, hideLabel }: Props) {
       else if (c === "p") cls += " p";
       else if (c === "g") cls += " g";
       else if (c === "d") cls += " d";
-      cells.push(
-        <div
-          key={`${y}-${x}`}
-          className={cls}
-          style={{
-            ["--cx" as string]: x,
-            ["--cy" as string]: y,
-          } as React.CSSProperties}
-        />,
-      );
+      cells.push(<div key={`${y}-${x}`} className={cls} />);
     }
   }
 
-  if (hideLabel) {
-    return (
-      <div className="sigil-wrap" data-bare="true">
-        <div className="sigil">{cells}</div>
-      </div>
-    );
-  }
-
-  const indexLabel = String(archetype.index).padStart(2, "0");
-
-  return (
-    <div className="sigil-wrap">
-      <div className="sigil-plate">
-        <span className="sigil-mark tl" aria-hidden="true" />
-        <span className="sigil-mark tr" aria-hidden="true" />
-        <span className="sigil-mark bl" aria-hidden="true" />
-        <span className="sigil-mark br" aria-hidden="true" />
-
-        <div className="sigil-strip sigil-strip--top">
-          <span className="sigil-ix">№ {indexLabel}</span>
-          <span className="sigil-coord">8×8</span>
-        </div>
-
-        <div className="sigil">{cells}</div>
-
-        <div className="sigil-strip sigil-strip--bot">
-          <span className="sigil-strip-key">sigil</span>
-          <span className="sigil-strip-val">{archetypeKey}</span>
-        </div>
-      </div>
-    </div>
-  );
+  return <div className="sigil">{cells}</div>;
 }
diff --git a/app/audit/_components/strengths-section.tsx b/app/audit/_components/strengths-section.tsx
index d80d8371..81124576 100644
--- a/app/audit/_components/strengths-section.tsx
+++ b/app/audit/_components/strengths-section.tsx
@@ -1,57 +1,45 @@
 "use client";
 
 /**
- * Section 02 — STRENGTHS. "your agent does this right." A leaderboard
- * of green-checked behaviors derived from the AuditResult (see
- * `src/audit/strengths.ts`).
+ * Section 02 — STRENGTHS. "what it's great at." Calm row list:
+ * ✓ glyph · headline + sub · right-aligned metric. No card chrome,
+ * no hover backgrounds, no checkmark backdrop.
  */
 import React from "react";
 import type { Strength } from "@/src/audit/strengths";
 
 interface Props {
   strengths: Strength[];
-  totalDetectorsTriggered: number;
-  totalDetectorsAvailable: number;
 }
 
-export function StrengthsSection({
-  strengths, totalDetectorsTriggered, totalDetectorsAvailable,
-}: Props) {
+export function StrengthsSection({ strengths }: Props) {
   if (strengths.length === 0) return null;
 
   return (
-    <section className="section" data-screen-label="02 Strengths">
-      <div className="section-mast">
-        <div className="section-label">
-          <span className="glyph">━━</span> strengths
-          {" "}<span style={{ color: "var(--dim)" }}>·</span>{" "}
-          what your agent has figured out
-        </div>
-        <div className="section-meta">
-          <span className="g">●</span>{" "}
-          {totalDetectorsAvailable - totalDetectorsTriggered} of {totalDetectorsAvailable} clean
-        </div>
+    <section className="audit-sec" data-screen-label="02 Strengths">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">02</span>{"// strengths"}
+        </span>
+        <span className="audit-sec-meta">{strengths.length} standouts</span>
       </div>
-      <h2 className="section-h">your agent does this right.</h2>
+      <h2 className="audit-sec-title">what it&apos;s great at</h2>
 
-      <div className="strengths-grid">
+      <div className="strength-list">
         {strengths.map((s, i) => (
           <div key={i} className="strength-row">
-            <div className="strength-check">✓</div>
-            <div className="strength-body">
-              <div className="strength-headline">{s.headline}</div>
-              <div className="strength-detail">{s.detail}</div>
-            </div>
-            <div className="strength-metric">
+            <span className="strength-check" aria-hidden="true">✓</span>
+            <span className="strength-body">
+              <span className="strength-headline">{s.headline}</span>
+              <span className="strength-detail">{s.detail}</span>
+            </span>
+            <span className="strength-metric">
               {s.metric}
-              <span className="unit">{s.unit}</span>
-            </div>
+              {s.unit && <span className="unit">{s.unit}</span>}
+            </span>
           </div>
         ))}
       </div>
-      <div className="strengths-footer">
-        — these are your agent&apos;s defaults. keep them.
-      </div>
     </section>
   );
 }
diff --git a/app/audit/audit-styles.css b/app/audit/audit-styles.css
index eca88321..b38ea796 100644
--- a/app/audit/audit-styles.css
+++ b/app/audit/audit-styles.css
@@ -2184,3 +2184,519 @@
   .audit-progress-strip__spinner { animation: none; border-top-color: var(--accent-pink); }
   .audit-progress-strip__pulse { animation: none; opacity: 0.4; transform: scaleX(0.4) translateX(30%); }
 }
+
+/* ============================================================
+   AUDIT POSTER — section 01.
+   Single-screen capture region + 3 share buttons + scroll hint.
+   Calm: 1px borders, no hard shadows, no scanlines.
+   ============================================================ */
+
+.poster-section {
+  padding: 56px 0 40px;
+  border-bottom: 1px solid var(--line);
+}
+
+.poster {
+  position: relative;
+  padding: 28px 36px 20px;
+  border: 1px dashed var(--accent-pink-soft);
+  background:
+    radial-gradient(ellipse 700px 240px at 80% 10%,
+      rgba(228, 88, 124, 0.06) 0%, transparent 65%),
+    var(--bg-2);
+  display: flex; flex-direction: column;
+  gap: 22px;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+/* head ────────────────────────────────────────────────────── */
+.poster-head {
+  display: flex; justify-content: space-between; align-items: baseline;
+  gap: 18px; flex-wrap: wrap;
+  padding-bottom: 12px;
+  border-bottom: 1px dashed var(--line);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+}
+.poster-wordmark { color: var(--ink); }
+.poster-wordmark .poster-mark { color: var(--accent-pink); margin-right: 4px; }
+.poster-wordmark .poster-sep { color: var(--dim); margin: 0 4px; }
+.poster-meta { color: var(--dim); }
+.poster-meta .poster-ix { color: var(--accent-pink); }
+.poster-meta .of { color: var(--dim); }
+.poster-meta .poster-sep { color: var(--dim); }
+
+/* body — 3-col: score | persona | sigil ───────────────────── */
+.poster-body {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 32px;
+  align-items: center;
+  min-height: 160px;
+}
+
+.poster-score { text-align: center; display: flex; flex-direction: column; align-items: center; }
+.poster-score .score-n {
+  font-family: var(--font-display);
+  font-size: clamp(60px, 8vw, 80px);
+  line-height: 1;
+  letter-spacing: 0.04em;
+  color: var(--accent-pink);
+}
+.poster-score .score-of {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  color: var(--dim);
+  margin-top: 2px;
+}
+.poster-score .score-rank {
+  margin-top: 10px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent-green);
+}
+
+.poster-persona { min-width: 0; }
+.poster-persona .persona-name {
+  font-family: var(--font-display);
+  font-size: clamp(28px, 4vw, 34px);
+  letter-spacing: 0.04em;
+  line-height: 1;
+  margin: 0 0 12px;
+  color: var(--ink);
+  text-transform: lowercase;
+  text-wrap: balance;
+}
+.poster-persona .persona-keywords {
+  font-family: var(--font-display);
+  font-size: 18px;
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+}
+.poster-persona .persona-keywords .kw-0 { color: var(--accent-green); }
+.poster-persona .persona-keywords .kw-1 { color: var(--ink); }
+.poster-persona .persona-keywords .kw-2 { color: var(--accent-pink); }
+.poster-persona .persona-keywords .kw-sep { color: var(--dim); margin: 0 8px; }
+.poster-persona .persona-rarity {
+  margin-top: 10px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--accent-green);
+}
+.poster-persona .persona-rarity .lbl { color: var(--dim); }
+.poster-persona .persona-rarity .pct { color: var(--accent-pink); font-weight: 600; }
+
+/* sigil — flat 8x8, no plate, no crosshairs, no animation ─── */
+.poster-sigil .sigil {
+  display: grid;
+  grid-template-columns: repeat(8, 12px);
+  grid-template-rows: repeat(8, 12px);
+  gap: 2px;
+  padding: 7px;
+  background: var(--bg);
+  border: 1px solid var(--line-2);
+}
+.poster-sigil .sigil .px { background: transparent; }
+.poster-sigil .sigil .px.on { background: var(--ink); }
+.poster-sigil .sigil .px.p  { background: var(--accent-pink); }
+.poster-sigil .sigil .px.g  { background: var(--accent-green); }
+.poster-sigil .sigil .px.d  { background: var(--dim); }
+
+/* foot — single small CTA bottom-right ─────────────────────── */
+.poster-foot {
+  display: flex; justify-content: flex-end;
+  padding-top: 10px;
+  border-top: 1px dashed var(--line);
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+.poster-cta { color: var(--accent-green); letter-spacing: 0.04em; }
+.poster-cta .arrow { color: var(--accent-pink); margin: 0 4px; }
+
+/* share-row — UI only, outside the PNG capture ─────────────── */
+.poster-share-row {
+  max-width: 980px;
+  margin: 18px auto 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+.poster-share-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
+}
+.poster-share-btn:hover {
+  border-color: var(--accent-pink);
+  color: var(--accent-pink);
+  background: var(--accent-pink-bg);
+}
+.poster-share-btn:disabled {
+  opacity: 0.55; cursor: wait;
+}
+.poster-share-btn .mark { color: var(--accent-pink); font-weight: 700; }
+
+/* scroll-hint — small footer below share row ───────────────── */
+.poster-scroll-hint {
+  text-align: center;
+  margin: 22px 0 0;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+.poster-scroll-hint .arrow { color: var(--accent-pink); margin-left: 6px; }
+
+/* capture mode — html2canvas can't reliably render clamp() ── */
+.poster.capturing {
+  min-width: 880px; max-width: 980px;
+  padding: 32px 40px 22px;
+}
+.poster.capturing .score-n { font-size: 76px; }
+.poster.capturing .persona-name { font-size: 32px; }
+.poster.capturing .persona-keywords { font-size: 18px; }
+
+@media (max-width: 720px) {
+  .poster-body { grid-template-columns: 1fr; gap: 22px; text-align: center; }
+  .poster-share-row { grid-template-columns: 1fr; }
+  .poster-head { font-size: 10px; }
+}
+
+/* ============================================================
+   SHARED SECTION SHELL — used by sections 02-05 on /audit.
+   ============================================================ */
+.audit-sec {
+  padding: 48px 0;
+  border-bottom: 1px solid var(--line);
+}
+.audit-sec:last-child { border-bottom: none; }
+
+.audit-sec-head {
+  display: flex; justify-content: space-between; align-items: baseline;
+  gap: 16px;
+  margin-bottom: 6px;
+}
+.audit-sec-eyebrow {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--accent-green);
+}
+.audit-sec-eyebrow .ix { color: var(--dim); margin-right: 8px; }
+.audit-sec-meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--dim);
+  letter-spacing: 0.04em;
+}
+.audit-sec-meta strong { color: var(--ink); font-weight: 600; }
+.audit-sec-title {
+  font-family: var(--font-mono);
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+  margin: 4px 0 18px;
+}
+
+/* ============================================================
+   STRENGTHS — section 02. ✓ rows.
+   ============================================================ */
+.strength-list {
+  display: flex; flex-direction: column;
+}
+.strength-row {
+  display: grid;
+  grid-template-columns: 24px 1fr auto;
+  align-items: baseline;
+  gap: 14px;
+  padding: 12px 0;
+  border-bottom: 1px dashed var(--line);
+  font-family: var(--font-mono);
+}
+.strength-row:last-child { border-bottom: none; }
+.strength-check {
+  color: var(--accent-green);
+  font-size: 14px;
+  line-height: 1;
+}
+.strength-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.strength-headline {
+  font-size: 13px;
+  color: var(--ink);
+  letter-spacing: 0.02em;
+}
+.strength-detail {
+  font-size: 11px;
+  color: var(--ink-2);
+  letter-spacing: 0.02em;
+}
+.strength-metric {
+  font-family: var(--font-display);
+  font-size: 22px;
+  letter-spacing: 0.04em;
+  color: var(--accent-green);
+  text-align: right;
+  line-height: 1;
+  white-space: nowrap;
+}
+.strength-metric .unit {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--dim);
+  margin-top: 4px;
+}
+
+/* ============================================================
+   QUIRKS — section 03. 4-column table.
+   ============================================================ */
+.quirks-table { font-family: var(--font-mono); }
+.quirks-thead, .quirks-row {
+  display: grid;
+  grid-template-columns: 80px 1fr 90px 100px;
+  gap: 14px;
+  align-items: center;
+}
+.quirks-thead {
+  padding: 0 0 8px;
+  border-bottom: 1px solid var(--line);
+  font-size: 10px;
+  color: var(--dim);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+.quirks-thead span:last-child { text-align: right; }
+.quirks-row {
+  padding: 12px 0;
+  border-bottom: 1px dashed var(--line);
+  font-size: 12px;
+}
+.quirks-row:last-child { border-bottom: none; }
+.q-when { color: var(--dim); font-size: 11px; }
+.q-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.q-title { color: var(--ink); font-size: 12px; }
+.q-policy {
+  color: var(--dim);
+  font-size: 10px;
+}
+.q-policy code { color: var(--accent-green); background: transparent; }
+.q-pill {
+  border: 1px solid var(--line-2);
+  padding: 2px 8px;
+  font-size: 10px;
+  text-align: center;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  justify-self: start;
+}
+.q-pill-high {
+  color: var(--accent-pink);
+  border-color: rgba(228, 88, 124, 0.4);
+  background: rgba(228, 88, 124, 0.06);
+}
+.q-pill-medium {
+  color: var(--amber);
+  border-color: rgba(232, 196, 106, 0.4);
+  background: var(--amber-bg);
+}
+.q-pill-low {
+  color: var(--ink-2);
+}
+.q-recur {
+  text-align: right;
+  color: var(--dim);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+}
+
+/* ============================================================
+   HOW TO IMPROVE — section 04. Fix cards.
+   ============================================================ */
+.fix-list { display: flex; flex-direction: column; gap: 10px; }
+.fix-card {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 18px;
+  padding: 16px 18px;
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+  align-items: center;
+}
+.fix-body { min-width: 0; }
+.fix-title {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--ink);
+  letter-spacing: 0.02em;
+}
+.fix-title code {
+  color: var(--accent-green);
+  background: transparent;
+  font-size: 12px;
+}
+.fix-blocks {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--ink-2);
+  margin-top: 6px;
+  line-height: 1.6;
+}
+.fix-blocks strong { color: var(--accent-pink); font-weight: 600; }
+.fix-cmd {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px dashed var(--line);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--accent-green);
+}
+.fix-cmd .prompt { color: var(--dim); margin-right: 6px; }
+.fix-install-btn {
+  align-self: center;
+  white-space: nowrap;
+  border: 1px solid var(--accent-pink);
+  background: var(--accent-pink-bg);
+  color: var(--accent-pink);
+  padding: 10px 16px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background-color 140ms ease;
+}
+.fix-install-btn:hover { background: rgba(228, 88, 124, 0.18); }
+.fix-install-btn:disabled { opacity: 0.55; cursor: wait; }
+
+/* ============================================================
+   COME BACK BETTER — section 05. Two cards.
+   ============================================================ */
+.cbb-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.cbb-card {
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+  padding: 18px 20px;
+  display: flex; flex-direction: column;
+  gap: 12px;
+}
+.cbb-card-title {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  color: var(--ink);
+  letter-spacing: 0.02em;
+}
+.cbb-card-sub {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--ink-2);
+  line-height: 1.55;
+}
+
+.cadence-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
+.cadence-btn {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  border: 1px solid var(--line-2);
+  background: transparent;
+  color: var(--ink);
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
+}
+.cadence-btn:hover {
+  border-color: var(--accent-pink);
+  color: var(--accent-pink);
+}
+.cadence-btn.on {
+  border-color: var(--accent-pink);
+  background: var(--accent-pink-bg);
+  color: var(--accent-pink);
+}
+.cadence-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.cbb-link {
+  align-self: flex-start;
+  background: transparent;
+  border: none;
+  color: var(--accent-green);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  padding: 0;
+}
+.cbb-link:hover { color: var(--accent-pink); }
+.cbb-link:disabled { opacity: 0.55; cursor: wait; }
+
+.perks-progress {
+  height: 6px;
+  background: var(--bg);
+  border: 1px solid var(--line-2);
+  position: relative;
+  margin: 4px 0;
+}
+.perks-progress span {
+  display: block;
+  height: 100%;
+  background: var(--accent-pink);
+  transition: width 240ms ease;
+}
+.perks-meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--ink-2);
+}
+.perks-meta strong { color: var(--accent-pink); font-weight: 600; }
+.invite-btn {
+  align-self: flex-start;
+  border: 1px solid var(--accent-pink);
+  background: var(--accent-pink-bg);
+  color: var(--accent-pink);
+  padding: 8px 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background-color 140ms ease;
+}
+.invite-btn:hover { background: rgba(228, 88, 124, 0.18); }
+.cbb-foot {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--dim);
+  margin-top: 4px;
+}
+
+@media (max-width: 720px) {
+  .cbb-grid { grid-template-columns: 1fr; }
+  .fix-card { grid-template-columns: 1fr; }
+  .quirks-thead, .quirks-row {
+    grid-template-columns: 1fr;
+    gap: 6px;
+    padding: 16px 0;
+  }
+  .quirks-thead { display: none; }
+}
diff --git a/src/audit/social-proof.ts b/src/audit/social-proof.ts
new file mode 100644
index 00000000..f71af538
--- /dev/null
+++ b/src/audit/social-proof.ts
@@ -0,0 +1,34 @@
+/**
+ * Population-level signals shown on the audit poster: how rare your
+ * archetype is and where your score sits in the cohort. Seeded with
+ * snapshot values; swap for live aggregates once that pipeline lands.
+ */
+
+import type { ArchetypeKey } from "./archetypes";
+
+/** Percentage of audited agents that map to a given archetype. */
+const ARCHETYPE_RARITY: Record<ArchetypeKey, number> = {
+  optimist: 18,
+  cowboy: 9,
+  explorer: 14,
+  goldfish: 11,
+  architect: 7,
+  precision: 16,
+  hammer: 13,
+  ghost: 12,
+};
+
+/** Map a 0-100 score to a "top N%" rank band. Bands roughly mirror the
+ *  S/A/B/C/D/F tiers in scoring.ts. */
+export function getScoreRank(score: number): string {
+  if (score >= 90) return "top 5%";
+  if (score >= 80) return "top 15%";
+  if (score >= 71) return "top 35%";
+  if (score >= 55) return "top 60%";
+  if (score >= 40) return "top 85%";
+  return "bottom tier";
+}
+
+export function getArchetypeRarityPct(key: ArchetypeKey): number {
+  return ARCHETYPE_RARITY[key];
+}

From dbb2cd2f1ab79efeef7e35627920dbd3cc919926 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 02:15:25 -0700
Subject: [PATCH 06/28] style(audit): strip dead CSS + brutalist treatments +
 lock poster to viewport
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removes ~1500 lines of dead CSS for sections deleted in the
restructure (identity hero, sigil plate, score share card, findings,
policies, show-off CTA, share dock, share + return blocks). Drops
the .scanline-overlay rule the audit page no longer renders.

Calms the surviving surfaces in line with the spec: empty-panel +
running-panel + auth-dialog backdrop and primary button lose their
hard-offset pink shadows and gridline overlay backgrounds. Display-
font headlines drop their text-shadow stamps. audit-progress-strip
drops its hard-offset stamp.

Pins the audit poster to fill min-height: 100vh - 52px (sticky
header) so the share row + scroll hint sit just above the fold on
the first screen — the report begins exactly when the user
scrolls, not earlier.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/audit/audit-styles.css | 1907 ++++--------------------------------
 1 file changed, 165 insertions(+), 1742 deletions(-)

diff --git a/app/audit/audit-styles.css b/app/audit/audit-styles.css
index b38ea796..fe71698e 100644
--- a/app/audit/audit-styles.css
+++ b/app/audit/audit-styles.css
@@ -7,14 +7,6 @@
    away from /audit back to /policies or /projects).
    ============================================================ */
 
-/* legacy scanline overlay used by audit-dashboard */
-.scanline-overlay {
-  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
-  background: repeating-linear-gradient(to bottom,
-    rgba(255,255,255,0) 0, rgba(255,255,255,0) 2px,
-    rgba(255,255,255,0.018) 2px, rgba(255,255,255,0.018) 3px);
-  mix-blend-mode: overlay;
-}
 
 /* ───────────────────────── 00 EMPTY + RUNNING (full-page states) ───────────────────────── */
 
@@ -23,10 +15,8 @@
 .empty-panel, .running-panel {
   padding: 48px 56px;
   display: flex; flex-direction: column;
-  background:
-    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.025) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(102,209,181,0.025) 0 1px, transparent 1px 16px),
-    var(--bg-2);
+  background: var(--bg-2);
+  border: 1px solid var(--line-2);
 }
 
 .empty-glyph { align-self: center; text-align: center; margin-bottom: 28px; }
@@ -39,7 +29,6 @@
   border: 1px solid var(--line-2);
   background: var(--bg);
   margin: 0 auto 14px;
-  box-shadow: 6px 6px 0 0 var(--accent-pink-shadow);
 }
 .empty-glyph-grid .px { background: transparent; }
 .empty-glyph-grid .px.on { background: var(--accent-pink); }
@@ -55,1646 +44,190 @@
   letter-spacing: 0.1em; line-height: 1.05;
   text-transform: lowercase;
   color: var(--ink);
-  text-shadow: 3px 3px 0 var(--accent-pink-shadow);
-  margin: 0 0 16px;
-  text-wrap: balance;
-  text-align: center;
-}
-.empty-sub {
-  font-family: var(--font-mono); font-size: 14px;
-  line-height: 1.65; color: var(--ink-2);
-  max-width: 580px;
-  margin: 0 auto 32px;
-  text-align: center;
-}
-
-.empty-actions {
-  display: flex; flex-direction: column; align-items: center;
-  gap: 12px;
-}
-.empty-cta {
-  padding: 12px 24px;
-  font-size: 14px;
-  letter-spacing: 0.08em;
-  text-decoration: none;
-}
-.empty-meta {
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.15em; text-transform: uppercase;
-  color: var(--dim);
-}
-
-.running-panel { padding: 36px 40px; }
-.running-header {
-  display: flex; align-items: center; gap: 10px;
-  padding-bottom: 18px;
-  border-bottom: 1px dashed var(--line);
-  margin-bottom: 22px;
-  font-family: var(--font-mono); font-size: 13px;
-}
-.running-prompt { color: var(--accent-green); }
-.running-cmd   { color: var(--ink); letter-spacing: 0.02em; }
-.running-cursor {
-  color: var(--accent-pink);
-  margin-left: 4px;
-  animation: cursor-blink 900ms steps(2, end) infinite;
-}
-@keyframes cursor-blink { 50% { opacity: 0; } }
-
-.running-stages {
-  list-style: none; padding: 0; margin: 0 0 28px;
-  display: flex; flex-direction: column;
-}
-.running-stage {
-  display: grid;
-  grid-template-columns: 28px 1fr auto;
-  gap: 14px; align-items: start;
-  padding: 12px 0;
-  border-bottom: 1px dashed var(--line);
-  font-family: var(--font-mono);
-}
-.running-stage:last-child { border-bottom: none; }
-.running-marker {
-  font-family: var(--font-mono); font-size: 12px;
-  letter-spacing: -1px;
-  margin-top: 1px;
-}
-.running-stage.queued { color: var(--dim); }
-.running-stage.queued .running-marker { color: var(--line-2); }
-.running-stage.active { color: var(--ink); }
-.running-stage.active .running-marker { color: var(--accent-pink); }
-.running-stage.done   { color: var(--ink-2); }
-.running-stage.done .running-marker { color: var(--accent-green); }
-.running-stage.done .running-stage-label {
-  text-decoration: line-through;
-  text-decoration-color: var(--line-2);
-}
-.running-stage-label { font-size: 13px; letter-spacing: 0.04em; }
-.running-stage-detail {
-  font-size: 11px; color: var(--ink-2);
-  letter-spacing: 0.02em;
-  margin-top: 4px;
-}
-.running-stage-spin {
-  font-family: var(--font-mono); font-size: 16px;
-  color: var(--accent-pink);
-  align-self: center;
-  animation: spin-step 700ms steps(4, end) infinite;
-}
-@keyframes spin-step { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-
-.running-bar-label {
-  display: flex; justify-content: space-between;
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--ink-2);
-  margin-bottom: 8px;
-}
-.running-bar-track {
-  position: relative;
-  height: 6px; background: var(--bg);
-  border: 1px solid var(--line);
-  overflow: hidden;
-}
-.running-bar-fill {
-  position: relative;
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent-pink) 0%, #e89aaf 100%);
-  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.running-bar-fill::after {
-  content: "";
-  position: absolute; inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent 0%, transparent 40%,
-    rgba(255,255,255,0.35) 50%,
-    transparent 60%, transparent 100%
-  );
-  animation: bar-shine 1600ms linear infinite;
-}
-@keyframes bar-shine {
-  from { transform: translateX(-100%); }
-  to   { transform: translateX(100%); }
-}
-
-.running-foot {
-  margin-top: 22px;
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.05em;
-  color: var(--dim);
-  text-align: center;
-}
-
-@media (max-width: 720px) {
-  .empty-panel, .running-panel { padding: 32px 24px; }
-}
-
-/* ───────────────────────── audit page shell ───────────────────────── */
-
-/* the audit page intentionally runs narrower than the global .report — the
-   archetype hero, findings cards, and score-share card are tuned for a
-   ~1400px-max layout where the headline line measure stays "billboard"
-   tight. On a 2400px+ monitor we still want to break out of the 1180px
-   feel that used to leave too much black on both flanks; clamp up to
-   1480px and let `.archetype-frame` cap itself further so the hero doesn't
-   stretch past its compositional break-point. */
-.report {
-  width: 100%;
-  max-width: clamp(720px, 92vw, 1480px);
-  margin: 0 auto;
-  padding: 0 clamp(20px, 3vw, 48px);
-}
-
-.section {
-  padding: 64px 0;
-  border-bottom: 1px solid var(--line);
-  position: relative;
-}
-.section:last-child { border-bottom: none; }
-
-.section-mast {
-  display: flex; align-items: baseline; justify-content: space-between;
-  gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
-}
-.section-label {
-  font-family: var(--font-mono);
-  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
-  color: var(--accent-green);
-  display: inline-flex; align-items: baseline; gap: 10px;
-}
-.section-label .glyph { color: var(--accent-pink); letter-spacing: -2px; }
-.section-meta {
-  font-family: var(--font-mono);
-  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
-  color: var(--dim);
-}
-.section-meta .g { color: var(--accent-green); }
-.section-meta .p { color: var(--accent-pink); }
-.section-h {
-  font-family: var(--font-display);
-  font-size: clamp(28px, 4vw, 44px);
-  line-height: 1.05; letter-spacing: 0.11em;
-  font-weight: 400; color: var(--ink);
-  margin: 0 0 18px;
-  text-transform: lowercase;
-  text-wrap: balance;
-}
-
-/* ───────────────────────── 01 IDENTITY (the hero moment) ───────────────────────── */
-
-.identity {
-  padding: 80px 0 96px;
-  position: relative;
-}
-
-.archetype-frame {
-  position: relative;
-  /* hero composition was tuned for ~1180px max — let it grow a little but
-     don't let the giant Bitcount name turn into a billboard on 4K */
-  max-width: 1320px;
-  margin-left: auto;
-  margin-right: auto;
-  border: 1px solid var(--line-2);
-  background:
-    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.025) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(102,209,181,0.025) 0 1px, transparent 1px 16px),
-    var(--bg-2);
-  padding: 56px 56px 48px;
-  box-shadow: 8px 8px 0 0 var(--accent-pink-shadow);
-}
-.archetype-frame .corner {
-  position: absolute; font-family: var(--font-mono); font-size: 11px;
-  color: var(--accent-pink); opacity: 0.6; letter-spacing: 0.1em;
-}
-.archetype-frame .corner.tl { top: 8px; left: 12px; }
-.archetype-frame .corner.tr { top: 8px; right: 12px; }
-.archetype-frame .corner.bl { bottom: 8px; left: 12px; }
-.archetype-frame .corner.br { bottom: 8px; right: 12px; }
-
-.arch-mast {
-  display: flex; align-items: center; justify-content: space-between;
-  gap: 24px; margin-bottom: 32px;
-  border-bottom: 1px dashed var(--line);
-  padding-bottom: 22px;
-  flex-wrap: wrap;
-}
-.arch-mast-left {
-  display: flex; flex-direction: column; gap: 8px;
-}
-.arch-eyebrow {
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--accent-green);
-}
-.arch-eyebrow .ix { color: var(--accent-pink); }
-.arch-target {
-  font-family: var(--font-mono); font-size: 12px;
-  color: var(--ink-2); letter-spacing: 0.05em;
-}
-.arch-target .slash { color: var(--dim); margin: 0 6px; }
-.arch-target .live {
-  margin-left: 10px; color: var(--accent-green);
-  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
-  display: inline-flex; align-items: center; gap: 6px;
-}
-.arch-target .dot-live {
-  width: 7px; height: 7px; background: var(--accent-green);
-  display: inline-block;
-  animation: pulseDot 1.6s ease-in-out infinite;
-  box-shadow: 0 0 8px rgba(102,209,181,0.6);
-}
-@keyframes pulseDot {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.4; transform: scale(0.85); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .arch-target .dot-live { animation: none; }
-}
-.arch-counter {
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim);
-  text-align: right;
-}
-.arch-counter .of { color: var(--ink-2); }
-
-.arch-body {
-  display: grid;
-  grid-template-columns: 1.7fr 1fr;
-  gap: 56px;
-  align-items: center;
-}
-
-.arch-name {
-  font-family: var(--font-display);
-  font-size: clamp(56px, 10vw, 124px);
-  line-height: 0.95;
-  letter-spacing: 0.08em;
-  margin: 0 0 16px;
-  text-transform: lowercase;
-  color: var(--ink);
-  text-wrap: balance;
-  /* hard-offset stamp */
-  text-shadow: 4px 4px 0 var(--accent-pink-shadow);
-}
-.arch-tagline {
-  font-family: var(--font-mono); font-size: 16px;
-  line-height: 1.5; color: var(--ink-2);
-  max-width: 580px; margin: 0 0 28px;
-  text-wrap: pretty;
-}
-.arch-desc {
-  font-family: var(--font-mono); font-size: 13px;
-  line-height: 1.65; color: var(--ink);
-  max-width: 580px;
-  margin: 0 0 28px;
-  text-wrap: pretty;
-}
-
-.arch-secondary {
-  display: inline-flex; align-items: center; gap: 10px;
-  padding: 6px 12px;
-  border: 1px dashed var(--line-2);
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.15em; text-transform: uppercase;
-  color: var(--ink-2);
-  margin-bottom: 24px;
-}
-.arch-secondary .with { color: var(--dim); }
-.arch-secondary .name { color: var(--accent-pink); }
-
-/* keyword strip — replaces the wordy description */
-.arch-keywords {
-  display: flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-  gap: 16px;
-  padding: 18px 0 4px;
-  font-family: var(--font-display);
-  font-size: clamp(20px, 2.4vw, 28px);
-  letter-spacing: 0.11em;
-  text-transform: lowercase;
-  line-height: 1.1;
-}
-.arch-keywords .kw {
-  color: var(--ink);
-}
-.arch-keywords .kw:nth-child(1) { color: var(--accent-green); }
-.arch-keywords .kw:nth-child(3) { color: var(--ink); }
-.arch-keywords .kw:nth-child(5) { color: var(--accent-pink); }
-.arch-keywords .kw-sep {
-  color: var(--dim);
-  font-family: var(--font-mono);
-  font-size: 18px;
-  letter-spacing: 0;
-}
-
-.signature-block {
-  background: var(--bg);
-  border: 1px solid var(--line);
-  padding: 18px 20px;
-  font-family: var(--font-mono); font-size: 13px;
-  line-height: 1.75;
-  white-space: pre;
-  overflow-x: auto;
-  max-width: 580px;
-  position: relative;
-}
-.signature-block::before {
-  content: ""; position: absolute; top: -1px; left: -1px;
-  width: 8px; height: 8px;
-  border-top: 1px solid var(--accent-pink);
-  border-left: 1px solid var(--accent-pink);
-}
-.signature-block::after {
-  content: ""; position: absolute; bottom: -1px; right: -1px;
-  width: 8px; height: 8px;
-  border-bottom: 1px solid var(--accent-pink);
-  border-right: 1px solid var(--accent-pink);
-}
-.sig-line { color: var(--ink); display: block; }
-.sig-line .arrow { color: var(--accent-green); margin-right: 6px; }
-.sig-line .comment { color: var(--dim); }
-.sig-line .err { color: var(--accent-pink); }
-
-.arch-meta-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 24px;
-  margin-top: 28px;
-  border-top: 1px dashed var(--line);
-  padding-top: 22px;
-}
-.arch-meta-item .label {
-  display: block;
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--accent-green);
-  margin-bottom: 8px;
-}
-.arch-meta-item .label.p { color: var(--accent-pink); }
-.arch-meta-item .body {
-  font-family: var(--font-mono); font-size: 12px;
-  color: var(--ink-2); line-height: 1.55;
-}
-
-.arch-closing {
-  margin-top: 28px;
-  font-family: var(--font-display);
-  font-size: 22px; letter-spacing: 0.11em;
-  color: var(--accent-pink);
-  text-transform: lowercase;
-  border-top: 1px dashed var(--line);
-  padding-top: 22px;
-}
-
-/* ───────────────────────── sigil — brutalist instrument plate ─────────────
-   The audit hero's central image. Was a bare 16px-cell pixel grid that
-   felt visually underweight next to the 124px Bitcount archetype name
-   and underdesigned compared to the dashed-frame panels everywhere else.
-
-   Treatment: an "instrument card" — register crosshairs at corners, header
-   strip with index + 8×8 coordinate, the grid on a dashed inner frame
-   with 20px cells, footer strip with the archetype slug, and a stacked
-   pink + black hard-offset shadow for depth.
-
-   The `data-bare` variant (used by the ShowOff CTA via `hideLabel`)
-   skips the plate and renders a bare grid so the showoff card can scale
-   the sigil down independently and the html2canvas poster export doesn't
-   need to capture the new plate chrome.                                   */
-
-.sigil-wrap {
-  display: flex; flex-direction: column; align-items: center;
-  justify-self: center;
-}
-
-.sigil-plate {
-  position: relative;
-  padding: 18px 22px;
-  background:
-    /* faint pink+green gridlines — same recipe as `.archetype-frame` so the
-       sigil reads as a smaller specimen of the same instrument family */
-    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.04) 0 1px, transparent 1px 12px),
-    repeating-linear-gradient(90deg, rgba(102,209,181,0.04) 0 1px, transparent 1px 12px),
-    var(--bg);
-  border: 1px solid var(--line-2);
-  /* stacked hard-offsets: pink at the front, black behind for depth */
-  box-shadow:
-    8px 8px 0 0 var(--accent-pink-shadow),
-    16px 16px 0 0 rgba(0, 0, 0, 0.55);
-}
-
-/* register crosshair marks at the four corners — CSS-only "+" rendered
-   from two 1px bars so they stay pixel-crisp at any zoom */
-.sigil-mark {
-  position: absolute;
-  width: 10px; height: 10px;
-  color: var(--accent-pink);
-  opacity: 0.75;
-  pointer-events: none;
-}
-.sigil-mark::before,
-.sigil-mark::after {
-  content: "";
-  position: absolute;
-  background: currentColor;
-}
-.sigil-mark::before { top: 50%; left: 0; right: 0; height: 1px; }
-.sigil-mark::after  { left: 50%; top: 0; bottom: 0; width: 1px; }
-.sigil-mark.tl { top: 6px;    left: 6px;  }
-.sigil-mark.tr { top: 6px;    right: 6px; }
-.sigil-mark.bl { bottom: 6px; left: 6px;  }
-.sigil-mark.br { bottom: 6px; right: 6px; }
-
-/* the header (top) and footer (bottom) strips of the plate */
-.sigil-strip {
-  display: flex; justify-content: space-between; align-items: baseline;
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--dim);
-}
-.sigil-strip--top {
-  padding-bottom: 10px;
-  margin-bottom: 14px;
-  border-bottom: 1px dashed var(--line);
-}
-.sigil-strip--bot {
-  padding-top: 10px;
-  margin-top: 14px;
-  border-top: 1px dashed var(--line);
-}
-.sigil-ix       { color: var(--accent-pink); }
-.sigil-coord    { color: var(--dim); }
-.sigil-strip-key { color: var(--dim); }
-.sigil-strip-val { color: var(--accent-green); }
-
-/* the actual 8×8 grid — bumped from 16px → 20px cells so the sigil
-   carries enough visual weight to sit next to the archetype name */
-.sigil {
-  display: grid;
-  grid-template-columns: repeat(8, 20px);
-  grid-template-rows: repeat(8, 20px);
-  gap: 2px;
-  padding: 12px;
-  background: var(--bg-2);
-  border: 1px dashed var(--line);
-  margin: 0 auto;
-}
-/* When the sigil is rendered bare (ShowOff path), restore the original
-   single-shadow look so the showoff card stays compositionally what it
-   was before the plate landed. */
-.sigil-wrap[data-bare="true"] .sigil {
-  background: var(--bg);
-  border: 1px solid var(--line-2);
-  box-shadow: 6px 6px 0 0 var(--accent-pink-shadow);
-}
-
-.sigil .px {
-  background: transparent;
-  /* diagonal fade-in: cells light up along an (x+y) wave starting from
-     the top-left when the hero first paints. Total animation ≈ 600ms. */
-  opacity: 0;
-  animation: sigil-cell-in 280ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
-  animation-delay: calc((var(--cx, 0) + var(--cy, 0)) * 22ms);
-}
-.sigil .px.on { background: var(--ink); }
-.sigil .px.p  {
-  background: var(--accent-pink);
-  /* subtle inner glow on accent cells so they pop without breaking pixel-craft */
-  box-shadow: 0 0 4px rgba(228, 88, 124, 0.45);
-}
-.sigil .px.g  {
-  background: var(--accent-green);
-  box-shadow: 0 0 4px rgba(102, 209, 181, 0.35);
-}
-.sigil .px.d  { background: var(--dim); }
-
-@keyframes sigil-cell-in {
-  from { opacity: 0; transform: scale(0.4); }
-  to   { opacity: 1; transform: scale(1); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .sigil .px {
-    animation: none;
-    opacity: 1;
-    transform: none;
-  }
-}
-
-/* ───────────── poster capture mode (applied during html2canvas) ─────────────
-   The live layout uses clamp()/vw font sizes, soft grid columns, and a
-   stamp text-shadow. html2canvas does NOT support clamp() or text-shadow
-   reliably — it picks a fallback that misaligns metrics and the giant
-   archetype name ends up overlapping the tagline + sigil column.
-
-   `.capturing` is added by show-off-cta.tsx right before capture and
-   removed in the finally block. It locks every viewport-relative size to
-   an absolute value tuned for the ~1100px capture width, fixes the grid
-   columns, and clears the stamp shadow + box shadow that html2canvas
-   would otherwise crop.                                                  */
-.archetype-frame.capturing {
-  min-width: 1080px;
-  max-width: 1180px;
-  padding: 52px 52px 44px;
-  box-shadow: none;
-}
-.archetype-frame.capturing .arch-name {
-  font-size: 88px;
-  line-height: 1;
-  margin: 0 0 24px;
-  text-shadow: none;
-  letter-spacing: 0.06em;
-}
-.archetype-frame.capturing .arch-tagline {
-  font-size: 16px;
-  max-width: 560px;
-  margin: 0 0 32px;
-}
-.archetype-frame.capturing .arch-secondary {
-  margin-bottom: 32px;
-}
-.archetype-frame.capturing .arch-keywords {
-  font-size: 24px;
-  letter-spacing: 0.09em;
-  padding: 16px 0 12px;
-  gap: 14px;
-  max-width: 560px;
-}
-.archetype-frame.capturing .arch-body {
-  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
-  gap: 56px;
-  align-items: start;
-}
-.archetype-frame.capturing .arch-meta-grid {
-  margin-top: 32px;
-  padding-top: 26px;
-  gap: 28px;
-}
-.archetype-frame.capturing .arch-closing {
-  font-size: 22px;
-  margin-top: 32px;
-  padding-top: 26px;
-}
-.archetype-frame.capturing .sigil-wrap {
-  position: static;
-  align-self: center;
-  justify-self: center;
-  padding-top: 0;
-}
-/* html2canvas renders stacked box-shadows unreliably and won't run our
-   sigil-cell-in animation. Collapse to a single hard offset on the plate
-   and force every cell to its final state for the capture. */
-.archetype-frame.capturing .sigil-plate {
-  box-shadow: 8px 8px 0 0 var(--accent-pink-shadow);
-}
-.archetype-frame.capturing .sigil { box-shadow: none; }
-.archetype-frame.capturing .sigil .px {
-  animation: none;
-  opacity: 1;
-  transform: none;
-}
-
-/* ──────────────── identity share buttons (chunky CTAs) ────────────────
-   Three branded buttons that sit below the archetype card. Each leads
-   with a platform mark tile (𝕏 / in / ↓), then a small "share on" / "save"
-   eyebrow above the platform label, then a trailing arrow. The buttons
-   read as armed at rest via a 2px pink right-edge stroke; on hover the
-   stroke fills the full border and a hard-offset pink shadow appears.
-   On press they translate (2px, 2px) and the shadow collapses — matches
-   the .btn-press motion language used elsewhere.
-
-   The shared `.share-btn` class is also used by the floating ShareDock so
-   the visual rhythm carries between surfaces.                          */
-
-.identity-share-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  margin-top: 22px;
-  padding-top: 18px;
-  border-top: 1px dashed var(--line);
-}
-@media (max-width: 720px) {
-  .identity-share-grid { grid-template-columns: 1fr; }
-}
-
-.share-btn {
-  position: relative;
-  display: grid;
-  grid-template-columns: 44px 1fr auto;
-  align-items: center;
-  gap: 14px;
-  padding: 12px 18px;
-  background: var(--bg);
-  border: 1px solid var(--line-2);
-  /* pink right-edge stroke at rest — reads as armed */
-  border-right: 2px solid var(--accent-pink-soft);
-  color: var(--ink);
-  font-family: var(--font-mono);
-  text-align: left;
-  cursor: pointer;
-  transition:
-    border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
-    background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
-    box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1),
-    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.share-btn:hover {
-  border-color: var(--accent-pink);
-  background: var(--accent-pink-bg);
-  box-shadow: 4px 4px 0 0 var(--accent-pink-shadow);
-  transform: translate(-1px, -1px);
-}
-.share-btn:active {
-  box-shadow: 0 0 0 0 var(--accent-pink-shadow);
-  transform: translate(2px, 2px);
-}
-.share-btn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-  border-right-color: var(--line);
-}
-.share-btn:disabled:hover {
-  background: var(--bg);
-  border-color: var(--line-2);
-  border-right-color: var(--line);
-  box-shadow: none;
-  transform: none;
-}
-
-.share-btn-mark {
-  display: grid; place-items: center;
-  width: 44px; height: 44px;
-  font-family: var(--font-mono);
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 1;
-  border: 1px solid var(--line-2);
-  /* corner-crosshair adornment — matches the sigil-plate's register marks */
-  background:
-    linear-gradient(to right, var(--accent-pink) 0 6px, transparent 6px) top left/100% 1px no-repeat,
-    linear-gradient(to bottom, var(--accent-pink) 0 6px, transparent 6px) top left/1px 100% no-repeat,
-    linear-gradient(to left, var(--accent-pink) 0 6px, transparent 6px) bottom right/100% 1px no-repeat,
-    linear-gradient(to top, var(--accent-pink) 0 6px, transparent 6px) bottom right/1px 100% no-repeat,
-    var(--bg-2);
-  color: var(--ink);
-}
-.share-btn-mark--x  { color: #ffffff; background-color: #000000; }
-.share-btn-mark--li {
-  color: #ffffff;
-  background-color: #0a66c2;
-  /* override the pink-crosshair gradients so the LinkedIn blue tile reads cleanly */
-  background-image: none;
-}
-.share-btn-mark--dl { color: var(--accent-pink); }
-
-.share-btn-body {
-  display: flex; flex-direction: column;
-  gap: 2px; min-width: 0;
-}
-.share-btn-eyebrow {
-  font-size: 10px;
-  letter-spacing: 0.22em;
-  text-transform: uppercase;
-  color: var(--accent-green);
-}
-.share-btn-label {
-  font-size: 13px;
-  letter-spacing: 0.05em;
-  color: var(--ink);
-  font-weight: 500;
-  /* avoid spilling on long localized labels */
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.share-btn-arrow {
-  font-family: var(--font-mono);
-  font-size: 18px;
-  color: var(--accent-pink);
-  opacity: 0.7;
-  transition: opacity 160ms cubic-bezier(0.22, 1, 0.36, 1), transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.share-btn:hover .share-btn-arrow { opacity: 1; transform: translateX(2px); }
-
-@media (prefers-reduced-motion: reduce) {
-  .share-btn, .share-btn-arrow { transition: none; }
-  .share-btn:hover { transform: none; }
-}
-
-/* hide during html2canvas capture so the buttons don't render into the poster */
-.archetype-frame.capturing .identity-share-grid { display: none; }
-
-/* ───────────────────────── 02 STRENGTHS ───────────────────────── */
-
-.strengths-grid {
-  display: grid; gap: 0;
-  border: 1px solid var(--line-2);
-  background: var(--bg-2);
-}
-.strength-row {
-  display: grid;
-  grid-template-columns: 56px 1fr auto;
-  align-items: start;
-  gap: 16px;
-  padding: 22px 24px;
-  border-bottom: 1px solid var(--line);
-  transition: background 120ms;
-}
-.strength-row:last-child { border-bottom: none; }
-.strength-row:hover { background: rgba(102, 209, 181, 0.03); }
-.strength-check {
-  width: 32px; height: 32px;
-  border: 1px solid var(--accent-green);
-  background: var(--accent-green-bg);
-  color: var(--accent-green);
-  display: grid; place-items: center;
-  font-family: var(--font-mono); font-weight: 600;
-  font-size: 14px;
-}
-.strength-body {
-  display: flex; flex-direction: column; gap: 6px;
-}
-.strength-headline {
-  font-family: var(--font-mono); font-size: 14px;
-  color: var(--ink); letter-spacing: 0.01em;
-  font-weight: 500;
-}
-.strength-detail {
-  font-family: var(--font-mono); font-size: 12px;
-  color: var(--ink-2); letter-spacing: 0.01em;
-  line-height: 1.55;
-}
-.strength-metric {
-  font-family: var(--font-display);
-  font-size: 26px; letter-spacing: 0.06em;
-  text-transform: lowercase;
-  color: var(--accent-green);
-  text-align: right;
-  line-height: 1;
-  white-space: nowrap;
-}
-.strength-metric .unit {
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase; color: var(--dim);
-  display: block; margin-top: 4px;
-}
-.strengths-footer {
-  font-family: var(--font-mono); font-size: 12px;
-  color: var(--ink-2); letter-spacing: 0.02em;
-  margin-top: 18px;
-  padding-left: 4px;
-}
-
-/* ───────────────────────── 03 SCORE CARD ───────────────────────── */
-
-.score-share-card {
-  padding: 22px 24px 20px;
-  background:
-    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
-    var(--bg-2);
-}
-
-.score-card-header {
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.18em; text-transform: uppercase;
-  color: var(--ink-2);
-  margin-bottom: 16px;
-}
-
-.ss-label {
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--accent-green);
-  margin-bottom: 14px;
-}
-
-/* — left column ------------------------------------------------------ */
-.ss-score-row {
-  display: flex; align-items: baseline; gap: 10px;
-  margin: 0 0 10px;
-}
-.ss-score {
-  font-family: var(--font-display);
-  font-size: clamp(52px, 7vw, 76px);
-  line-height: 0.9;
-  letter-spacing: 0.04em;
-  color: var(--accent-pink);
-  text-shadow: 4px 4px 0 var(--accent-pink-shadow);
-}
-.ss-score.g-S, .ss-score.g-A { color: var(--accent-green); text-shadow: 4px 4px 0 var(--accent-green-shadow); }
-.ss-score.g-B { color: #d3e1a8; text-shadow: 4px 4px 0 #6f7e45; }
-.ss-score-of {
-  font-family: var(--font-mono); font-size: 18px;
-  color: var(--dim); letter-spacing: 0.08em;
-}
-
-.ss-tier-row {
-  display: flex; align-items: center; gap: 12px;
-  margin-bottom: 16px;
-}
-.ss-tier-badge {
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.18em; text-transform: uppercase;
-  padding: 5px 10px;
-  border: 1px solid var(--accent-pink);
-  background: var(--accent-pink-bg);
-  color: var(--accent-pink);
-}
-.ss-tier-badge.g-S, .ss-tier-badge.g-A {
-  border-color: var(--accent-green);
-  background: var(--accent-green-bg);
-  color: var(--accent-green);
-}
-.ss-tier-badge.g-B {
-  border-color: #d3e1a8;
-  background: rgba(211, 225, 168, 0.10);
-  color: #d3e1a8;
-}
-.ss-arch {
-  font-family: var(--font-mono); font-size: 12px;
-  color: var(--ink-2); letter-spacing: 0.06em;
-}
-
-.ss-progress-label {
-  display: flex; justify-content: space-between;
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.06em;
-  margin-bottom: 6px;
-}
-.ss-progress-track {
-  position: relative;
-  height: 10px; background: var(--bg);
-  border: 1px solid var(--line);
-  margin-bottom: 6px;
-  overflow: visible;
-}
-.ss-progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent-pink) 0%, #f472b6 60%, #a78bfa 100%);
-}
-.ss-progress-tick {
-  position: absolute;
-  top: -4px; bottom: -4px;
-  width: 1px;
-  background: var(--line-2);
-  pointer-events: none;
-}
-.ss-grade-stops {
-  position: relative;
-  height: 16px;
-  margin-bottom: 16px;
-}
-.ss-grade-stop {
-  position: absolute;
-  transform: translateX(-50%);
-  font-family: var(--font-mono); font-size: 9px;
-  letter-spacing: 0.12em; text-transform: uppercase;
-  color: var(--dim);
-  top: 0;
-}
-.ss-grade-stop.active {
-  color: var(--accent-pink);
-  font-weight: 700;
-}
-
-.ss-stats {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
-  margin-bottom: 16px;
-}
-.ss-stat {
-  border: 1px solid var(--line-2);
-  background: var(--bg);
-  padding: 10px 12px;
-  text-align: left;
-}
-.ss-stat-n {
-  font-family: var(--font-display);
-  font-size: 24px; line-height: 1;
-  letter-spacing: 0.04em;
-  margin-bottom: 6px;
-}
-.ss-stat-l {
-  font-family: var(--font-mono); font-size: 9px;
-  letter-spacing: 0.2em; text-transform: uppercase;
-  color: var(--dim);
-  line-height: 1.4;
-}
-
-.ss-policy-label {
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--ink-2);
-  margin-top: 14px;
-  padding-top: 14px;
-  border-top: 1px dashed var(--line);
-  margin-bottom: 10px;
-}
-.ss-policy-chips {
-  display: flex; flex-wrap: wrap; gap: 6px;
-}
-.ss-chip {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 4px 10px;
-  border-radius: 0;
-  border: 1px solid var(--line-2);
-  background: var(--bg);
-  font-family: var(--font-mono); font-size: 11px;
-  color: var(--ink-2);
-}
-.ss-chip .dot {
-  width: 5px; height: 5px;
-  border-radius: 0;
-  background: var(--dim);
-}
-.ss-chip.missing {
-  border-color: rgba(228, 88, 124, 0.6);
-  color: var(--accent-pink);
-  background: rgba(228, 88, 124, 0.06);
-}
-.ss-chip.missing .dot { background: var(--accent-pink); }
-.ss-chip.enabled {
-  border-color: rgba(102, 209, 181, 0.5);
-  color: var(--accent-green);
-  background: rgba(102, 209, 181, 0.05);
-}
-.ss-chip.enabled .dot { background: var(--accent-green); }
-
-/* — right column ----------------------------------------------------- */
-.ss-templates {
-  display: flex; flex-direction: column; gap: 10px;
-  margin-bottom: 16px;
-}
-.ss-template {
-  border: 1px solid var(--line-2);
-  background: var(--bg);
-  padding: 14px 16px;
-}
-.ss-template-head {
-  display: inline-flex; align-items: center; gap: 8px;
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.2em; text-transform: uppercase;
-  color: var(--ink-2);
-  margin-bottom: 8px;
-}
-.ss-template-head .dot {
-  width: 6px; height: 6px; border-radius: 50%;
-  background: var(--accent-pink);
-}
-.ss-template-body {
-  font-family: var(--font-mono); font-size: 12.5px;
-  line-height: 1.55; color: var(--ink-2);
-  margin: 0;
-}
-
-.ss-actions {
-  display: flex; flex-direction: column; gap: 8px;
-}
-.ss-action-btn {
-  display: grid;
-  grid-template-columns: 28px 1fr;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 14px;
-  border: 1px solid var(--line-2);
-  background: transparent;
-  color: var(--ink);
-  text-align: left;
-  font-family: var(--font-mono); font-size: 12px;
-  cursor: pointer;
-  transition: all 120ms ease;
-  text-decoration: none;
-}
-.ss-action-btn:hover {
-  border-color: var(--accent-pink);
-  background: var(--accent-pink-bg);
-  color: var(--accent-pink);
-}
-.ss-action-btn:disabled {
-  opacity: 0.55; cursor: wait;
-}
-.ss-action-glyph {
-  display: grid; place-items: center;
-  width: 24px; height: 24px;
-  border: 1px solid var(--ink-2);
-  font-family: var(--font-mono); font-size: 11px;
-  text-transform: uppercase;
-  color: var(--ink-2);
-}
-.ss-action-btn:hover .ss-action-glyph {
-  border-color: var(--accent-pink);
-  color: var(--accent-pink);
-}
-.ss-action-text {
-  display: flex; flex-direction: column;
-}
-.ss-action-title {
-  font-family: var(--font-mono); font-size: 13px;
-  letter-spacing: 0.04em;
-  color: var(--ink);
-}
-.ss-action-btn:hover .ss-action-title { color: var(--accent-pink); }
-.ss-action-sub {
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.05em;
-  color: var(--dim);
-  margin-top: 2px;
-}
-
-.ss-foot {
-  display: flex; justify-content: space-between; gap: 16px;
-  flex-wrap: wrap;
-  padding-top: 18px; margin-top: 26px;
-  border-top: 1px dashed var(--line);
-  font-family: var(--font-mono); font-size: 11px;
-  color: var(--ink-2);
-}
-.ss-foot-link {
-  color: var(--accent-green);
-  text-decoration: none;
-}
-.ss-foot-link:hover { text-decoration: underline; text-underline-offset: 3px; }
-
-@media (max-width: 880px) {
-  .score-share-card { padding: 16px 16px 16px; }
-}
-
-
-/* ───────────────────────── 04 FINDINGS ───────────────────────── */
-
-.findings-list { display: flex; flex-direction: column; gap: 20px; }
-.finding {
-  border: 1px solid var(--line-2);
-  background: var(--bg-2);
-  position: relative;
-}
-.finding::before {
-  content: ""; position: absolute; top: -1px; left: -1px;
-  width: 8px; height: 8px;
-  border-top: 1px solid var(--accent-pink);
-  border-left: 1px solid var(--accent-pink);
-}
-.finding-head {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 18px; align-items: center;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--line);
-}
-.finding-num {
-  font-family: var(--font-mono); font-size: 13px;
-  color: var(--accent-pink); letter-spacing: 0.12em;
-  font-weight: 600;
-}
-.finding-title {
-  font-family: var(--font-display); font-size: 22px;
-  letter-spacing: 0.11em; color: var(--ink);
-  text-transform: lowercase;
-}
-.finding-count {
-  font-family: var(--font-display); font-size: 36px;
-  letter-spacing: 0.04em; color: var(--accent-pink);
-  text-transform: lowercase; line-height: 1;
-  display: flex; align-items: baseline; gap: 6px;
-}
-.finding-count .label {
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--dim);
-}
-.finding-meta {
-  display: flex; gap: 16px; flex-wrap: wrap;
-  padding: 12px 24px;
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.05em;
-  color: var(--ink-2);
-  border-bottom: 1px solid var(--line);
-  background: rgba(0,0,0,0.15);
-}
-.finding-meta .policy { color: var(--accent-green); }
-.finding-meta .sep { color: var(--dim); }
-.finding-body {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0;
-}
-.finding-block {
-  padding: 22px 24px;
-  border-right: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
-  display: flex; flex-direction: column; gap: 10px;
-}
-.finding-block:nth-child(2n) { border-right: none; }
-.finding-block:nth-last-child(-n+2) { border-bottom: none; }
-.fb-label {
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--accent-green);
-}
-.fb-label.cost { color: var(--amber); }
-.fb-label.fix { color: var(--accent-pink); }
-.fb-body {
-  font-family: var(--font-mono); font-size: 13px;
-  line-height: 1.65; color: var(--ink-2);
-}
-.fb-body .pk { color: var(--accent-pink); }
-.fb-body .g { color: var(--accent-green); }
-.fb-body .a { color: var(--amber); }
-.fb-body code {
-  background: var(--bg); border: 1px solid var(--line);
-  padding: 1px 6px; color: var(--accent-green); font-size: 12px;
-}
-
-.fb-evidence {
-  font-family: var(--font-mono); font-size: 12px;
-  background: var(--bg); border: 1px solid var(--line);
-  padding: 12px 14px;
-  white-space: pre; overflow-x: auto;
-  color: var(--ink); line-height: 1.65;
-}
-.fb-evidence .arrow { color: var(--accent-green); }
-.fb-evidence .err { color: var(--accent-pink); }
-.fb-evidence .comment { color: var(--dim); }
-
-.fb-fix {
-  background: var(--bg); border: 1px solid var(--line);
-  padding: 14px;
-  font-family: var(--font-mono); font-size: 12px;
-}
-.fb-fix .slug {
-  display: inline-block; padding: 2px 8px;
-  background: var(--accent-pink-bg); color: var(--accent-pink);
-  border: 1px solid var(--accent-pink);
-  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
-  margin-bottom: 10px;
-}
-.fb-fix .cmd {
-  display: block; margin-top: 12px;
-  color: var(--accent-green); font-size: 12px;
-  border-top: 1px dashed var(--line); padding-top: 10px;
-}
-.fb-fix .cmd .prompt { color: var(--dim); margin-right: 6px; }
-
-/* ───────────────────────── show-off CTA (after IDENTITY) ───────────────────────── */
-
-.showoff {
-  padding: 0 0 32px;
-  border-bottom: 1px solid var(--line);
-  margin-bottom: 0;
-  /* Clear the sticky .app-header (≈52px tall) when scroll-anchored. */
-  scroll-margin-top: 80px;
-}
-.showoff-cta {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 32px;
-  padding: 28px 32px;
-  border: 1px solid var(--line-2);
-  background:
-    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.025) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.025) 0 1px, transparent 1px 16px),
-    var(--bg-2);
-  color: var(--ink);
-  text-decoration: none;
-  position: relative;
-  transition: border-color 120ms ease, background 120ms ease;
-}
-.showoff-cta:hover {
-  border-color: var(--ink-2);
-  background:
-    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.04) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.04) 0 1px, transparent 1px 16px),
-    var(--bg-3);
-}
-.showoff-cta::before {
-  content: ""; position: absolute; top: -1px; left: -1px;
-  width: 10px; height: 10px;
-  border-top: 1px solid var(--accent-pink);
-  border-left: 1px solid var(--accent-pink);
-}
-.showoff-cta::after {
-  content: ""; position: absolute; bottom: -1px; right: -1px;
-  width: 10px; height: 10px;
-  border-bottom: 1px solid var(--accent-pink);
-  border-right: 1px solid var(--accent-pink);
-}
-.showoff-glyph {
-  display: block;
-  transform: scale(0.55);
-  transform-origin: center;
-  margin: -40px -28px;
-  /* shrink the embedded sigil without rebuilding it */
-}
-.showoff-glyph .sigil-wrap[data-bare="true"] .sigil {
-  box-shadow: 4px 4px 0 0 var(--accent-pink-shadow);
-}
-/* legacy: pre-plate sigil rendered a .sigil-label sibling. The new plate
-   renders strip rows inside the plate instead, but keep this null-rule so
-   any cached HTML between deploys doesn't surface a stray label. */
-.showoff-glyph .sigil-label { display: none; }
-.showoff-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-}
-.showoff-label {
-  font-family: var(--font-mono);
-  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--accent-green);
-}
-.showoff-headline {
-  font-family: var(--font-display);
-  font-size: clamp(28px, 3.4vw, 40px);
-  letter-spacing: 0.11em;
-  text-transform: lowercase;
-  color: var(--ink);
-  line-height: 1.05;
-  text-shadow: 3px 3px 0 var(--accent-pink-shadow);
-}
-.showoff-sub {
-  font-family: var(--font-mono);
-  font-size: 13px; line-height: 1.55;
-  color: var(--ink-2);
-  max-width: 520px;
-}
-.showoff-action {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 16px 24px;
-  border: 1px solid var(--accent-pink);
-  background: var(--accent-pink-bg);
-  color: var(--accent-pink);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 0.22em;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-.showoff-arrow {
-  font-family: var(--font-display);
-  font-size: 36px;
-  letter-spacing: 0;
-  line-height: 1;
-  color: var(--accent-pink);
-}
-
-@media (max-width: 800px) {
-  .showoff-cta { grid-template-columns: 1fr; padding: 24px 20px; gap: 18px; }
-  .showoff-glyph { margin: 0; transform: scale(0.6); transform-origin: left top; }
-  .showoff-action { width: 100%; flex-direction: row; justify-content: center; }
-}
-
-/* ───────────────────────── 05 POLICIES ───────────────────────── */
-
-.policy-callout {
-  display: inline-flex; align-items: baseline; gap: 12px;
-  padding: 12px 18px;
-  border: 1px solid var(--accent-green);
-  background: var(--accent-green-bg);
-  margin-bottom: 28px;
-  font-family: var(--font-mono); font-size: 13px;
-  letter-spacing: 0.02em;
-  color: var(--ink);
-  box-shadow: 4px 4px 0 0 var(--accent-green-shadow);
-}
-.policy-callout .arrow { color: var(--accent-green); margin: 0 4px; }
-.policy-callout .new-score {
-  font-family: var(--font-display); font-size: 22px;
-  letter-spacing: 0.08em; color: var(--accent-green);
-}
-.policy-callout .new-tier { color: var(--accent-green); font-weight: 600; }
-
-.policies-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-}
-.policy-card {
-  border: 1px solid var(--line-2);
-  background: var(--bg-2);
-  padding: 20px 22px;
-  display: flex; flex-direction: column; gap: 10px;
-  transition: all 120ms;
-  position: relative;
-}
-.policy-card::before {
-  content: ""; position: absolute; left: 0; top: 0;
-  width: 3px; height: 100%;
-  background: var(--accent-pink); opacity: 0.7;
-}
-.policy-card:hover { background: var(--bg-3); }
-.policy-card .head {
-  display: flex; justify-content: space-between; align-items: baseline;
-  gap: 12px;
-  padding-bottom: 10px;
-  border-bottom: 1px dashed var(--line);
-  margin-bottom: 4px;
-}
-.policy-name {
-  font-family: var(--font-display); font-size: 18px;
-  letter-spacing: 0.11em; color: var(--ink);
-  text-transform: lowercase;
-}
-.policy-slug {
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.12em; color: var(--dim);
-  text-transform: uppercase;
-}
-.policy-desc {
-  font-family: var(--font-mono); font-size: 12px;
-  color: var(--ink-2); line-height: 1.6;
-}
-.policy-impact {
-  font-family: var(--font-mono); font-size: 12px;
-  color: var(--accent-green);
-  letter-spacing: 0.01em;
-  border-top: 1px dashed var(--line);
-  padding-top: 10px;
-  margin-top: auto;
-}
-.policy-impact .check { margin-right: 6px; }
-.policy-install {
-  display: flex; align-items: center; gap: 8px;
-  font-family: var(--font-mono); font-size: 11px;
-  background: var(--bg); border: 1px solid var(--line);
-  padding: 8px 10px;
-  color: var(--accent-green);
-  margin-top: 4px;
-}
-.policy-install .prompt { color: var(--dim); }
-.policy-install .copy {
-  margin-left: auto; color: var(--dim); cursor: pointer;
-  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
-  transition: color 120ms;
-}
-.policy-install .copy:hover { color: var(--accent-pink); }
-
-/* ───────────────────────── 06 SHARE + RETURN ───────────────────────── */
-
-.share-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 32px;
-  align-items: start;
-}
-
-.share-card {
-  border: 1px solid var(--accent-pink);
-  background:
-    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.02) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.02) 0 1px, transparent 1px 16px),
-    var(--bg-2);
-  padding: 32px;
-  position: relative;
-  box-shadow: 8px 8px 0 0 var(--accent-pink-shadow);
-}
-.share-card .stamp-tl, .share-card .stamp-br {
-  position: absolute;
-  font-family: var(--font-mono); font-size: 9px;
-  letter-spacing: 0.2em; text-transform: uppercase;
-  color: var(--accent-pink); opacity: 0.55;
-}
-.share-card .stamp-tl { top: 8px; left: 12px; }
-.share-card .stamp-br { bottom: 8px; right: 12px; }
-
-.share-brand {
-  display: flex; align-items: center; gap: 10px;
-  margin-bottom: 28px;
-}
-.share-brand .glyph {
-  color: var(--accent-pink); font-family: var(--font-mono);
-  font-size: 14px; letter-spacing: -2px; font-weight: 700;
-}
-.share-brand .name {
-  font-family: var(--font-display); font-size: 14px;
-  letter-spacing: 0.11em; text-transform: lowercase; color: var(--ink);
-}
-.share-brand .sep { color: var(--dim); font-size: 11px; }
-.share-brand .meta {
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim);
-}
-.share-project {
-  font-family: var(--font-mono); font-size: 12px;
-  letter-spacing: 0.05em; color: var(--ink-2);
-  margin-bottom: 20px;
-}
-.share-archetype {
-  font-family: var(--font-display);
-  font-size: clamp(36px, 5vw, 56px);
-  line-height: 1; letter-spacing: 0.08em;
-  text-transform: lowercase;
-  color: var(--ink);
-  text-shadow: 3px 3px 0 var(--accent-pink-shadow);
-  margin: 0 0 12px;
-  text-wrap: balance;
-}
-.share-rule {
-  width: 56px; height: 2px;
-  background: var(--accent-pink);
-  margin: 16px 0 20px;
-}
-.share-tagline {
-  font-family: var(--font-mono); font-size: 14px;
-  line-height: 1.45; color: var(--ink-2);
-  margin-bottom: 32px;
-  text-wrap: pretty;
+  margin: 0 0 16px;
+  text-wrap: balance;
+  text-align: center;
 }
-.share-score-row {
-  display: flex; gap: 14px; align-items: center;
+.empty-sub {
   font-family: var(--font-mono); font-size: 14px;
-  letter-spacing: 0.05em;
-  padding-top: 22px;
-  border-top: 1px dashed var(--line);
-}
-.share-score-row .tier {
-  font-family: var(--font-display); font-size: 22px;
-  letter-spacing: 0.08em; color: var(--accent-pink);
-  text-transform: uppercase;
-}
-.share-score-row .sep { color: var(--dim); }
-.share-score-row .num { color: var(--ink); }
-.share-score-row .rank { color: var(--ink-2); }
-.share-url {
-  margin-top: 22px;
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.18em; text-transform: uppercase;
-  color: var(--accent-green);
+  line-height: 1.65; color: var(--ink-2);
+  max-width: 580px;
+  margin: 0 auto 32px;
+  text-align: center;
 }
 
-.share-actions {
-  display: flex; flex-direction: column; gap: 16px;
+.empty-actions {
+  display: flex; flex-direction: column; align-items: center;
+  gap: 12px;
 }
-.tweet-tabs {
-  display: flex; gap: 0;
-  border: 1px solid var(--line-2);
+.empty-cta {
+  padding: 12px 24px;
+  font-size: 14px;
+  letter-spacing: 0.08em;
+  text-decoration: none;
 }
-.tweet-tab {
-  flex: 1;
-  padding: 10px 14px;
+.empty-meta {
   font-family: var(--font-mono); font-size: 11px;
   letter-spacing: 0.15em; text-transform: uppercase;
-  color: var(--ink-2);
-  border-right: 1px solid var(--line);
-  background: var(--bg-2);
-  transition: all 120ms;
-}
-.tweet-tab:last-child { border-right: none; }
-.tweet-tab:hover { color: var(--ink); }
-.tweet-tab.is-active {
-  color: var(--accent-pink);
-  background: var(--accent-pink-bg);
+  color: var(--dim);
 }
 
-.tweet-preview {
-  background: var(--bg-2);
-  border: 1px solid var(--line-2);
-  padding: 20px 22px;
+.running-panel { padding: 36px 40px; }
+.running-header {
+  display: flex; align-items: center; gap: 10px;
+  padding-bottom: 18px;
+  border-bottom: 1px dashed var(--line);
+  margin-bottom: 22px;
   font-family: var(--font-mono); font-size: 13px;
-  line-height: 1.65;
-  color: var(--ink);
-  white-space: pre-wrap;
-  min-height: 200px;
-  position: relative;
 }
-.tweet-preview .url { color: var(--accent-pink); }
-.tweet-preview .arch { color: var(--accent-pink); }
-.tweet-meta {
-  display: flex; justify-content: space-between;
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.18em; text-transform: uppercase;
-  color: var(--dim);
+.running-prompt { color: var(--accent-green); }
+.running-cmd   { color: var(--ink); letter-spacing: 0.02em; }
+.running-cursor {
+  color: var(--accent-pink);
+  margin-left: 4px;
+  animation: cursor-blink 900ms steps(2, end) infinite;
 }
-.tweet-meta .count.over { color: var(--accent-pink); }
+@keyframes cursor-blink { 50% { opacity: 0; } }
 
-.share-buttons {
-  display: flex; gap: 12px; flex-wrap: wrap;
+.running-stages {
+  list-style: none; padding: 0; margin: 0 0 28px;
+  display: flex; flex-direction: column;
 }
-.share-btn {
-  display: inline-flex; align-items: center; gap: 10px;
-  padding: 14px 20px;
-  font-family: var(--font-mono); font-size: 13px;
-  letter-spacing: 0.04em;
-  border: 1px solid var(--accent-pink);
-  color: var(--accent-pink);
-  background: transparent;
-  transition: all 120ms;
-  box-shadow: 4px 4px 0 0 var(--accent-pink-shadow);
+.running-stage {
+  display: grid;
+  grid-template-columns: 28px 1fr auto;
+  gap: 14px; align-items: start;
+  padding: 12px 0;
+  border-bottom: 1px dashed var(--line);
+  font-family: var(--font-mono);
 }
-.share-btn:hover {
-  background: var(--accent-pink);
-  color: var(--bg);
-  box-shadow: 2px 2px 0 0 var(--accent-pink-shadow);
-  transform: translate(2px, 2px);
+.running-stage:last-child { border-bottom: none; }
+.running-marker {
+  font-family: var(--font-mono); font-size: 12px;
+  letter-spacing: -1px;
+  margin-top: 1px;
+}
+.running-stage.queued { color: var(--dim); }
+.running-stage.queued .running-marker { color: var(--line-2); }
+.running-stage.active { color: var(--ink); }
+.running-stage.active .running-marker { color: var(--accent-pink); }
+.running-stage.done   { color: var(--ink-2); }
+.running-stage.done .running-marker { color: var(--accent-green); }
+.running-stage.done .running-stage-label {
+  text-decoration: line-through;
+  text-decoration-color: var(--line-2);
 }
-.share-btn.alt {
-  border-color: var(--line-2); color: var(--ink);
-  box-shadow: 4px 4px 0 0 #1a1a20;
+.running-stage-label { font-size: 13px; letter-spacing: 0.04em; }
+.running-stage-detail {
+  font-size: 11px; color: var(--ink-2);
+  letter-spacing: 0.02em;
+  margin-top: 4px;
 }
-.share-btn.alt:hover {
-  border-color: var(--ink); background: rgba(255,255,255,0.04);
-  color: var(--ink); box-shadow: 2px 2px 0 0 #1a1a20;
+.running-stage-spin {
+  font-family: var(--font-mono); font-size: 16px;
+  color: var(--accent-pink);
+  align-self: center;
+  animation: spin-step 700ms steps(4, end) infinite;
 }
-.share-btn .arrow { color: var(--accent-green); }
-.share-btn:hover .arrow { color: var(--bg); }
+@keyframes spin-step { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 
-/* return hook */
-.return-hook {
-  margin-top: 64px;
-  padding: 40px 48px;
-  border: 1px solid var(--line-2);
-  background: var(--bg-2);
+.running-bar-label {
+  display: flex; justify-content: space-between;
+  font-family: var(--font-mono); font-size: 10px;
+  letter-spacing: 0.22em; text-transform: uppercase;
+  color: var(--ink-2);
+  margin-bottom: 8px;
+}
+.running-bar-track {
   position: relative;
+  height: 6px; background: var(--bg);
+  border: 1px solid var(--line);
+  overflow: hidden;
 }
-.return-hook::before, .return-hook::after {
-  content: ""; position: absolute; width: 8px; height: 8px;
+.running-bar-fill {
+  position: relative;
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent-pink) 0%, #e89aaf 100%);
+  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
 }
-.return-hook::before {
-  top: -1px; left: -1px;
-  border-top: 1px solid var(--accent-green);
-  border-left: 1px solid var(--accent-green);
+.running-bar-fill::after {
+  content: "";
+  position: absolute; inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%, transparent 40%,
+    rgba(255,255,255,0.35) 50%,
+    transparent 60%, transparent 100%
+  );
+  animation: bar-shine 1600ms linear infinite;
 }
-.return-hook::after {
-  bottom: -1px; right: -1px;
-  border-bottom: 1px solid var(--accent-green);
-  border-right: 1px solid var(--accent-green);
+@keyframes bar-shine {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(100%); }
 }
-.return-hook .label {
+
+.running-foot {
+  margin-top: 22px;
   font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--accent-green); margin-bottom: 12px;
-}
-.return-hook h3 {
-  font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 40px);
-  letter-spacing: 0.11em; line-height: 1.1;
-  text-transform: lowercase; color: var(--ink);
-  margin: 0 0 16px; font-weight: 400;
-}
-.return-hook p {
-  font-family: var(--font-mono); font-size: 13px;
-  color: var(--ink-2); line-height: 1.7;
-  margin: 0 0 8px; max-width: 600px;
+  letter-spacing: 0.05em;
+  color: var(--dim);
+  text-align: center;
 }
-.return-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; align-items: center; }
 
-/* persistent reminder status (authed + reminder saved) */
-.return-status {
-  margin-top: 24px;
-  padding: 18px 20px;
-  border: 1px solid var(--accent-pink);
-  background:
-    repeating-linear-gradient(0deg, rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
-    var(--bg-2);
-}
-.return-status .rs-row {
-  display: flex; align-items: center; gap: 12px;
-  font-family: var(--font-mono); font-size: 13px;
-  color: var(--ink-2);
-  margin: 6px 0;
+@media (max-width: 720px) {
+  .empty-panel, .running-panel { padding: 32px 24px; }
 }
-.return-status .rs-row-primary {
-  font-size: 15px;
-  color: var(--ink);
-  letter-spacing: 0.02em;
+
+/* ───────────────────────── audit page shell ───────────────────────── */
+
+/* the audit page intentionally runs narrower than the global .report — the
+   archetype hero, findings cards, and score-share card are tuned for a
+   ~1400px-max layout where the headline line measure stays "billboard"
+   tight. On a 2400px+ monitor we still want to break out of the 1180px
+   feel that used to leave too much black on both flanks; clamp up to
+   1480px and let `.archetype-frame` cap itself further so the hero doesn't
+   stretch past its compositional break-point. */
+.report {
+  width: 100%;
+  max-width: clamp(720px, 92vw, 1480px);
+  margin: 0 auto;
+  padding: 0 clamp(20px, 3vw, 48px);
 }
-.return-status .rs-strong { color: var(--accent-pink); }
-.return-status .rs-email  { color: var(--accent-green); }
-.rs-dot {
-  width: 8px; height: 8px;
-  display: inline-block;
-  flex-shrink: 0;
+
+.section {
+  padding: 64px 0;
+  border-bottom: 1px solid var(--line);
+  position: relative;
 }
-.rs-dot-pink {
-  background: var(--accent-pink);
-  box-shadow: 0 0 8px rgba(228, 88, 124,0.55);
-  animation: pulseDot 1.6s ease-in-out infinite;
+.section:last-child { border-bottom: none; }
+
+.section-mast {
+  display: flex; align-items: baseline; justify-content: space-between;
+  gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
 }
-.rs-dot-green {
-  background: var(--accent-green);
-  box-shadow: 0 0 6px rgba(102,209,181,0.55);
+.section-label {
+  font-family: var(--font-mono);
+  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
+  color: var(--accent-green);
+  display: inline-flex; align-items: baseline; gap: 10px;
 }
-.rs-clear {
-  background: transparent;
-  border: none;
-  padding: 4px 0;
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.1em;
+.section-label .glyph { color: var(--accent-pink); letter-spacing: -2px; }
+.section-meta {
+  font-family: var(--font-mono);
+  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
   color: var(--dim);
-  cursor: pointer;
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  transition: color 120ms;
 }
-.rs-clear:hover:not(:disabled) { color: var(--accent-pink); }
-.rs-clear:disabled { opacity: 0.5; cursor: not-allowed; }
+.section-meta .g { color: var(--accent-green); }
+.section-meta .p { color: var(--accent-pink); }
+.section-h {
+  font-family: var(--font-display);
+  font-size: clamp(28px, 4vw, 44px);
+  line-height: 1.05; letter-spacing: 0.11em;
+  font-weight: 400; color: var(--ink);
+  margin: 0 0 18px;
+  text-transform: lowercase;
+  text-wrap: balance;
+}
 
 /* ───────────────────────── footer ───────────────────────── */
 
@@ -1745,12 +278,8 @@
   width: 100%;
   max-width: 460px;
   padding: 32px 32px 28px;
-  border: 1px solid var(--accent-pink);
-  background:
-    repeating-linear-gradient(0deg,  rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(228, 88, 124,0.03) 0 1px, transparent 1px 16px),
-    var(--bg-2);
-  box-shadow: 8px 8px 0 0 var(--accent-pink-shadow);
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
   font-family: var(--font-mono);
   color: var(--ink);
   animation: authPop 160ms ease-out;
@@ -1797,7 +326,6 @@
   text-transform: lowercase;
   color: var(--ink);
   margin: 0 0 12px;
-  text-shadow: 3px 3px 0 var(--accent-pink-shadow);
   text-wrap: balance;
 }
 
@@ -1882,12 +410,10 @@
 .auth-btn.primary {
   border-color: var(--accent-pink);
   color: var(--accent-pink);
-  box-shadow: 4px 4px 0 0 var(--accent-pink-shadow);
+  background: var(--accent-pink-bg);
 }
 .auth-btn.primary:hover:not(:disabled) {
   background: var(--accent-pink); color: var(--bg);
-  box-shadow: 2px 2px 0 0 var(--accent-pink-shadow);
-  transform: translate(2px, 2px);
 }
 
 .auth-back {
@@ -1955,116 +481,6 @@
   .running-bar-fill { transition: none; }
 }
 
-/* ──────────────── floating share dock ────────────────
-   Persistent share affordance pinned to the bottom-right of the audit
-   page. Uses the same .share-btn styling as the inline strip in
-   identity-section so the visual rhythm carries. The dock can be
-   collapsed to a single pink FAB; preference persists in sessionStorage. */
-
-.share-dock {
-  position: fixed;
-  right: clamp(16px, 2.5vw, 32px);
-  bottom: clamp(16px, 2.5vw, 32px);
-  z-index: 40;
-  width: 300px;
-  background: var(--bg-2);
-  border: 1px solid var(--line-2);
-  box-shadow:
-    8px 8px 0 0 var(--accent-pink-shadow),
-    16px 16px 0 0 rgba(0, 0, 0, 0.5);
-  animation: share-dock-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.share-dock::before,
-.share-dock::after { content: ""; position: absolute; width: 10px; height: 10px; }
-.share-dock::before {
-  top: -1px; left: -1px;
-  border-top: 1px solid var(--accent-pink);
-  border-left: 1px solid var(--accent-pink);
-}
-.share-dock::after {
-  bottom: -1px; right: -1px;
-  border-bottom: 1px solid var(--accent-pink);
-  border-right: 1px solid var(--accent-pink);
-}
-
-@keyframes share-dock-in {
-  from { opacity: 0; transform: translate(8px, 8px); }
-  to   { opacity: 1; transform: translate(0, 0); }
-}
-
-.share-dock-head {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px dashed var(--line);
-}
-.share-dock-eyebrow {
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--accent-green);
-}
-.share-dock-eyebrow > span { color: var(--accent-pink); margin-right: 8px; letter-spacing: -2px; }
-.share-dock-caret {
-  display: grid; place-items: center;
-  width: 24px; height: 24px;
-  background: transparent;
-  border: 1px solid var(--line-2);
-  color: var(--ink-2);
-  font-family: var(--font-mono); font-size: 11px;
-  cursor: pointer;
-  transition: color 140ms cubic-bezier(0.22, 1, 0.36, 1), border-color 140ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.share-dock-caret:hover { color: var(--accent-pink); border-color: var(--accent-pink); }
-
-.share-dock-stack {
-  display: flex; flex-direction: column;
-  gap: 8px;
-  padding: 14px 14px 10px;
-}
-/* Dock buttons fill the dock width — same `.share-btn` skin, just full-width. */
-.share-dock-stack .share-btn { width: 100%; }
-
-.share-dock-foot {
-  padding: 10px 16px 12px;
-  border-top: 1px dashed var(--line);
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.18em; text-transform: uppercase;
-  color: var(--dim);
-  text-align: center;
-}
-.share-dock-foot > span { color: var(--accent-pink); margin-right: 6px; }
-
-/* Collapsed-state FAB — single pink-tile button that re-expands the dock. */
-.share-dock-fab {
-  position: fixed;
-  right: clamp(16px, 2.5vw, 32px);
-  bottom: clamp(16px, 2.5vw, 32px);
-  z-index: 40;
-  width: 56px; height: 56px;
-  display: grid; place-items: center;
-  background: var(--accent-pink);
-  color: var(--bg);
-  border: 1px solid var(--accent-pink);
-  box-shadow: 6px 6px 0 0 var(--accent-pink-shadow);
-  font-family: var(--font-mono);
-  font-size: 22px; font-weight: 700;
-  cursor: pointer;
-  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
-  animation: share-dock-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.share-dock-fab:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 0 var(--accent-pink-shadow); }
-.share-dock-fab:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--accent-pink-shadow); }
-
-/* hide on mobile — inline buttons cover the same affordance there */
-@media (max-width: 760px) {
-  .share-dock, .share-dock-fab { display: none; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .share-dock, .share-dock-fab { animation: none; }
-  .share-dock-fab { transition: none; }
-  .share-dock-caret { transition: none; }
-}
-
 /* ─────────────────────────────────────────────────────────────────────
    audit-progress-strip — sticky banner pinned to the top of the viewport
    while a re-audit is in flight. Pink hard-offset shadow matches the
@@ -2080,7 +496,6 @@
   z-index: 60;
   background: var(--bg-2);
   border-bottom: 1px solid var(--accent-pink);
-  box-shadow: 0 4px 0 0 var(--accent-pink-shadow);
   font-family: var(--font-mono);
   /* Slide in from above on mount */
   animation: audit-progress-slide-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
@@ -2192,21 +607,29 @@
    ============================================================ */
 
 .poster-section {
-  padding: 56px 0 40px;
+  /* Fill the viewport: the poster IS the first thing you see, and the
+   *  scroll hint at the bottom signals where the report begins.
+   *  Subtracts the sticky app-header (~52px) so the share row + scroll
+   *  hint sit just above the fold on a vanilla 100vh layout. */
+  min-height: calc(100vh - 52px);
+  padding: 40px 0 32px;
   border-bottom: 1px solid var(--line);
+  display: flex; flex-direction: column;
+  justify-content: center;
 }
 
 .poster {
   position: relative;
-  padding: 28px 36px 20px;
+  padding: 36px 44px 24px;
   border: 1px dashed var(--accent-pink-soft);
   background:
     radial-gradient(ellipse 700px 240px at 80% 10%,
       rgba(228, 88, 124, 0.06) 0%, transparent 65%),
     var(--bg-2);
   display: flex; flex-direction: column;
-  gap: 22px;
+  gap: 28px;
   max-width: 980px;
+  width: 100%;
   margin: 0 auto;
 }
 

From 7af5d9d4d725f2ae309417021dac693b8c2afdd0 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 02:19:46 -0700
Subject: [PATCH 07/28] style: drop body gradient + restructure how-to-improve
 as row list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Background simplifies to a plain dark color — no more cyan glow,
no gradient layer. Matches the older a0a18415 era's chrome.

How-to-improve drops the install-X / install-Y card framing the
user found cluttery. New row layout per fix:

  policy-name (white, prominent)
  // one-line explanation
                                  $ failproof policy add <slug> [📋]

The command + copy icon sit on the right of the same row. A new
[install all] button in the section header copies the combined
`failproof policy add a b c …` command for every prescribed
policy at once.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../_components/how-to-improve-section.tsx    | 130 ++++++++++--------
 app/audit/audit-styles.css                    | 102 +++++++++-----
 app/globals.css                               |   4 -
 3 files changed, 140 insertions(+), 96 deletions(-)

diff --git a/app/audit/_components/how-to-improve-section.tsx b/app/audit/_components/how-to-improve-section.tsx
index ba4acb72..94da0826 100644
--- a/app/audit/_components/how-to-improve-section.tsx
+++ b/app/audit/_components/how-to-improve-section.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 /**
- * Section 04 — HOW TO IMPROVE. "install or configure."
+ * Section 04 — HOW TO IMPROVE. Calm row list, one per prescribed
+ * policy:
  *
- * Calm fix-card list. Each card: title (`install <slug>`), what it
- * blocks, install command (`$ failproofai policy add <slug>`), and an
- * install button. Maps detector hits + unenabled-builtin hits onto the
- * smallest set of prescribed policies that closes the slipping-through
- * window — same logic the old PoliciesSection used, in a calmer shell.
+ *   <policy-name>                 $ failproof policy add <slug>   [📋]
+ *   <one-line explanation>
+ *
+ * A single "install all" button at the section header copies the
+ * combined install command for every prescribed policy.
  */
 import React, { useMemo, useState } from "react";
 import type { AuditResult } from "@/src/audit/types";
@@ -32,12 +33,12 @@ const DETECTOR_TO_PRIMARY_POLICY: Record<string, string> = {
 };
 
 const POLICY_DESC: Record<string, string> = {
-  "warn-repeated-tool-calls": "warns when the same tool is called 3+ times with identical parameters — catches the loops before they spiral.",
-  "block-read-outside-cwd":   "denies any file read whose absolute path falls outside the project root, including symlinks.",
-  "block-env-files":          "blocks reads and writes of `.env` files at the tool layer.",
+  "warn-repeated-tool-calls": "warns when the same tool is called 3+ times with identical parameters.",
+  "block-read-outside-cwd":   "denies any file read outside the project root, including symlinks.",
+  "block-env-files":          "blocks reads and writes of .env files at the tool layer.",
   "block-secrets-write":      "blocks writes to .pem, id_rsa, credentials.json, and other secret-key files.",
-  "warn-background-process":  "warns before starting nohup / & / screen / tmux / disown processes that get forgotten about.",
-  "warn-git-amend":           "warns before amending git commits — dangerous-commit-flag class.",
+  "warn-background-process":  "warns before starting nohup / & / screen / tmux processes.",
+  "warn-git-amend":           "warns before amending git commits.",
   "require-ci-green-before-stop": "requires CI checks to pass on HEAD before the agent declares the task done.",
 };
 
@@ -46,28 +47,24 @@ function shortName(name: string): string {
   return slash >= 0 ? name.slice(slash + 1) : name;
 }
 
-interface FixCard {
+interface FixRow {
   name: string;
   desc: string;
   hits: number;
-  projects: number;
-  viaList: string[];
 }
 
-function buildFixes(result: AuditResult): FixCard[] {
+function buildFixes(result: AuditResult): FixRow[] {
   const enabledSet = new Set(result.enabledBuiltinNames ?? []);
-  const buckets = new Map<string, { hits: number; projects: number; sources: Set<string> }>();
+  const buckets = new Map<string, number>();
 
   for (const row of result.results) {
     if (row.hits === 0) continue;
 
     let target: string;
-    let isFromDetector = false;
     if (row.source === "audit-detector") {
       const mapped = DETECTOR_TO_PRIMARY_POLICY[shortName(row.name)];
       if (!mapped) continue;
       target = mapped;
-      isFromDetector = true;
     } else if (row.source === "builtin" && !row.enabledInConfig) {
       target = shortName(row.name);
     } else {
@@ -75,41 +72,65 @@ function buildFixes(result: AuditResult): FixCard[] {
     }
 
     if (enabledSet.has(target)) continue;
-
-    const bucket = buckets.get(target) ?? { hits: 0, projects: 0, sources: new Set() };
-    bucket.hits += row.hits;
-    bucket.projects = Math.max(bucket.projects, row.projects);
-    bucket.sources.add(isFromDetector ? shortName(row.name) : "self");
-    buckets.set(target, bucket);
+    buckets.set(target, (buckets.get(target) ?? 0) + row.hits);
   }
 
   return [...buckets.entries()]
-    .sort((a, b) => b[1].hits - a[1].hits)
-    .map(([name, b]) => ({
+    .sort((a, b) => b[1] - a[1])
+    .map(([name, hits]) => ({
       name,
       desc: POLICY_DESC[name] ?? "enable this builtin policy to close the gap.",
-      hits: b.hits,
-      projects: b.projects,
-      viaList: [...b.sources].filter((s) => s !== "self"),
+      hits,
     }));
 }
 
+function bulkInstall(fixes: FixRow[]): string {
+  if (fixes.length === 0) return "";
+  if (fixes.length === 1) return `failproof policy add ${fixes[0]!.name}`;
+  return `failproof policy add ${fixes.map((f) => f.name).join(" ")}`;
+}
+
 export function HowToImproveSection({ result, projected, projectedGrade }: Props) {
+  const { capture } = usePostHog();
   const fixes = useMemo(() => buildFixes(result), [result]);
+  const installAllCmd = useMemo(() => bulkInstall(fixes), [fixes]);
+  const [copiedAll, setCopiedAll] = useState(false);
+
   if (fixes.length === 0) return null;
 
+  const handleInstallAll = async () => {
+    try {
+      await navigator.clipboard.writeText(installAllCmd);
+      setCopiedAll(true);
+      capture("audit_copy_clicked", {
+        source: "how_to_improve_section_install_all",
+        item_type: "bulk_install_command",
+        policy_count: fixes.length,
+      });
+      setTimeout(() => setCopiedAll(false), 1500);
+    } catch { /* ignore */ }
+  };
+
   return (
     <section className="audit-sec" data-screen-label="04 How to improve">
       <div className="audit-sec-head">
         <span className="audit-sec-eyebrow">
           <span className="ix">04</span>{"// how to improve"}
         </span>
-        <span className="audit-sec-meta">
-          enable all {fixes.length === 1 ? "one" : fixes.length} → projected{" "}
-          <strong>{projected}</strong> · {tierName(projectedGrade).toLowerCase()}
-        </span>
+        <button
+          type="button"
+          className="install-all-btn"
+          onClick={handleInstallAll}
+          aria-label="Copy install-all command"
+        >
+          {copiedAll ? "copied" : "install all"}
+        </button>
       </div>
       <h2 className="audit-sec-title">install or configure</h2>
+      <div className="audit-sec-sub">
+        enable all {fixes.length === 1 ? "one" : fixes.length} → projected{" "}
+        <strong>{projected}</strong> · {tierName(projectedGrade).toLowerCase()}
+      </div>
 
       <div className="fix-list">
         {fixes.map((f, i) => (
@@ -120,11 +141,10 @@ export function HowToImproveSection({ result, projected, projectedGrade }: Props
   );
 }
 
-function FixRow({ fix, idx }: { fix: FixCard; idx: number }) {
+function FixRow({ fix, idx }: { fix: FixRow; idx: number }) {
   const { capture } = usePostHog();
   const [copied, setCopied] = useState(false);
   const install = `failproof policy add ${fix.name}`;
-  const quirkRef = `quirk #${idx + 1}`;
 
   const handleCopy = async () => {
     try {
@@ -141,25 +161,27 @@ function FixRow({ fix, idx }: { fix: FixCard; idx: number }) {
   };
 
   return (
-    <article className="fix-card">
-      <div className="fix-body">
-        <div className="fix-title">
-          install <code>{fix.name}</code>
-        </div>
-        <div className="fix-blocks">
-          would catch <strong>{quirkRef}</strong> · {fix.desc}
-        </div>
-        <div className="fix-cmd">
-          <span className="prompt">$</span>{install}
-        </div>
+    <div className="fix-row">
+      <div className="fix-row-info">
+        <div className="fix-name">{fix.name}</div>
+        <div className="fix-desc">{fix.desc}</div>
+      </div>
+      <div className="fix-row-cmd">
+        <code className="fix-cmd-code">{install}</code>
+        <button
+          type="button"
+          className="copy-icon-btn"
+          onClick={handleCopy}
+          aria-label={`Copy install command for ${fix.name}`}
+        >
+          {copied ? "✓" : (
+            <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+              <rect x="3" y="3" width="9" height="11" fill="none" stroke="currentColor" strokeWidth="1.2" />
+              <rect x="5.5" y="0.5" width="9" height="11" fill="none" stroke="currentColor" strokeWidth="1.2" />
+            </svg>
+          )}
+        </button>
       </div>
-      <button
-        type="button"
-        className="fix-install-btn"
-        onClick={handleCopy}
-      >
-        {copied ? "copied" : "copy"}
-      </button>
-    </article>
+    </div>
   );
 }
diff --git a/app/audit/audit-styles.css b/app/audit/audit-styles.css
index fe71698e..130a8d8f 100644
--- a/app/audit/audit-styles.css
+++ b/app/audit/audit-styles.css
@@ -952,61 +952,86 @@
 /* ============================================================
    HOW TO IMPROVE — section 04. Fix cards.
    ============================================================ */
-.fix-list { display: flex; flex-direction: column; gap: 10px; }
-.fix-card {
+.audit-sec-sub {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--ink-2);
+  margin: -10px 0 18px;
+  line-height: 1.55;
+}
+.audit-sec-sub strong { color: var(--ink); font-weight: 600; }
+
+.install-all-btn {
+  border: 1px solid var(--accent-pink);
+  background: var(--accent-pink-bg);
+  color: var(--accent-pink);
+  padding: 8px 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background-color 140ms ease;
+}
+.install-all-btn:hover { background: rgba(228, 88, 124, 0.18); }
+
+.fix-list { display: flex; flex-direction: column; }
+.fix-row {
   display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 18px;
-  padding: 16px 18px;
-  border: 1px solid var(--line-2);
-  background: var(--bg-2);
+  grid-template-columns: 1fr minmax(280px, auto);
+  gap: 24px;
   align-items: center;
+  padding: 14px 0;
+  border-bottom: 1px dashed var(--line);
 }
-.fix-body { min-width: 0; }
-.fix-title {
+.fix-row:last-child { border-bottom: none; }
+.fix-row-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.fix-name {
   font-family: var(--font-mono);
   font-size: 13px;
   color: var(--ink);
-  letter-spacing: 0.02em;
-}
-.fix-title code {
-  color: var(--accent-green);
-  background: transparent;
-  font-size: 12px;
+  letter-spacing: 0.01em;
+  font-weight: 500;
 }
-.fix-blocks {
+.fix-desc {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--ink-2);
-  margin-top: 6px;
-  line-height: 1.6;
+  line-height: 1.55;
 }
-.fix-blocks strong { color: var(--accent-pink); font-weight: 600; }
-.fix-cmd {
-  margin-top: 10px;
-  padding-top: 8px;
-  border-top: 1px dashed var(--line);
+.fix-row-cmd {
+  display: flex; align-items: stretch; gap: 6px;
+  min-width: 0;
+}
+.fix-cmd-code {
+  flex: 1; min-width: 0;
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--accent-green);
-}
-.fix-cmd .prompt { color: var(--dim); margin-right: 6px; }
-.fix-install-btn {
-  align-self: center;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  padding: 8px 12px;
+  letter-spacing: 0.02em;
   white-space: nowrap;
-  border: 1px solid var(--accent-pink);
-  background: var(--accent-pink-bg);
-  color: var(--accent-pink);
-  padding: 10px 16px;
+  overflow-x: auto;
+  display: flex; align-items: center;
+}
+.copy-icon-btn {
+  border: 1px solid var(--line);
+  background: var(--bg);
+  color: var(--ink-2);
+  padding: 0 10px;
   font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
+  font-size: 12px;
   cursor: pointer;
-  transition: background-color 140ms ease;
+  transition: color 140ms ease, border-color 140ms ease;
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 36px;
+}
+.copy-icon-btn:hover {
+  color: var(--accent-pink);
+  border-color: var(--accent-pink);
 }
-.fix-install-btn:hover { background: rgba(228, 88, 124, 0.18); }
-.fix-install-btn:disabled { opacity: 0.55; cursor: wait; }
 
 /* ============================================================
    COME BACK BETTER — section 05. Two cards.
@@ -1115,7 +1140,8 @@
 
 @media (max-width: 720px) {
   .cbb-grid { grid-template-columns: 1fr; }
-  .fix-card { grid-template-columns: 1fr; }
+  .fix-row { grid-template-columns: 1fr; gap: 8px; }
+  .fix-row-cmd { min-width: 0; }
   .quirks-thead, .quirks-row {
     grid-template-columns: 1fr;
     gap: 6px;
diff --git a/app/globals.css b/app/globals.css
index 5fa8a09f..2b5c8f1b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -108,10 +108,6 @@ html, body, #root {
 
 body {
   background-color: var(--bg);
-  background-image:
-    radial-gradient(ellipse 1000px 600px at 85% -10%, rgba(102, 209, 181, 0.045) 0%, transparent 60%),
-    linear-gradient(180deg, #16161a 0%, #0f0f12 100%);
-  background-attachment: fixed;
   position: relative;
 }
 

From 35f518512277c72481d3738f0ce930308836c94a Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 02:21:28 -0700
Subject: [PATCH 08/28] docs: changelog entry for audit poster restructure

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 120e7a16..0ad47f4f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## 0.0.11-beta.8 — 2026-06-11
 
+### Features
+- Restructure `/audit` into a single-screen shareable poster + four below-fold sections (`strengths` / `quirks` / `how to improve` / `come back better`). The poster is the PNG-export region and now self-contains the wordmark, archetype index, audit date, score + rank, persona name + keywords + rarity, sigil tile, and a `audit yours → failproof.ai` footer — so screenshots and shares carry the brand without the surrounding dashboard chrome. `// how to improve` becomes a calm row list per prescribed policy (name in white, one-line description, command + copy button on the right) topped by an `[install all]` button that copies the combined `failproof policy add a b c …` command. `// come back better` adds a 3d/7d/14d/30d reminder-cadence picker and a perks card (mock data — invite tracking + entitlement lands in a follow-up). `/policies` and `/projects` revert to plain title-case English headings (`Policies` / `Configure Policies` / `Projects`) per commit a0a18415. Site-wide chrome strips down to a calm dark canvas — body gridline + noise overlays, hard-offset pink shadows, text-shadow stamps, gridline-on-card backgrounds, and the floating share dock all go away. Pink migrates from `#e4587d` → `#e4587c` across `app/globals.css`, `app/audit/audit-styles.css`, and the audit asset CSS files. Deleted: `identity-section`, `score-section`, `findings-section`, `policies-section`, `return-section`, `show-off-cta`, `share-dock`; new: `audit-poster`, `quirks-section`, `how-to-improve-section`, `come-back-better-section`, `src/audit/social-proof.ts` (seeded archetype rarity + score-rank bands). Design spec lives at `docs/superpowers/specs/2026-06-11-audit-poster-restructure-design.md`.
+
 ### Fixes
 - Fix the `/audit` first-run audit failing on the first click (a retry worked) and stop capping how much it scans. The run was driven by a synchronous `/api/audit/run` POST that `triggerRun` (`app/audit/_components/rerun-button.tsx`) aborted after the 15s `DEFAULT_FETCH_TIMEOUT_MS` (`lib/fetch-with-timeout.ts`, sized for fast upstream calls), so a cold run (measured ~17s locally) timed out and dropped back to the empty state while the server kept running and warmed the caches — making the second click succeed. The run is now fire-and-forget: the POST starts `runAudit()` as a detached task in the long-lived server process and returns `202` immediately, the client polls `/api/audit/status` with **no duration cap** until it finishes (only a ~10-poll lost-connection backstop stops it), and a server-side run error is surfaced through the status endpoint (`app/api/audit/_state.ts` gains an `error` field + `finishRun(error)`, and its 5-min lock auto-expiry — which would have prematurely "finished" a long run — is removed along with the route's `maxDuration = 120`). The default scan window also drops from 30 days to the user's entire history, so an audit runs over every session regardless of how long it takes; the empty-state CTA and `run-progress` copy update from "10–30s" to "may take a while". New tests cover the fire-and-forget route, unbounded polling, and the run-state machine (`__tests__/api/audit-run-route.test.ts`, `__tests__/audit/rerun-button.test.ts`, `__tests__/api/audit-state.test.ts`) (#434).
 

From 356b0424ae272c8ffc83f8319f1f4e5cd5173798 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 02:34:04 -0700
Subject: [PATCH 09/28] style(audit): vertical centered poster + reorder tabs
 to projects/policies/audit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Poster now stacks sigil → persona → score vertically and uses
viewport-relative type so it fills the full-height canvas without
feeling empty. Composition is centered: sigil at top, persona
name (display, 40–84px) + 3-keyword strip + rarity in the middle,
and a heroic score (80–168px) with a green rank pill at the
bottom. clamp() with vh units grows each element on tall screens
and shrinks it on short ones. Capture mode locks fixed sizes for
the html2canvas PNG export.

Tab order in the top nav: projects · policies · audit.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/audit/_components/audit-poster.tsx |  17 ++-
 app/audit/audit-styles.css             | 153 +++++++++++++++----------
 components/navbar.tsx                  |   2 +-
 3 files changed, 107 insertions(+), 65 deletions(-)

diff --git a/app/audit/_components/audit-poster.tsx b/app/audit/_components/audit-poster.tsx
index eaaa5aea..7ef513fa 100644
--- a/app/audit/_components/audit-poster.tsx
+++ b/app/audit/_components/audit-poster.tsx
@@ -181,12 +181,12 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
         </header>
 
         <div className="poster-body">
-          <div className="poster-score">
-            <span className="score-n">{score}</span>
-            <span className="score-of">/100</span>
-            <span className="score-rank">{scoreRank}</span>
+          {/* Sigil — visual anchor at the top of the centered stack */}
+          <div className="poster-sigil">
+            <Sigil archetypeKey={archetypeKey} />
           </div>
 
+          {/* Persona block — name + keywords + rarity, centered */}
           <div className="poster-persona">
             <h1 className="persona-name">{archetype.name}</h1>
             <div className="persona-keywords">
@@ -208,8 +208,13 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
             )}
           </div>
 
-          <div className="poster-sigil">
-            <Sigil archetypeKey={archetypeKey} />
+          {/* Score block — heroic number with rank, anchored at bottom of body */}
+          <div className="poster-score">
+            <div className="score-row">
+              <span className="score-n">{score}</span>
+              <span className="score-of">/100</span>
+            </div>
+            <span className="score-rank">{scoreRank}</span>
           </div>
         </div>
 
diff --git a/app/audit/audit-styles.css b/app/audit/audit-styles.css
index 130a8d8f..b0fa1997 100644
--- a/app/audit/audit-styles.css
+++ b/app/audit/audit-styles.css
@@ -610,29 +610,31 @@
   /* Fill the viewport: the poster IS the first thing you see, and the
    *  scroll hint at the bottom signals where the report begins.
    *  Subtracts the sticky app-header (~52px) so the share row + scroll
-   *  hint sit just above the fold on a vanilla 100vh layout. */
+   *  hint sit at the bottom edge of the fold. */
   min-height: calc(100vh - 52px);
-  padding: 40px 0 32px;
+  padding: 32px 0 20px;
   border-bottom: 1px solid var(--line);
   display: flex; flex-direction: column;
-  justify-content: center;
 }
 
 .poster {
   position: relative;
-  padding: 36px 44px 24px;
+  padding: 28px 44px;
   border: 1px dashed var(--accent-pink-soft);
-  background:
-    radial-gradient(ellipse 700px 240px at 80% 10%,
-      rgba(228, 88, 124, 0.06) 0%, transparent 65%),
-    var(--bg-2);
+  background: var(--bg-2);
   display: flex; flex-direction: column;
-  gap: 28px;
   max-width: 980px;
   width: 100%;
   margin: 0 auto;
+  flex: 1;
 }
 
+/* poster lays out as head / centered body / footer so the body anchors
+ *  vertically in the middle even when the poster fills the viewport. */
+.poster-head { flex: 0 0 auto; }
+.poster-body { flex: 1 1 auto; }
+.poster-foot { flex: 0 0 auto; }
+
 /* head ────────────────────────────────────────────────────── */
 .poster-head {
   display: flex; justify-content: space-between; align-items: baseline;
@@ -651,77 +653,96 @@
 .poster-meta .of { color: var(--dim); }
 .poster-meta .poster-sep { color: var(--dim); }
 
-/* body — 3-col: score | persona | sigil ───────────────────── */
+/* body — vertical centered stack: sigil → persona → score ─── */
 .poster-body {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 32px;
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  min-height: 160px;
+  justify-content: center;
+  gap: clamp(28px, 5vh, 56px);
+  text-align: center;
+  padding: clamp(16px, 4vh, 48px) 0;
+  min-height: 0;
 }
 
-.poster-score { text-align: center; display: flex; flex-direction: column; align-items: center; }
-.poster-score .score-n {
-  font-family: var(--font-display);
-  font-size: clamp(60px, 8vw, 80px);
-  line-height: 1;
-  letter-spacing: 0.04em;
-  color: var(--accent-pink);
-}
-.poster-score .score-of {
-  font-family: var(--font-mono);
-  font-size: 16px;
-  color: var(--dim);
-  margin-top: 2px;
-}
-.poster-score .score-rank {
-  margin-top: 10px;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  letter-spacing: 0.22em;
-  text-transform: uppercase;
-  color: var(--accent-green);
+/* sigil — flat 8x8, anchored at the top of the centered stack ── */
+.poster-sigil .sigil {
+  display: grid;
+  grid-template-columns: repeat(8, clamp(14px, 2.4vh, 22px));
+  grid-template-rows: repeat(8, clamp(14px, 2.4vh, 22px));
+  gap: 2px;
+  padding: clamp(8px, 1.4vh, 12px);
+  background: var(--bg);
+  border: 1px solid var(--line-2);
 }
 
-.poster-persona { min-width: 0; }
+/* persona — name + keywords + rarity stacked centered ──────── */
+.poster-persona {
+  min-width: 0;
+  display: flex; flex-direction: column; align-items: center;
+  gap: clamp(10px, 1.6vh, 18px);
+}
 .poster-persona .persona-name {
   font-family: var(--font-display);
-  font-size: clamp(28px, 4vw, 34px);
-  letter-spacing: 0.04em;
-  line-height: 1;
-  margin: 0 0 12px;
+  font-size: clamp(40px, 8vh, 84px);
+  letter-spacing: 0.03em;
+  line-height: 0.95;
+  margin: 0;
   color: var(--ink);
   text-transform: lowercase;
   text-wrap: balance;
 }
 .poster-persona .persona-keywords {
   font-family: var(--font-display);
-  font-size: 18px;
+  font-size: clamp(18px, 2.6vh, 26px);
   letter-spacing: 0.06em;
   text-transform: lowercase;
 }
 .poster-persona .persona-keywords .kw-0 { color: var(--accent-green); }
 .poster-persona .persona-keywords .kw-1 { color: var(--ink); }
 .poster-persona .persona-keywords .kw-2 { color: var(--accent-pink); }
-.poster-persona .persona-keywords .kw-sep { color: var(--dim); margin: 0 8px; }
+.poster-persona .persona-keywords .kw-sep { color: var(--dim); margin: 0 10px; }
 .poster-persona .persona-rarity {
-  margin-top: 10px;
   font-family: var(--font-mono);
-  font-size: 12px;
+  font-size: clamp(12px, 1.5vh, 14px);
   color: var(--accent-green);
+  letter-spacing: 0.02em;
 }
 .poster-persona .persona-rarity .lbl { color: var(--dim); }
 .poster-persona .persona-rarity .pct { color: var(--accent-pink); font-weight: 600; }
 
-/* sigil — flat 8x8, no plate, no crosshairs, no animation ─── */
-.poster-sigil .sigil {
-  display: grid;
-  grid-template-columns: repeat(8, 12px);
-  grid-template-rows: repeat(8, 12px);
-  gap: 2px;
-  padding: 7px;
-  background: var(--bg);
-  border: 1px solid var(--line-2);
+/* score — heroic number anchored at the bottom of the body ── */
+.poster-score {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.poster-score .score-row {
+  display: flex; align-items: baseline; gap: 6px;
+}
+.poster-score .score-n {
+  font-family: var(--font-display);
+  font-size: clamp(80px, 14vh, 168px);
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: var(--accent-pink);
+}
+.poster-score .score-of {
+  font-family: var(--font-mono);
+  font-size: clamp(18px, 2.4vh, 24px);
+  color: var(--dim);
+  letter-spacing: 0.04em;
+}
+.poster-score .score-rank {
+  font-family: var(--font-mono);
+  font-size: clamp(10px, 1.4vh, 13px);
+  letter-spacing: 0.32em;
+  text-transform: uppercase;
+  color: var(--accent-green);
+  padding: 5px 14px;
+  border: 1px solid var(--accent-green);
+  background: rgba(102, 209, 181, 0.05);
 }
 .poster-sigil .sigil .px { background: transparent; }
 .poster-sigil .sigil .px.on { background: var(--ink); }
@@ -784,18 +805,34 @@
 .poster-scroll-hint .arrow { color: var(--accent-pink); margin-left: 6px; }
 
 /* capture mode — html2canvas can't reliably render clamp() ── */
+/* capture mode — html2canvas can't reliably render clamp()/vh, so
+ *  lock every fluid measurement to a fixed value tuned for the
+ *  ~960×960 PNG export. */
 .poster.capturing {
   min-width: 880px; max-width: 980px;
-  padding: 32px 40px 22px;
+  min-height: 880px;
+  padding: 36px 48px;
+}
+.poster.capturing .poster-body { gap: 40px; padding: 24px 0; }
+.poster.capturing .score-n { font-size: 140px; }
+.poster.capturing .score-of { font-size: 22px; }
+.poster.capturing .score-rank { font-size: 12px; }
+.poster.capturing .persona-name { font-size: 72px; }
+.poster.capturing .persona-keywords { font-size: 24px; }
+.poster.capturing .persona-rarity { font-size: 13px; }
+.poster.capturing .poster-sigil .sigil {
+  grid-template-columns: repeat(8, 22px);
+  grid-template-rows: repeat(8, 22px);
+  padding: 10px;
 }
-.poster.capturing .score-n { font-size: 76px; }
-.poster.capturing .persona-name { font-size: 32px; }
-.poster.capturing .persona-keywords { font-size: 18px; }
 
 @media (max-width: 720px) {
-  .poster-body { grid-template-columns: 1fr; gap: 22px; text-align: center; }
+  .poster { padding: 24px 22px; }
+  .poster-body { gap: 28px; padding: 12px 0; }
   .poster-share-row { grid-template-columns: 1fr; }
   .poster-head { font-size: 10px; }
+  .poster-score .score-n { font-size: clamp(72px, 18vw, 120px); }
+  .poster-persona .persona-name { font-size: clamp(36px, 9vw, 56px); }
 }
 
 /* ============================================================
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 51332a85..ccb653e3 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -16,9 +16,9 @@ import { RefreshButton } from "@/app/components/refresh-button";
 import { usePostHog } from "@/contexts/PostHogContext";
 
 const NAV_LINKS = [
+  { href: "/projects", label: "projects" },
   { href: "/policies", label: "policies" },
   { href: "/audit", label: "audit" },
-  { href: "/projects", label: "projects" },
 ];
 
 const REMOTE_LOGO_URL =

From 94477d89e92f0336e2d5658680438ffadafaa5a7 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 02:37:39 -0700
Subject: [PATCH 10/28] fix(audit): clamp poster section to viewport so scroll
 hint fits the fold

The poster section was using min-height: 100vh - 52px, so when the
poster body's content (sigil + persona + score) summed taller than
the section's allotted height, the section grew past 100vh and
pushed the share row + scroll hint below the fold.

Switches the section to a fixed height: 100vh - 52px and lets the
poster (flex: 1, min-height: 0, overflow: hidden) shrink to fit
the available space. Pads share row + scroll hint as fixed flex
items (0 0 auto) so they always sit at the bottom of the fold.
Tightens every clamp() on sigil cells / persona name / score / etc.
so they fit comfortably on shorter viewports.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/audit/audit-styles.css | 54 +++++++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/app/audit/audit-styles.css b/app/audit/audit-styles.css
index b0fa1997..c262e5aa 100644
--- a/app/audit/audit-styles.css
+++ b/app/audit/audit-styles.css
@@ -607,26 +607,30 @@
    ============================================================ */
 
 .poster-section {
-  /* Fill the viewport: the poster IS the first thing you see, and the
-   *  scroll hint at the bottom signals where the report begins.
-   *  Subtracts the sticky app-header (~52px) so the share row + scroll
-   *  hint sit at the bottom edge of the fold. */
-  min-height: calc(100vh - 52px);
-  padding: 32px 0 20px;
+  /* Fit the viewport exactly: poster + share row + scroll hint all
+   *  visible on the first screen. The header is ~52px tall (14px
+   *  padding × 2 + ~18px content + 1px border). Using `height` (not
+   *  min-height) means the section never overflows; the poster's
+   *  flex column shrinks its body to fit. */
+  height: calc(100vh - 52px);
+  padding: 20px 0 16px;
   border-bottom: 1px solid var(--line);
   display: flex; flex-direction: column;
+  gap: 14px;
 }
 
 .poster {
   position: relative;
-  padding: 28px 44px;
+  padding: 22px 40px;
   border: 1px dashed var(--accent-pink-soft);
   background: var(--bg-2);
   display: flex; flex-direction: column;
   max-width: 980px;
   width: 100%;
   margin: 0 auto;
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
 }
 
 /* poster lays out as head / centered body / footer so the body anchors
@@ -659,19 +663,19 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: clamp(28px, 5vh, 56px);
+  gap: clamp(14px, 2.6vh, 30px);
   text-align: center;
-  padding: clamp(16px, 4vh, 48px) 0;
+  padding: clamp(6px, 1.4vh, 16px) 0;
   min-height: 0;
 }
 
 /* sigil — flat 8x8, anchored at the top of the centered stack ── */
 .poster-sigil .sigil {
   display: grid;
-  grid-template-columns: repeat(8, clamp(14px, 2.4vh, 22px));
-  grid-template-rows: repeat(8, clamp(14px, 2.4vh, 22px));
+  grid-template-columns: repeat(8, clamp(10px, 1.7vh, 16px));
+  grid-template-rows: repeat(8, clamp(10px, 1.7vh, 16px));
   gap: 2px;
-  padding: clamp(8px, 1.4vh, 12px);
+  padding: clamp(6px, 1vh, 10px);
   background: var(--bg);
   border: 1px solid var(--line-2);
 }
@@ -680,11 +684,11 @@
 .poster-persona {
   min-width: 0;
   display: flex; flex-direction: column; align-items: center;
-  gap: clamp(10px, 1.6vh, 18px);
+  gap: clamp(6px, 1.2vh, 14px);
 }
 .poster-persona .persona-name {
   font-family: var(--font-display);
-  font-size: clamp(40px, 8vh, 84px);
+  font-size: clamp(32px, 6.5vh, 64px);
   letter-spacing: 0.03em;
   line-height: 0.95;
   margin: 0;
@@ -694,7 +698,7 @@
 }
 .poster-persona .persona-keywords {
   font-family: var(--font-display);
-  font-size: clamp(18px, 2.6vh, 26px);
+  font-size: clamp(16px, 2.2vh, 22px);
   letter-spacing: 0.06em;
   text-transform: lowercase;
 }
@@ -704,7 +708,7 @@
 .poster-persona .persona-keywords .kw-sep { color: var(--dim); margin: 0 10px; }
 .poster-persona .persona-rarity {
   font-family: var(--font-mono);
-  font-size: clamp(12px, 1.5vh, 14px);
+  font-size: clamp(11px, 1.3vh, 13px);
   color: var(--accent-green);
   letter-spacing: 0.02em;
 }
@@ -716,31 +720,31 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
 }
 .poster-score .score-row {
   display: flex; align-items: baseline; gap: 6px;
 }
 .poster-score .score-n {
   font-family: var(--font-display);
-  font-size: clamp(80px, 14vh, 168px);
+  font-size: clamp(56px, 11vh, 112px);
   line-height: 1;
   letter-spacing: 0.02em;
   color: var(--accent-pink);
 }
 .poster-score .score-of {
   font-family: var(--font-mono);
-  font-size: clamp(18px, 2.4vh, 24px);
+  font-size: clamp(16px, 2vh, 22px);
   color: var(--dim);
   letter-spacing: 0.04em;
 }
 .poster-score .score-rank {
   font-family: var(--font-mono);
-  font-size: clamp(10px, 1.4vh, 13px);
+  font-size: clamp(10px, 1.3vh, 12px);
   letter-spacing: 0.32em;
   text-transform: uppercase;
   color: var(--accent-green);
-  padding: 5px 14px;
+  padding: 4px 12px;
   border: 1px solid var(--accent-green);
   background: rgba(102, 209, 181, 0.05);
 }
@@ -764,10 +768,11 @@
 /* share-row — UI only, outside the PNG capture ─────────────── */
 .poster-share-row {
   max-width: 980px;
-  margin: 18px auto 0;
+  margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
+  flex: 0 0 auto;
 }
 .poster-share-btn {
   display: inline-flex; align-items: center; justify-content: center;
@@ -795,11 +800,12 @@
 /* scroll-hint — small footer below share row ───────────────── */
 .poster-scroll-hint {
   text-align: center;
-  margin: 22px 0 0;
+  margin: 0;
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: 0.22em;
   text-transform: uppercase;
+  flex: 0 0 auto;
   color: var(--dim);
 }
 .poster-scroll-hint .arrow { color: var(--accent-pink); margin-left: 6px; }

From 65e53708a7073e0a9c36b512ce25cb244136b3a3 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 02:47:10 -0700
Subject: [PATCH 11/28] fix(audit): score+rank no longer overlap; mono score
 font; calmer auth dialog; drop tier from share copy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps the score line-height to 1.05 and the score-rank gap so the green TOP N% pill no longer overlaps the digits. Switches the score from Bitcount display font to JetBrains Mono — Bitcount rendered with phantom pixels in html2canvas at 92px+; mono exports cleanly and tabular-nums keeps the digits aligned.

Share-text templates drop the (<grade> tier) framing — at D tier it read as self-deprecating. Templates now lean on the score number + persona name only.

Auth dialog rebuilt to match the calm chrome — drops corner brackets, the 'identity check' label, and the pink backdrop glow. Headline switches to 'where to route the reminder?'. Button labels drop the bracket cuffs.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 __tests__/audit/share-templates.test.ts       |  12 +-
 app/audit/_components/auth-dialog.tsx         |  70 +++-------
 .../_components/come-back-better-section.tsx  |   2 -
 app/audit/_components/share-templates.ts      |  45 ++++---
 app/audit/audit-styles.css                    | 126 ++++++++----------
 5 files changed, 113 insertions(+), 142 deletions(-)

diff --git a/__tests__/audit/share-templates.test.ts b/__tests__/audit/share-templates.test.ts
index 37f16f74..38a903e4 100644
--- a/__tests__/audit/share-templates.test.ts
+++ b/__tests__/audit/share-templates.test.ts
@@ -16,17 +16,25 @@ describe("share templates", () => {
     expect(LI_TEMPLATES).toHaveLength(5);
   });
 
-  it("every template is personalised with score, grade, archetype and the site URL", () => {
+  it("every template is personalised with score, archetype and the site URL", () => {
     for (const t of [...X_TEMPLATES, ...LI_TEMPLATES]) {
       const out = t(ctx);
       expect(out).toContain("72");
       expect(out).toContain("the cowboy");
-      expect(out).toMatch(/\bB\b/);
       expect(out).toContain("befailproof.ai");
       expect(out.length).toBeGreaterThan(40);
     }
   });
 
+  it("does not surface the grade tier in copy (sounds bad at the low end)", () => {
+    const lowCtx: ShareCtx = { score: 41, arch: "the optimist", grade: "D", missing: 5 };
+    for (const t of [...X_TEMPLATES, ...LI_TEMPLATES]) {
+      const out = t(lowCtx);
+      expect(out).not.toMatch(/\bD tier\b/i);
+      expect(out).not.toMatch(/\(D\)/i);
+    }
+  });
+
   it("handles the clean run (missing = 0) without dangling 'policies' phrasing", () => {
     for (const t of [...X_TEMPLATES, ...LI_TEMPLATES]) {
       const out = t(cleanCtx);
diff --git a/app/audit/_components/auth-dialog.tsx b/app/audit/_components/auth-dialog.tsx
index c0555637..c85dbe3b 100644
--- a/app/audit/_components/auth-dialog.tsx
+++ b/app/audit/_components/auth-dialog.tsx
@@ -2,14 +2,15 @@
 
 /**
  * Auth dialog — modal overlay shown when an unauthenticated user clicks
- * "[ set a reminder ]". Two-step flow:
+ * a cadence button to set a reminder. Two-step flow:
  *
  *   1. Email entry  → POST /api/auth/login-request
  *   2. OTP entry    → POST /api/auth/login-verify
  *
- * Styled to match the rest of the /audit page: pixel brackets, sharp pink
- * accent, terminal-style frame. The dialog never sees the refresh token —
- * the dashboard's API route writes it to ~/.failproofai/auth.json.
+ * Calm chrome to match the rest of /audit: 1px borders, plain
+ * lowercase copy, no corner crosshair frame. The dialog never sees
+ * the refresh token — the dashboard's API route writes it to
+ * ~/.failproofai/auth.json.
  */
 
 import React, { useCallback, useEffect, useRef, useState } from "react";
@@ -23,15 +24,12 @@ export interface AuthedUser {
 
 interface Props {
   open: boolean;
-  /** Copy shown above the title, e.g. "oops — you are unknown." */
+  /** Optional title. Defaults to "set a reminder". */
   headline?: string;
-  /** Copy under the title explaining why we need auth right now. */
-  reason?: string;
   onClose: () => void;
   /** Fired after successful verify. Caller decides what to do next. */
   onAuthed: (user: AuthedUser) => void;
-  /** Telemetry tag identifying which CTA opened the dialog. Defaults to
-   *  "unknown" so existing call sites continue to compile. */
+  /** Telemetry tag identifying which CTA opened the dialog. */
   source?: string;
 }
 
@@ -52,8 +50,7 @@ function describeFetchError(err: unknown): string {
 
 export function AuthDialog({
   open,
-  headline = "oops — you are unknown.",
-  reason = "verify yourself to continue.",
+  headline = "where to route the reminder?",
   onClose,
   onAuthed,
   source = "unknown",
@@ -65,8 +62,6 @@ export function AuthDialog({
   const emailInputRef = useRef<HTMLInputElement | null>(null);
   const codeInputRef = useRef<HTMLInputElement | null>(null);
 
-  // Reset internal state every time the dialog opens. Also fire the
-  // funnel-opened event so we can measure dismissal vs verification rates.
   useEffect(() => {
     if (open) {
       setStep({ kind: "email", error: null });
@@ -76,9 +71,6 @@ export function AuthDialog({
     }
   }, [capture, open, source]);
 
-  // Fire dismissed when the dialog closes WITHOUT a successful verify.
-  // We piggyback on `open` flipping false instead of intercepting every
-  // close path so resend / step transitions don't double-count.
   const wasOpenRef = useRef(false);
   useEffect(() => {
     if (open) {
@@ -94,7 +86,6 @@ export function AuthDialog({
     wasOpenRef.current = false;
   }, [capture, open, source, step.kind]);
 
-  // Autofocus the right input as the step changes.
   useEffect(() => {
     if (!open) return;
     const t = setTimeout(() => {
@@ -104,7 +95,6 @@ export function AuthDialog({
     return () => clearTimeout(t);
   }, [open, step.kind]);
 
-  // ESC to close.
   useEffect(() => {
     if (!open) return;
     const onKey = (e: KeyboardEvent): void => {
@@ -114,7 +104,6 @@ export function AuthDialog({
     return () => window.removeEventListener("keydown", onKey);
   }, [open, busy, onClose]);
 
-  // Resend countdown ticker.
   const resendActive = step.kind === "code" && step.resendIn > 0;
   useEffect(() => {
     if (!resendActive) return;
@@ -129,9 +118,6 @@ export function AuthDialog({
   const requestCode = useCallback(
     async (email: string, opts: { isResend?: boolean } = {}): Promise<void> => {
       const { isResend = false } = opts;
-      // Show resend errors inline on the OTP step — the previously sent
-      // code is still usable. Only the first-send error path bounces back
-      // to the email step.
       const setError = (msg: string) => {
         if (isResend) {
           setStep((s) => (s.kind === "code" ? { ...s, error: msg } : s));
@@ -268,11 +254,6 @@ export function AuthDialog({
       }}
     >
       <div className="auth-dialog">
-        <span className="corner tl">┌</span>
-        <span className="corner tr">┐</span>
-        <span className="corner bl">└</span>
-        <span className="corner br">┘</span>
-
         <button
           type="button"
           className="auth-close"
@@ -280,21 +261,19 @@ export function AuthDialog({
           disabled={busy}
           aria-label="close"
         >
-          [ x ]
+          ×
         </button>
 
-        <div className="auth-label">━━ identity check</div>
         <h2 id="auth-dialog-title" className="auth-headline">
           {headline}
         </h2>
 
         {step.kind === "email" && (
           <>
-            <p className="auth-sub">{reason}</p>
+            <p className="auth-sub">
+              we&apos;ll send a one-time code to confirm.
+            </p>
             <form onSubmit={onEmailSubmit} className="auth-form">
-              <label className="auth-field-label" htmlFor="auth-dialog-email">
-                email
-              </label>
               <input
                 ref={emailInputRef}
                 id="auth-dialog-email"
@@ -311,7 +290,7 @@ export function AuthDialog({
               {step.error && <div className="auth-error">{step.error}</div>}
               <div className="auth-actions">
                 <button type="submit" className="auth-btn primary" disabled={busy}>
-                  {busy ? "[ sending… ]" : "[ send code ]"}
+                  {busy ? "sending…" : "send code"}
                 </button>
                 <button
                   type="button"
@@ -319,7 +298,7 @@ export function AuthDialog({
                   onClick={onClose}
                   disabled={busy}
                 >
-                  [ cancel ]
+                  cancel
                 </button>
               </div>
             </form>
@@ -329,14 +308,10 @@ export function AuthDialog({
         {step.kind === "code" && (
           <>
             <p className="auth-sub">
-              we sent a code to <span className="auth-email">{step.email}</span>.
-              <br />
-              check your inbox — it expires in {Math.ceil(step.expiresIn / 60)} min.
+              code sent to <span className="auth-email">{step.email}</span>.
+              expires in {Math.ceil(step.expiresIn / 60)} min.
             </p>
             <form onSubmit={onCodeSubmit} className="auth-form">
-              <label className="auth-field-label" htmlFor="auth-dialog-code">
-                one-time code
-              </label>
               <input
                 ref={codeInputRef}
                 id="auth-dialog-code"
@@ -354,7 +329,7 @@ export function AuthDialog({
               {step.error && <div className="auth-error">{step.error}</div>}
               <div className="auth-actions">
                 <button type="submit" className="auth-btn primary" disabled={busy}>
-                  {busy ? "[ verifying… ]" : "[ verify ]"}
+                  {busy ? "verifying…" : "verify"}
                 </button>
                 <button
                   type="button"
@@ -363,8 +338,8 @@ export function AuthDialog({
                   disabled={busy || step.resendIn > 0}
                 >
                   {step.resendIn > 0
-                    ? `[ resend in ${step.resendIn}s ]`
-                    : "[ resend code ]"}
+                    ? `resend in ${step.resendIn}s`
+                    : "resend code"}
                 </button>
               </div>
               <button
@@ -382,15 +357,12 @@ export function AuthDialog({
         {step.kind === "done" && (
           <>
             <p className="auth-sub">
-              <span className="auth-ok">✓</span> you are{" "}
+              <span className="auth-ok">✓</span> signed in as{" "}
               <span className="auth-email">{step.user.email}</span>.
             </p>
-            <p className="auth-sub" style={{ marginTop: 8 }}>
-              session saved locally.
-            </p>
             <div className="auth-actions">
               <button type="button" className="auth-btn primary" onClick={onClose}>
-                [ continue ]
+                continue
               </button>
             </div>
           </>
diff --git a/app/audit/_components/come-back-better-section.tsx b/app/audit/_components/come-back-better-section.tsx
index 269e1cb4..aa50dcfa 100644
--- a/app/audit/_components/come-back-better-section.tsx
+++ b/app/audit/_components/come-back-better-section.tsx
@@ -298,8 +298,6 @@ export function ComeBackBetterSection({ isRunning, onRerun }: Props) {
       <AuthDialog
         open={dialogOpen}
         source="return_section"
-        headline="oops — you are unknown."
-        reason="verify yourself to get the re-audit reminder."
         onClose={() => setDialogOpen(false)}
         onAuthed={(u) => {
           setDialogOpen(false);
diff --git a/app/audit/_components/share-templates.ts b/app/audit/_components/share-templates.ts
index 62b148c6..5d06bbb5 100644
--- a/app/audit/_components/share-templates.ts
+++ b/app/audit/_components/share-templates.ts
@@ -22,32 +22,33 @@ export interface ShareCtx {
 
 const pol = (n: number) => (n === 1 ? "policy" : "policies");
 
-/** Quirky, emoji-forward — for X. */
+/** Quirky, emoji-forward — for X. No grade-tier framing (sounds bad at
+ *  the low end). Lean on the persona name + score number instead. */
 export const X_TEMPLATES: ((c: ShareCtx) => string)[] = [
-  ({ score, arch, grade, missing }) =>
-    `my AI coding agent just got profiled and it's "${arch}" 🤠\n\n${score}/100 · ${grade} tier${missing > 0 ? ` · ${missing} ${pol(missing)} between me and glory` : ` · every guardrail live`}\n\nwhat's yours? → ${SITE_URL}`,
-  ({ score, arch, grade }) =>
-    `turns out my coding agent has a whole personality and it's ${arch} 💀\n\nscored ${score}/100 (${grade} tier). the audit does not miss.\n\nrun yours in 30s → ${SITE_URL}`,
-  ({ score, arch, grade }) =>
-    `${score}/100. ${grade} tier. archetype: ${arch} 👀\n\nfailproofai reverse-engineered my agent's entire vibe from its own session logs.\n\n${SITE_URL}`,
-  ({ score, arch, grade, missing }) =>
-    `plot twist: my AI agent is ${arch} 🎭\n\n${score}/100 · ${grade} tier${missing > 0 ? ` · ${missing} ${pol(missing)} away from behaving` : ` · spotless, somehow`}\n\nbefailproof.ai`,
-  ({ score, arch, grade }) =>
-    `i let failproofai audit my coding agent and it called me ${arch} ${grade === "S" || grade === "A" ? "😎" : "😬"}\n\n${score}/100, ${grade} tier. brutally accurate. no notes.\n\n${SITE_URL}`,
+  ({ score, arch, missing }) =>
+    `my AI coding agent just got profiled and it's "${arch}" 🤠\n\nscored ${score}/100${missing > 0 ? ` · ${missing} ${pol(missing)} between me and a clean run` : ` · every guardrail live`}\n\nwhat's yours? → ${SITE_URL}`,
+  ({ score, arch }) =>
+    `turns out my coding agent has a whole personality and it's ${arch} 💀\n\n${score}/100. the audit does not miss.\n\nrun yours in 30s → ${SITE_URL}`,
+  ({ score, arch }) =>
+    `archetype: ${arch} 👀\n\n${score}/100 on the failproofai audit. it reverse-engineered my agent's entire vibe from its own session logs.\n\n${SITE_URL}`,
+  ({ score, arch, missing }) =>
+    `plot twist: my AI agent is ${arch} 🎭\n\n${score}/100${missing > 0 ? ` · ${missing} ${pol(missing)} away from behaving` : ` · spotless, somehow`}\n\nbefailproof.ai`,
+  ({ score, arch }) =>
+    `i let failproofai audit my coding agent and it called me ${arch} ${score >= 80 ? "😎" : "😬"}\n\n${score}/100. brutally accurate. no notes.\n\n${SITE_URL}`,
 ];
 
-/** Measured, professional — for LinkedIn. */
+/** Measured, professional — for LinkedIn. No grade-tier framing. */
 export const LI_TEMPLATES: ((c: ShareCtx) => string)[] = [
-  ({ score, arch, grade, missing }) =>
-    `I ran a failproofai audit on our AI coding agents.\n\nResult: ${score}/100 — ${grade} tier, behavioural archetype "${arch}". ${missing > 0 ? `${missing} prescribed ${pol(missing)} would close the remaining gaps.` : `Every prescribed policy is already live.`}\n\nUnderstanding how agents actually behave across real sessions is the first step to securing them. Free and open-source: ${SITE_URL}`,
-  ({ score, arch, grade, missing }) =>
-    `Security posture check on our coding-agent stack, via failproofai.\n\nScore: ${score}/100 (${grade} tier). Behavioural profile: "${arch}". ${missing > 0 ? `${missing} ${pol(missing)} flagged as real, addressable attack surface.` : `No open policy gaps.`}\n\nThirty seconds to run your own assessment: ${SITE_URL}`,
-  ({ score, arch, grade }) =>
-    `Most teams can't answer a simple question: how do our AI agents actually behave when no one is watching?\n\nfailproofai audited ours and profiled it as "${arch}" — ${score}/100, ${grade} tier. Concrete, evidence-backed, and mapped to the exact policies that close each gap.\n\n${SITE_URL}`,
-  ({ score, arch, grade, missing }) =>
-    `Agent security isn't a vibe — it's measurable.\n\nWe scored ${score}/100 (${grade} tier) on the failproofai audit, archetype "${arch}". ${missing > 0 ? `${missing} prescribed ${pol(missing)} remain to harden the stack.` : `Full coverage on every prescribed policy.`}\n\nWorth 30 seconds for any team shipping with AI agents: ${SITE_URL}`,
-  ({ score, arch, grade }) =>
-    `Ran our coding agents through a failproofai behavioural audit.\n\n${score}/100, ${grade} tier — archetype "${arch}". The report maps every risky pattern to the policy that prevents it, so remediation becomes a checklist rather than a guess.\n\nOpen-source, free to run: ${SITE_URL}`,
+  ({ score, arch, missing }) =>
+    `I ran a failproofai audit on our AI coding agents.\n\nResult: ${score}/100, behavioural archetype "${arch}". ${missing > 0 ? `${missing} prescribed ${pol(missing)} would close the remaining gaps.` : `Every prescribed policy is already live.`}\n\nUnderstanding how agents actually behave across real sessions is the first step to securing them. Free and open-source: ${SITE_URL}`,
+  ({ score, arch, missing }) =>
+    `Security posture check on our coding-agent stack, via failproofai.\n\nScore: ${score}/100. Behavioural profile: "${arch}". ${missing > 0 ? `${missing} ${pol(missing)} flagged as real, addressable attack surface.` : `No open policy gaps.`}\n\nThirty seconds to run your own assessment: ${SITE_URL}`,
+  ({ score, arch }) =>
+    `Most teams can't answer a simple question: how do our AI agents actually behave when no one is watching?\n\nfailproofai audited ours and profiled it as "${arch}" — ${score}/100. Concrete, evidence-backed, and mapped to the exact policies that close each gap.\n\n${SITE_URL}`,
+  ({ score, arch, missing }) =>
+    `Agent security isn't a vibe — it's measurable.\n\nWe scored ${score}/100 on the failproofai audit, archetype "${arch}". ${missing > 0 ? `${missing} prescribed ${pol(missing)} remain to harden the stack.` : `Full coverage on every prescribed policy.`}\n\nWorth 30 seconds for any team shipping with AI agents: ${SITE_URL}`,
+  ({ score, arch }) =>
+    `Ran our coding agents through a failproofai behavioural audit.\n\n${score}/100, archetype "${arch}". The report maps every risky pattern to the policy that prevents it, so remediation becomes a checklist rather than a guess.\n\nOpen-source, free to run: ${SITE_URL}`,
 ];
 
 /** djb2 hash — stable per seed so the template choice is deterministic. */
diff --git a/app/audit/audit-styles.css b/app/audit/audit-styles.css
index c262e5aa..0ec3d7a1 100644
--- a/app/audit/audit-styles.css
+++ b/app/audit/audit-styles.css
@@ -261,78 +261,49 @@
   position: fixed; inset: 0; z-index: 10000;
   display: grid; place-items: center;
   padding: 32px 16px;
-  background:
-    radial-gradient(ellipse 1000px 700px at 30% 20%, rgba(228, 88, 124,0.08) 0%, transparent 60%),
-    rgba(8,8,10,0.78);
+  background: rgba(8,8,10,0.7);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
-  animation: authFadeIn 140ms ease-out;
-}
-@keyframes authFadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
 }
 
 .auth-dialog {
   position: relative;
   width: 100%;
-  max-width: 460px;
-  padding: 32px 32px 28px;
+  max-width: 420px;
+  padding: 28px 28px 24px;
   border: 1px solid var(--line-2);
   background: var(--bg-2);
   font-family: var(--font-mono);
   color: var(--ink);
-  animation: authPop 160ms ease-out;
-}
-@keyframes authPop {
-  from { transform: translateY(8px) scale(0.985); opacity: 0; }
-  to   { transform: translateY(0)    scale(1);     opacity: 1; }
 }
 
-.auth-dialog .corner {
-  position: absolute;
-  font-family: var(--font-mono);
-  font-size: 14px; line-height: 1;
-  color: var(--accent-pink); opacity: 0.85;
-}
-.auth-dialog .corner.tl { top: 6px;    left: 8px; }
-.auth-dialog .corner.tr { top: 6px;    right: 8px; }
-.auth-dialog .corner.bl { bottom: 6px; left: 8px; }
-.auth-dialog .corner.br { bottom: 6px; right: 8px; }
-
 .auth-close {
   position: absolute; top: 12px; right: 14px;
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.15em; text-transform: uppercase;
+  font-family: var(--font-mono); font-size: 20px;
+  line-height: 1;
   color: var(--dim);
-  background: transparent; border: none; padding: 4px 6px;
+  background: transparent; border: none; padding: 4px 8px;
   cursor: pointer;
   transition: color 120ms;
 }
 .auth-close:hover { color: var(--accent-pink); }
 .auth-close:disabled { color: var(--line-2); cursor: not-allowed; }
 
-.auth-label {
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--accent-green);
-  margin-bottom: 14px;
-}
-
 .auth-headline {
-  font-family: var(--font-display);
-  font-size: clamp(26px, 3.6vw, 34px);
-  letter-spacing: 0.09em; line-height: 1.1;
-  text-transform: lowercase;
+  font-family: var(--font-mono);
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.3;
+  text-transform: none;
   color: var(--ink);
-  margin: 0 0 12px;
-  text-wrap: balance;
+  margin: 0 0 8px;
 }
 
 .auth-sub {
-  font-family: var(--font-mono); font-size: 13px;
-  line-height: 1.65; color: var(--ink-2);
-  margin: 0 0 22px;
+  font-family: var(--font-mono); font-size: 12px;
+  line-height: 1.55; color: var(--ink-2);
+  margin: 0 0 18px;
 }
 .auth-sub .auth-email {
   color: var(--accent-pink);
@@ -720,23 +691,32 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 10px;
+  gap: clamp(20px, 2.6vh, 32px);
 }
 .poster-score .score-row {
-  display: flex; align-items: baseline; gap: 6px;
+  display: flex; align-items: baseline; gap: 8px;
 }
 .poster-score .score-n {
-  font-family: var(--font-display);
+  /* Use the mono font for the score — Bitcount Prop Single is the
+   *  archetype name's voice but renders unreliably in html2canvas at
+   *  large sizes (phantom pixels, baseline overshoot). JetBrains Mono
+   *  is calmer here and exports cleanly. line-height: 1.1 keeps the
+   *  glyph fully inside its line box so the rank pill below sits
+   *  cleanly under the digits. */
+  font-family: var(--font-mono);
   font-size: clamp(56px, 11vh, 112px);
-  line-height: 1;
-  letter-spacing: 0.02em;
+  font-weight: 700;
+  line-height: 1.05;
+  letter-spacing: -0.02em;
   color: var(--accent-pink);
+  font-variant-numeric: tabular-nums;
 }
 .poster-score .score-of {
   font-family: var(--font-mono);
   font-size: clamp(16px, 2vh, 22px);
   color: var(--dim);
   letter-spacing: 0.04em;
+  line-height: 1.05;
 }
 .poster-score .score-rank {
   font-family: var(--font-mono);
@@ -744,9 +724,10 @@
   letter-spacing: 0.32em;
   text-transform: uppercase;
   color: var(--accent-green);
-  padding: 4px 12px;
+  padding: 6px 16px;
   border: 1px solid var(--accent-green);
   background: rgba(102, 209, 181, 0.05);
+  line-height: 1;
 }
 .poster-sigil .sigil .px { background: transparent; }
 .poster-sigil .sigil .px.on { background: var(--ink); }
@@ -812,24 +793,35 @@
 
 /* capture mode — html2canvas can't reliably render clamp() ── */
 /* capture mode — html2canvas can't reliably render clamp()/vh, so
- *  lock every fluid measurement to a fixed value tuned for the
- *  ~960×960 PNG export. */
+ *  lock every fluid measurement to a fixed value tuned for an
+ *  ~880×1100 PNG export. Compact, no internal stretching. */
 .poster.capturing {
-  min-width: 880px; max-width: 980px;
-  min-height: 880px;
-  padding: 36px 48px;
-}
-.poster.capturing .poster-body { gap: 40px; padding: 24px 0; }
-.poster.capturing .score-n { font-size: 140px; }
-.poster.capturing .score-of { font-size: 22px; }
-.poster.capturing .score-rank { font-size: 12px; }
-.poster.capturing .persona-name { font-size: 72px; }
-.poster.capturing .persona-keywords { font-size: 24px; }
-.poster.capturing .persona-rarity { font-size: 13px; }
+  width: 880px;
+  height: auto;
+  min-height: 0;
+  max-width: none;
+  padding: 32px 44px;
+  flex: 0 0 auto;
+  overflow: visible;
+}
+.poster.capturing .poster-body {
+  gap: 36px;
+  padding: 24px 0;
+  flex: 0 0 auto;
+  min-height: 0;
+  justify-content: flex-start;
+}
+.poster.capturing .poster-score { gap: 28px; }
+.poster.capturing .score-n { font-size: 96px; line-height: 1.05; }
+.poster.capturing .score-of { font-size: 22px; line-height: 1.05; }
+.poster.capturing .score-rank { font-size: 12px; padding: 6px 16px; }
+.poster.capturing .persona-name { font-size: 56px; line-height: 1; }
+.poster.capturing .persona-keywords { font-size: 22px; line-height: 1; }
+.poster.capturing .persona-rarity { font-size: 12px; line-height: 1.4; }
 .poster.capturing .poster-sigil .sigil {
-  grid-template-columns: repeat(8, 22px);
-  grid-template-rows: repeat(8, 22px);
-  padding: 10px;
+  grid-template-columns: repeat(8, 18px);
+  grid-template-rows: repeat(8, 18px);
+  padding: 8px;
 }
 
 @media (max-width: 720px) {

From 8b1385d2685f3ba04ddf1216c34bf1f0f87b8926 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 02:50:47 -0700
Subject: [PATCH 12/28] fix(audit): capture poster as rendered, drop .capturing
 override

---
 app/audit/_components/audit-poster.tsx | 32 ++++++++++++-------------
 app/audit/audit-styles.css             | 33 --------------------------
 2 files changed, 15 insertions(+), 50 deletions(-)

diff --git a/app/audit/_components/audit-poster.tsx b/app/audit/_components/audit-poster.tsx
index 7ef513fa..81b95442 100644
--- a/app/audit/_components/audit-poster.tsx
+++ b/app/audit/_components/audit-poster.tsx
@@ -70,23 +70,21 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
   const captureCardBlob = async (): Promise<Blob | null> => {
     const node = (posterRef as React.MutableRefObject<HTMLDivElement | null>)?.current;
     if (!node) return null;
-    node.classList.add("capturing");
-    try {
-      if (typeof document !== "undefined" && document.fonts?.ready) await document.fonts.ready;
-      await new Promise<void>((r) => requestAnimationFrame(() => r()));
-      const html2canvas = (await import("html2canvas")).default;
-      const canvas = await html2canvas(node, {
-        backgroundColor: "#0e0e11",
-        scale: 2,
-        logging: false,
-        useCORS: true,
-      });
-      return await new Promise<Blob | null>((resolve) => {
-        canvas.toBlob((blob) => resolve(blob), "image/png");
-      });
-    } finally {
-      node.classList.remove("capturing");
-    }
+    // Capture the poster element as it renders on screen — no class
+    // override, no font swapping, no manual sizing. Whatever the user
+    // sees is what gets exported.
+    if (typeof document !== "undefined" && document.fonts?.ready) await document.fonts.ready;
+    await new Promise<void>((r) => requestAnimationFrame(() => r()));
+    const html2canvas = (await import("html2canvas")).default;
+    const canvas = await html2canvas(node, {
+      backgroundColor: "#0e0e11",
+      scale: 2,
+      logging: false,
+      useCORS: true,
+    });
+    return await new Promise<Blob | null>((resolve) => {
+      canvas.toBlob((blob) => resolve(blob), "image/png");
+    });
   };
 
   const filenameFor = (channel: "x" | "linkedin" | "download") =>
diff --git a/app/audit/audit-styles.css b/app/audit/audit-styles.css
index 0ec3d7a1..e8976d3e 100644
--- a/app/audit/audit-styles.css
+++ b/app/audit/audit-styles.css
@@ -791,39 +791,6 @@
 }
 .poster-scroll-hint .arrow { color: var(--accent-pink); margin-left: 6px; }
 
-/* capture mode — html2canvas can't reliably render clamp() ── */
-/* capture mode — html2canvas can't reliably render clamp()/vh, so
- *  lock every fluid measurement to a fixed value tuned for an
- *  ~880×1100 PNG export. Compact, no internal stretching. */
-.poster.capturing {
-  width: 880px;
-  height: auto;
-  min-height: 0;
-  max-width: none;
-  padding: 32px 44px;
-  flex: 0 0 auto;
-  overflow: visible;
-}
-.poster.capturing .poster-body {
-  gap: 36px;
-  padding: 24px 0;
-  flex: 0 0 auto;
-  min-height: 0;
-  justify-content: flex-start;
-}
-.poster.capturing .poster-score { gap: 28px; }
-.poster.capturing .score-n { font-size: 96px; line-height: 1.05; }
-.poster.capturing .score-of { font-size: 22px; line-height: 1.05; }
-.poster.capturing .score-rank { font-size: 12px; padding: 6px 16px; }
-.poster.capturing .persona-name { font-size: 56px; line-height: 1; }
-.poster.capturing .persona-keywords { font-size: 22px; line-height: 1; }
-.poster.capturing .persona-rarity { font-size: 12px; line-height: 1.4; }
-.poster.capturing .poster-sigil .sigil {
-  grid-template-columns: repeat(8, 18px);
-  grid-template-rows: repeat(8, 18px);
-  padding: 8px;
-}
-
 @media (max-width: 720px) {
   .poster { padding: 24px 22px; }
   .poster-body { gap: 28px; padding: 12px 0; }

From bc829993efeb4010f7bf2f2f606d9e843a8060a9 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 02:52:54 -0700
Subject: [PATCH 13/28] fix(audit): flatten score row + use real logo on poster

---
 app/audit/_components/audit-poster.tsx | 16 +++++-----
 app/audit/audit-styles.css             | 41 ++++++++++++++------------
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/app/audit/_components/audit-poster.tsx b/app/audit/_components/audit-poster.tsx
index 81b95442..c2b84ef0 100644
--- a/app/audit/_components/audit-poster.tsx
+++ b/app/audit/_components/audit-poster.tsx
@@ -167,8 +167,12 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
       <div className="poster" ref={posterRef}>
         <header className="poster-head">
           <span className="poster-wordmark">
-            <span className="poster-mark" aria-hidden="true">▣</span>
-            failproof_ai <span className="poster-sep">·</span> audit
+            <img
+              src="/logo.svg"
+              alt="failproof_ai"
+              className="poster-logo"
+            />
+            <span className="poster-sep">·</span> audit
           </span>
           <span className="poster-meta">
             <span className="poster-ix">№ {indexLabel}</span>
@@ -206,12 +210,10 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
             )}
           </div>
 
-          {/* Score block — heroic number with rank, anchored at bottom of body */}
+          {/* Score block — heroic number + rank pill on the same baseline */}
           <div className="poster-score">
-            <div className="score-row">
-              <span className="score-n">{score}</span>
-              <span className="score-of">/100</span>
-            </div>
+            <span className="score-n">{score}</span>
+            <span className="score-of">/100</span>
             <span className="score-rank">{scoreRank}</span>
           </div>
         </div>
diff --git a/app/audit/audit-styles.css b/app/audit/audit-styles.css
index e8976d3e..1b037aaf 100644
--- a/app/audit/audit-styles.css
+++ b/app/audit/audit-styles.css
@@ -620,9 +620,16 @@
   font-size: 11px;
   letter-spacing: 0.04em;
 }
-.poster-wordmark { color: var(--ink); }
-.poster-wordmark .poster-mark { color: var(--accent-pink); margin-right: 4px; }
-.poster-wordmark .poster-sep { color: var(--dim); margin: 0 4px; }
+.poster-wordmark {
+  color: var(--ink);
+  display: inline-flex; align-items: center; gap: 8px;
+}
+.poster-wordmark .poster-logo {
+  height: 14px;
+  width: auto;
+  display: block;
+}
+.poster-wordmark .poster-sep { color: var(--dim); margin: 0 2px; }
 .poster-meta { color: var(--dim); }
 .poster-meta .poster-ix { color: var(--accent-pink); }
 .poster-meta .of { color: var(--dim); }
@@ -686,27 +693,21 @@
 .poster-persona .persona-rarity .lbl { color: var(--dim); }
 .poster-persona .persona-rarity .pct { color: var(--accent-pink); font-weight: 600; }
 
-/* score — heroic number anchored at the bottom of the body ── */
+/* score — single horizontal row: score-n + /100 + rank pill all
+ *  baseline-aligned, so the pill can never overlap the digits. */
 .poster-score {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: clamp(20px, 2.6vh, 32px);
-}
-.poster-score .score-row {
-  display: flex; align-items: baseline; gap: 8px;
+  align-items: baseline;
+  justify-content: center;
+  gap: clamp(10px, 1.4vh, 16px);
 }
 .poster-score .score-n {
-  /* Use the mono font for the score — Bitcount Prop Single is the
-   *  archetype name's voice but renders unreliably in html2canvas at
-   *  large sizes (phantom pixels, baseline overshoot). JetBrains Mono
-   *  is calmer here and exports cleanly. line-height: 1.1 keeps the
-   *  glyph fully inside its line box so the rank pill below sits
-   *  cleanly under the digits. */
+  /* Mono font — Bitcount Prop Single renders unreliably in html2canvas
+   *  at this size (phantom pixels). JetBrains Mono exports cleanly. */
   font-family: var(--font-mono);
   font-size: clamp(56px, 11vh, 112px);
   font-weight: 700;
-  line-height: 1.05;
+  line-height: 1;
   letter-spacing: -0.02em;
   color: var(--accent-pink);
   font-variant-numeric: tabular-nums;
@@ -716,7 +717,8 @@
   font-size: clamp(16px, 2vh, 22px);
   color: var(--dim);
   letter-spacing: 0.04em;
-  line-height: 1.05;
+  line-height: 1;
+  margin-right: clamp(12px, 2vh, 28px);
 }
 .poster-score .score-rank {
   font-family: var(--font-mono);
@@ -724,10 +726,11 @@
   letter-spacing: 0.32em;
   text-transform: uppercase;
   color: var(--accent-green);
-  padding: 6px 16px;
+  padding: 6px 14px;
   border: 1px solid var(--accent-green);
   background: rgba(102, 209, 181, 0.05);
   line-height: 1;
+  white-space: nowrap;
 }
 .poster-sigil .sigil .px { background: transparent; }
 .poster-sigil .sigil .px.on { background: var(--ink); }

From 8a5162f1cf9a141c22ef7b835e2bb3af3c995748 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 02:58:52 -0700
Subject: [PATCH 14/28] fix(audit): swap html2canvas for html-to-image for
 clean PNG export

---
 CHANGELOG.md                           |  8 ++++++++
 app/audit/_components/audit-poster.tsx | 22 +++++++++++-----------
 bun.lock                               |  3 +++
 package.json                           |  1 +
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0ad47f4f..f0fcd7d9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.0.11-beta.9 — 2026-06-11
+
+### Fixes
+- Swap the `/audit` poster PNG export from `html2canvas` to `html-to-image`. html2canvas reimplements CSS in JavaScript and was producing broken dashed borders on the poster's outer rule (Canvas's `setLineDash` doesn't connect cleanly at corners) and a stray pink square cutting through the wordmark's "l" (the `/logo.svg` uses an SVG `<mask>` for the "i" character, which html2canvas ignored). `html-to-image` serializes the live DOM into an SVG `<foreignObject>` and rasterizes it through the browser's native rendering engine, so dashed borders, SVG masks, gradients, and font metrics render exactly as they do on screen. Implementation in `app/audit/_components/audit-poster.tsx#captureCardBlob` (#435).
+
+### Dependencies
+- Add `html-to-image@^1.11.13` for the audit-poster PNG export. Replaces (but does not remove) `html2canvas` — the latter remains for any non-audit screenshot path still using it (#435).
+
 ## 0.0.11-beta.8 — 2026-06-11
 
 ### Features
diff --git a/app/audit/_components/audit-poster.tsx b/app/audit/_components/audit-poster.tsx
index c2b84ef0..bdd51447 100644
--- a/app/audit/_components/audit-poster.tsx
+++ b/app/audit/_components/audit-poster.tsx
@@ -70,20 +70,20 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
   const captureCardBlob = async (): Promise<Blob | null> => {
     const node = (posterRef as React.MutableRefObject<HTMLDivElement | null>)?.current;
     if (!node) return null;
-    // Capture the poster element as it renders on screen — no class
-    // override, no font swapping, no manual sizing. Whatever the user
-    // sees is what gets exported.
+    // Capture via html-to-image instead of html2canvas. The former
+    // serializes the DOM into an SVG <foreignObject> and rasterizes
+    // it through the browser's native rendering engine — so dashed
+    // borders, the SVG logo, gradients, and font metrics render
+    // exactly as they do on screen. html2canvas reimplements CSS
+    // in JS and was producing broken dashes and a stray pink square
+    // on the logo's mask.
     if (typeof document !== "undefined" && document.fonts?.ready) await document.fonts.ready;
     await new Promise<void>((r) => requestAnimationFrame(() => r()));
-    const html2canvas = (await import("html2canvas")).default;
-    const canvas = await html2canvas(node, {
+    const { toBlob } = await import("html-to-image");
+    return await toBlob(node, {
       backgroundColor: "#0e0e11",
-      scale: 2,
-      logging: false,
-      useCORS: true,
-    });
-    return await new Promise<Blob | null>((resolve) => {
-      canvas.toBlob((blob) => resolve(blob), "image/png");
+      pixelRatio: 2,
+      cacheBust: true,
     });
   };
 
diff --git a/bun.lock b/bun.lock
index c1186ea5..d95f853c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -5,6 +5,7 @@
     "": {
       "name": "failproofai",
       "dependencies": {
+        "html-to-image": "^1.11.13",
         "html2canvas": "^1.4.1",
         "posthog-node": "^5.28.11",
       },
@@ -671,6 +672,8 @@
 
     "html-encoding-sniffer": ["html-encoding-sniffer@6.0.0", "", { "dependencies": { "@exodus/bytes": "^1.6.0" } }, "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg=="],
 
+    "html-to-image": ["html-to-image@1.11.13", "", {}, "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg=="],
+
     "html2canvas": ["html2canvas@1.4.1", "", { "dependencies": { "css-line-break": "^2.1.0", "text-segmentation": "^1.0.3" } }, "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA=="],
 
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
diff --git a/package.json b/package.json
index 15009f0d..2054c127 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
+    "html-to-image": "^1.11.13",
     "html2canvas": "^1.4.1",
     "posthog-node": "^5.28.11"
   },

From a645249dfcce57bbe6f289c32117a8ab0d96796f Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 03:00:32 -0700
Subject: [PATCH 15/28] fix(audit): lock html-to-image capture dims to live
 element so content centers

---
 app/audit/_components/audit-poster.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/audit/_components/audit-poster.tsx b/app/audit/_components/audit-poster.tsx
index bdd51447..0d8b6ef3 100644
--- a/app/audit/_components/audit-poster.tsx
+++ b/app/audit/_components/audit-poster.tsx
@@ -79,11 +79,23 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
     // on the logo's mask.
     if (typeof document !== "undefined" && document.fonts?.ready) await document.fonts.ready;
     await new Promise<void>((r) => requestAnimationFrame(() => r()));
+    // Lock dimensions to the rendered size — html-to-image clones the
+    // node without its parent's flex context, so the clone would otherwise
+    // collapse to intrinsic width while the canvas inherits the original
+    // offsetWidth, anchoring the content to the left of empty space.
+    const width = node.offsetWidth;
+    const height = node.offsetHeight;
     const { toBlob } = await import("html-to-image");
     return await toBlob(node, {
       backgroundColor: "#0e0e11",
       pixelRatio: 2,
       cacheBust: true,
+      width,
+      height,
+      style: {
+        width: `${width}px`,
+        height: `${height}px`,
+      },
     });
   };
 

From 99279bd09bfe6ae85f66d7cb2025a4a45bf077ed Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 03:00:53 -0700
Subject: [PATCH 16/28] docs: changelog entry for poster capture width lock

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f0fcd7d9..0b0ad42d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Fixes
 - Swap the `/audit` poster PNG export from `html2canvas` to `html-to-image`. html2canvas reimplements CSS in JavaScript and was producing broken dashed borders on the poster's outer rule (Canvas's `setLineDash` doesn't connect cleanly at corners) and a stray pink square cutting through the wordmark's "l" (the `/logo.svg` uses an SVG `<mask>` for the "i" character, which html2canvas ignored). `html-to-image` serializes the live DOM into an SVG `<foreignObject>` and rasterizes it through the browser's native rendering engine, so dashed borders, SVG masks, gradients, and font metrics render exactly as they do on screen. Implementation in `app/audit/_components/audit-poster.tsx#captureCardBlob` (#435).
+- Lock the html-to-image capture's `width`/`height` (and the matching inline `style` override) to the live poster element's `offsetWidth`/`offsetHeight`. html-to-image clones the node without its parent's flex context (the `.poster-section`'s `flex: 1` stretching), so the clone would collapse to intrinsic content width while the canvas inherited the original `offsetWidth` — content rendered anchored to the left of empty space (#435).
 
 ### Dependencies
 - Add `html-to-image@^1.11.13` for the audit-poster PNG export. Replaces (but does not remove) `html2canvas` — the latter remains for any non-audit screenshot path still using it (#435).

From 9c6d4daeb8dfd5acc15b143cea55f4d1eb3fb392 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 03:02:21 -0700
Subject: [PATCH 17/28] docs: update dashboard.mdx for the new 5-section audit
 flow

---
 docs/dashboard.mdx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/docs/dashboard.mdx b/docs/dashboard.mdx
index af84fa05..9df08527 100644
--- a/docs/dashboard.mdx
+++ b/docs/dashboard.mdx
@@ -59,14 +59,13 @@ Click the **Download Logs** button to export the session. For Claude Code, Codex
 
 ### Audit
 
-A personality-driven report of how your agent has actually been behaving across past sessions. Runs the same scan as the `failproofai audit` CLI but renders it as a six-section dashboard:
-
-1. **Identity** — classifies your agent into one of 8 archetypes (`the optimist`, `the cowboy`, `the explorer`, `the goldfish`, `the paranoid architect`, `the precision builder`, `the hammer`, `the ghost`) based on which detectors + policies fired and how heavily. Renders an 8×8 pixel sigil, the archetype tagline, "common in" / "primary risk" framing, and the closing one-liner.
-2. **Show off your agent** — captures the identity card as a 1200×630 PNG suitable for posting to X / LinkedIn (click `make poster`).
-3. **Strengths** — green-checked behaviors your agent already does right, derived from the live audit data (clean tool-call rate, average session length, zero credential leaks, zero retry storms, etc.).
-4. **Score + leaderboard** — 0–100 score with letter grade (S/A/B/C/D/F), a distribution histogram showing where you fall in the cohort, prose ("a B starts at 71. you're 13 points away."), and a leaderboard table with your row highlighted.
-5. **Findings** — per-finding cards ranked by impact. Each card surfaces what happened, what it costs, an evidence sample with real captured commands, and the failproofai policy that would catch the same pattern (`$ failproofai policy add <slug>`, click-to-copy).
-6. **Prescribed policies + return loop** — a grid of every unenabled builtin policy that would close a gap, with a projected-score callout, plus a "re-audit in 7 days" CTA.
+A personality-driven report of how your agent has actually been behaving across past sessions. Runs the same scan as the `failproofai audit` CLI but renders it as a single-screen shareable poster + four below-the-fold sections:
+
+1. **Poster** — fills the first viewport. Self-contained PNG-capture region with the failproof_ai wordmark + audit label · archetype index (`№ NN of 08`) + audit date · numeric score (0–100) + percentile rank pill (`top 15%`) · the archetype name (one of `the optimist`, `the cowboy`, `the explorer`, `the goldfish`, `the paranoid architect`, `the precision builder`, `the hammer`, `the ghost`) + 3-keyword strip · `// only N% of agents are this archetype` rarity line · 8×8 pixel sigil tile · `audit yours → failproof.ai` footer. Three share buttons sit just outside the capture box: `post your archetype` (X intent), `share on linkedin`, `download poster`. Capture runs through `html-to-image` so the PNG matches the on-screen render pixel-for-pixel (dashed borders, SVG logo mask, gradients, font metrics — all preserved).
+2. **Strengths** — calm ✓ row list of behaviors your agent already does right, derived from the live audit data (clean tool-call rate, average session length, zero credential leaks, zero retry storms, etc.).
+3. **Quirks** — table of what slipped through, ranked by impact: `time · what slipped + policy that would've caught it · severity pill · recurrence` (new / Nx this wk / recurring).
+4. **How to improve** — calm row list, one per prescribed policy: policy name in white, one-line description, install command + copy button on the right side. An `[install all]` button at the section header copies the combined `failproof policy add a b c …` command for every prescribed policy.
+5. **Come back better** — two side-by-side cards. Left: set a reminder (`3d` / `7d` / `14d` / `30d` cadence picker; persists through `/api/auth/reminder` once authed). Right: unlock failproof perks — share with 3 friends → unlock pro features for a month (progress bar + `invite a friend` CTA; UI ships, invite tracking + entitlement ships in a follow-up).
 
 Driven by the `failproofai audit` runtime — see [Audit CLI](/cli/audit) for the underlying scan engine, supported flags, and per-transcript cache invariants. The dashboard caches the latest result at `~/.failproofai/audit-dashboard.json` (mode `0600`, single slot, new runs overwrite) so revisits are instant; **both the per-transcript and whole-result caches are rejected on read once they're older than 7 days** so the dashboard never silently serves a week-old result — past the TTL `/audit` falls through to its empty state and prompts a fresh run. Clicking `[ re-audit now ]` near the bottom of the report POSTs `/api/audit/run` with `noCache: true` — re-audit bypasses the per-transcript cache and re-scans every transcript from scratch rather than silently returning the cached result — and the dashboard polls `/api/audit/status` at 1Hz until the run finishes; a sticky pink progress strip pins to the top of the viewport during the run with an elapsed timer, and the fresh result swaps in place on success (no full-page reload; a failed re-audit leaves the prior report intact). On failure the strip turns red with copy keyed off the `RerunError.kind` (`timeout` / `network` / `post_failed`). Empty state (no cache or expired) and zero-sessions state (cache exists but the scan found no transcripts) are surfaced separately.
 

From dfb73966f448682898c1a6d1b5345986aaf7f7c3 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 03:02:40 -0700
Subject: [PATCH 18/28] docs: changelog entry for dashboard.mdx audit-section
 update

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b0ad42d..d14a4571 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,9 @@
 ### Dependencies
 - Add `html-to-image@^1.11.13` for the audit-poster PNG export. Replaces (but does not remove) `html2canvas` — the latter remains for any non-audit screenshot path still using it (#435).
 
+### Docs
+- Update `docs/dashboard.mdx`'s `### Audit` section to describe the new 5-section flow (poster + strengths + quirks + how to improve + come back better), replacing the prior 6-section description (identity + show off + strengths + score+leaderboard + findings + prescribed policies+return loop). Calls out the html-to-image swap so the documented behaviour matches what users see when they click `download poster` (#435).
+
 ## 0.0.11-beta.8 — 2026-06-11
 
 ### Features

From de018ddf6614847d507d350ebf3a444b060e61e5 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 03:05:31 -0700
Subject: [PATCH 19/28] fix(audit): capture poster from off-screen clone to
 drop flex-parent offset

---
 CHANGELOG.md                           |  1 +
 app/audit/_components/audit-poster.tsx | 68 +++++++++++++++++++-------
 2 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d14a4571..8812e97b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Fixes
 - Swap the `/audit` poster PNG export from `html2canvas` to `html-to-image`. html2canvas reimplements CSS in JavaScript and was producing broken dashed borders on the poster's outer rule (Canvas's `setLineDash` doesn't connect cleanly at corners) and a stray pink square cutting through the wordmark's "l" (the `/logo.svg` uses an SVG `<mask>` for the "i" character, which html2canvas ignored). `html-to-image` serializes the live DOM into an SVG `<foreignObject>` and rasterizes it through the browser's native rendering engine, so dashed borders, SVG masks, gradients, and font metrics render exactly as they do on screen. Implementation in `app/audit/_components/audit-poster.tsx#captureCardBlob` (#435).
 - Lock the html-to-image capture's `width`/`height` (and the matching inline `style` override) to the live poster element's `offsetWidth`/`offsetHeight`. html-to-image clones the node without its parent's flex context (the `.poster-section`'s `flex: 1` stretching), so the clone would collapse to intrinsic content width while the canvas inherited the original `offsetWidth` — content rendered anchored to the left of empty space (#435).
+- Capture the poster from an off-screen clone instead of the live element. Even with explicit `width`/`height`, the live `.poster` carried its parent's flex context + `margin: 0 auto`, which html-to-image preserved during capture — the content ended up centered inside an oversized canvas, with the poster's left dashed border visible at canvas edge and the right meta clipped. The fix clones the node into a fresh `position: fixed; left: -10000px` wrapper with a fixed width matching `getBoundingClientRect().width`, captures the clone, then removes the wrapper. The clone has no flex parent and no margin auto, so the canvas dimensions match the poster exactly (#435).
 
 ### Dependencies
 - Add `html-to-image@^1.11.13` for the audit-poster PNG export. Replaces (but does not remove) `html2canvas` — the latter remains for any non-audit screenshot path still using it (#435).
diff --git a/app/audit/_components/audit-poster.tsx b/app/audit/_components/audit-poster.tsx
index 0d8b6ef3..4973115a 100644
--- a/app/audit/_components/audit-poster.tsx
+++ b/app/audit/_components/audit-poster.tsx
@@ -79,24 +79,56 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
     // on the logo's mask.
     if (typeof document !== "undefined" && document.fonts?.ready) await document.fonts.ready;
     await new Promise<void>((r) => requestAnimationFrame(() => r()));
-    // Lock dimensions to the rendered size — html-to-image clones the
-    // node without its parent's flex context, so the clone would otherwise
-    // collapse to intrinsic width while the canvas inherits the original
-    // offsetWidth, anchoring the content to the left of empty space.
-    const width = node.offsetWidth;
-    const height = node.offsetHeight;
-    const { toBlob } = await import("html-to-image");
-    return await toBlob(node, {
-      backgroundColor: "#0e0e11",
-      pixelRatio: 2,
-      cacheBust: true,
-      width,
-      height,
-      style: {
-        width: `${width}px`,
-        height: `${height}px`,
-      },
-    });
+    // Clone the poster into an off-screen container with a fixed width
+    // so html-to-image captures a self-contained subtree. The live
+    // .poster sits inside a flex column (.poster-section's flex: 1)
+    // and uses margin: 0 auto for centering — capturing it directly
+    // inherits that parent context, which shifts content within an
+    // oversized canvas. The clone has no such context.
+    const liveRect = node.getBoundingClientRect();
+    const captureWidth = Math.round(liveRect.width);
+    const captureHeight = Math.round(liveRect.height);
+
+    const wrapper = document.createElement("div");
+    wrapper.style.cssText = [
+      "position: fixed",
+      "left: -10000px",
+      "top: 0",
+      `width: ${captureWidth}px`,
+      `height: ${captureHeight}px`,
+      "padding: 0",
+      "margin: 0",
+      "background: var(--bg)",
+      "z-index: -1",
+      "pointer-events: none",
+    ].join(";");
+
+    const clone = node.cloneNode(true) as HTMLElement;
+    clone.style.cssText += [
+      "",
+      `width: ${captureWidth}px`,
+      `height: ${captureHeight}px`,
+      "max-width: none",
+      "min-width: 0",
+      "flex: 0 0 auto",
+      "margin: 0",
+    ].join(";");
+
+    wrapper.appendChild(clone);
+    document.body.appendChild(wrapper);
+
+    try {
+      const { toBlob } = await import("html-to-image");
+      return await toBlob(clone, {
+        backgroundColor: "#0e0e11",
+        pixelRatio: 2,
+        cacheBust: true,
+        width: captureWidth,
+        height: captureHeight,
+      });
+    } finally {
+      wrapper.remove();
+    }
   };
 
   const filenameFor = (channel: "x" | "linkedin" | "download") =>

From 3ab6eb18b34e1ee96765f4ee615b89b5b41a316f Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 03:32:43 -0700
Subject: [PATCH 20/28] =?UTF-8?q?style(nav):=20drop=20=E2=94=81=E2=94=81?=
 =?UTF-8?q?=20glyph=20prefix=20+=20audit=20slipping-count=20badge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md          |  1 +
 app/layout.tsx        | 11 +----------
 components/navbar.tsx | 37 +------------------------------------
 3 files changed, 3 insertions(+), 46 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8812e97b..eeb3674a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Swap the `/audit` poster PNG export from `html2canvas` to `html-to-image`. html2canvas reimplements CSS in JavaScript and was producing broken dashed borders on the poster's outer rule (Canvas's `setLineDash` doesn't connect cleanly at corners) and a stray pink square cutting through the wordmark's "l" (the `/logo.svg` uses an SVG `<mask>` for the "i" character, which html2canvas ignored). `html-to-image` serializes the live DOM into an SVG `<foreignObject>` and rasterizes it through the browser's native rendering engine, so dashed borders, SVG masks, gradients, and font metrics render exactly as they do on screen. Implementation in `app/audit/_components/audit-poster.tsx#captureCardBlob` (#435).
 - Lock the html-to-image capture's `width`/`height` (and the matching inline `style` override) to the live poster element's `offsetWidth`/`offsetHeight`. html-to-image clones the node without its parent's flex context (the `.poster-section`'s `flex: 1` stretching), so the clone would collapse to intrinsic content width while the canvas inherited the original `offsetWidth` — content rendered anchored to the left of empty space (#435).
 - Capture the poster from an off-screen clone instead of the live element. Even with explicit `width`/`height`, the live `.poster` carried its parent's flex context + `margin: 0 auto`, which html-to-image preserved during capture — the content ended up centered inside an oversized canvas, with the poster's left dashed border visible at canvas edge and the right meta clipped. The fix clones the node into a fresh `position: fixed; left: -10000px` wrapper with a fixed width matching `getBoundingClientRect().width`, captures the clone, then removes the wrapper. The clone has no flex parent and no margin auto, so the canvas dimensions match the poster exactly (#435).
+- Drop the `━━` glyph prefix and the amber slipping-count badge (`182` etc.) from every navbar tab. The badge surfaced a number that was already prominent on the audit page itself and the prefix was decorative chrome left over from the brutalist redesign. `Navbar` no longer accepts `auditSlippingCount`; `app/layout.tsx` no longer reads the dashboard cache to derive the count (#435).
 
 ### Dependencies
 - Add `html-to-image@^1.11.13` for the audit-poster PNG export. Replaces (but does not remove) `html2canvas` — the latter remains for any non-audit screenshot path still using it (#435).
diff --git a/app/layout.tsx b/app/layout.tsx
index 058eaa51..9a866951 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -10,7 +10,6 @@ import { GlobalErrorListeners } from "@/app/components/global-error-listeners";
 import { AutoRefreshProvider } from "@/contexts/AutoRefreshContext";
 import { Navbar } from "@/components/navbar";
 import { Toaster } from "@/app/components/toast";
-import { readDashboardCache } from "@/src/audit/dashboard-cache";
 import "./globals.css";
 
 // Site-wide mono font is JetBrains Mono, loaded via the Google Fonts @import
@@ -33,21 +32,13 @@ export default function RootLayout({
 }>) {
   const disabledPages = (process.env.FAILPROOFAI_DISABLE_PAGES ?? "")
     .split(",").map((s) => s.trim()).filter(Boolean);
-  // Read the audit cache once per page request to drive the nav badge.
-  // Cheap (single JSON file) and the cache itself returns null on miss.
-  const auditCache = readDashboardCache();
-  const auditSlippingCount = auditCache?.result?.results
-    ? auditCache.result.results
-        .filter((r) => r.source === "audit-detector" || (r.source === "builtin" && !r.enabledInConfig))
-        .reduce((sum, r) => sum + r.hits, 0)
-    : undefined;
   return (
     <html lang="en" className="dark">
       <body className="antialiased">
         <PostHogProvider>
           <GlobalErrorListeners />
           <AutoRefreshProvider>
-            <Navbar disabledPages={disabledPages} auditSlippingCount={auditSlippingCount} />
+            <Navbar disabledPages={disabledPages} />
             {children}
           </AutoRefreshProvider>
           <Toaster />
diff --git a/components/navbar.tsx b/components/navbar.tsx
index ccb653e3..a9a01b57 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -51,11 +51,7 @@ const useBrandLogo = (): string => {
 
 export const Navbar: React.FC<{
   disabledPages?: string[];
-  /** Total slipping-through actions from the latest cached audit. When > 0
-   *  a small chip is rendered next to the Audit nav link. Undefined → no
-   *  chip (no cache yet, or audit disabled). */
-  auditSlippingCount?: number;
-}> = ({ disabledPages = [], auditSlippingCount }) => {
+}> = ({ disabledPages = [] }) => {
   const pathname = usePathname();
   const { capture } = usePostHog();
   const logoSrc = useBrandLogo();
@@ -90,10 +86,6 @@ export const Navbar: React.FC<{
           const active = href === "/projects"
             ? pathname === "/projects" || pathname.startsWith("/project/")
             : pathname.startsWith(href);
-          const showAuditBadge =
-            href === "/audit"
-            && typeof auditSlippingCount === "number"
-            && auditSlippingCount > 0;
           return (
             <Link
               key={href}
@@ -105,37 +97,10 @@ export const Navbar: React.FC<{
                 capture("audit_nav_clicked", {
                   from_path: pathname,
                   is_active_tab: active,
-                  has_badge: showAuditBadge,
-                  slipping_count: typeof auditSlippingCount === "number" ? auditSlippingCount : null,
                 });
               }}
             >
-              <span style={{ color: "var(--dim)", letterSpacing: "-2px", marginRight: 2 }}>━━</span>
               {label}
-              {showAuditBadge && (
-                <span
-                  role="status"
-                  style={{
-                    display: "inline-flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    minWidth: "1.4rem",
-                    height: "1rem",
-                    padding: "0 6px",
-                    fontFamily: "var(--font-mono)",
-                    fontSize: 10,
-                    letterSpacing: "0.05em",
-                    background: "var(--amber-bg)",
-                    color: "var(--amber)",
-                    border: "1px solid var(--amber)",
-                    marginLeft: 2,
-                  }}
-                  aria-label={`${auditSlippingCount} action${auditSlippingCount === 1 ? "" : "s"} slipping through your policies`}
-                  title={`${auditSlippingCount} slipping through`}
-                >
-                  {auditSlippingCount}
-                </span>
-              )}
             </Link>
           );
         })}

From 0308b7338a20eec273c44750818036a3423c8b6e Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 03:42:24 -0700
Subject: [PATCH 21/28] =?UTF-8?q?fix:=20address=20CodeRabbit=20review=20?=
 =?UTF-8?q?=E2=80=94=20telemetry=20status,=20transient=20auth=20probe,=20f?=
 =?UTF-8?q?ocus-visible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                      |  1 +
 app/audit/_components/audit-poster.tsx            |  2 +-
 .../_components/come-back-better-section.tsx      | 15 +++++++++++++--
 app/audit/audit-styles.css                        |  9 +++++++++
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eeb3674a..9e3aa366 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Lock the html-to-image capture's `width`/`height` (and the matching inline `style` override) to the live poster element's `offsetWidth`/`offsetHeight`. html-to-image clones the node without its parent's flex context (the `.poster-section`'s `flex: 1` stretching), so the clone would collapse to intrinsic content width while the canvas inherited the original `offsetWidth` — content rendered anchored to the left of empty space (#435).
 - Capture the poster from an off-screen clone instead of the live element. Even with explicit `width`/`height`, the live `.poster` carried its parent's flex context + `margin: 0 auto`, which html-to-image preserved during capture — the content ended up centered inside an oversized canvas, with the poster's left dashed border visible at canvas edge and the right meta clipped. The fix clones the node into a fresh `position: fixed; left: -10000px` wrapper with a fixed width matching `getBoundingClientRect().width`, captures the clone, then removes the wrapper. The clone has no flex parent and no margin auto, so the canvas dimensions match the poster exactly (#435).
 - Drop the `━━` glyph prefix and the amber slipping-count badge (`182` etc.) from every navbar tab. The badge surfaced a number that was already prominent on the audit page itself and the prefix was decorative chrome left over from the brutalist redesign. `Navbar` no longer accepts `auditSlippingCount`; `app/layout.tsx` no longer reads the dashboard cache to derive the count (#435).
+- Address CodeRabbit review on the audit-poster + come-back-better paths. `audit-poster.tsx#handleShare`'s fallback telemetry no longer reports `status: "success"` when `fallbackMethod === "failed"` — share/capture analytics now correctly distinguish error vs. success. `come-back-better-section.tsx#refreshStatus` preserves the prior auth state on transient `/api/auth/status` failures (5xx, network blips) instead of downgrading to `anon` and clearing a valid reminder — it only falls through to `anon` on the very first probe (still `unknown`) so the cadence buttons unlock when the server is unreachable. Adds `:focus-visible` outlines to the new interactive controls (`.poster-share-btn`, `.cadence-btn`, `.invite-btn`, `.install-all-btn`, `.copy-icon-btn`, `.fix-install-btn`) so keyboard navigation has a perceptible focus indicator (#435).
 
 ### Dependencies
 - Add `html-to-image@^1.11.13` for the audit-poster PNG export. Replaces (but does not remove) `html2canvas` — the latter remains for any non-audit screenshot path still using it (#435).
diff --git a/app/audit/_components/audit-poster.tsx b/app/audit/_components/audit-poster.tsx
index 4973115a..65acdfaf 100644
--- a/app/audit/_components/audit-poster.tsx
+++ b/app/audit/_components/audit-poster.tsx
@@ -194,7 +194,7 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
       const fallbackMethod = await copyOrDownloadCard(blob, filenameFor(channel));
       capture("audit_card_capture_completed", {
         trigger: `share_${channel}`,
-        status: "success",
+        status: fallbackMethod === "failed" ? "error" : "success",
         image_method: fallbackMethod,
         source: "poster",
       });
diff --git a/app/audit/_components/come-back-better-section.tsx b/app/audit/_components/come-back-better-section.tsx
index aa50dcfa..97891589 100644
--- a/app/audit/_components/come-back-better-section.tsx
+++ b/app/audit/_components/come-back-better-section.tsx
@@ -81,8 +81,20 @@ export function ComeBackBetterSection({ isRunning, onRerun }: Props) {
 
   const refreshStatus = useCallback(async () => {
     lastRefreshAtRef.current = Date.now();
+    // Preserve current UI state on transient failures (5xx, network blips).
+    // Downgrading to anon on every error would clear a valid reminder mid-
+    // session on a single failed poll, forcing an unnecessary auth prompt.
+    // Only fall through to anon on the very first probe (still "unknown")
+    // so the cadence buttons unlock even if the server is unreachable.
+    const fallbackToAnonOnError = () => {
+      setAuthStatus((prev) => (prev.kind === "unknown" ? { kind: "anon" } : prev));
+    };
     try {
       const res = await fetch("/api/auth/status", { cache: "no-store" });
+      if (!res.ok) {
+        fallbackToAnonOnError();
+        return;
+      }
       const body = (await res.json()) as {
         authenticated?: boolean;
         user?: { id: string; email: string };
@@ -96,8 +108,7 @@ export function ComeBackBetterSection({ isRunning, onRerun }: Props) {
         setReminder(null);
       }
     } catch {
-      setAuthStatus({ kind: "anon" });
-      setReminder(null);
+      fallbackToAnonOnError();
     }
   }, []);
 
diff --git a/app/audit/audit-styles.css b/app/audit/audit-styles.css
index 1b037aaf..6f2008a6 100644
--- a/app/audit/audit-styles.css
+++ b/app/audit/audit-styles.css
@@ -779,6 +779,15 @@
 .poster-share-btn:disabled {
   opacity: 0.55; cursor: wait;
 }
+.poster-share-btn:focus-visible,
+.cadence-btn:focus-visible,
+.invite-btn:focus-visible,
+.install-all-btn:focus-visible,
+.copy-icon-btn:focus-visible,
+.fix-install-btn:focus-visible {
+  outline: 2px solid var(--accent-pink);
+  outline-offset: 2px;
+}
 .poster-share-btn .mark { color: var(--accent-pink); font-weight: 700; }
 
 /* scroll-hint — small footer below share row ───────────────── */

From 575d8d28a3e94e5cc766362cce88e6b58482e6d9 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 03:45:55 -0700
Subject: [PATCH 22/28] fix(audit): correct CLI binary name in how-to-improve
 install commands

---
 CHANGELOG.md                                     | 1 +
 app/audit/_components/how-to-improve-section.tsx | 8 ++++----
 docs/dashboard.mdx                               | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9e3aa366..f19919d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Lock the html-to-image capture's `width`/`height` (and the matching inline `style` override) to the live poster element's `offsetWidth`/`offsetHeight`. html-to-image clones the node without its parent's flex context (the `.poster-section`'s `flex: 1` stretching), so the clone would collapse to intrinsic content width while the canvas inherited the original `offsetWidth` — content rendered anchored to the left of empty space (#435).
 - Capture the poster from an off-screen clone instead of the live element. Even with explicit `width`/`height`, the live `.poster` carried its parent's flex context + `margin: 0 auto`, which html-to-image preserved during capture — the content ended up centered inside an oversized canvas, with the poster's left dashed border visible at canvas edge and the right meta clipped. The fix clones the node into a fresh `position: fixed; left: -10000px` wrapper with a fixed width matching `getBoundingClientRect().width`, captures the clone, then removes the wrapper. The clone has no flex parent and no margin auto, so the canvas dimensions match the poster exactly (#435).
 - Drop the `━━` glyph prefix and the amber slipping-count badge (`182` etc.) from every navbar tab. The badge surfaced a number that was already prominent on the audit page itself and the prefix was decorative chrome left over from the brutalist redesign. `Navbar` no longer accepts `auditSlippingCount`; `app/layout.tsx` no longer reads the dashboard cache to derive the count (#435).
+- Correct the CLI binary name in `how-to-improve-section.tsx`'s install commands. The per-policy install row and the `[install all]` bulk command both emitted `failproof policy add <slug>` — the shipped binary is `failproofai`, so a copied command would fail with `command not found`. Updates the three call sites (header docstring, `bulkInstall()`, and the per-row install string), plus the matching example in `docs/dashboard.mdx#Audit` (#435).
 - Address CodeRabbit review on the audit-poster + come-back-better paths. `audit-poster.tsx#handleShare`'s fallback telemetry no longer reports `status: "success"` when `fallbackMethod === "failed"` — share/capture analytics now correctly distinguish error vs. success. `come-back-better-section.tsx#refreshStatus` preserves the prior auth state on transient `/api/auth/status` failures (5xx, network blips) instead of downgrading to `anon` and clearing a valid reminder — it only falls through to `anon` on the very first probe (still `unknown`) so the cadence buttons unlock when the server is unreachable. Adds `:focus-visible` outlines to the new interactive controls (`.poster-share-btn`, `.cadence-btn`, `.invite-btn`, `.install-all-btn`, `.copy-icon-btn`, `.fix-install-btn`) so keyboard navigation has a perceptible focus indicator (#435).
 
 ### Dependencies
diff --git a/app/audit/_components/how-to-improve-section.tsx b/app/audit/_components/how-to-improve-section.tsx
index 94da0826..97898111 100644
--- a/app/audit/_components/how-to-improve-section.tsx
+++ b/app/audit/_components/how-to-improve-section.tsx
@@ -4,7 +4,7 @@
  * Section 04 — HOW TO IMPROVE. Calm row list, one per prescribed
  * policy:
  *
- *   <policy-name>                 $ failproof policy add <slug>   [📋]
+ *   <policy-name>                 $ failproofai policy add <slug>   [📋]
  *   <one-line explanation>
  *
  * A single "install all" button at the section header copies the
@@ -86,8 +86,8 @@ function buildFixes(result: AuditResult): FixRow[] {
 
 function bulkInstall(fixes: FixRow[]): string {
   if (fixes.length === 0) return "";
-  if (fixes.length === 1) return `failproof policy add ${fixes[0]!.name}`;
-  return `failproof policy add ${fixes.map((f) => f.name).join(" ")}`;
+  if (fixes.length === 1) return `failproofai policy add ${fixes[0]!.name}`;
+  return `failproofai policy add ${fixes.map((f) => f.name).join(" ")}`;
 }
 
 export function HowToImproveSection({ result, projected, projectedGrade }: Props) {
@@ -144,7 +144,7 @@ export function HowToImproveSection({ result, projected, projectedGrade }: Props
 function FixRow({ fix, idx }: { fix: FixRow; idx: number }) {
   const { capture } = usePostHog();
   const [copied, setCopied] = useState(false);
-  const install = `failproof policy add ${fix.name}`;
+  const install = `failproofai policy add ${fix.name}`;
 
   const handleCopy = async () => {
     try {
diff --git a/docs/dashboard.mdx b/docs/dashboard.mdx
index 9df08527..a2b866cb 100644
--- a/docs/dashboard.mdx
+++ b/docs/dashboard.mdx
@@ -64,7 +64,7 @@ A personality-driven report of how your agent has actually been behaving across
 1. **Poster** — fills the first viewport. Self-contained PNG-capture region with the failproof_ai wordmark + audit label · archetype index (`№ NN of 08`) + audit date · numeric score (0–100) + percentile rank pill (`top 15%`) · the archetype name (one of `the optimist`, `the cowboy`, `the explorer`, `the goldfish`, `the paranoid architect`, `the precision builder`, `the hammer`, `the ghost`) + 3-keyword strip · `// only N% of agents are this archetype` rarity line · 8×8 pixel sigil tile · `audit yours → failproof.ai` footer. Three share buttons sit just outside the capture box: `post your archetype` (X intent), `share on linkedin`, `download poster`. Capture runs through `html-to-image` so the PNG matches the on-screen render pixel-for-pixel (dashed borders, SVG logo mask, gradients, font metrics — all preserved).
 2. **Strengths** — calm ✓ row list of behaviors your agent already does right, derived from the live audit data (clean tool-call rate, average session length, zero credential leaks, zero retry storms, etc.).
 3. **Quirks** — table of what slipped through, ranked by impact: `time · what slipped + policy that would've caught it · severity pill · recurrence` (new / Nx this wk / recurring).
-4. **How to improve** — calm row list, one per prescribed policy: policy name in white, one-line description, install command + copy button on the right side. An `[install all]` button at the section header copies the combined `failproof policy add a b c …` command for every prescribed policy.
+4. **How to improve** — calm row list, one per prescribed policy: policy name in white, one-line description, install command + copy button on the right side. An `[install all]` button at the section header copies the combined `failproofai policy add a b c …` command for every prescribed policy.
 5. **Come back better** — two side-by-side cards. Left: set a reminder (`3d` / `7d` / `14d` / `30d` cadence picker; persists through `/api/auth/reminder` once authed). Right: unlock failproof perks — share with 3 friends → unlock pro features for a month (progress bar + `invite a friend` CTA; UI ships, invite tracking + entitlement ships in a follow-up).
 
 Driven by the `failproofai audit` runtime — see [Audit CLI](/cli/audit) for the underlying scan engine, supported flags, and per-transcript cache invariants. The dashboard caches the latest result at `~/.failproofai/audit-dashboard.json` (mode `0600`, single slot, new runs overwrite) so revisits are instant; **both the per-transcript and whole-result caches are rejected on read once they're older than 7 days** so the dashboard never silently serves a week-old result — past the TTL `/audit` falls through to its empty state and prompts a fresh run. Clicking `[ re-audit now ]` near the bottom of the report POSTs `/api/audit/run` with `noCache: true` — re-audit bypasses the per-transcript cache and re-scans every transcript from scratch rather than silently returning the cached result — and the dashboard polls `/api/audit/status` at 1Hz until the run finishes; a sticky pink progress strip pins to the top of the viewport during the run with an elapsed timer, and the fresh result swaps in place on success (no full-page reload; a failed re-audit leaves the prior report intact). On failure the strip turns red with copy keyed off the `RerunError.kind` (`timeout` / `network` / `post_failed`). Empty state (no cache or expired) and zero-sessions state (cache exists but the scan found no transcripts) are surfaced separately.

From 0ff3767fee1417be206cef1975fb7b6e4e7e409d Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 04:18:00 -0700
Subject: [PATCH 23/28] feat(audit): invite-a-friend flow + spec for upstream
 /v0/invite endpoint

---
 CHANGELOG.md                                  |   3 +
 app/api/audit/invite/route.ts                 | 179 ++++++++++++++
 .../_components/come-back-better-section.tsx  |  47 ++--
 app/audit/_components/invite-dialog.tsx       | 213 +++++++++++++++++
 app/audit/audit-styles.css                    |  18 ++
 .../2026-06-11-platform-invite-endpoint.md    | 224 ++++++++++++++++++
 lib/auth/api-server-client.ts                 |  25 ++
 7 files changed, 680 insertions(+), 29 deletions(-)
 create mode 100644 app/api/audit/invite/route.ts
 create mode 100644 app/audit/_components/invite-dialog.tsx
 create mode 100644 docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f19919d4..f628eaf4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## 0.0.11-beta.9 — 2026-06-11
 
+### Features
+- Add `invite a friend` flow on `/audit#come-back-better`: new `InviteDialog` modal takes a comma/space/newline-separated list of friend emails (validates inline, hard-cap of 10 per submit, dedupes against the sender's own address), POSTs them to the new `/api/audit/invite` Next.js proxy route, which forwards to the api-server's `POST /v0/invite` endpoint with the user's Bearer token. Anonymous users get routed through `AuthDialog` first so we have a sender identity to Cc. Removes the placeholder `1 of 3 invited` perks progress bar — the perks copy now says invites are sent from failproof.ai + Cc'd to you. Spec for the upstream api-server endpoint contract (closed-source `FailproofAI/platform` repo) lives at `docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md` (#435).
+
 ### Fixes
 - Swap the `/audit` poster PNG export from `html2canvas` to `html-to-image`. html2canvas reimplements CSS in JavaScript and was producing broken dashed borders on the poster's outer rule (Canvas's `setLineDash` doesn't connect cleanly at corners) and a stray pink square cutting through the wordmark's "l" (the `/logo.svg` uses an SVG `<mask>` for the "i" character, which html2canvas ignored). `html-to-image` serializes the live DOM into an SVG `<foreignObject>` and rasterizes it through the browser's native rendering engine, so dashed borders, SVG masks, gradients, and font metrics render exactly as they do on screen. Implementation in `app/audit/_components/audit-poster.tsx#captureCardBlob` (#435).
 - Lock the html-to-image capture's `width`/`height` (and the matching inline `style` override) to the live poster element's `offsetWidth`/`offsetHeight`. html-to-image clones the node without its parent's flex context (the `.poster-section`'s `flex: 1` stretching), so the clone would collapse to intrinsic content width while the canvas inherited the original `offsetWidth` — content rendered anchored to the left of empty space (#435).
diff --git a/app/api/audit/invite/route.ts b/app/api/audit/invite/route.ts
new file mode 100644
index 00000000..423c47bd
--- /dev/null
+++ b/app/api/audit/invite/route.ts
@@ -0,0 +1,179 @@
+/**
+ * POST /api/audit/invite
+ *
+ * Browser-facing proxy for the api-server's POST /v0/invite — the user
+ * supplies a list of friend emails, the api-server composes invite emails
+ * (Cc'ing the sender so the recipient sees who invited them), and dispatches
+ * them through the same email infrastructure that backs the OTP flow.
+ *
+ * Auth: requires an active session — same cookie/refresh-token contract as
+ * /api/auth/reminder. Anonymous calls get 401 so the front-end can route to
+ * the AuthDialog before retrying.
+ *
+ * Validation: max 10 recipients per call, each must look like an email.
+ * Anything beyond that gets a 400 and never reaches upstream.
+ *
+ * Contract for the upstream endpoint lives at
+ * `docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md`.
+ */
+import { NextRequest, NextResponse } from "next/server";
+import { whoAmI } from "@/lib/auth/auth-store";
+import { AuthApiError, sendInvites } from "@/lib/auth/api-server-client";
+import { initTelemetry, trackEvent } from "@/lib/telemetry";
+
+export const dynamic = "force-dynamic";
+
+const MAX_RECIPIENTS = 10;
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+interface InviteBody {
+  to?: unknown;
+}
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  await initTelemetry();
+  const who = await whoAmI();
+  if (!who) {
+    trackEvent("audit_invite_sent", { status: "unauthorized", source: "dashboard" });
+    return NextResponse.json(
+      { code: "unauthorized", message: "Sign in before sending invites." },
+      { status: 401 },
+    );
+  }
+
+  let body: InviteBody = {};
+  const raw = await req.text();
+  if (raw.trim().length > 0) {
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+        trackEvent("audit_invite_sent", {
+          status: "validation_error",
+          source: "dashboard",
+          reason: "not_an_object",
+          user_id: who.me.id,
+        });
+        return NextResponse.json(
+          { code: "validation_error", message: "Request body must be a JSON object." },
+          { status: 400 },
+        );
+      }
+      body = parsed as InviteBody;
+    } catch {
+      trackEvent("audit_invite_sent", {
+        status: "validation_error",
+        source: "dashboard",
+        reason: "malformed_json",
+        user_id: who.me.id,
+      });
+      return NextResponse.json(
+        { code: "validation_error", message: "Request body is not valid JSON." },
+        { status: 400 },
+      );
+    }
+  }
+
+  if (!Array.isArray(body.to)) {
+    trackEvent("audit_invite_sent", {
+      status: "validation_error",
+      source: "dashboard",
+      reason: "missing_to",
+      user_id: who.me.id,
+    });
+    return NextResponse.json(
+      { code: "validation_error", message: "`to` must be a list of email addresses." },
+      { status: 400 },
+    );
+  }
+
+  const normalised: string[] = [];
+  const seen = new Set<string>();
+  for (const entry of body.to) {
+    if (typeof entry !== "string") continue;
+    const e = entry.trim().toLowerCase();
+    if (!e || !EMAIL_RE.test(e)) continue;
+    if (e === who.me.email.toLowerCase()) continue; // can't invite yourself
+    if (seen.has(e)) continue;
+    seen.add(e);
+    normalised.push(e);
+  }
+
+  if (normalised.length === 0) {
+    trackEvent("audit_invite_sent", {
+      status: "validation_error",
+      source: "dashboard",
+      reason: "no_valid_recipients",
+      user_id: who.me.id,
+      input_count: Array.isArray(body.to) ? body.to.length : 0,
+    });
+    return NextResponse.json(
+      {
+        code: "validation_error",
+        message: "Provide at least one valid email address (other than your own).",
+      },
+      { status: 400 },
+    );
+  }
+
+  if (normalised.length > MAX_RECIPIENTS) {
+    trackEvent("audit_invite_sent", {
+      status: "validation_error",
+      source: "dashboard",
+      reason: "too_many_recipients",
+      user_id: who.me.id,
+      input_count: normalised.length,
+    });
+    return NextResponse.json(
+      {
+        code: "validation_error",
+        message: `Up to ${MAX_RECIPIENTS} recipients per invite batch. Please send the rest in a follow-up.`,
+      },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const result = await sendInvites(who.auth.access_token, normalised);
+    trackEvent("audit_invite_sent", {
+      status: "success",
+      source: "dashboard",
+      user_id: who.me.id,
+      sent_count: result.sent.length,
+      failed_count: result.failed.length,
+    });
+    return NextResponse.json(result, { status: 200 });
+  } catch (err) {
+    if (err instanceof AuthApiError) {
+      trackEvent("audit_invite_sent", {
+        status: "failed",
+        source: "dashboard",
+        user_id: who.me.id,
+        error_code: err.code,
+        http_status: err.status,
+        recipient_count: normalised.length,
+      });
+      const httpStatus = err.status >= 200 && err.status < 600 ? err.status : 504;
+      return NextResponse.json(
+        {
+          code: err.code,
+          message: err.message,
+          ...(err.retryAfterSecs !== undefined ? { retry_after_secs: err.retryAfterSecs } : {}),
+        },
+        { status: httpStatus },
+      );
+    }
+    const message = err instanceof Error ? err.message : String(err);
+    trackEvent("audit_invite_sent", {
+      status: "failed",
+      source: "dashboard",
+      user_id: who.me.id,
+      error_code: "upstream_unreachable",
+      error_message: message.slice(0, 200),
+      recipient_count: normalised.length,
+    });
+    return NextResponse.json(
+      { code: "upstream_unreachable", message: `api-server unreachable: ${message}` },
+      { status: 502 },
+    );
+  }
+}
diff --git a/app/audit/_components/come-back-better-section.tsx b/app/audit/_components/come-back-better-section.tsx
index 97891589..3c2b49be 100644
--- a/app/audit/_components/come-back-better-section.tsx
+++ b/app/audit/_components/come-back-better-section.tsx
@@ -22,6 +22,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { usePostHog } from "@/contexts/PostHogContext";
 import { isAbortError } from "@/lib/fetch-with-timeout";
 import { AuthDialog, type AuthedUser } from "./auth-dialog";
+import { InviteDialog } from "./invite-dialog";
 
 interface Props {
   isRunning: boolean;
@@ -32,11 +33,7 @@ const DEFAULT_REMINDER_DAYS = 7;
 const REMINDER_OPTIONS = [3, 7, 14, 30] as const;
 type Cadence = typeof REMINDER_OPTIONS[number];
 
-const PERKS_TARGET = 3;
 const PERKS_PERK = "share with 3 friends → unlock pro features for a month.";
-const PERKS_INVITE_URL =
-  "https://x.com/intent/tweet?text=" +
-  encodeURIComponent("just got my agent audited at failproof.ai — it's free, takes 30s. you should run yours too 👀");
 
 type AuthStatus =
   | { kind: "unknown" }
@@ -63,19 +60,14 @@ function formatNextAudit(unixSecs: number): string {
   });
 }
 
-// Mock: invite count is UI state until the backend tracking lands. Per
-// the spec the user is seeding the data — for now the count is 0 and
-// the button just opens a share intent.
-const SEED_INVITE_COUNT = 0;
-
 export function ComeBackBetterSection({ isRunning, onRerun }: Props) {
   const { capture } = usePostHog();
   const [authStatus, setAuthStatus] = useState<AuthStatus>({ kind: "unknown" });
   const [reminder, setReminder] = useState<Reminder | null>(null);
   const [cadence, setCadence] = useState<Cadence>(DEFAULT_REMINDER_DAYS);
   const [dialogOpen, setDialogOpen] = useState(false);
+  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
   const [reminderBusy, setReminderBusy] = useState(false);
-  const [inviteCount] = useState<number>(SEED_INVITE_COUNT);
   const ctaShownRef = useRef(false);
   const lastRefreshAtRef = useRef(0);
 
@@ -224,12 +216,17 @@ export function ComeBackBetterSection({ isRunning, onRerun }: Props) {
 
   const handleInvite = useCallback(() => {
     capture("audit_perks_invite_clicked", {
-      invite_count: inviteCount,
-      target: PERKS_TARGET,
       source: "come_back_better_section",
+      auth_state: authStatus.kind,
     });
-    globalThis.open(PERKS_INVITE_URL, "_blank", "noopener,noreferrer");
-  }, [capture, inviteCount]);
+    // Unauthed users go through the AuthDialog first so we have a sender
+    // identity to Cc on the invite email.
+    if (authStatus.kind !== "authed") {
+      setDialogOpen(true);
+      return;
+    }
+    setInviteDialogOpen(true);
+  }, [authStatus.kind, capture]);
 
   const handleRerunInline = useCallback(() => {
     if (isRunning) return;
@@ -237,11 +234,6 @@ export function ComeBackBetterSection({ isRunning, onRerun }: Props) {
   }, [isRunning, onRerun]);
 
   const days = reminder ? daysUntil(reminder.next_audit_at) : 0;
-  const remaining = Math.max(0, PERKS_TARGET - inviteCount);
-  const progressPct = Math.min(
-    100,
-    Math.round((inviteCount / PERKS_TARGET) * 100),
-  );
 
   return (
     <section className="audit-sec" data-screen-label="05 Come back better">
@@ -288,24 +280,21 @@ export function ComeBackBetterSection({ isRunning, onRerun }: Props) {
         <div className="cbb-card">
           <div className="cbb-card-title">unlock failproof perks</div>
           <div className="cbb-card-sub">{PERKS_PERK}</div>
-          <div className="perks-progress" aria-hidden="true">
-            <span style={{ width: `${progressPct}%` }} />
-          </div>
-          <div className="perks-meta">
-            <strong>
-              {inviteCount} of {PERKS_TARGET}
-            </strong>{" "}
-            invited · {remaining} to go
-          </div>
           <button type="button" className="invite-btn" onClick={handleInvite}>
             invite a friend
           </button>
           <div className="cbb-foot">
-            {"// invites are tracked by signup — they have to run an audit too."}
+            {"// invites are sent from failproof.ai, Cc'd to you, with a link to run their own audit."}
           </div>
         </div>
       </div>
 
+      <InviteDialog
+        open={inviteDialogOpen}
+        source="come_back_better_section"
+        onClose={() => setInviteDialogOpen(false)}
+      />
+
       <AuthDialog
         open={dialogOpen}
         source="return_section"
diff --git a/app/audit/_components/invite-dialog.tsx b/app/audit/_components/invite-dialog.tsx
new file mode 100644
index 00000000..950999f7
--- /dev/null
+++ b/app/audit/_components/invite-dialog.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+/**
+ * Invite dialog — modal that takes a comma/newline-separated list of friend
+ * emails and POSTs them to /api/audit/invite. The api-server composes the
+ * actual invite email (Cc'ing the sender) using the same email infrastructure
+ * that backs the OTP flow.
+ *
+ * Anonymous users get bounced through the AuthDialog by the caller; this
+ * component assumes the session is already established.
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { usePostHog } from "@/contexts/PostHogContext";
+import { toast } from "@/app/components/toast";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  /** Source tag for PostHog so we can split "invited from come-back-better"
+   *  from any future entry points. */
+  source: string;
+}
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const MAX_RECIPIENTS = 10;
+
+function parseEmails(input: string): { valid: string[]; invalid: string[] } {
+  const tokens = input
+    .split(/[\s,;]+/)
+    .map((t) => t.trim().toLowerCase())
+    .filter(Boolean);
+  const valid: string[] = [];
+  const invalid: string[] = [];
+  const seen = new Set<string>();
+  for (const t of tokens) {
+    if (seen.has(t)) continue;
+    seen.add(t);
+    if (EMAIL_RE.test(t)) valid.push(t);
+    else invalid.push(t);
+  }
+  return { valid, invalid };
+}
+
+export function InviteDialog({ open, onClose, source }: Props): React.ReactElement | null {
+  const { capture } = usePostHog();
+  const [value, setValue] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setValue("");
+      setBusy(false);
+      setError(null);
+      capture("audit_invite_dialog_opened", { source });
+    }
+  }, [capture, open, source]);
+
+  useEffect(() => {
+    if (!open) return;
+    const t = setTimeout(() => inputRef.current?.focus(), 50);
+    return () => clearTimeout(t);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === "Escape" && !busy) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, busy, onClose]);
+
+  const { valid, invalid } = useMemo(() => parseEmails(value), [value]);
+
+  const submit = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      if (busy) return;
+      if (valid.length === 0) {
+        setError("add at least one valid email address.");
+        return;
+      }
+      if (valid.length > MAX_RECIPIENTS) {
+        setError(`up to ${MAX_RECIPIENTS} emails at a time. send the rest in a follow-up.`);
+        return;
+      }
+      setBusy(true);
+      setError(null);
+      capture("audit_invite_submitted", {
+        source,
+        recipient_count: valid.length,
+        had_invalid: invalid.length > 0,
+      });
+      try {
+        const res = await fetch("/api/audit/invite", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ to: valid }),
+        });
+        const body = (await res.json().catch(() => ({}))) as {
+          sent?: string[];
+          failed?: string[];
+          code?: string;
+          message?: string;
+        };
+        if (!res.ok) {
+          // 401 → caller handles by opening AuthDialog; we still surface inline so the user has feedback.
+          const msg = body.message ?? "couldn't send invites.";
+          setError(msg);
+          return;
+        }
+        const sent = body.sent?.length ?? 0;
+        const failed = body.failed?.length ?? 0;
+        toast(
+          failed > 0
+            ? `📨 sent ${sent}, ${failed} bounced — copy the bounce and try again.`
+            : `📨 sent ${sent} ${sent === 1 ? "invite" : "invites"}. thanks for spreading the word.`,
+        );
+        onClose();
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        setError(`network error: ${message}`);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [busy, valid, invalid, capture, source, onClose],
+  );
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="auth-dialog-backdrop"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="invite-dialog-title"
+      onClick={(e) => {
+        if (!busy && e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="auth-dialog">
+        <button
+          type="button"
+          className="auth-close"
+          onClick={onClose}
+          disabled={busy}
+          aria-label="close"
+        >
+          ×
+        </button>
+
+        <h2 id="invite-dialog-title" className="auth-headline">
+          invite friends to audit theirs
+        </h2>
+        <p className="auth-sub">
+          paste emails separated by commas, spaces, or newlines. you&apos;ll be Cc&apos;d on every invite so they know it&apos;s from you.
+        </p>
+
+        <form onSubmit={submit} className="auth-form">
+          <textarea
+            ref={inputRef}
+            name="emails"
+            placeholder="alice@x.com, bob@y.com&#10;carol@z.com"
+            disabled={busy}
+            className="auth-input invite-textarea"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            rows={4}
+            required
+          />
+          <div className="invite-summary">
+            {valid.length > 0 && (
+              <span className="invite-valid">{valid.length} valid</span>
+            )}
+            {invalid.length > 0 && (
+              <span className="invite-invalid">
+                {invalid.length} invalid: {invalid.slice(0, 3).join(", ")}
+                {invalid.length > 3 ? `, +${invalid.length - 3} more` : ""}
+              </span>
+            )}
+            {valid.length > MAX_RECIPIENTS && (
+              <span className="invite-invalid">
+                only {MAX_RECIPIENTS} per send — first {MAX_RECIPIENTS} will go.
+              </span>
+            )}
+          </div>
+          {error && <div className="auth-error">{error}</div>}
+          <div className="auth-actions">
+            <button
+              type="submit"
+              className="auth-btn primary"
+              disabled={busy || valid.length === 0}
+            >
+              {busy ? "sending…" : `send ${valid.length || ""} invite${valid.length === 1 ? "" : "s"}`.trim()}
+            </button>
+            <button
+              type="button"
+              className="auth-btn"
+              onClick={onClose}
+              disabled={busy}
+            >
+              cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/app/audit/audit-styles.css b/app/audit/audit-styles.css
index 6f2008a6..c7e3a8e4 100644
--- a/app/audit/audit-styles.css
+++ b/app/audit/audit-styles.css
@@ -1145,6 +1145,24 @@
   transition: background-color 140ms ease;
 }
 .invite-btn:hover { background: rgba(228, 88, 124, 0.18); }
+
+.invite-textarea {
+  width: 100%;
+  resize: vertical;
+  min-height: 90px;
+  font-size: 13px;
+  line-height: 1.45;
+  letter-spacing: 0.02em;
+}
+.invite-summary {
+  display: flex; flex-wrap: wrap; gap: 12px;
+  margin-top: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--dim);
+}
+.invite-summary .invite-valid { color: var(--accent-green); }
+.invite-summary .invite-invalid { color: var(--accent-pink); }
 .cbb-foot {
   font-family: var(--font-mono);
   font-size: 10px;
diff --git a/docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md b/docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md
new file mode 100644
index 00000000..85d2bd3d
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md
@@ -0,0 +1,224 @@
+# Platform spec — `POST /v0/invite`
+
+**Date:** 2026-06-11
+**Status:** handover — for the `FailproofAI/platform` repo (closed-source api-server, Rust)
+**Companion PR:** `FailproofAI/failproofai#435` — UI + Next.js proxy already shipped
+
+## Goal
+
+Let an authenticated dashboard user send invite emails to a list of friends
+from `failproof.ai` (with the sender Cc'd on every outbound), reusing the
+exact same email-sending infrastructure that backs the OTP flow
+(`POST /v0/auth/login/request`).
+
+The dashboard already ships the UI and the Next.js proxy. As soon as this
+endpoint exists upstream, the `invite a friend` button on
+`/audit#come-back-better` starts dispatching real emails.
+
+## Contract
+
+### Request
+
+```
+POST /v0/invite HTTP/1.1
+Authorization: Bearer <access_token>
+Content-Type: application/json
+
+{
+  "to": ["alice@example.com", "bob@example.org"]
+}
+```
+
+- **Auth:** standard Bearer access token. 401 if missing/invalid.
+- **`to`:** array of email strings. Server should:
+  - lowercase each
+  - drop duplicates
+  - drop entries that don't match a basic email regex
+  - enforce **MAX_RECIPIENTS = 10 per call** (return `400 too_many_recipients`
+    above that — the dashboard pre-validates this but defense-in-depth)
+  - drop the sender's own email if it appears (looked up from token claims)
+
+### Response — `200 OK`
+
+```json
+{
+  "sent":   ["alice@example.com"],
+  "failed": ["bob@example.org"]
+}
+```
+
+- **`sent`:** recipients dispatched to the email provider successfully.
+- **`failed`:** recipients the provider rejected synchronously (malformed,
+  bounced address known from suppression list, rate-limited, etc.). Async
+  bounces don't need to come back through this endpoint.
+
+### Error responses
+
+| Status | Code                  | When |
+|--------|-----------------------|------|
+| 400    | `validation_error`    | body not JSON, missing `to`, no valid recipients after normalisation |
+| 400    | `too_many_recipients` | `to.length > 10` after dedup |
+| 401    | `unauthorized`        | missing / expired token |
+| 429    | `rate_limited`        | per-user invite-send rate cap exceeded; include `retry_after_secs` |
+| 502    | `upstream_unreachable`| email provider down |
+| 5xx    | `internal_error`      | otherwise |
+
+Error body shape matches the existing `/v0/auth/*` routes:
+`{ code: string, message: string, retry_after_secs?: number }`.
+
+## Email composition
+
+The api-server already has an internal `EmailHelper` (or equivalent) that
+sends the OTP email. Add an `InviteTemplate` that uses the same helper.
+
+### Headers
+
+| Header | Value |
+|---|---|
+| `From`     | `invite@failproof.ai` (or whatever sender the OTP flow uses — pick the one with verified DKIM/SPF) |
+| `Reply-To` | sender's email (so replies go to the friend who invited them, not a no-reply inbox) |
+| `To`       | each recipient (one email per recipient — *not* a single message with N To's; otherwise replies + bounces collide and recipients see each other's addresses) |
+| `Cc`       | **sender's email** (from token claims) — so the recipient sees who invited them and the sender gets a copy in their inbox |
+| `Subject`  | `your AI coding agent has a personality. want yours?` |
+
+The Cc requirement is the load-bearing detail — that's how the dashboard
+user gets confidence the invite was sent ("check your inbox; you should
+see your own copy") and how the recipient verifies the message isn't a
+random transactional email ("oh, this is from $sender").
+
+### Body (suggested copy — adjust to whatever brand voice the api-server team prefers)
+
+```
+hey,
+
+{sender_email} just ran a failproofai audit on their AI coding agent and
+the report told them they're "the optimist" — apparently their agent
+retries failed commands with conviction.
+
+(yours probably has a personality too. wanna see what it is?)
+
+audit yours in 30 seconds, no signup required:
+https://befailproof.ai/audit
+
+— failproof team
+```
+
+- Render the sender's email inline (only place the recipient sees it
+  explicitly aside from `Cc`).
+- The URL is fixed for now; later we may want a referral-tracked variant
+  like `https://befailproof.ai/audit?ref=<sender_user_id>` if/when we wire
+  perks fulfillment.
+
+### One message per recipient
+
+Send N separate emails, not one to N addresses. Reasons:
+
+1. **Privacy.** Bob shouldn't see Alice's email.
+2. **Per-recipient bounces.** Async bounces from the provider tag the
+   specific recipient that failed, not the whole batch.
+3. **Reply-To routing.** The sender's `Reply-To` only makes sense per
+   recipient — Alice's reply shouldn't land in Bob's thread.
+
+## Behaviour
+
+### Auth
+
+- Extract sender's `user_id` + `email` from the access-token claims (same
+  flow as `/v0/auth/me`).
+- Sender email is used for `Cc` + `Reply-To` + body template.
+- If the token has no email claim (shouldn't happen, but defense), 401.
+
+### Validation order
+
+1. Token valid + has `email` claim → else 401.
+2. Body is JSON object → else 400 `validation_error`.
+3. `to` is an array → else 400 `validation_error`.
+4. Normalise (lowercase, dedup, regex, strip sender) → reject 400
+   `validation_error` with `message: "no valid recipients"` if the
+   resulting list is empty.
+5. Reject 400 `too_many_recipients` if normalised list > 10.
+
+### Rate limiting
+
+Apply the same per-user invite-send cap that protects the OTP route:
+
+- **Soft cap:** N invites/user/hour. Below the cap, accept and send.
+- **Hard cap:** M invites/user/day. At/above, 429 with `retry_after_secs`.
+
+Recommend `N=30/hr, M=100/day` to start — that's high enough that real
+"share with friends" never hits it, low enough that a compromised account
+can't spam-blast.
+
+### Dispatch
+
+For each normalised recipient:
+
+1. Render the invite template.
+2. Hand to the existing email helper that backs the OTP route.
+3. On synchronous success → push to `sent[]`.
+4. On synchronous rejection (rate-limit, bounce, malformed) → push to
+   `failed[]` and continue with the rest.
+
+Return when all recipients have been attempted. Aggregate timeout: 30s.
+
+### Idempotency / dedupe
+
+Not needed for v1. If the same `(sender, recipient)` pair is hit
+repeatedly, the rate-limiter will eventually 429. Track it in telemetry
+but don't refuse at the route layer.
+
+## Telemetry
+
+Emit one event per invite call:
+
+```
+event:      invite_send_attempted
+properties: { user_id, recipient_count, sent_count, failed_count, duration_ms }
+```
+
+And one per recipient:
+
+```
+event:      invite_dispatched
+properties: { user_id, to_domain, status: "sent" | "failed", failure_reason? }
+```
+
+`to_domain` (not the full email) gives us reach metrics without dumping
+PII into the telemetry sink.
+
+## Non-goals (explicitly out of scope for v1)
+
+- **Invite tracking** — no DB rows for "alice invited bob on $date". The
+  Cc handles "did the invite actually go" verification; entitlement /
+  perks fulfillment is a follow-up spec.
+- **Referral codes** — no `?ref=<user_id>` on the audit URL yet. Add when
+  perks land.
+- **Bounce handling** — async bounces processed via the provider's webhook
+  go to the same place OTP bounces go. No special-case for invites.
+- **Unsubscribe header** — list-unsubscribe is required for cold marketing
+  email but invites are personal (one user → known friends). Add later if
+  deliverability monitoring shows it's needed.
+
+## Reference — what's already shipping in the dashboard
+
+| File | Role |
+|---|---|
+| `app/api/audit/invite/route.ts` | Next.js proxy. POSTs to `/v0/invite` with the user's access token. Validates `to` (regex, dedup, ≤10, strip self) before forwarding. Maps upstream errors to user-friendly HTTP codes. |
+| `lib/auth/api-server-client.ts#sendInvites` | Typed HTTP client wrapper. Returns `{ sent: string[], failed: string[] }`. |
+| `app/audit/_components/invite-dialog.tsx` | Modal UI — textarea for comma/space/newline-separated emails, live valid/invalid counter, ≤10 client-side guard, submit button. |
+| `app/audit/_components/come-back-better-section.tsx` | Wires the `invite a friend` button → opens InviteDialog (if authed) or AuthDialog → InviteDialog (if anon). Progress tracker removed; perks copy now says invites are sent from failproof.ai + Cc'd. |
+
+## Acceptance checklist
+
+For the upstream PR to be considered done:
+
+- [ ] `POST /v0/invite` accepts the request shape above
+- [ ] Sends one email per recipient with the sender Cc'd and Reply-To set
+- [ ] Returns the documented `{sent, failed}` shape
+- [ ] Validates and limits per the contract above
+- [ ] Rate-limited per sender + per day
+- [ ] Telemetry events emitted
+- [ ] Manual smoke: send to two recipients, verify both receive the email
+      and the sender sees the Cc copy in their inbox
+- [ ] Manual smoke: send to a known-invalid address, verify it lands in
+      `failed[]` without blocking the valid recipient
diff --git a/lib/auth/api-server-client.ts b/lib/auth/api-server-client.ts
index ec3ee286..5ee4b298 100644
--- a/lib/auth/api-server-client.ts
+++ b/lib/auth/api-server-client.ts
@@ -239,6 +239,31 @@ export async function cancelReminder(accessToken: string): Promise<void> {
   throw await parseError(res);
 }
 
+export interface InviteSendResult {
+  /** Recipients that were dispatched successfully. */
+  sent: string[];
+  /** Recipients that failed (bad address, bounce, rate-limit, etc.). */
+  failed: string[];
+}
+
+/**
+ * Send invite emails to a batch of friends. The api-server pulls the sender's
+ * email from the access-token claims and Cc's them on every outbound message
+ * so the recipient sees who invited them.
+ *
+ * Contract — see `docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md`.
+ */
+export async function sendInvites(
+  accessToken: string,
+  to: string[],
+): Promise<InviteSendResult> {
+  return postJson<InviteSendResult>(
+    "/v0/invite",
+    { to },
+    { accessToken },
+  );
+}
+
 interface JwtClaims {
   sub: string;
   email: string;

From 9d6f5417b17630876831013462c44e51cf9fbd07 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 04:18:34 -0700
Subject: [PATCH 24/28] docs: update dashboard.mdx + changelog for
 invite-a-friend flow

---
 CHANGELOG.md       | 1 +
 docs/dashboard.mdx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f628eaf4..a114bbc7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@
 
 ### Docs
 - Update `docs/dashboard.mdx`'s `### Audit` section to describe the new 5-section flow (poster + strengths + quirks + how to improve + come back better), replacing the prior 6-section description (identity + show off + strengths + score+leaderboard + findings + prescribed policies+return loop). Calls out the html-to-image swap so the documented behaviour matches what users see when they click `download poster` (#435).
+- Update `docs/dashboard.mdx`'s description of the `come back better` perks card to document the new `invite a friend` flow (modal → `/api/audit/invite` → upstream `/v0/invite` → one email per recipient with sender Cc'd) — replacing the prior "progress bar + invite a friend CTA" description (#435).
 
 ## 0.0.11-beta.8 — 2026-06-11
 
diff --git a/docs/dashboard.mdx b/docs/dashboard.mdx
index a2b866cb..eef06347 100644
--- a/docs/dashboard.mdx
+++ b/docs/dashboard.mdx
@@ -65,7 +65,7 @@ A personality-driven report of how your agent has actually been behaving across
 2. **Strengths** — calm ✓ row list of behaviors your agent already does right, derived from the live audit data (clean tool-call rate, average session length, zero credential leaks, zero retry storms, etc.).
 3. **Quirks** — table of what slipped through, ranked by impact: `time · what slipped + policy that would've caught it · severity pill · recurrence` (new / Nx this wk / recurring).
 4. **How to improve** — calm row list, one per prescribed policy: policy name in white, one-line description, install command + copy button on the right side. An `[install all]` button at the section header copies the combined `failproofai policy add a b c …` command for every prescribed policy.
-5. **Come back better** — two side-by-side cards. Left: set a reminder (`3d` / `7d` / `14d` / `30d` cadence picker; persists through `/api/auth/reminder` once authed). Right: unlock failproof perks — share with 3 friends → unlock pro features for a month (progress bar + `invite a friend` CTA; UI ships, invite tracking + entitlement ships in a follow-up).
+5. **Come back better** — two side-by-side cards. Left: set a reminder (`3d` / `7d` / `14d` / `30d` cadence picker; persists through `/api/auth/reminder` once authed). Right: unlock failproof perks — `invite a friend` opens a modal that takes a comma/space/newline-separated list of friend emails (max 10 per send), POSTs them to `/api/audit/invite`, which forwards to the api-server's `POST /v0/invite`. The api-server sends one email per recipient from `invite@failproof.ai` with the sender Cc'd and `Reply-To` set, so the recipient sees who invited them and the sender gets a copy in their inbox. Anonymous users get routed through the `AuthDialog` first so the sender's email is known before invites go out. Entitlement / perks fulfillment is a follow-up.
 
 Driven by the `failproofai audit` runtime — see [Audit CLI](/cli/audit) for the underlying scan engine, supported flags, and per-transcript cache invariants. The dashboard caches the latest result at `~/.failproofai/audit-dashboard.json` (mode `0600`, single slot, new runs overwrite) so revisits are instant; **both the per-transcript and whole-result caches are rejected on read once they're older than 7 days** so the dashboard never silently serves a week-old result — past the TTL `/audit` falls through to its empty state and prompts a fresh run. Clicking `[ re-audit now ]` near the bottom of the report POSTs `/api/audit/run` with `noCache: true` — re-audit bypasses the per-transcript cache and re-scans every transcript from scratch rather than silently returning the cached result — and the dashboard polls `/api/audit/status` at 1Hz until the run finishes; a sticky pink progress strip pins to the top of the viewport during the run with an elapsed timer, and the fresh result swaps in place on success (no full-page reload; a failed re-audit leaves the prior report intact). On failure the strip turns red with copy keyed off the `RerunError.kind` (`timeout` / `network` / `post_failed`). Empty state (no cache or expired) and zero-sessions state (cache exists but the scan found no transcripts) are surfaced separately.
 

From c564f218047b6a6d3ad8c8680ff4b9a915a35151 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 04:36:36 -0700
Subject: [PATCH 25/28] =?UTF-8?q?fix(audit-invite):=20handle=20401=20?=
 =?UTF-8?q?=E2=86=92=20re-auth,=20sanitize=20upstream=20errors,=20drop=20p?=
 =?UTF-8?q?latform=20spec?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |   3 +-
 app/api/audit/invite/route.ts                 |  14 +-
 .../_components/come-back-better-section.tsx  |   7 +
 app/audit/_components/invite-dialog.tsx       |  20 +-
 .../2026-06-11-platform-invite-endpoint.md    | 224 ------------------
 lib/auth/api-server-client.ts                 |   2 +-
 6 files changed, 36 insertions(+), 234 deletions(-)
 delete mode 100644 docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a114bbc7..faaafd64 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 ## 0.0.11-beta.9 — 2026-06-11
 
 ### Features
-- Add `invite a friend` flow on `/audit#come-back-better`: new `InviteDialog` modal takes a comma/space/newline-separated list of friend emails (validates inline, hard-cap of 10 per submit, dedupes against the sender's own address), POSTs them to the new `/api/audit/invite` Next.js proxy route, which forwards to the api-server's `POST /v0/invite` endpoint with the user's Bearer token. Anonymous users get routed through `AuthDialog` first so we have a sender identity to Cc. Removes the placeholder `1 of 3 invited` perks progress bar — the perks copy now says invites are sent from failproof.ai + Cc'd to you. Spec for the upstream api-server endpoint contract (closed-source `FailproofAI/platform` repo) lives at `docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md` (#435).
+- Add `invite a friend` flow on `/audit#come-back-better`: new `InviteDialog` modal takes a comma/space/newline-separated list of friend emails (validates inline, hard-cap of 10 per submit, dedupes against the sender's own address), POSTs them to the new `/api/audit/invite` Next.js proxy route, which forwards to the api-server's `POST /v0/invite` endpoint with the user's Bearer token. Anonymous users get routed through `AuthDialog` first so we have a sender identity to Cc. Removes the placeholder `1 of 3 invited` perks progress bar — the perks copy now says invites are sent from failproof.ai + Cc'd to you. The upstream `/v0/invite` endpoint contract is handed over to the `FailproofAI/platform` team separately (#435).
 
 ### Fixes
 - Swap the `/audit` poster PNG export from `html2canvas` to `html-to-image`. html2canvas reimplements CSS in JavaScript and was producing broken dashed borders on the poster's outer rule (Canvas's `setLineDash` doesn't connect cleanly at corners) and a stray pink square cutting through the wordmark's "l" (the `/logo.svg` uses an SVG `<mask>` for the "i" character, which html2canvas ignored). `html-to-image` serializes the live DOM into an SVG `<foreignObject>` and rasterizes it through the browser's native rendering engine, so dashed borders, SVG masks, gradients, and font metrics render exactly as they do on screen. Implementation in `app/audit/_components/audit-poster.tsx#captureCardBlob` (#435).
@@ -11,6 +11,7 @@
 - Capture the poster from an off-screen clone instead of the live element. Even with explicit `width`/`height`, the live `.poster` carried its parent's flex context + `margin: 0 auto`, which html-to-image preserved during capture — the content ended up centered inside an oversized canvas, with the poster's left dashed border visible at canvas edge and the right meta clipped. The fix clones the node into a fresh `position: fixed; left: -10000px` wrapper with a fixed width matching `getBoundingClientRect().width`, captures the clone, then removes the wrapper. The clone has no flex parent and no margin auto, so the canvas dimensions match the poster exactly (#435).
 - Drop the `━━` glyph prefix and the amber slipping-count badge (`182` etc.) from every navbar tab. The badge surfaced a number that was already prominent on the audit page itself and the prefix was decorative chrome left over from the brutalist redesign. `Navbar` no longer accepts `auditSlippingCount`; `app/layout.tsx` no longer reads the dashboard cache to derive the count (#435).
 - Correct the CLI binary name in `how-to-improve-section.tsx`'s install commands. The per-policy install row and the `[install all]` bulk command both emitted `failproof policy add <slug>` — the shipped binary is `failproofai`, so a copied command would fail with `command not found`. Updates the three call sites (header docstring, `bulkInstall()`, and the per-row install string), plus the matching example in `docs/dashboard.mdx#Audit` (#435).
+- Address CodeRabbit review on the invite flow: `InviteDialog` now accepts an `onUnauthorized` callback and routes 401 responses back through `AuthDialog` (caller in `come-back-better-section.tsx` re-opens the auth flow) instead of dead-ending in a generic inline error. `/api/audit/invite` no longer forwards raw upstream exception text to either telemetry or the client response — surfaces a stable generic message and logs only the bounded `err.name` so internal hostnames / IPs / payload fragments stay server-side (#435).
 - Address CodeRabbit review on the audit-poster + come-back-better paths. `audit-poster.tsx#handleShare`'s fallback telemetry no longer reports `status: "success"` when `fallbackMethod === "failed"` — share/capture analytics now correctly distinguish error vs. success. `come-back-better-section.tsx#refreshStatus` preserves the prior auth state on transient `/api/auth/status` failures (5xx, network blips) instead of downgrading to `anon` and clearing a valid reminder — it only falls through to `anon` on the very first probe (still `unknown`) so the cadence buttons unlock when the server is unreachable. Adds `:focus-visible` outlines to the new interactive controls (`.poster-share-btn`, `.cadence-btn`, `.invite-btn`, `.install-all-btn`, `.copy-icon-btn`, `.fix-install-btn`) so keyboard navigation has a perceptible focus indicator (#435).
 
 ### Dependencies
diff --git a/app/api/audit/invite/route.ts b/app/api/audit/invite/route.ts
index 423c47bd..3ccd76d1 100644
--- a/app/api/audit/invite/route.ts
+++ b/app/api/audit/invite/route.ts
@@ -13,8 +13,8 @@
  * Validation: max 10 recipients per call, each must look like an email.
  * Anything beyond that gets a 400 and never reaches upstream.
  *
- * Contract for the upstream endpoint lives at
- * `docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md`.
+ * Contract for the upstream endpoint is handed over to the platform team
+ * separately.
  */
 import { NextRequest, NextResponse } from "next/server";
 import { whoAmI } from "@/lib/auth/auth-store";
@@ -162,17 +162,21 @@ export async function POST(req: NextRequest): Promise<NextResponse> {
         { status: httpStatus },
       );
     }
-    const message = err instanceof Error ? err.message : String(err);
+    // Don't surface the raw upstream message to either telemetry or the
+    // client. Network/DNS errors can carry internal hostnames, IPs, or
+    // fragment payload bytes that have no business leaving the proxy.
+    // Log the error name only (bounded) and return a stable generic.
+    const errorName = err instanceof Error ? err.name : "unknown";
     trackEvent("audit_invite_sent", {
       status: "failed",
       source: "dashboard",
       user_id: who.me.id,
       error_code: "upstream_unreachable",
-      error_message: message.slice(0, 200),
+      error_name: errorName.slice(0, 50),
       recipient_count: normalised.length,
     });
     return NextResponse.json(
-      { code: "upstream_unreachable", message: `api-server unreachable: ${message}` },
+      { code: "upstream_unreachable", message: "Invite service is unreachable. Please try again in a moment." },
       { status: 502 },
     );
   }
diff --git a/app/audit/_components/come-back-better-section.tsx b/app/audit/_components/come-back-better-section.tsx
index 3c2b49be..286b5899 100644
--- a/app/audit/_components/come-back-better-section.tsx
+++ b/app/audit/_components/come-back-better-section.tsx
@@ -293,6 +293,13 @@ export function ComeBackBetterSection({ isRunning, onRerun }: Props) {
         open={inviteDialogOpen}
         source="come_back_better_section"
         onClose={() => setInviteDialogOpen(false)}
+        onUnauthorized={() => {
+          // Session expired between probe and submit — flip back to anon
+          // and bounce through the AuthDialog so the user re-auths.
+          setAuthStatus({ kind: "anon" });
+          setReminder(null);
+          setDialogOpen(true);
+        }}
       />
 
       <AuthDialog
diff --git a/app/audit/_components/invite-dialog.tsx b/app/audit/_components/invite-dialog.tsx
index 950999f7..53956ede 100644
--- a/app/audit/_components/invite-dialog.tsx
+++ b/app/audit/_components/invite-dialog.tsx
@@ -20,6 +20,10 @@ interface Props {
   /** Source tag for PostHog so we can split "invited from come-back-better"
    *  from any future entry points. */
   source: string;
+  /** Called when the proxy returns 401 (session expired between probe and
+   *  submit). The parent should re-open the AuthDialog so the user can
+   *  re-authenticate; without this, a 401 dead-ends with an inline error. */
+  onUnauthorized?: () => void;
 }
 
 const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -42,7 +46,7 @@ function parseEmails(input: string): { valid: string[]; invalid: string[] } {
   return { valid, invalid };
 }
 
-export function InviteDialog({ open, onClose, source }: Props): React.ReactElement | null {
+export function InviteDialog({ open, onClose, source, onUnauthorized }: Props): React.ReactElement | null {
   const { capture } = usePostHog();
   const [value, setValue] = useState("");
   const [busy, setBusy] = useState(false);
@@ -106,8 +110,18 @@ export function InviteDialog({ open, onClose, source }: Props): React.ReactEleme
           code?: string;
           message?: string;
         };
+        if (res.status === 401) {
+          // Session expired between probe and submit — route back through auth.
+          // Without this, repeated submits would dead-end with the same 401.
+          if (onUnauthorized) {
+            onClose();
+            onUnauthorized();
+          } else {
+            setError("session expired. please sign in again.");
+          }
+          return;
+        }
         if (!res.ok) {
-          // 401 → caller handles by opening AuthDialog; we still surface inline so the user has feedback.
           const msg = body.message ?? "couldn't send invites.";
           setError(msg);
           return;
@@ -127,7 +141,7 @@ export function InviteDialog({ open, onClose, source }: Props): React.ReactEleme
         setBusy(false);
       }
     },
-    [busy, valid, invalid, capture, source, onClose],
+    [busy, valid, invalid, capture, source, onClose, onUnauthorized],
   );
 
   if (!open) return null;
diff --git a/docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md b/docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md
deleted file mode 100644
index 85d2bd3d..00000000
--- a/docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md
+++ /dev/null
@@ -1,224 +0,0 @@
-# Platform spec — `POST /v0/invite`
-
-**Date:** 2026-06-11
-**Status:** handover — for the `FailproofAI/platform` repo (closed-source api-server, Rust)
-**Companion PR:** `FailproofAI/failproofai#435` — UI + Next.js proxy already shipped
-
-## Goal
-
-Let an authenticated dashboard user send invite emails to a list of friends
-from `failproof.ai` (with the sender Cc'd on every outbound), reusing the
-exact same email-sending infrastructure that backs the OTP flow
-(`POST /v0/auth/login/request`).
-
-The dashboard already ships the UI and the Next.js proxy. As soon as this
-endpoint exists upstream, the `invite a friend` button on
-`/audit#come-back-better` starts dispatching real emails.
-
-## Contract
-
-### Request
-
-```
-POST /v0/invite HTTP/1.1
-Authorization: Bearer <access_token>
-Content-Type: application/json
-
-{
-  "to": ["alice@example.com", "bob@example.org"]
-}
-```
-
-- **Auth:** standard Bearer access token. 401 if missing/invalid.
-- **`to`:** array of email strings. Server should:
-  - lowercase each
-  - drop duplicates
-  - drop entries that don't match a basic email regex
-  - enforce **MAX_RECIPIENTS = 10 per call** (return `400 too_many_recipients`
-    above that — the dashboard pre-validates this but defense-in-depth)
-  - drop the sender's own email if it appears (looked up from token claims)
-
-### Response — `200 OK`
-
-```json
-{
-  "sent":   ["alice@example.com"],
-  "failed": ["bob@example.org"]
-}
-```
-
-- **`sent`:** recipients dispatched to the email provider successfully.
-- **`failed`:** recipients the provider rejected synchronously (malformed,
-  bounced address known from suppression list, rate-limited, etc.). Async
-  bounces don't need to come back through this endpoint.
-
-### Error responses
-
-| Status | Code                  | When |
-|--------|-----------------------|------|
-| 400    | `validation_error`    | body not JSON, missing `to`, no valid recipients after normalisation |
-| 400    | `too_many_recipients` | `to.length > 10` after dedup |
-| 401    | `unauthorized`        | missing / expired token |
-| 429    | `rate_limited`        | per-user invite-send rate cap exceeded; include `retry_after_secs` |
-| 502    | `upstream_unreachable`| email provider down |
-| 5xx    | `internal_error`      | otherwise |
-
-Error body shape matches the existing `/v0/auth/*` routes:
-`{ code: string, message: string, retry_after_secs?: number }`.
-
-## Email composition
-
-The api-server already has an internal `EmailHelper` (or equivalent) that
-sends the OTP email. Add an `InviteTemplate` that uses the same helper.
-
-### Headers
-
-| Header | Value |
-|---|---|
-| `From`     | `invite@failproof.ai` (or whatever sender the OTP flow uses — pick the one with verified DKIM/SPF) |
-| `Reply-To` | sender's email (so replies go to the friend who invited them, not a no-reply inbox) |
-| `To`       | each recipient (one email per recipient — *not* a single message with N To's; otherwise replies + bounces collide and recipients see each other's addresses) |
-| `Cc`       | **sender's email** (from token claims) — so the recipient sees who invited them and the sender gets a copy in their inbox |
-| `Subject`  | `your AI coding agent has a personality. want yours?` |
-
-The Cc requirement is the load-bearing detail — that's how the dashboard
-user gets confidence the invite was sent ("check your inbox; you should
-see your own copy") and how the recipient verifies the message isn't a
-random transactional email ("oh, this is from $sender").
-
-### Body (suggested copy — adjust to whatever brand voice the api-server team prefers)
-
-```
-hey,
-
-{sender_email} just ran a failproofai audit on their AI coding agent and
-the report told them they're "the optimist" — apparently their agent
-retries failed commands with conviction.
-
-(yours probably has a personality too. wanna see what it is?)
-
-audit yours in 30 seconds, no signup required:
-https://befailproof.ai/audit
-
-— failproof team
-```
-
-- Render the sender's email inline (only place the recipient sees it
-  explicitly aside from `Cc`).
-- The URL is fixed for now; later we may want a referral-tracked variant
-  like `https://befailproof.ai/audit?ref=<sender_user_id>` if/when we wire
-  perks fulfillment.
-
-### One message per recipient
-
-Send N separate emails, not one to N addresses. Reasons:
-
-1. **Privacy.** Bob shouldn't see Alice's email.
-2. **Per-recipient bounces.** Async bounces from the provider tag the
-   specific recipient that failed, not the whole batch.
-3. **Reply-To routing.** The sender's `Reply-To` only makes sense per
-   recipient — Alice's reply shouldn't land in Bob's thread.
-
-## Behaviour
-
-### Auth
-
-- Extract sender's `user_id` + `email` from the access-token claims (same
-  flow as `/v0/auth/me`).
-- Sender email is used for `Cc` + `Reply-To` + body template.
-- If the token has no email claim (shouldn't happen, but defense), 401.
-
-### Validation order
-
-1. Token valid + has `email` claim → else 401.
-2. Body is JSON object → else 400 `validation_error`.
-3. `to` is an array → else 400 `validation_error`.
-4. Normalise (lowercase, dedup, regex, strip sender) → reject 400
-   `validation_error` with `message: "no valid recipients"` if the
-   resulting list is empty.
-5. Reject 400 `too_many_recipients` if normalised list > 10.
-
-### Rate limiting
-
-Apply the same per-user invite-send cap that protects the OTP route:
-
-- **Soft cap:** N invites/user/hour. Below the cap, accept and send.
-- **Hard cap:** M invites/user/day. At/above, 429 with `retry_after_secs`.
-
-Recommend `N=30/hr, M=100/day` to start — that's high enough that real
-"share with friends" never hits it, low enough that a compromised account
-can't spam-blast.
-
-### Dispatch
-
-For each normalised recipient:
-
-1. Render the invite template.
-2. Hand to the existing email helper that backs the OTP route.
-3. On synchronous success → push to `sent[]`.
-4. On synchronous rejection (rate-limit, bounce, malformed) → push to
-   `failed[]` and continue with the rest.
-
-Return when all recipients have been attempted. Aggregate timeout: 30s.
-
-### Idempotency / dedupe
-
-Not needed for v1. If the same `(sender, recipient)` pair is hit
-repeatedly, the rate-limiter will eventually 429. Track it in telemetry
-but don't refuse at the route layer.
-
-## Telemetry
-
-Emit one event per invite call:
-
-```
-event:      invite_send_attempted
-properties: { user_id, recipient_count, sent_count, failed_count, duration_ms }
-```
-
-And one per recipient:
-
-```
-event:      invite_dispatched
-properties: { user_id, to_domain, status: "sent" | "failed", failure_reason? }
-```
-
-`to_domain` (not the full email) gives us reach metrics without dumping
-PII into the telemetry sink.
-
-## Non-goals (explicitly out of scope for v1)
-
-- **Invite tracking** — no DB rows for "alice invited bob on $date". The
-  Cc handles "did the invite actually go" verification; entitlement /
-  perks fulfillment is a follow-up spec.
-- **Referral codes** — no `?ref=<user_id>` on the audit URL yet. Add when
-  perks land.
-- **Bounce handling** — async bounces processed via the provider's webhook
-  go to the same place OTP bounces go. No special-case for invites.
-- **Unsubscribe header** — list-unsubscribe is required for cold marketing
-  email but invites are personal (one user → known friends). Add later if
-  deliverability monitoring shows it's needed.
-
-## Reference — what's already shipping in the dashboard
-
-| File | Role |
-|---|---|
-| `app/api/audit/invite/route.ts` | Next.js proxy. POSTs to `/v0/invite` with the user's access token. Validates `to` (regex, dedup, ≤10, strip self) before forwarding. Maps upstream errors to user-friendly HTTP codes. |
-| `lib/auth/api-server-client.ts#sendInvites` | Typed HTTP client wrapper. Returns `{ sent: string[], failed: string[] }`. |
-| `app/audit/_components/invite-dialog.tsx` | Modal UI — textarea for comma/space/newline-separated emails, live valid/invalid counter, ≤10 client-side guard, submit button. |
-| `app/audit/_components/come-back-better-section.tsx` | Wires the `invite a friend` button → opens InviteDialog (if authed) or AuthDialog → InviteDialog (if anon). Progress tracker removed; perks copy now says invites are sent from failproof.ai + Cc'd. |
-
-## Acceptance checklist
-
-For the upstream PR to be considered done:
-
-- [ ] `POST /v0/invite` accepts the request shape above
-- [ ] Sends one email per recipient with the sender Cc'd and Reply-To set
-- [ ] Returns the documented `{sent, failed}` shape
-- [ ] Validates and limits per the contract above
-- [ ] Rate-limited per sender + per day
-- [ ] Telemetry events emitted
-- [ ] Manual smoke: send to two recipients, verify both receive the email
-      and the sender sees the Cc copy in their inbox
-- [ ] Manual smoke: send to a known-invalid address, verify it lands in
-      `failed[]` without blocking the valid recipient
diff --git a/lib/auth/api-server-client.ts b/lib/auth/api-server-client.ts
index 5ee4b298..7dc8e752 100644
--- a/lib/auth/api-server-client.ts
+++ b/lib/auth/api-server-client.ts
@@ -251,7 +251,7 @@ export interface InviteSendResult {
  * email from the access-token claims and Cc's them on every outbound message
  * so the recipient sees who invited them.
  *
- * Contract — see `docs/superpowers/specs/2026-06-11-platform-invite-endpoint.md`.
+ * Contract is handed over to the platform team separately.
  */
 export async function sendInvites(
   accessToken: string,

From a28539af75b317b60be7995299e1e60de58944a2 Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 06:54:13 -0700
Subject: [PATCH 26/28] =?UTF-8?q?style(projects):=20rebuild=20ProjectList?=
 =?UTF-8?q?=20with=20calm=20chrome=20=E2=80=94=20sharp=20borders,=20mono,?=
 =?UTF-8?q?=20dim=20labels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                               |   1 +
 __tests__/components/project-list.test.tsx |  20 +-
 app/components/project-list.tsx            | 369 ++++++++++-----------
 app/globals.css                            | 180 ++++++++++
 4 files changed, 360 insertions(+), 210 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index faaafd64..61973feb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - Capture the poster from an off-screen clone instead of the live element. Even with explicit `width`/`height`, the live `.poster` carried its parent's flex context + `margin: 0 auto`, which html-to-image preserved during capture — the content ended up centered inside an oversized canvas, with the poster's left dashed border visible at canvas edge and the right meta clipped. The fix clones the node into a fresh `position: fixed; left: -10000px` wrapper with a fixed width matching `getBoundingClientRect().width`, captures the clone, then removes the wrapper. The clone has no flex parent and no margin auto, so the canvas dimensions match the poster exactly (#435).
 - Drop the `━━` glyph prefix and the amber slipping-count badge (`182` etc.) from every navbar tab. The badge surfaced a number that was already prominent on the audit page itself and the prefix was decorative chrome left over from the brutalist redesign. `Navbar` no longer accepts `auditSlippingCount`; `app/layout.tsx` no longer reads the dashboard cache to derive the count (#435).
 - Correct the CLI binary name in `how-to-improve-section.tsx`'s install commands. The per-policy install row and the `[install all]` bulk command both emitted `failproof policy add <slug>` — the shipped binary is `failproofai`, so a copied command would fail with `command not found`. Updates the three call sites (header docstring, `bulkInstall()`, and the per-row install string), plus the matching example in `docs/dashboard.mdx#Audit` (#435).
+- Calm the `/projects` page chrome. `ProjectList` was still rendering the older "modern SaaS dashboard" look — `rounded-md/lg` cards + chips, bold capitalized labels (`Filter by:`, `Search Keywords:`, `Custom Range:`), `bg-primary` filled active filter chip, and Tailwind utility classes throughout. Rebuilt with sharp 1px borders (no radius), dim small-caps labels (`filter by` / `search` / `range` / `cli`), pink-outlined active chip, and JetBrains Mono throughout. The folder icon goes from `text-primary` colored to dim, results count switches to `// showing N–M of K projects` voice, and the keyword chips use the calm green pill style matching the audit page's quirks list. New CSS lives in `app/globals.css` under the `/projects` block; tests updated to match the new copy / casing (#435).
 - Address CodeRabbit review on the invite flow: `InviteDialog` now accepts an `onUnauthorized` callback and routes 401 responses back through `AuthDialog` (caller in `come-back-better-section.tsx` re-opens the auth flow) instead of dead-ending in a generic inline error. `/api/audit/invite` no longer forwards raw upstream exception text to either telemetry or the client response — surfaces a stable generic message and logs only the bounded `err.name` so internal hostnames / IPs / payload fragments stay server-side (#435).
 - Address CodeRabbit review on the audit-poster + come-back-better paths. `audit-poster.tsx#handleShare`'s fallback telemetry no longer reports `status: "success"` when `fallbackMethod === "failed"` — share/capture analytics now correctly distinguish error vs. success. `come-back-better-section.tsx#refreshStatus` preserves the prior auth state on transient `/api/auth/status` failures (5xx, network blips) instead of downgrading to `anon` and clearing a valid reminder — it only falls through to `anon` on the very first probe (still `unknown`) so the cadence buttons unlock when the server is unreachable. Adds `:focus-visible` outlines to the new interactive controls (`.poster-share-btn`, `.cadence-btn`, `.invite-btn`, `.install-all-btn`, `.copy-icon-btn`, `.fix-install-btn`) so keyboard navigation has a perceptible focus indicator (#435).
 
diff --git a/__tests__/components/project-list.test.tsx b/__tests__/components/project-list.test.tsx
index 36d5d32a..e75ca007 100644
--- a/__tests__/components/project-list.test.tsx
+++ b/__tests__/components/project-list.test.tsx
@@ -46,7 +46,7 @@ describe("ProjectList", () => {
   it("renders project folders in table", () => {
     const folders = makeFolders(3);
     render(<ProjectList folders={folders} />);
-    expect(screen.getByText("Agent Root")).toBeInTheDocument();
+    expect(screen.getByText(/agent root/i)).toBeInTheDocument();
     expect(screen.getByText("/home/user/project0")).toBeInTheDocument();
     expect(screen.getByText("/home/user/project1")).toBeInTheDocument();
     expect(screen.getByText("/home/user/project2")).toBeInTheDocument();
@@ -220,7 +220,7 @@ describe("ProjectList", () => {
 
   it("shows empty state when no folders", () => {
     render(<ProjectList folders={[]} />);
-    expect(screen.getByText("No projects found")).toBeInTheDocument();
+    expect(screen.getByText(/no projects found/i)).toBeInTheDocument();
   });
 
   it("keyword filtering with / to - normalization", async () => {
@@ -228,16 +228,16 @@ describe("ProjectList", () => {
     const folders = makeFolders(3);
     render(<ProjectList folders={folders} />);
 
-    const input = screen.getByPlaceholderText("Enter keyword and press Enter");
+    const input = screen.getByPlaceholderText("type a keyword and press Enter");
     await user.type(input, "/home/user/project0{Enter}");
 
-    expect(screen.getByText(/Showing 1-1 of 1 projects/)).toBeInTheDocument();
+    expect(screen.getByText(/showing 1.1 of 1 projects/i)).toBeInTheDocument();
   });
 
   it("pagination (25 per page)", () => {
     const folders = makeFolders(30);
     render(<ProjectList folders={folders} />);
-    expect(screen.getByText(/Showing 1-25 of 30 projects/)).toBeInTheDocument();
+    expect(screen.getByText(/showing 1.25 of 30 projects/i)).toBeInTheDocument();
   });
 
   it("CLI filter dropdown shows All CLIs + each known CLI label", () => {
@@ -245,7 +245,7 @@ describe("ProjectList", () => {
     const select = screen.getByLabelText("Filter by CLI") as HTMLSelectElement;
     const optionLabels = Array.from(select.querySelectorAll("option")).map((o) => o.textContent);
     expect(optionLabels).toEqual([
-      "All CLIs",
+      "all clis",
       "Claude Code",
       "OpenAI Codex",
       "GitHub Copilot",
@@ -285,9 +285,9 @@ describe("ProjectList", () => {
       },
     ];
     render(<ProjectList folders={mixed} />);
-    expect(screen.getByText(/Showing 1-3 of 3 projects/)).toBeInTheDocument();
+    expect(screen.getByText(/showing 1.3 of 3 projects/i)).toBeInTheDocument();
     await user.selectOptions(screen.getByLabelText("Filter by CLI"), "copilot");
-    expect(screen.getByText(/Showing 1-1 of 1 projects/)).toBeInTheDocument();
+    expect(screen.getByText(/showing 1.1 of 1 projects/i)).toBeInTheDocument();
     expect(screen.queryByText("/home/u/claude-only")).not.toBeInTheDocument();
     expect(screen.queryByText("/home/u/codex-only")).not.toBeInTheDocument();
     expect(screen.getByText("/home/u/copilot-only")).toBeInTheDocument();
@@ -314,9 +314,9 @@ describe("ProjectList", () => {
     render(<ProjectList folders={mixed} />);
     const select = screen.getByLabelText("Filter by CLI");
     await user.selectOptions(select, "claude");
-    expect(screen.getByText(/Showing 1-1 of 1 projects/)).toBeInTheDocument();
+    expect(screen.getByText(/showing 1.1 of 1 projects/i)).toBeInTheDocument();
     await user.selectOptions(select, "");
-    expect(screen.getByText(/Showing 1-2 of 2 projects/)).toBeInTheDocument();
+    expect(screen.getByText(/showing 1.2 of 2 projects/i)).toBeInTheDocument();
   });
 
   it("CLI filter matches multi-CLI rows", async () => {
diff --git a/app/components/project-list.tsx b/app/components/project-list.tsx
index cc37837d..e21ec806 100644
--- a/app/components/project-list.tsx
+++ b/app/components/project-list.tsx
@@ -136,224 +136,193 @@ export default function ProjectList({ folders }: ProjectListProps) {
   const paginatedFolders = filteredFolders.slice(startIndex, endIndex);
 
   return (
-    <div className="space-y-4">
+    <div className="project-list">
       {/* Filter Bar */}
-      <div className="bg-card border border-border rounded-lg p-4">
-        <div className="flex flex-col gap-4">
-          {/* Preset Filters + CLI filter */}
-          <div className="flex flex-wrap items-center gap-2">
-            <span className="text-sm font-medium text-foreground">Filter by:</span>
-            {FILTER_PRESETS.map((preset) => (
-              <button
-                key={preset.value}
-                onClick={() => handlePresetChange(preset.value)}
-                className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
-                  filterPreset === preset.value
-                    ? "bg-primary text-primary-foreground"
-                    : "bg-muted text-muted-foreground hover:bg-muted/80"
-                }`}
-              >
-                {preset.label}
-              </button>
-            ))}
-
-            <span className="ml-2 text-sm font-medium text-foreground">CLI:</span>
-            <select
-              aria-label="Filter by CLI"
-              value={filterCli}
-              onChange={(e) => {
-                const v = e.target.value;
-                setFilterCli(v === "" || isKnownCli(v) ? v : "");
-              }}
-              className="px-2 py-1.5 text-sm bg-input border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
+      <div className="project-filter-bar">
+        {/* Preset Filters + CLI filter */}
+        <div className="project-filter-row">
+          <span className="project-filter-label">filter by</span>
+          {FILTER_PRESETS.map((preset) => (
+            <button
+              key={preset.value}
+              type="button"
+              onClick={() => handlePresetChange(preset.value)}
+              className={`project-chip${filterPreset === preset.value ? " on" : ""}`}
             >
-              <option value="">All CLIs</option>
-              {KNOWN_CLI_IDS.map((id) => (
-                <option key={id} value={id}>
-                  {getCliLabel(id)}
-                </option>
-              ))}
-            </select>
-          </div>
+              {preset.label}
+            </button>
+          ))}
 
-          {/* Keyword Search */}
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center gap-2">
-              <Search className="w-4 h-4 text-muted-foreground" />
-              <span className="text-sm font-medium text-foreground">Search Keywords:</span>
-            </div>
-            <div className="flex flex-wrap items-center gap-2">
-              {/* Keyword Input */}
-              <div className="flex items-center gap-2">
-                <input
-                  type="text"
-                  value={keywordInput}
-                  onChange={(e) => setKeywordInput(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      e.preventDefault();
-                      addKeyword(keywordInput);
-                    }
-                  }}
-                  placeholder="Enter keyword and press Enter"
-                  className="px-3 py-2 text-sm bg-input border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all hover:border-primary/50 w-[250px]"
-                  aria-label="Add keyword"
-                />
-                <button
-                  onClick={() => addKeyword(keywordInput)}
-                  className="px-3 py-2 text-sm bg-muted text-muted-foreground hover:bg-muted/80 rounded-md transition-colors"
-                  aria-label="Add keyword"
-                >
-                  Add
-                </button>
-              </div>
-              {/* Keyword Chips */}
-              {keywords.length > 0 && (
-                <div className="flex flex-wrap items-center gap-2">
-                  {keywords.map((keyword, index) => (
-                    <div
-                      key={index}
-                      className="flex items-center gap-1.5 px-3 py-1.5 bg-muted text-muted-foreground rounded-md text-sm"
-                    >
-                      <span>{keyword}</span>
-                      <button
-                        onClick={() => removeKeyword(index)}
-                        className="hover:text-foreground transition-colors p-0.5 rounded hover:bg-muted/80"
-                        aria-label={`Remove keyword ${keyword}`}
-                      >
-                        <X className="w-3.5 h-3.5" />
-                      </button>
-                    </div>
-                  ))}
+          <span className="project-filter-label" style={{ marginLeft: 12 }}>cli</span>
+          <select
+            aria-label="Filter by CLI"
+            value={filterCli}
+            onChange={(e) => {
+              const v = e.target.value;
+              setFilterCli(v === "" || isKnownCli(v) ? v : "");
+            }}
+            className="project-select"
+          >
+            <option value="">all clis</option>
+            {KNOWN_CLI_IDS.map((id) => (
+              <option key={id} value={id}>
+                {getCliLabel(id)}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Keyword Search */}
+        <div className="project-filter-row">
+          <span className="project-filter-label">
+            <Search className="project-filter-icon" aria-hidden="true" />
+            search
+          </span>
+          <input
+            type="text"
+            value={keywordInput}
+            onChange={(e) => setKeywordInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                addKeyword(keywordInput);
+              }
+            }}
+            placeholder="type a keyword and press Enter"
+            className="project-input"
+            aria-label="Add keyword"
+          />
+          <button
+            type="button"
+            onClick={() => addKeyword(keywordInput)}
+            className="project-chip"
+            aria-label="Add keyword"
+          >
+            add
+          </button>
+          {keywords.length > 0 && (
+            <>
+              {keywords.map((keyword, index) => (
+                <span key={index} className="project-keyword-chip">
+                  {keyword}
                   <button
-                    onClick={clearKeywords}
-                    className="px-2 py-1.5 text-xs bg-muted text-muted-foreground hover:bg-muted/80 rounded-md transition-colors"
-                    aria-label="Clear all keywords"
+                    type="button"
+                    onClick={() => removeKeyword(index)}
+                    className="project-keyword-x"
+                    aria-label={`Remove keyword ${keyword}`}
                   >
-                    Clear all
+                    <X className="project-filter-icon" aria-hidden="true" />
                   </button>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Custom Date Range */}
-          <div className="flex flex-wrap items-center gap-4">
-            <span className="text-sm font-medium text-foreground">Custom Range:</span>
-            <div className="flex items-center gap-2">
-              <DatePickerInput
-                id="date-from"
-                value={dateRange.from}
-                onChange={(v) => handleDateRangeChange("from", v)}
-                aria-label="Filter from date"
-              />
-              <span className="text-muted-foreground">to</span>
-              <DatePickerInput
-                id="date-to"
-                value={dateRange.to}
-                onChange={(v) => handleDateRangeChange("to", v)}
-                aria-label="Filter to date"
-              />
-            </div>
-            {(filterPreset !== "all" || dateRange.from !== null || dateRange.to !== null || keywords.length > 0 || filterCli !== "") && (
+                </span>
+              ))}
               <button
-                onClick={clearFilters}
-                className="px-3 py-2 text-sm bg-muted text-muted-foreground hover:bg-muted/80 rounded-md transition-colors"
+                type="button"
+                onClick={clearKeywords}
+                className="project-chip"
+                aria-label="Clear all keywords"
               >
-                Clear
+                clear all
               </button>
-            )}
-          </div>
+            </>
+          )}
+        </div>
 
-          {/* Results Count */}
-          <div className="text-sm text-muted-foreground">
-            {filteredFolders.length === 0 ? (
-              <>No projects found</>
-            ) : (
-              <>
-                Showing {startIndex + 1}-{endIndex} of {filteredFolders.length} projects
-                {filteredFolders.length !== normalizedFolders.length && (
-                  <span className="ml-1">
-                    (filtered from {normalizedFolders.length} total)
-                  </span>
-                )}
-                {keywords.length > 0 && (
-                  <span className="ml-1">
-                    with {keywords.length} keyword{keywords.length !== 1 ? "s" : ""}
-                  </span>
-                )}
-              </>
-            )}
-          </div>
+        {/* Custom Date Range */}
+        <div className="project-filter-row">
+          <span className="project-filter-label">range</span>
+          <DatePickerInput
+            id="date-from"
+            value={dateRange.from}
+            onChange={(v) => handleDateRangeChange("from", v)}
+            aria-label="Filter from date"
+          />
+          <span className="project-range-sep">to</span>
+          <DatePickerInput
+            id="date-to"
+            value={dateRange.to}
+            onChange={(v) => handleDateRangeChange("to", v)}
+            aria-label="Filter to date"
+          />
+          {(filterPreset !== "all" || dateRange.from !== null || dateRange.to !== null || keywords.length > 0 || filterCli !== "") && (
+            <button
+              type="button"
+              onClick={clearFilters}
+              className="project-chip"
+              style={{ marginLeft: "auto" }}
+            >
+              clear
+            </button>
+          )}
+        </div>
+
+        {/* Results Count */}
+        <div className="project-results-count">
+          {filteredFolders.length === 0 ? (
+            <>{"// no projects found"}</>
+          ) : (
+            <>
+              {"// showing"} {startIndex + 1}–{endIndex} of {filteredFolders.length} projects
+              {filteredFolders.length !== normalizedFolders.length && (
+                <span> · filtered from {normalizedFolders.length}</span>
+              )}
+              {keywords.length > 0 && (
+                <span> · {keywords.length} keyword{keywords.length !== 1 ? "s" : ""}</span>
+              )}
+            </>
+          )}
         </div>
       </div>
 
       {/* Project Table */}
-      <div className="bg-card border border-border rounded-lg overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-border bg-muted/50">
-                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground w-12">
-                  <span className="sr-only">Icon</span>
-                </th>
-                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground max-w-md">
-                  Agent Root
-                </th>
-                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground hidden md:table-cell">
-                  Path
-                </th>
-                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground">
-                  Last Modified
-                </th>
+      <div className="project-table-wrap">
+        <table className="project-table">
+          <thead>
+            <tr>
+              <th scope="col" className="project-th project-th-icon">
+                <span className="sr-only">Icon</span>
+              </th>
+              <th scope="col" className="project-th">agent root</th>
+              <th scope="col" className="project-th project-th-path">path</th>
+              <th scope="col" className="project-th">last modified</th>
+            </tr>
+          </thead>
+          <tbody>
+            {paginatedFolders.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="project-td project-empty">
+                  {"// no projects match the selected filter."}
+                </td>
               </tr>
-            </thead>
-            <tbody>
-              {paginatedFolders.length === 0 ? (
-                <tr>
-                  <td colSpan={4} className="px-4 py-8 text-center text-muted-foreground">
-                    No projects found matching the selected filter.
+            ) : (
+              paginatedFolders.map((folder) => (
+                <tr key={folder.name} className="project-row">
+                  <td className="project-td project-td-icon">
+                    <Folder className="project-folder-icon" aria-hidden="true" />
+                  </td>
+                  <td className="project-td project-td-name">
+                    <Link
+                      href={`/project/${encodeURIComponent(folder.name)}`}
+                      className="project-link"
+                    >
+                      {decodeFolderName(folder.name)}
+                    </Link>
+                    {folder.cli.map((c) => (
+                      <CliBadge key={c} cli={c} />
+                    ))}
+                  </td>
+                  <td className="project-td project-td-path">{folder.path}</td>
+                  <td className="project-td project-td-date">
+                    <DateDisplay
+                      date={folder.lastModified}
+                      formatted={folder.lastModifiedFormatted}
+                    />
                   </td>
                 </tr>
-              ) : (
-                paginatedFolders.map((folder) => (
-                  <tr
-                    key={folder.name}
-                    className="border-b border-border hover:bg-muted/50 transition-colors"
-                  >
-                    <td className="px-4 py-3">
-                      <Folder className="w-5 h-5 text-primary" />
-                    </td>
-                    <td className="px-4 py-3 max-w-md">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <Link
-                          href={`/project/${encodeURIComponent(folder.name)}`}
-                          className="font-semibold text-foreground hover:text-primary transition-colors break-words break-all inline-block max-w-full"
-                        >
-                          {decodeFolderName(folder.name)}
-                        </Link>
-                        {folder.cli.map((c) => (
-                          <CliBadge key={c} cli={c} />
-                        ))}
-                      </div>
-                    </td>
-                    <td className="px-4 py-3 text-sm text-muted-foreground hidden md:table-cell truncate max-w-md">
-                      {folder.path}
-                    </td>
-                    <td className="px-4 py-3 text-sm text-muted-foreground">
-                      <DateDisplay
-                        date={folder.lastModified}
-                        formatted={folder.lastModifiedFormatted}
-                      />
-                    </td>
-                  </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
+              ))
+            )}
+          </tbody>
+        </table>
 
-        {/* Pagination Controls */}
         {filteredFolders.length > 0 && (
           <PaginationControls
             currentPage={currentPage}
diff --git a/app/globals.css b/app/globals.css
index 2b5c8f1b..10d8c02c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -635,3 +635,183 @@ input[type="date"] { color-scheme: dark; }
     transition: none;
   }
 }
+
+/* ============================================================
+   /projects — calm filter bar + table. Sharp 1px borders, no
+   rounded corners, mono fonts, dim labels.
+   ============================================================ */
+
+.project-list { display: flex; flex-direction: column; gap: 16px; font-family: var(--font-mono); }
+
+.project-filter-bar {
+  display: flex; flex-direction: column;
+  gap: 12px;
+  padding: 16px 18px;
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+}
+
+.project-filter-row {
+  display: flex; flex-wrap: wrap; align-items: center;
+  gap: 8px;
+}
+
+.project-filter-label {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--dim);
+  margin-right: 4px;
+}
+.project-filter-icon { width: 12px; height: 12px; }
+
+.project-chip {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--ink-2);
+  background: transparent;
+  border: 1px solid var(--line-2);
+  padding: 5px 10px;
+  cursor: pointer;
+  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
+}
+.project-chip:hover {
+  border-color: var(--accent-pink);
+  color: var(--accent-pink);
+}
+.project-chip.on {
+  border-color: var(--accent-pink);
+  color: var(--accent-pink);
+  background: var(--accent-pink-bg);
+}
+.project-chip:focus-visible {
+  outline: 2px solid var(--accent-pink);
+  outline-offset: 2px;
+}
+
+.project-select {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  color: var(--ink);
+  background: var(--bg);
+  border: 1px solid var(--line-2);
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+.project-input {
+  flex: 1 1 240px;
+  min-width: 200px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 0.01em;
+  color: var(--ink);
+  background: var(--bg);
+  border: 1px solid var(--line-2);
+  padding: 7px 10px;
+  outline: none;
+  transition: border-color 140ms ease;
+}
+.project-input:focus { border-color: var(--accent-pink); }
+.project-input::placeholder { color: var(--dim); }
+
+.project-keyword-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--accent-green);
+  background: var(--accent-green-bg);
+  border: 1px solid rgba(102, 209, 181, 0.4);
+  padding: 4px 8px 4px 10px;
+}
+.project-keyword-x {
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: var(--accent-green);
+  cursor: pointer;
+}
+.project-keyword-x:hover { color: var(--accent-pink); }
+
+.project-range-sep {
+  font-size: 11px; color: var(--dim);
+  letter-spacing: 0.04em;
+}
+
+.project-results-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--dim);
+  letter-spacing: 0.02em;
+  margin-top: 4px;
+}
+
+.project-table-wrap {
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+  overflow-x: auto;
+}
+.project-table { width: 100%; border-collapse: collapse; }
+.project-th {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--dim);
+  font-weight: 500;
+  text-align: left;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--line);
+  background: var(--bg);
+}
+.project-th-icon { width: 36px; }
+.project-th-path { display: none; }
+@media (min-width: 768px) {
+  .project-th-path { display: table-cell; }
+}
+
+.project-row { border-bottom: 1px solid var(--line); transition: background-color 140ms ease; }
+.project-row:last-child { border-bottom: none; }
+.project-row:hover { background: rgba(228, 88, 124, 0.03); }
+
+.project-td {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--ink-2);
+  padding: 12px 16px;
+  vertical-align: middle;
+}
+.project-td-icon { width: 36px; }
+.project-folder-icon { width: 14px; height: 14px; color: var(--dim); }
+
+.project-td-name {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
+  max-width: 420px;
+}
+.project-link {
+  color: var(--ink);
+  font-size: 13px;
+  letter-spacing: 0.01em;
+  text-decoration: none;
+  word-break: break-all;
+}
+.project-link:hover { color: var(--accent-pink); }
+
+.project-td-path { display: none; color: var(--dim); font-size: 11px; word-break: break-all; }
+@media (min-width: 768px) {
+  .project-td-path { display: table-cell; }
+}
+
+.project-td-date { font-size: 11px; color: var(--dim); white-space: nowrap; }
+
+.project-empty {
+  text-align: center;
+  font-size: 12px;
+  color: var(--dim);
+  padding: 32px 16px;
+}

From 149e570193b234e50274bef85e83494e27858b2c Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 07:13:50 -0700
Subject: [PATCH 27/28] =?UTF-8?q?Revert=20"style(projects):=20rebuild=20Pr?=
 =?UTF-8?q?ojectList=20with=20calm=20chrome=20=E2=80=94=20sharp=20borders,?=
 =?UTF-8?q?=20mono,=20dim=20labels"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit a28539af75b317b60be7995299e1e60de58944a2.
---
 CHANGELOG.md                               |   1 -
 __tests__/components/project-list.test.tsx |  20 +-
 app/components/project-list.tsx            | 369 +++++++++++----------
 app/globals.css                            | 180 ----------
 4 files changed, 210 insertions(+), 360 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 61973feb..faaafd64 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,6 @@
 - Capture the poster from an off-screen clone instead of the live element. Even with explicit `width`/`height`, the live `.poster` carried its parent's flex context + `margin: 0 auto`, which html-to-image preserved during capture — the content ended up centered inside an oversized canvas, with the poster's left dashed border visible at canvas edge and the right meta clipped. The fix clones the node into a fresh `position: fixed; left: -10000px` wrapper with a fixed width matching `getBoundingClientRect().width`, captures the clone, then removes the wrapper. The clone has no flex parent and no margin auto, so the canvas dimensions match the poster exactly (#435).
 - Drop the `━━` glyph prefix and the amber slipping-count badge (`182` etc.) from every navbar tab. The badge surfaced a number that was already prominent on the audit page itself and the prefix was decorative chrome left over from the brutalist redesign. `Navbar` no longer accepts `auditSlippingCount`; `app/layout.tsx` no longer reads the dashboard cache to derive the count (#435).
 - Correct the CLI binary name in `how-to-improve-section.tsx`'s install commands. The per-policy install row and the `[install all]` bulk command both emitted `failproof policy add <slug>` — the shipped binary is `failproofai`, so a copied command would fail with `command not found`. Updates the three call sites (header docstring, `bulkInstall()`, and the per-row install string), plus the matching example in `docs/dashboard.mdx#Audit` (#435).
-- Calm the `/projects` page chrome. `ProjectList` was still rendering the older "modern SaaS dashboard" look — `rounded-md/lg` cards + chips, bold capitalized labels (`Filter by:`, `Search Keywords:`, `Custom Range:`), `bg-primary` filled active filter chip, and Tailwind utility classes throughout. Rebuilt with sharp 1px borders (no radius), dim small-caps labels (`filter by` / `search` / `range` / `cli`), pink-outlined active chip, and JetBrains Mono throughout. The folder icon goes from `text-primary` colored to dim, results count switches to `// showing N–M of K projects` voice, and the keyword chips use the calm green pill style matching the audit page's quirks list. New CSS lives in `app/globals.css` under the `/projects` block; tests updated to match the new copy / casing (#435).
 - Address CodeRabbit review on the invite flow: `InviteDialog` now accepts an `onUnauthorized` callback and routes 401 responses back through `AuthDialog` (caller in `come-back-better-section.tsx` re-opens the auth flow) instead of dead-ending in a generic inline error. `/api/audit/invite` no longer forwards raw upstream exception text to either telemetry or the client response — surfaces a stable generic message and logs only the bounded `err.name` so internal hostnames / IPs / payload fragments stay server-side (#435).
 - Address CodeRabbit review on the audit-poster + come-back-better paths. `audit-poster.tsx#handleShare`'s fallback telemetry no longer reports `status: "success"` when `fallbackMethod === "failed"` — share/capture analytics now correctly distinguish error vs. success. `come-back-better-section.tsx#refreshStatus` preserves the prior auth state on transient `/api/auth/status` failures (5xx, network blips) instead of downgrading to `anon` and clearing a valid reminder — it only falls through to `anon` on the very first probe (still `unknown`) so the cadence buttons unlock when the server is unreachable. Adds `:focus-visible` outlines to the new interactive controls (`.poster-share-btn`, `.cadence-btn`, `.invite-btn`, `.install-all-btn`, `.copy-icon-btn`, `.fix-install-btn`) so keyboard navigation has a perceptible focus indicator (#435).
 
diff --git a/__tests__/components/project-list.test.tsx b/__tests__/components/project-list.test.tsx
index e75ca007..36d5d32a 100644
--- a/__tests__/components/project-list.test.tsx
+++ b/__tests__/components/project-list.test.tsx
@@ -46,7 +46,7 @@ describe("ProjectList", () => {
   it("renders project folders in table", () => {
     const folders = makeFolders(3);
     render(<ProjectList folders={folders} />);
-    expect(screen.getByText(/agent root/i)).toBeInTheDocument();
+    expect(screen.getByText("Agent Root")).toBeInTheDocument();
     expect(screen.getByText("/home/user/project0")).toBeInTheDocument();
     expect(screen.getByText("/home/user/project1")).toBeInTheDocument();
     expect(screen.getByText("/home/user/project2")).toBeInTheDocument();
@@ -220,7 +220,7 @@ describe("ProjectList", () => {
 
   it("shows empty state when no folders", () => {
     render(<ProjectList folders={[]} />);
-    expect(screen.getByText(/no projects found/i)).toBeInTheDocument();
+    expect(screen.getByText("No projects found")).toBeInTheDocument();
   });
 
   it("keyword filtering with / to - normalization", async () => {
@@ -228,16 +228,16 @@ describe("ProjectList", () => {
     const folders = makeFolders(3);
     render(<ProjectList folders={folders} />);
 
-    const input = screen.getByPlaceholderText("type a keyword and press Enter");
+    const input = screen.getByPlaceholderText("Enter keyword and press Enter");
     await user.type(input, "/home/user/project0{Enter}");
 
-    expect(screen.getByText(/showing 1.1 of 1 projects/i)).toBeInTheDocument();
+    expect(screen.getByText(/Showing 1-1 of 1 projects/)).toBeInTheDocument();
   });
 
   it("pagination (25 per page)", () => {
     const folders = makeFolders(30);
     render(<ProjectList folders={folders} />);
-    expect(screen.getByText(/showing 1.25 of 30 projects/i)).toBeInTheDocument();
+    expect(screen.getByText(/Showing 1-25 of 30 projects/)).toBeInTheDocument();
   });
 
   it("CLI filter dropdown shows All CLIs + each known CLI label", () => {
@@ -245,7 +245,7 @@ describe("ProjectList", () => {
     const select = screen.getByLabelText("Filter by CLI") as HTMLSelectElement;
     const optionLabels = Array.from(select.querySelectorAll("option")).map((o) => o.textContent);
     expect(optionLabels).toEqual([
-      "all clis",
+      "All CLIs",
       "Claude Code",
       "OpenAI Codex",
       "GitHub Copilot",
@@ -285,9 +285,9 @@ describe("ProjectList", () => {
       },
     ];
     render(<ProjectList folders={mixed} />);
-    expect(screen.getByText(/showing 1.3 of 3 projects/i)).toBeInTheDocument();
+    expect(screen.getByText(/Showing 1-3 of 3 projects/)).toBeInTheDocument();
     await user.selectOptions(screen.getByLabelText("Filter by CLI"), "copilot");
-    expect(screen.getByText(/showing 1.1 of 1 projects/i)).toBeInTheDocument();
+    expect(screen.getByText(/Showing 1-1 of 1 projects/)).toBeInTheDocument();
     expect(screen.queryByText("/home/u/claude-only")).not.toBeInTheDocument();
     expect(screen.queryByText("/home/u/codex-only")).not.toBeInTheDocument();
     expect(screen.getByText("/home/u/copilot-only")).toBeInTheDocument();
@@ -314,9 +314,9 @@ describe("ProjectList", () => {
     render(<ProjectList folders={mixed} />);
     const select = screen.getByLabelText("Filter by CLI");
     await user.selectOptions(select, "claude");
-    expect(screen.getByText(/showing 1.1 of 1 projects/i)).toBeInTheDocument();
+    expect(screen.getByText(/Showing 1-1 of 1 projects/)).toBeInTheDocument();
     await user.selectOptions(select, "");
-    expect(screen.getByText(/showing 1.2 of 2 projects/i)).toBeInTheDocument();
+    expect(screen.getByText(/Showing 1-2 of 2 projects/)).toBeInTheDocument();
   });
 
   it("CLI filter matches multi-CLI rows", async () => {
diff --git a/app/components/project-list.tsx b/app/components/project-list.tsx
index e21ec806..cc37837d 100644
--- a/app/components/project-list.tsx
+++ b/app/components/project-list.tsx
@@ -136,193 +136,224 @@ export default function ProjectList({ folders }: ProjectListProps) {
   const paginatedFolders = filteredFolders.slice(startIndex, endIndex);
 
   return (
-    <div className="project-list">
+    <div className="space-y-4">
       {/* Filter Bar */}
-      <div className="project-filter-bar">
-        {/* Preset Filters + CLI filter */}
-        <div className="project-filter-row">
-          <span className="project-filter-label">filter by</span>
-          {FILTER_PRESETS.map((preset) => (
-            <button
-              key={preset.value}
-              type="button"
-              onClick={() => handlePresetChange(preset.value)}
-              className={`project-chip${filterPreset === preset.value ? " on" : ""}`}
-            >
-              {preset.label}
-            </button>
-          ))}
-
-          <span className="project-filter-label" style={{ marginLeft: 12 }}>cli</span>
-          <select
-            aria-label="Filter by CLI"
-            value={filterCli}
-            onChange={(e) => {
-              const v = e.target.value;
-              setFilterCli(v === "" || isKnownCli(v) ? v : "");
-            }}
-            className="project-select"
-          >
-            <option value="">all clis</option>
-            {KNOWN_CLI_IDS.map((id) => (
-              <option key={id} value={id}>
-                {getCliLabel(id)}
-              </option>
+      <div className="bg-card border border-border rounded-lg p-4">
+        <div className="flex flex-col gap-4">
+          {/* Preset Filters + CLI filter */}
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="text-sm font-medium text-foreground">Filter by:</span>
+            {FILTER_PRESETS.map((preset) => (
+              <button
+                key={preset.value}
+                onClick={() => handlePresetChange(preset.value)}
+                className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+                  filterPreset === preset.value
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-muted text-muted-foreground hover:bg-muted/80"
+                }`}
+              >
+                {preset.label}
+              </button>
             ))}
-          </select>
-        </div>
 
-        {/* Keyword Search */}
-        <div className="project-filter-row">
-          <span className="project-filter-label">
-            <Search className="project-filter-icon" aria-hidden="true" />
-            search
-          </span>
-          <input
-            type="text"
-            value={keywordInput}
-            onChange={(e) => setKeywordInput(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                addKeyword(keywordInput);
-              }
-            }}
-            placeholder="type a keyword and press Enter"
-            className="project-input"
-            aria-label="Add keyword"
-          />
-          <button
-            type="button"
-            onClick={() => addKeyword(keywordInput)}
-            className="project-chip"
-            aria-label="Add keyword"
-          >
-            add
-          </button>
-          {keywords.length > 0 && (
-            <>
-              {keywords.map((keyword, index) => (
-                <span key={index} className="project-keyword-chip">
-                  {keyword}
+            <span className="ml-2 text-sm font-medium text-foreground">CLI:</span>
+            <select
+              aria-label="Filter by CLI"
+              value={filterCli}
+              onChange={(e) => {
+                const v = e.target.value;
+                setFilterCli(v === "" || isKnownCli(v) ? v : "");
+              }}
+              className="px-2 py-1.5 text-sm bg-input border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
+            >
+              <option value="">All CLIs</option>
+              {KNOWN_CLI_IDS.map((id) => (
+                <option key={id} value={id}>
+                  {getCliLabel(id)}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Keyword Search */}
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <Search className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Search Keywords:</span>
+            </div>
+            <div className="flex flex-wrap items-center gap-2">
+              {/* Keyword Input */}
+              <div className="flex items-center gap-2">
+                <input
+                  type="text"
+                  value={keywordInput}
+                  onChange={(e) => setKeywordInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      addKeyword(keywordInput);
+                    }
+                  }}
+                  placeholder="Enter keyword and press Enter"
+                  className="px-3 py-2 text-sm bg-input border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all hover:border-primary/50 w-[250px]"
+                  aria-label="Add keyword"
+                />
+                <button
+                  onClick={() => addKeyword(keywordInput)}
+                  className="px-3 py-2 text-sm bg-muted text-muted-foreground hover:bg-muted/80 rounded-md transition-colors"
+                  aria-label="Add keyword"
+                >
+                  Add
+                </button>
+              </div>
+              {/* Keyword Chips */}
+              {keywords.length > 0 && (
+                <div className="flex flex-wrap items-center gap-2">
+                  {keywords.map((keyword, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center gap-1.5 px-3 py-1.5 bg-muted text-muted-foreground rounded-md text-sm"
+                    >
+                      <span>{keyword}</span>
+                      <button
+                        onClick={() => removeKeyword(index)}
+                        className="hover:text-foreground transition-colors p-0.5 rounded hover:bg-muted/80"
+                        aria-label={`Remove keyword ${keyword}`}
+                      >
+                        <X className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  ))}
                   <button
-                    type="button"
-                    onClick={() => removeKeyword(index)}
-                    className="project-keyword-x"
-                    aria-label={`Remove keyword ${keyword}`}
+                    onClick={clearKeywords}
+                    className="px-2 py-1.5 text-xs bg-muted text-muted-foreground hover:bg-muted/80 rounded-md transition-colors"
+                    aria-label="Clear all keywords"
                   >
-                    <X className="project-filter-icon" aria-hidden="true" />
+                    Clear all
                   </button>
-                </span>
-              ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Custom Date Range */}
+          <div className="flex flex-wrap items-center gap-4">
+            <span className="text-sm font-medium text-foreground">Custom Range:</span>
+            <div className="flex items-center gap-2">
+              <DatePickerInput
+                id="date-from"
+                value={dateRange.from}
+                onChange={(v) => handleDateRangeChange("from", v)}
+                aria-label="Filter from date"
+              />
+              <span className="text-muted-foreground">to</span>
+              <DatePickerInput
+                id="date-to"
+                value={dateRange.to}
+                onChange={(v) => handleDateRangeChange("to", v)}
+                aria-label="Filter to date"
+              />
+            </div>
+            {(filterPreset !== "all" || dateRange.from !== null || dateRange.to !== null || keywords.length > 0 || filterCli !== "") && (
               <button
-                type="button"
-                onClick={clearKeywords}
-                className="project-chip"
-                aria-label="Clear all keywords"
+                onClick={clearFilters}
+                className="px-3 py-2 text-sm bg-muted text-muted-foreground hover:bg-muted/80 rounded-md transition-colors"
               >
-                clear all
+                Clear
               </button>
-            </>
-          )}
-        </div>
-
-        {/* Custom Date Range */}
-        <div className="project-filter-row">
-          <span className="project-filter-label">range</span>
-          <DatePickerInput
-            id="date-from"
-            value={dateRange.from}
-            onChange={(v) => handleDateRangeChange("from", v)}
-            aria-label="Filter from date"
-          />
-          <span className="project-range-sep">to</span>
-          <DatePickerInput
-            id="date-to"
-            value={dateRange.to}
-            onChange={(v) => handleDateRangeChange("to", v)}
-            aria-label="Filter to date"
-          />
-          {(filterPreset !== "all" || dateRange.from !== null || dateRange.to !== null || keywords.length > 0 || filterCli !== "") && (
-            <button
-              type="button"
-              onClick={clearFilters}
-              className="project-chip"
-              style={{ marginLeft: "auto" }}
-            >
-              clear
-            </button>
-          )}
-        </div>
+            )}
+          </div>
 
-        {/* Results Count */}
-        <div className="project-results-count">
-          {filteredFolders.length === 0 ? (
-            <>{"// no projects found"}</>
-          ) : (
-            <>
-              {"// showing"} {startIndex + 1}–{endIndex} of {filteredFolders.length} projects
-              {filteredFolders.length !== normalizedFolders.length && (
-                <span> · filtered from {normalizedFolders.length}</span>
-              )}
-              {keywords.length > 0 && (
-                <span> · {keywords.length} keyword{keywords.length !== 1 ? "s" : ""}</span>
-              )}
-            </>
-          )}
+          {/* Results Count */}
+          <div className="text-sm text-muted-foreground">
+            {filteredFolders.length === 0 ? (
+              <>No projects found</>
+            ) : (
+              <>
+                Showing {startIndex + 1}-{endIndex} of {filteredFolders.length} projects
+                {filteredFolders.length !== normalizedFolders.length && (
+                  <span className="ml-1">
+                    (filtered from {normalizedFolders.length} total)
+                  </span>
+                )}
+                {keywords.length > 0 && (
+                  <span className="ml-1">
+                    with {keywords.length} keyword{keywords.length !== 1 ? "s" : ""}
+                  </span>
+                )}
+              </>
+            )}
+          </div>
         </div>
       </div>
 
       {/* Project Table */}
-      <div className="project-table-wrap">
-        <table className="project-table">
-          <thead>
-            <tr>
-              <th scope="col" className="project-th project-th-icon">
-                <span className="sr-only">Icon</span>
-              </th>
-              <th scope="col" className="project-th">agent root</th>
-              <th scope="col" className="project-th project-th-path">path</th>
-              <th scope="col" className="project-th">last modified</th>
-            </tr>
-          </thead>
-          <tbody>
-            {paginatedFolders.length === 0 ? (
-              <tr>
-                <td colSpan={4} className="project-td project-empty">
-                  {"// no projects match the selected filter."}
-                </td>
+      <div className="bg-card border border-border rounded-lg overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-border bg-muted/50">
+                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground w-12">
+                  <span className="sr-only">Icon</span>
+                </th>
+                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground max-w-md">
+                  Agent Root
+                </th>
+                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground hidden md:table-cell">
+                  Path
+                </th>
+                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground">
+                  Last Modified
+                </th>
               </tr>
-            ) : (
-              paginatedFolders.map((folder) => (
-                <tr key={folder.name} className="project-row">
-                  <td className="project-td project-td-icon">
-                    <Folder className="project-folder-icon" aria-hidden="true" />
-                  </td>
-                  <td className="project-td project-td-name">
-                    <Link
-                      href={`/project/${encodeURIComponent(folder.name)}`}
-                      className="project-link"
-                    >
-                      {decodeFolderName(folder.name)}
-                    </Link>
-                    {folder.cli.map((c) => (
-                      <CliBadge key={c} cli={c} />
-                    ))}
-                  </td>
-                  <td className="project-td project-td-path">{folder.path}</td>
-                  <td className="project-td project-td-date">
-                    <DateDisplay
-                      date={folder.lastModified}
-                      formatted={folder.lastModifiedFormatted}
-                    />
+            </thead>
+            <tbody>
+              {paginatedFolders.length === 0 ? (
+                <tr>
+                  <td colSpan={4} className="px-4 py-8 text-center text-muted-foreground">
+                    No projects found matching the selected filter.
                   </td>
                 </tr>
-              ))
-            )}
-          </tbody>
-        </table>
+              ) : (
+                paginatedFolders.map((folder) => (
+                  <tr
+                    key={folder.name}
+                    className="border-b border-border hover:bg-muted/50 transition-colors"
+                  >
+                    <td className="px-4 py-3">
+                      <Folder className="w-5 h-5 text-primary" />
+                    </td>
+                    <td className="px-4 py-3 max-w-md">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <Link
+                          href={`/project/${encodeURIComponent(folder.name)}`}
+                          className="font-semibold text-foreground hover:text-primary transition-colors break-words break-all inline-block max-w-full"
+                        >
+                          {decodeFolderName(folder.name)}
+                        </Link>
+                        {folder.cli.map((c) => (
+                          <CliBadge key={c} cli={c} />
+                        ))}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground hidden md:table-cell truncate max-w-md">
+                      {folder.path}
+                    </td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground">
+                      <DateDisplay
+                        date={folder.lastModified}
+                        formatted={folder.lastModifiedFormatted}
+                      />
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
 
+        {/* Pagination Controls */}
         {filteredFolders.length > 0 && (
           <PaginationControls
             currentPage={currentPage}
diff --git a/app/globals.css b/app/globals.css
index 10d8c02c..2b5c8f1b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -635,183 +635,3 @@ input[type="date"] { color-scheme: dark; }
     transition: none;
   }
 }
-
-/* ============================================================
-   /projects — calm filter bar + table. Sharp 1px borders, no
-   rounded corners, mono fonts, dim labels.
-   ============================================================ */
-
-.project-list { display: flex; flex-direction: column; gap: 16px; font-family: var(--font-mono); }
-
-.project-filter-bar {
-  display: flex; flex-direction: column;
-  gap: 12px;
-  padding: 16px 18px;
-  border: 1px solid var(--line-2);
-  background: var(--bg-2);
-}
-
-.project-filter-row {
-  display: flex; flex-wrap: wrap; align-items: center;
-  gap: 8px;
-}
-
-.project-filter-label {
-  display: inline-flex; align-items: center; gap: 6px;
-  font-size: 10px;
-  letter-spacing: 0.22em;
-  text-transform: uppercase;
-  color: var(--dim);
-  margin-right: 4px;
-}
-.project-filter-icon { width: 12px; height: 12px; }
-
-.project-chip {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 0.04em;
-  color: var(--ink-2);
-  background: transparent;
-  border: 1px solid var(--line-2);
-  padding: 5px 10px;
-  cursor: pointer;
-  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
-}
-.project-chip:hover {
-  border-color: var(--accent-pink);
-  color: var(--accent-pink);
-}
-.project-chip.on {
-  border-color: var(--accent-pink);
-  color: var(--accent-pink);
-  background: var(--accent-pink-bg);
-}
-.project-chip:focus-visible {
-  outline: 2px solid var(--accent-pink);
-  outline-offset: 2px;
-}
-
-.project-select {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 0.02em;
-  color: var(--ink);
-  background: var(--bg);
-  border: 1px solid var(--line-2);
-  padding: 5px 10px;
-  cursor: pointer;
-}
-
-.project-input {
-  flex: 1 1 240px;
-  min-width: 200px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  letter-spacing: 0.01em;
-  color: var(--ink);
-  background: var(--bg);
-  border: 1px solid var(--line-2);
-  padding: 7px 10px;
-  outline: none;
-  transition: border-color 140ms ease;
-}
-.project-input:focus { border-color: var(--accent-pink); }
-.project-input::placeholder { color: var(--dim); }
-
-.project-keyword-chip {
-  display: inline-flex; align-items: center; gap: 6px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 0.04em;
-  color: var(--accent-green);
-  background: var(--accent-green-bg);
-  border: 1px solid rgba(102, 209, 181, 0.4);
-  padding: 4px 8px 4px 10px;
-}
-.project-keyword-x {
-  display: inline-flex; align-items: center; justify-content: center;
-  background: transparent;
-  border: none;
-  padding: 0;
-  color: var(--accent-green);
-  cursor: pointer;
-}
-.project-keyword-x:hover { color: var(--accent-pink); }
-
-.project-range-sep {
-  font-size: 11px; color: var(--dim);
-  letter-spacing: 0.04em;
-}
-
-.project-results-count {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--dim);
-  letter-spacing: 0.02em;
-  margin-top: 4px;
-}
-
-.project-table-wrap {
-  border: 1px solid var(--line-2);
-  background: var(--bg-2);
-  overflow-x: auto;
-}
-.project-table { width: 100%; border-collapse: collapse; }
-.project-th {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-  color: var(--dim);
-  font-weight: 500;
-  text-align: left;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--line);
-  background: var(--bg);
-}
-.project-th-icon { width: 36px; }
-.project-th-path { display: none; }
-@media (min-width: 768px) {
-  .project-th-path { display: table-cell; }
-}
-
-.project-row { border-bottom: 1px solid var(--line); transition: background-color 140ms ease; }
-.project-row:last-child { border-bottom: none; }
-.project-row:hover { background: rgba(228, 88, 124, 0.03); }
-
-.project-td {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--ink-2);
-  padding: 12px 16px;
-  vertical-align: middle;
-}
-.project-td-icon { width: 36px; }
-.project-folder-icon { width: 14px; height: 14px; color: var(--dim); }
-
-.project-td-name {
-  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
-  max-width: 420px;
-}
-.project-link {
-  color: var(--ink);
-  font-size: 13px;
-  letter-spacing: 0.01em;
-  text-decoration: none;
-  word-break: break-all;
-}
-.project-link:hover { color: var(--accent-pink); }
-
-.project-td-path { display: none; color: var(--dim); font-size: 11px; word-break: break-all; }
-@media (min-width: 768px) {
-  .project-td-path { display: table-cell; }
-}
-
-.project-td-date { font-size: 11px; color: var(--dim); white-space: nowrap; }
-
-.project-empty {
-  text-align: center;
-  font-size: 12px;
-  color: var(--dim);
-  padding: 32px 16px;
-}

From 0d596defba4aebdc75669c744ee3b450571f3f7c Mon Sep 17 00:00:00 2001
From: Nikita Agarwal <niki.darj@gmail.com>
Date: Thu, 11 Jun 2026 07:22:38 -0700
Subject: [PATCH 28/28] style(project): calm /project/[name] header +
 SessionsList chrome

---
 CHANGELOG.md                                |   1 +
 __tests__/components/sessions-list.test.tsx |   8 +-
 app/components/sessions-list.tsx            | 157 +++++++--------
 app/globals.css                             | 211 ++++++++++++++++++++
 app/project/[name]/page.tsx                 | 102 +++-------
 5 files changed, 316 insertions(+), 163 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index faaafd64..ee68af61 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - Capture the poster from an off-screen clone instead of the live element. Even with explicit `width`/`height`, the live `.poster` carried its parent's flex context + `margin: 0 auto`, which html-to-image preserved during capture — the content ended up centered inside an oversized canvas, with the poster's left dashed border visible at canvas edge and the right meta clipped. The fix clones the node into a fresh `position: fixed; left: -10000px` wrapper with a fixed width matching `getBoundingClientRect().width`, captures the clone, then removes the wrapper. The clone has no flex parent and no margin auto, so the canvas dimensions match the poster exactly (#435).
 - Drop the `━━` glyph prefix and the amber slipping-count badge (`182` etc.) from every navbar tab. The badge surfaced a number that was already prominent on the audit page itself and the prefix was decorative chrome left over from the brutalist redesign. `Navbar` no longer accepts `auditSlippingCount`; `app/layout.tsx` no longer reads the dashboard cache to derive the count (#435).
 - Correct the CLI binary name in `how-to-improve-section.tsx`'s install commands. The per-policy install row and the `[install all]` bulk command both emitted `failproof policy add <slug>` — the shipped binary is `failproofai`, so a copied command would fail with `command not found`. Updates the three call sites (header docstring, `bulkInstall()`, and the per-row install string), plus the matching example in `docs/dashboard.mdx#Audit` (#435).
+- Calm the `/project/[name]` single-project page chrome. The header dropped the brutalist `━━ back to projects` link, the `● N sessions` green-dot count, the `section-h` display-font title, and the green-eyebrow `path` / `modified` definition list — replaced with a flat back chip, a mono `h1`, and a single inline meta line (`path … · modified … · sessions N`). `SessionsList` was rebuilt with the same calm chrome as the audit page: sharp 1px borders (no rounded corners), dim small-caps labels (`filter by` / `range` / `session id`), pink-outlined active chip, and JetBrains Mono throughout. The file icon goes from `text-primary` colored to dim. Empty state copy switches to the comment voice (`// no sessions found`). New CSS in `app/globals.css` under the `/project/[name]` and sessions-list blocks; tests updated to match the new copy / casing (#435).
 - Address CodeRabbit review on the invite flow: `InviteDialog` now accepts an `onUnauthorized` callback and routes 401 responses back through `AuthDialog` (caller in `come-back-better-section.tsx` re-opens the auth flow) instead of dead-ending in a generic inline error. `/api/audit/invite` no longer forwards raw upstream exception text to either telemetry or the client response — surfaces a stable generic message and logs only the bounded `err.name` so internal hostnames / IPs / payload fragments stay server-side (#435).
 - Address CodeRabbit review on the audit-poster + come-back-better paths. `audit-poster.tsx#handleShare`'s fallback telemetry no longer reports `status: "success"` when `fallbackMethod === "failed"` — share/capture analytics now correctly distinguish error vs. success. `come-back-better-section.tsx#refreshStatus` preserves the prior auth state on transient `/api/auth/status` failures (5xx, network blips) instead of downgrading to `anon` and clearing a valid reminder — it only falls through to `anon` on the very first probe (still `unknown`) so the cadence buttons unlock when the server is unreachable. Adds `:focus-visible` outlines to the new interactive controls (`.poster-share-btn`, `.cadence-btn`, `.invite-btn`, `.install-all-btn`, `.copy-icon-btn`, `.fix-install-btn`) so keyboard navigation has a perceptible focus indicator (#435).
 
diff --git a/__tests__/components/sessions-list.test.tsx b/__tests__/components/sessions-list.test.tsx
index f02b33d1..d09e5005 100644
--- a/__tests__/components/sessions-list.test.tsx
+++ b/__tests__/components/sessions-list.test.tsx
@@ -49,7 +49,7 @@ describe("SessionsList", () => {
   it("renders sessions in table", () => {
     const files = makeFiles(3);
     render(<SessionsList files={files} projectName="test-project" />);
-    expect(screen.getByText("SessionId")).toBeInTheDocument();
+    expect(screen.getAllByText(/session id/i).length).toBeGreaterThan(0);
     expect(screen.getByText(files[0].sessionId!)).toBeInTheDocument();
   });
 
@@ -61,7 +61,7 @@ describe("SessionsList", () => {
     const input = screen.getByLabelText("Filter by session ID");
     await user.type(input, "00000000");
 
-    expect(screen.getByText(/Showing.*of.*session/)).toBeInTheDocument();
+    expect(screen.getByText(/showing.*of.*session/i)).toBeInTheDocument();
   });
 
   it("date preset filtering", async () => {
@@ -84,11 +84,11 @@ describe("SessionsList", () => {
 
     await user.click(screen.getByText("Last Hour"));
 
-    expect(screen.getByText(/Showing.*of.*1.*session/)).toBeInTheDocument();
+    expect(screen.getByText(/showing.*of.*1.*session/i)).toBeInTheDocument();
   });
 
   it("shows empty state", () => {
     render(<SessionsList files={[]} projectName="test-project" />);
-    expect(screen.getByText("No sessions found")).toBeInTheDocument();
+    expect(screen.getByText(/no sessions found/i)).toBeInTheDocument();
   });
 });
diff --git a/app/components/sessions-list.tsx b/app/components/sessions-list.tsx
index f65160ae..e46c8b5d 100644
--- a/app/components/sessions-list.tsx
+++ b/app/components/sessions-list.tsx
@@ -1,6 +1,9 @@
 /**
  * Sessions List — displays session log files for a project with date
  * preset / custom-range filtering, session ID search, and pagination.
+ *
+ * Chrome matches the calm aesthetic on /audit: sharp 1px borders, dim
+ * small-caps labels, mono throughout, pink-outlined active filter chip.
  */
 "use client";
 
@@ -95,69 +98,67 @@ export default function SessionsList({ files, projectName }: SessionsListProps)
     filterPreset !== "all" || dateRange.from !== null || dateRange.to !== null || sessionIdFilter !== "";
 
   return (
-    <div className="space-y-4">
+    <div className="sessions-list">
       {/* Filters */}
-      <div className="bg-card border border-border rounded-lg p-4 flex flex-col gap-4">
-        {/* Preset Filters + Refresh */}
-        <div className="flex flex-wrap items-center gap-2">
-          <span className="text-sm font-medium text-foreground">Filter by:</span>
+      <div className="sessions-filter-bar">
+        {/* Preset Filters */}
+        <div className="sessions-filter-row">
+          <span className="sessions-filter-label">filter by</span>
           {FILTER_PRESETS.map((preset) => (
             <button
               key={preset.value}
+              type="button"
               onClick={() => handlePresetChange(preset.value)}
-              className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
-                filterPreset === preset.value
-                  ? "bg-primary text-primary-foreground"
-                  : "bg-muted text-muted-foreground hover:bg-muted/80"
-              }`}
+              className={`sessions-chip${filterPreset === preset.value ? " on" : ""}`}
             >
               {preset.label}
             </button>
           ))}
-
         </div>
 
         {/* Custom Date Range */}
-        <div className="flex flex-wrap items-center gap-4">
-          <span className="text-sm font-medium text-foreground">Custom Range:</span>
-          <div className="flex items-center gap-2">
-            <DatePickerInput id="date-from" value={dateRange.from} onChange={(v) => handleDateRangeChange("from", v)} aria-label="Filter from date" />
-            <span className="text-muted-foreground">to</span>
-            <DatePickerInput id="date-to" value={dateRange.to} onChange={(v) => handleDateRangeChange("to", v)} aria-label="Filter to date" />
-          </div>
+        <div className="sessions-filter-row">
+          <span className="sessions-filter-label">range</span>
+          <DatePickerInput id="date-from" value={dateRange.from} onChange={(v) => handleDateRangeChange("from", v)} aria-label="Filter from date" />
+          <span className="sessions-range-sep">to</span>
+          <DatePickerInput id="date-to" value={dateRange.to} onChange={(v) => handleDateRangeChange("to", v)} aria-label="Filter to date" />
         </div>
 
         {/* Session ID Search */}
-        <div className="flex items-center gap-2">
-          <Search className="w-4 h-4 text-muted-foreground" />
-          <span className="text-sm font-medium text-foreground">Filter by Session ID:</span>
+        <div className="sessions-filter-row">
+          <span className="sessions-filter-label">
+            <Search className="sessions-filter-icon" aria-hidden="true" />
+            session id
+          </span>
           <input
             type="text"
             value={sessionIdFilter}
             onChange={(e) => setSessionIdFilter(e.target.value)}
-            placeholder="Enter session ID (UUID)"
-            className="px-3 py-2 text-sm bg-input border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all hover:border-primary/50 flex-1 max-w-md"
+            placeholder="paste a session uuid"
+            className="sessions-input"
             aria-label="Filter by session ID"
           />
           {hasActiveFilters && (
             <button
+              type="button"
               onClick={clearFilters}
-              className="px-3 py-2 text-sm bg-muted text-muted-foreground hover:bg-muted/80 rounded-md transition-colors"
+              className="sessions-chip"
+              style={{ marginLeft: "auto" }}
             >
-              Clear
+              clear
             </button>
           )}
         </div>
 
         {/* Results Count */}
-        <div className="text-sm text-muted-foreground">
+        <div className="sessions-results-count">
           {filteredFiles.length === 0 ? (
-            "No sessions found"
+            <>{"// no sessions found"}</>
           ) : (
             <>
-              Showing {startIndex + 1}-{endIndex} of {filteredFiles.length} sessions
+              {"// showing"} {startIndex + 1}–{endIndex} of {filteredFiles.length} sessions
               {filteredFiles.length !== normalizedFiles.length && (
-                <span className="ml-1">(filtered from {normalizedFiles.length} total)</span>
+                <span> · filtered from {normalizedFiles.length}</span>
               )}
             </>
           )}
@@ -165,60 +166,56 @@ export default function SessionsList({ files, projectName }: SessionsListProps)
       </div>
 
       {/* Sessions Table */}
-      <div className="bg-card border border-border rounded-lg overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-border bg-muted/50">
-                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground w-12">
-                  <span className="sr-only">Icon</span>
-                </th>
-                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground">SessionId</th>
-                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground">Modified</th>
+      <div className="sessions-table-wrap">
+        <table className="sessions-table">
+          <thead>
+            <tr>
+              <th scope="col" className="sessions-th sessions-th-icon">
+                <span className="sr-only">Icon</span>
+              </th>
+              <th scope="col" className="sessions-th">session id</th>
+              <th scope="col" className="sessions-th">modified</th>
+            </tr>
+          </thead>
+          <tbody>
+            {paginatedFiles.length === 0 ? (
+              <tr>
+                <td colSpan={3} className="sessions-td sessions-empty">
+                  {"// no sessions match the filter."}
+                </td>
               </tr>
-            </thead>
-            <tbody>
-              {paginatedFiles.length === 0 ? (
-                <tr>
-                  <td colSpan={3} className="px-4 py-8 text-center text-muted-foreground">
-                    No sessions found matching the filter.
+            ) : (
+              paginatedFiles.map((file) => (
+                <tr key={file.path} className="sessions-row">
+                  <td className="sessions-td sessions-td-icon">
+                    <File className="sessions-file-icon" aria-hidden="true" />
+                  </td>
+                  <td className="sessions-td sessions-td-name">
+                    {file.sessionId ? (
+                      <>
+                        <Link
+                          href={`/project/${encodeURIComponent(projectName)}/session/${encodeURIComponent(file.sessionId)}`}
+                          className="sessions-link"
+                        >
+                          {file.name.replace(/\.jsonl$/, "")}
+                        </Link>
+                        <CopyButton text={file.sessionId} />
+                      </>
+                    ) : (
+                      <span className="sessions-link" aria-disabled="true">
+                        {file.name.replace(/\.jsonl$/, "")}
+                      </span>
+                    )}
+                    {file.cli && <CliBadge cli={file.cli} />}
+                  </td>
+                  <td className="sessions-td sessions-td-date">
+                    {file.lastModifiedFormatted || formatDate(file.lastModified)}
                   </td>
                 </tr>
-              ) : (
-                paginatedFiles.map((file) => (
-                  <tr key={file.path} className="border-b border-border hover:bg-muted/50 transition-colors">
-                    <td className="px-4 py-3">
-                      <File className="w-5 h-5 text-primary" />
-                    </td>
-                    <td className="px-4 py-3 max-w-md">
-                      <div className="flex flex-wrap items-center gap-2">
-                        {file.sessionId ? (
-                          <>
-                            <Link
-                              href={`/project/${encodeURIComponent(projectName)}/session/${encodeURIComponent(file.sessionId)}`}
-                              className="font-semibold text-foreground hover:text-primary transition-colors break-words break-all inline-block max-w-full"
-                            >
-                              {file.name.replace(/\.jsonl$/, "")}
-                            </Link>
-                            <CopyButton text={file.sessionId} />
-                          </>
-                        ) : (
-                          <span className="font-semibold text-foreground break-words break-all inline-block max-w-full">
-                            {file.name.replace(/\.jsonl$/, "")}
-                          </span>
-                        )}
-                        {file.cli && <CliBadge cli={file.cli} />}
-                      </div>
-                    </td>
-                    <td className="px-4 py-3 text-sm text-muted-foreground">
-                      {file.lastModifiedFormatted || formatDate(file.lastModified)}
-                    </td>
-                  </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
+              ))
+            )}
+          </tbody>
+        </table>
 
         {filteredFiles.length > 0 && (
           <PaginationControls currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
diff --git a/app/globals.css b/app/globals.css
index 2b5c8f1b..7d37a6a9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -635,3 +635,214 @@ input[type="date"] { color-scheme: dark; }
     transition: none;
   }
 }
+
+/* ============================================================
+   /project/[name] sessions list — calm filter bar + table.
+   Sharp 1px borders, no rounded corners, mono throughout,
+   dim small-caps labels. Mirrors the audit page's voice.
+   ============================================================ */
+
+.sessions-list { display: flex; flex-direction: column; gap: 16px; font-family: var(--font-mono); }
+
+.sessions-filter-bar {
+  display: flex; flex-direction: column;
+  gap: 12px;
+  padding: 16px 18px;
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+}
+
+.sessions-filter-row {
+  display: flex; flex-wrap: wrap; align-items: center;
+  gap: 8px;
+}
+
+.sessions-filter-label {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--dim);
+  margin-right: 4px;
+}
+.sessions-filter-icon { width: 12px; height: 12px; }
+
+.sessions-chip {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--ink-2);
+  background: transparent;
+  border: 1px solid var(--line-2);
+  padding: 5px 10px;
+  cursor: pointer;
+  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
+}
+.sessions-chip:hover {
+  border-color: var(--accent-pink);
+  color: var(--accent-pink);
+}
+.sessions-chip.on {
+  border-color: var(--accent-pink);
+  color: var(--accent-pink);
+  background: var(--accent-pink-bg);
+}
+.sessions-chip:focus-visible {
+  outline: 2px solid var(--accent-pink);
+  outline-offset: 2px;
+}
+
+.sessions-input {
+  flex: 1 1 280px;
+  min-width: 220px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 0.01em;
+  color: var(--ink);
+  background: var(--bg);
+  border: 1px solid var(--line-2);
+  padding: 7px 10px;
+  outline: none;
+  transition: border-color 140ms ease;
+}
+.sessions-input:focus { border-color: var(--accent-pink); }
+.sessions-input::placeholder { color: var(--dim); }
+
+.sessions-range-sep {
+  font-size: 11px; color: var(--dim);
+  letter-spacing: 0.04em;
+}
+
+.sessions-results-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--dim);
+  letter-spacing: 0.02em;
+  margin-top: 4px;
+}
+
+.sessions-table-wrap {
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+  overflow-x: auto;
+}
+.sessions-table { width: 100%; border-collapse: collapse; }
+.sessions-th {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--dim);
+  font-weight: 500;
+  text-align: left;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--line);
+  background: var(--bg);
+}
+.sessions-th-icon { width: 36px; }
+
+.sessions-row { border-bottom: 1px solid var(--line); transition: background-color 140ms ease; }
+.sessions-row:last-child { border-bottom: none; }
+.sessions-row:hover { background: rgba(228, 88, 124, 0.03); }
+
+.sessions-td {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--ink-2);
+  padding: 12px 16px;
+  vertical-align: middle;
+}
+.sessions-td-icon { width: 36px; }
+.sessions-file-icon { width: 14px; height: 14px; color: var(--dim); }
+
+.sessions-td-name {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
+  max-width: 520px;
+}
+.sessions-link {
+  color: var(--ink);
+  font-size: 13px;
+  letter-spacing: 0.01em;
+  text-decoration: none;
+  word-break: break-all;
+}
+.sessions-link:hover { color: var(--accent-pink); }
+.sessions-link[aria-disabled="true"] { color: var(--ink-2); cursor: default; }
+
+.sessions-td-date { font-size: 11px; color: var(--dim); white-space: nowrap; }
+
+.sessions-empty {
+  text-align: center;
+  font-size: 12px;
+  color: var(--dim);
+  padding: 32px 16px;
+}
+
+/* ============================================================
+   /project/[name] page header — back link, project title, meta.
+   ============================================================ */
+
+.project-page-back {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: var(--ink-2);
+  text-decoration: none;
+  padding: 6px 12px;
+  border: 1px solid var(--line-2);
+  background: transparent;
+  transition: border-color 140ms ease, color 140ms ease;
+}
+.project-page-back:hover {
+  border-color: var(--accent-pink);
+  color: var(--accent-pink);
+}
+.project-page-back .arrow { color: var(--dim); font-size: 12px; }
+
+.project-page-title {
+  font-family: var(--font-mono);
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+  margin: 16px 0 8px;
+  word-break: break-word;
+  line-height: 1.3;
+}
+
+.project-page-meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--dim);
+  letter-spacing: 0.02em;
+  margin: 0 0 32px;
+}
+.project-page-meta .label { color: var(--ink-2); margin-right: 6px; }
+.project-page-meta .sep { margin: 0 12px; color: var(--line-2); }
+.project-page-meta .path { color: var(--ink-2); word-break: break-all; }
+
+.project-page-sessions-head {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent-green);
+  margin-bottom: 16px;
+}
+
+.project-page-empty {
+  padding: 48px 32px;
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--ink-2);
+}
+.project-page-empty .hint {
+  font-size: 11px;
+  color: var(--dim);
+  margin-top: 8px;
+  letter-spacing: 0.02em;
+}
diff --git a/app/project/[name]/page.tsx b/app/project/[name]/page.tsx
index 918c7fbd..3b83b1a5 100644
--- a/app/project/[name]/page.tsx
+++ b/app/project/[name]/page.tsx
@@ -116,97 +116,41 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
   return (
     <main className="report">
       <section className="section" data-screen-label="project">
-        <div className="section-mast">
-          <Link
-            href="/projects"
-            className="btn"
-            style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}
-            aria-label="Back to projects"
-          >
-            <span style={{ color: "var(--accent-pink)", letterSpacing: "-2px" }}>━━</span>
-            back to projects
-          </Link>
-          <div className="section-meta">
-            <span className="g">●</span> {sessionFiles.length} session{sessionFiles.length === 1 ? "" : "s"}
-          </div>
-        </div>
-
-        <h1
-          className="section-h"
-          style={{ textTransform: "none", marginBottom: 18, wordBreak: "break-word" }}
+        <Link
+          href="/projects"
+          className="project-page-back"
+          aria-label="Back to projects"
         >
-          {canonicalRoot}
-        </h1>
+          <span className="arrow">←</span>
+          back to projects
+        </Link>
 
-        <dl
-          style={{
-            display: "grid",
-            gridTemplateColumns: "auto 1fr",
-            gap: "8px 18px",
-            margin: "0 0 36px",
-            fontFamily: "var(--font-mono)",
-            fontSize: 12,
-            color: "var(--ink-2)",
-          }}
-        >
-          <dt
-            style={{
-              color: "var(--accent-green)",
-              letterSpacing: "0.2em",
-              textTransform: "uppercase",
-              fontSize: 10,
-              alignSelf: "center",
-            }}
-          >
-            path
-          </dt>
-          <dd style={{ margin: 0, wordBreak: "break-all" }}>{displayPath}</dd>
+        <h1 className="project-page-title">{canonicalRoot}</h1>
+
+        <div className="project-page-meta">
+          <span className="label">path</span>
+          <span className="path">{displayPath}</span>
           {lastModifiedFormatted && (
             <>
-              <dt
-                style={{
-                  color: "var(--accent-green)",
-                  letterSpacing: "0.2em",
-                  textTransform: "uppercase",
-                  fontSize: 10,
-                  alignSelf: "center",
-                }}
-              >
-                modified
-              </dt>
-              <dd style={{ margin: 0 }}>{lastModifiedFormatted}</dd>
+              <span className="sep">·</span>
+              <span className="label">modified</span>
+              {lastModifiedFormatted}
             </>
           )}
-        </dl>
-
-        <div className="section-mast" style={{ marginBottom: 18 }}>
-          <div className="section-label">
-            <span className="glyph">━━</span> sessions
-          </div>
+          <span className="sep">·</span>
+          <span className="label">sessions</span>
+          {sessionFiles.length}
         </div>
 
         {sessionFiles.length === 0 ? (
-          <div
-            className="panel"
-            style={{ textAlign: "center", padding: "48px 32px" }}
-          >
-            <p style={{ color: "var(--ink-2)", marginBottom: 8 }}>
-              no .jsonl files found in this project.
-            </p>
-            <p
-              style={{
-                color: "var(--dim)",
-                fontSize: 12,
-                letterSpacing: "0.05em",
-              }}
-            >
+          <div className="project-page-empty">
+            no .jsonl files found in this project.
+            <div className="hint">
               session files will appear here once they are created.
-            </p>
+            </div>
           </div>
         ) : (
-          <div className="panel" style={{ padding: 0 }}>
-            <Suspense><SessionsList files={sessionFiles} projectName={name} /></Suspense>
-          </div>
+          <Suspense><SessionsList files={sessionFiles} projectName={name} /></Suspense>
         )}
       </section>
     </main>