Refine Batch Diff page with hybrid dark/paper treatment

- Replace small header with editorial hero: massive 'Compare *batches.*'
  (clamp 48-80px serif, italic for 'batches.') + ghost 'DIFF' watermark
  + GitCompareArrows pill (837P/835/first vs second) + pick-a-batch hint
- Add torn-page fold with '↘ A → B ↙' label and 48-dot perforation
- Cream paper plane (max-w-[1280px] mx-auto) with paper-grain SVG and
  double-bordered title block: 'SHEET 01 · COMPARE TWO BATCHES' over
  'Compare them.' (clamp 48-96px) plus A→B wire indicator (blue A,
  amber B, paper-ink-3 placeholder)
- New Folio helper renders the § N + vertical-rl italic label; reused
  on the picks and diff sections
- § 01 The picks: BatchPicker gets a paper-toned card with side badge
  (A blue / B amber tinted square) and claim count, preserving the
  data-testid='diff-picker-{a,b}' and 'diff-picker-kind-{kind}' and
  'diff-picker-option-{id}' contracts
- § 02 The diff: conditional rendering (awaiting-picks dashed card,
  loading skeleton, not-found, error, empty diff, full diff view)
  with paper-toned wrappers
- BatchDiffView refactored to paper-toned chrome: SideMeta cards
  (warm surface, surface-ink text), SummaryCards → new DiffKpiTile
  helper (success/destructive/amber/ink accent rails with lucide
  icons), SectionTables → tone='paper' tables with cream header band
  and surface-ink text. All section/row/indicator testids preserved.
- Action footer: 'Comparing A with B.' italic note + Refresh / Clear
  picks buttons; paper-toned container, sits inside the paper plane
- Bottom footer: 'End of sheet 01 / Cyclone · Batch diff / A vs B
  or awaiting picks'

Round 11/11 — last page in the hybrid sweep.

src/components/BatchDiffView.tsx

@@ -1,4 +1,10 @@
-import { Plus, Minus, Equal, ArrowRight, type LucideIcon } from "lucide-react";
+import {
+  ArrowRight,
+  Equal,
+  Minus,
+  Plus,
+  type LucideIcon,
+} from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -9,19 +15,20 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { KpiCard } from "@/components/KpiCard";
 import { fmt } from "@/lib/format";
 import { cn } from "@/lib/utils";
 import type {
+  BatchClaimDiffSummary,
   BatchDiff,
   BatchDiffChangedRow,
   BatchDiffSideMeta,
   BatchDiffSummary,
-  BatchClaimDiffSummary,
 } from "@/types";
 
 // ---------------------------------------------------------------------------
-// Side meta header — small panel identifying which batch is on the left / right.
+// Side meta header — small panel identifying which batch is on the
+// left / right. Paper-toned to sit inside the cream "paper plane" of
+// the BatchDiff page. data-testid pinned by BatchDiff.test.tsx.
 // ---------------------------------------------------------------------------
 
 function SideMeta({
@@ -39,10 +46,19 @@ function SideMeta({
       : "text-amber-300 border-amber-400/30 bg-amber-400/10";
   return (
     <div
-      className="surface rounded-xl p-4 flex flex-col gap-2"
+      className="rounded-xl p-4 flex flex-col gap-2 border"
       data-testid={`batch-diff-side-${label.toLowerCase()}`}
+      style={{
+        backgroundColor: "hsl(36 22% 98%)",
+        borderColor: "hsl(30 14% 14% / 0.10)",
+        boxShadow:
+          "inset 0 1px 0 0 hsl(0 0% 100% / 0.45), 0 1px 0 0 hsl(30 14% 22% / 0.06)",
+      }}
     >
-      <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+      <div
+        className="text-[10.5px] font-semibold uppercase tracking-[0.18em]"
+        style={{ color: "hsl(var(--surface-ink-3))" }}
+      >
         {label}
       </div>
       <div className="flex items-center gap-2">
@@ -54,12 +70,23 @@ function SideMeta({
         >
           {side.kind}
         </span>
-        <span className="display num text-[13px]">{side.id}</span>
+        <span
+          className="display num text-[13px]"
+          style={{ color: "hsl(var(--surface-ink))" }}
+        >
+          {side.id}
+        </span>
       </div>
-      <div className="font-mono text-[12px] text-muted-foreground truncate">
+      <div
+        className="font-mono text-[12px] truncate"
+        style={{ color: "hsl(var(--surface-ink-2))" }}
+      >
         {side.inputFilename}
       </div>
-      <div className="flex items-center justify-between text-xs text-muted-foreground">
+      <div
+        className="flex items-center justify-between text-xs"
+        style={{ color: "hsl(var(--surface-ink-3))" }}
+      >
         <span>Parsed {side.parsedAt ? fmt.dateShort(side.parsedAt) : "—"}</span>
         <span className="font-mono num">
           {fmt.num(side.claimCount)} claim{side.claimCount === 1 ? "" : "s"}
@@ -70,40 +97,125 @@ function SideMeta({
 }
 
 // ---------------------------------------------------------------------------
-// Summary cards — the four-count tile row.
+// Summary cards — the four-count tile row. Paper-toned via
+// DiffKpiTile so the counts sit naturally on the cream paper plane.
 // ---------------------------------------------------------------------------
 
 function SummaryCards({ summary }: { summary: BatchDiffSummary }) {
   return (
-    <div className="grid grid-cols-2 md:grid-cols-4 gap-3" data-testid="batch-diff-summary">
+    <div
-      <KpiCard
+      className="grid grid-cols-2 md:grid-cols-4 gap-3"
+      data-testid="batch-diff-summary"
+    >
+      <DiffKpiTile
         label="Added in B"
         value={fmt.num(summary.addedCount)}
         icon={Plus}
         hint="In B, not in A"
+        tone="success"
       />
-      <KpiCard
+      <DiffKpiTile
         label="Removed from A"
         value={fmt.num(summary.removedCount)}
         icon={Minus}
         hint="In A, not in B"
+        tone="destructive"
       />
-      <KpiCard
+      <DiffKpiTile
         label="Changed"
         value={fmt.num(summary.changedCount)}
         icon={Equal}
         hint="Deltas in either side"
+        tone="amber"
       />
-      <KpiCard
+      <DiffKpiTile
         label="Unchanged"
         value={fmt.num(summary.unchangedCount)}
         icon={Equal}
         hint="Identical across A & B"
+        tone="ink"
       />
     </div>
   );
 }
 
+// ---------------------------------------------------------------------------
+// DiffKpiTile — paper-toned metric tile for the diff summary row.
+// Mirrors AckKpiTile / BatchesKpiTile from the other hybrid pages.
+// ---------------------------------------------------------------------------
+
+function DiffKpiTile({
+  label,
+  value,
+  icon: Icon,
+  hint,
+  tone,
+}: {
+  label: string;
+  value: string;
+  icon: LucideIcon;
+  hint: string;
+  tone: "success" | "destructive" | "amber" | "ink";
+}) {
+  const accentMap = {
+    success: "hsl(152 64% 38%)",
+    destructive: "hsl(358 70% 42%)",
+    amber: "hsl(36 92% 50%)",
+    ink: "hsl(var(--surface-ink))",
+  } as const;
+  const tintMap = {
+    success: "hsl(152 50% 88%)",
+    destructive: "hsl(358 70% 92%)",
+    amber: "hsl(36 82% 92%)",
+    ink: "hsl(36 22% 90%)",
+  } as const;
+  const accent = accentMap[tone];
+  const tint = tintMap[tone];
+  return (
+    <div
+      className="relative rounded-xl p-4 overflow-hidden border"
+      title={hint}
+      style={{
+        backgroundColor: "hsl(var(--surface))",
+        boxShadow:
+          "inset 0 1px 0 0 hsl(0 0% 100% / 0.45), 0 1px 0 0 hsl(30 14% 22% / 0.06), inset 3px 0 0 0 hsl(0 0% 100% / 0.4)",
+        borderColor: "hsl(30 14% 14% / 0.10)",
+      }}
+    >
+      <div
+        aria-hidden
+        className="absolute left-0 top-4 bottom-4 w-[3px] rounded-r-sm"
+        style={{ backgroundColor: accent, opacity: 0.85 }}
+      />
+      <div className="flex items-center justify-between mb-2">
+        <div
+          className="mono text-[10px] uppercase tracking-[0.18em] font-semibold"
+          style={{ color: "hsl(var(--surface-ink-3))" }}
+        >
+          {label}
+        </div>
+        <div
+          className="h-5 w-5 rounded-md flex items-center justify-center"
+          style={{ backgroundColor: tint, color: accent }}
+        >
+          <Icon className="h-3 w-3" strokeWidth={1.75} />
+        </div>
+      </div>
+      <div
+        className="display tabular-nums tracking-[-0.04em]"
+        style={{
+          color: "hsl(var(--surface-ink))",
+          fontSize: "clamp(26px, 2.8vw, 36px)",
+          lineHeight: 1,
+          fontWeight: 400,
+        }}
+      >
+        {value}
+      </div>
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Row indicator — `+` / `-` / `~` gutter on the left of every row.
 // ---------------------------------------------------------------------------
@@ -152,7 +264,10 @@ function RowIndicator({
 
 function ClaimIdCell({ id }: { id: string }) {
   return (
-    <span className="font-mono text-[12px] tracking-tight" data-testid="diff-claim-id">
+    <span
+      className="font-mono text-[12px] tracking-tight"
+      data-testid="diff-claim-id"
+    >
       {id}
     </span>
   );
@@ -160,14 +275,31 @@ function ClaimIdCell({ id }: { id: string }) {
 
 function PatientCell({ name }: { name: string }) {
   if (!name) {
-    return <span className="text-muted-foreground/60 text-[12px]">—</span>;
+    return (
+      <span
+        className="text-[12px]"
+        style={{ color: "hsl(var(--surface-ink-3))" }}
+      >
+        —
+      </span>
+    );
   }
-  return <span className="text-[13px]">{name}</span>;
+  return (
+    <span
+      className="text-[13px]"
+      style={{ color: "hsl(var(--surface-ink))" }}
+    >
+      {name}
+    </span>
+  );
 }
 
 function ChargeCell({ value }: { value: number }) {
   return (
-    <span className="display num text-[13px] tabular-nums">
+    <span
+      className="display num text-[13px] tabular-nums"
+      style={{ color: "hsl(var(--surface-ink))" }}
+    >
       {fmt.usdPrecise(value)}
     </span>
   );
@@ -175,19 +307,44 @@ function ChargeCell({ value }: { value: number }) {
 
 function DateCell({ value }: { value: string | null }) {
   if (!value) {
-    return <span className="text-muted-foreground/60 text-[12px]">—</span>;
+    return (
+      <span
+        className="text-[12px]"
+        style={{ color: "hsl(var(--surface-ink-3))" }}
+      >
+        —
+      </span>
+    );
   }
-  return <span className="num text-[12.5px]">{value}</span>;
+  return (
+    <span
+      className="num text-[12.5px]"
+      style={{ color: "hsl(var(--surface-ink-2))" }}
+    >
+      {value}
+    </span>
+  );
 }
 
 function StatusCell({ value }: { value: string }) {
   if (!value) {
-    return <span className="text-muted-foreground/60 text-[12px]">—</span>;
+    return (
+      <span
+        className="text-[12px]"
+        style={{ color: "hsl(var(--surface-ink-3))" }}
+      >
+        —
+      </span>
+    );
   }
   return (
     <Badge
       variant="outline"
       className="font-mono uppercase tracking-wider text-[10px]"
+      style={{
+        color: "hsl(var(--surface-ink))",
+        borderColor: "hsl(30 14% 14% / 0.20)",
+      }}
     >
       {value}
     </Badge>
@@ -196,17 +353,28 @@ function StatusCell({ value }: { value: string }) {
 
 function CptCell({ codes }: { codes: string[] }) {
   if (!codes || codes.length === 0) {
-    return <span className="text-muted-foreground/60 text-[12px]">—</span>;
+    return (
+      <span
+        className="text-[12px]"
+        style={{ color: "hsl(var(--surface-ink-3))" }}
+      >
+        —
+      </span>
+    );
   }
   return (
-    <span className="font-mono text-[11.5px] tracking-tight">
+    <span
+      className="font-mono text-[11.5px] tracking-tight"
+      style={{ color: "hsl(var(--surface-ink-2))" }}
+    >
       {codes.join(", ")}
     </span>
   );
 }
 
 // ---------------------------------------------------------------------------
-// Section tables — one per bucket (added / removed / changed).
+// Section tables — one per bucket (added / removed / changed). Uses
+// `tone="paper"` so the table chrome matches the cream paper plane.
 // ---------------------------------------------------------------------------
 
 type Side = "a" | "b";
@@ -386,25 +554,53 @@ function SectionTable({
     <section className="space-y-3" data-testid={testid}>
       <header className="flex items-baseline justify-between">
         <div>
-          <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-0.5">
+          <div
+            className="text-[10.5px] font-semibold uppercase tracking-[0.18em] mb-0.5"
+            style={{ color: "hsl(var(--surface-ink-3))" }}
+          >
             {eyebrow}
           </div>
-          <h2 className="text-[15px] font-semibold tracking-tight">{title}</h2>
+          <h3
+            className="display leading-[0.98] tracking-[-0.03em]"
+            style={{
+              color: "hsl(var(--surface-ink))",
+              fontSize: "clamp(20px, 2.2vw, 26px)",
+              fontWeight: 400,
+            }}
+          >
+            {title}
+          </h3>
         </div>
-        <span className="font-mono num text-[12.5px] text-muted-foreground">
+        <span
+          className="font-mono num text-[12.5px]"
+          style={{ color: "hsl(var(--surface-ink-3))" }}
+        >
           {fmt.num(count)}
         </span>
       </header>
       {count === 0 ? (
         <div
-          className="surface rounded-xl border border-dashed border-border/60 p-6 text-center text-[12.5px] text-muted-foreground"
+          className="rounded-xl border p-6 text-center text-[12.5px]"
           data-testid={`${testid}-empty`}
+          style={{
+            borderColor: "hsl(30 14% 14% / 0.16)",
+            borderStyle: "dashed",
+            backgroundColor: "hsl(36 22% 96%)",
+            color: "hsl(var(--surface-ink-3))",
+          }}
         >
           {emptyMessage}
         </div>
       ) : (
-        <div className="surface rounded-xl overflow-hidden">
+        <div
-          <Table>
+          className="rounded-xl border overflow-hidden"
+          style={{
+            borderColor: "hsl(30 14% 14% / 0.10)",
+            backgroundColor: "hsl(36 22% 98%)",
+            boxShadow: "inset 0 1px 0 0 hsl(0 0% 100% / 0.5)",
+          }}
+        >
+          <Table tone="paper">
             <TableHeader>
               <TableRow>
                 <TableHead className="w-10" aria-label="Diff indicator" />
@@ -425,7 +621,8 @@ function SectionTable({
 }
 
 // ---------------------------------------------------------------------------
-// Skeleton — used by the page while the diff is loading.
+// Skeleton — used by the page while the diff is loading. Paper-toned
+// (cream blocks) to match the paper plane chrome.
 // ---------------------------------------------------------------------------
 
 export function BatchDiffViewSkeleton() {
@@ -462,11 +659,24 @@ export function BatchDiffEmpty({ data }: { data: BatchDiff }) {
         <SideMeta side={data.b} label="B (right)" />
       </div>
       <SummaryCards summary={data.summary} />
-      <div className="surface rounded-xl border border-dashed border-border/60 p-10 text-center">
+      <div
-        <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-1.5">
+        className="rounded-xl border p-10 text-center"
+        style={{
+          borderColor: "hsl(30 14% 14% / 0.16)",
+          borderStyle: "dashed",
+          backgroundColor: "hsl(36 22% 96%)",
+        }}
+      >
+        <div
+          className="text-[10.5px] font-semibold uppercase tracking-[0.18em] mb-1.5"
+          style={{ color: "hsl(var(--surface-ink-3))" }}
+        >
           Diff · no deltas
         </div>
-        <div className="text-[13.5px] text-muted-foreground">
+        <div
+          className="text-[13.5px]"
+          style={{ color: "hsl(var(--surface-ink-2))" }}
+        >
           These two batches are identical — no claims added, removed, or
           changed between A and B.
         </div>

src/pages/BatchDiff.tsx

@@ -1,6 +1,11 @@
 import { useCallback, useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
-import { GitCompareArrows, CircleDashed, AlertCircle } from "lucide-react";
+import {
+  AlertCircle,
+  ArrowRight,
+  CircleDashed,
+  GitCompareArrows,
+} from "lucide-react";
 import { ApiError } from "@/lib/api";
 import { Button } from "@/components/ui/button";
 import {
@@ -12,7 +17,10 @@ import {
 } from "@/components/ui/select";
 import { EmptyState } from "@/components/ui/empty-state";
 import { ErrorState } from "@/components/ui/error-state";
-import { BatchDiffView, BatchDiffViewSkeleton } from "@/components/BatchDiffView";
+import {
+  BatchDiffView,
+  BatchDiffViewSkeleton,
+} from "@/components/BatchDiffView";
 import { useBatches } from "@/hooks/useBatches";
 import { useBatchDiff } from "@/hooks/useBatchDiff";
 import type { BatchSummary as ApiBatchSummary } from "@/lib/api";
@@ -38,9 +46,11 @@ function readIdsFromParams(params: URLSearchParams): {
 }
 
 // ---------------------------------------------------------------------------
-// Batch picker — one Select dropdown for each side. Keeps the same
+// Kind badge — small inline label so the operator can spot which batch
-// kind-colored badge inline so the operator can spot which batch is
+// is which at a glance. Identical contract to the one in
-// which at a glance.
+// `BatchesList.tsx`; duplicated here because each lives inside a
+// different page surface (the picker is part of this page, the row
+// badge belongs to Batches).
 // ---------------------------------------------------------------------------
 
 function KindBadge({ kind }: { kind: ApiBatchSummary["kind"] }) {
@@ -63,6 +73,7 @@ function KindBadge({ kind }: { kind: ApiBatchSummary["kind"] }) {
 
 function BatchPicker({
   label,
+  side,
   value,
   onChange,
   items,
@@ -70,6 +81,7 @@ function BatchPicker({
   testid,
 }: {
   label: string;
+  side: "A" | "B";
   value: string | null;
   onChange: (id: string) => void;
   items: ApiBatchSummary[];
@@ -85,10 +97,54 @@ function BatchPicker({
     [items, excludeId],
   );
   const selected = items.find((it) => it.id === value);
+  const accent = side === "A" ? "hsl(212 100% 45%)" : "hsl(36 92% 50%)";
+  const tint = side === "A" ? "hsl(212 85% 95%)" : "hsl(36 82% 92%)";
   return (
-    <div className="space-y-1.5" data-testid={testid}>
+    <div
-      <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+      className="rounded-xl border p-4 space-y-2"
-        {label}
+      data-testid={testid}
+      style={{
+        backgroundColor: "hsl(36 22% 98%)",
+        borderColor: "hsl(30 14% 14% / 0.10)",
+        boxShadow:
+          "inset 0 1px 0 0 hsl(0 0% 100% / 0.45), 0 1px 0 0 hsl(30 14% 22% / 0.06)",
+      }}
+    >
+      <div
+        aria-hidden
+        className="absolute left-0 top-4 bottom-4 w-[3px] rounded-r-sm"
+        style={{ backgroundColor: accent, opacity: 0.85 }}
+      />
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2.5">
+          <div
+            aria-hidden
+            className="h-5 w-5 rounded-md flex items-center justify-center mono font-semibold"
+            style={{ backgroundColor: tint, color: accent, fontSize: 11 }}
+          >
+            {side}
+          </div>
+          <span
+            className="mono text-[10.5px] uppercase tracking-[0.18em] font-semibold"
+            style={{ color: "hsl(var(--surface-ink-3))" }}
+          >
+            {label}
+          </span>
+        </div>
+        {selected ? (
+          <span
+            className="display tabular-nums text-[12.5px]"
+            style={{ color: "hsl(var(--surface-ink-2))" }}
+          >
+            {selected.claimCount}{" "}
+            <span
+              className="mono not-italic uppercase tracking-[0.14em] text-[10px]"
+              style={{ color: "hsl(var(--surface-ink-3))" }}
+            >
+              claims
+            </span>
+          </span>
+        ) : null}
       </div>
       <Select value={value ?? ""} onValueChange={(v) => onChange(v)}>
         <SelectTrigger>
@@ -96,7 +152,10 @@ function BatchPicker({
             <span className="flex items-center gap-2 truncate">
               <KindBadge kind={selected.kind} />
               <span className="font-mono num text-[12.5px]">{selected.id}</span>
-              <span className="text-muted-foreground text-[12px] truncate">
+              <span
+                className="text-[12px] truncate"
+                style={{ color: "hsl(var(--surface-ink-2))" }}
+              >
                 · {selected.inputFilename}
               </span>
             </span>
@@ -157,6 +216,50 @@ function NotFoundState({
   );
 }
 
+// ---------------------------------------------------------------------------
+// Section header — § N + small italic vertical-rl label. Reused by
+// both the picks and diff sections so the folio is uniform.
+// ---------------------------------------------------------------------------
+
+function Folio({ section, label, topClass = "top-7" }: {
+  section: string;
+  label: string;
+  topClass?: string;
+}) {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "absolute left-7 lg:left-12 flex flex-col items-center gap-1",
+        topClass,
+      )}
+    >
+      <span
+        className="mono text-[10px] uppercase tracking-[0.18em] font-semibold"
+        style={{ color: "hsl(var(--surface-ink-3))" }}
+      >
+        {section}
+      </span>
+      <div
+        className="w-px h-10"
+        style={{ backgroundColor: "hsl(30 14% 14% / 0.18)" }}
+      />
+      <span
+        className="display italic"
+        style={{
+          color: "hsl(var(--surface-ink-2))",
+          fontSize: 11,
+          writingMode: "vertical-rl",
+          transform: "rotate(180deg)",
+          letterSpacing: "0.16em",
+        }}
+      >
+        {label}
+      </span>
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Page
 // ---------------------------------------------------------------------------
@@ -193,8 +296,13 @@ export function BatchDiff() {
   );
   const reset = useCallback(() => updateIds({ a: null, b: null }), [updateIds]);
 
-  const { data: batches, isLoading: loadingBatches, isError: batchesError, error: batchesErrorMsg, refetch: refetchBatches } =
+  const {
-    useBatches(100);
+    data: batches,
+    isLoading: loadingBatches,
+    isError: batchesError,
+    error: batchesErrorMsg,
+    refetch: refetchBatches,
+  } = useBatches(100);
 
   // Only fire the diff once both pickers have a value. The hook also
   // gates on this internally (defense-in-depth), so a half-picked URL
@@ -209,112 +317,524 @@ export function BatchDiff() {
       : "network"
     : null;
 
+  // -----------------------------------------------------------------
+  // Stagger choreography
+  // -----------------------------------------------------------------
+  const heroDelay = 0;
+  const foldDelay = 220;
+  const titleDelay = 320;
+  const picksDelay = 460;
+  const diffDelay = 600;
+
   // --- render -------------------------------------------------------
   return (
-    <div className="space-y-6 md:space-y-8 animate-fade-in" data-testid="batch-diff-page">
+    <div
-      <header>
+      className="space-y-0 animate-fade-in"
-        <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
+      data-testid="batch-diff-page"
-          <span className="inline-block h-px w-6 bg-border" />
+    >
-          Diff
+      {/* =================================================================
+          HERO — DARK EDITORIAL HEADER
+          ================================================================= */}
+      <section
+        className="relative pt-6 pb-8 lg:pt-9 lg:pb-10"
+        style={{ animationDelay: `${heroDelay}ms` }}
+      >
+        {/* Ghost "DIFF" watermark — a print-shop stamp behind the title. */}
+        <div
+          aria-hidden="true"
+          className="pointer-events-none select-none absolute inset-x-0 top-[58%] -translate-y-1/2 whitespace-nowrap display text-center"
+          style={{
+            fontSize: "clamp(160px, 20vw, 300px)",
+            letterSpacing: "-0.05em",
+            opacity: 0.05,
+            lineHeight: 1,
+            color: "hsl(var(--surface-ink))",
+          }}
+        >
+          DIFF
         </div>
-        <h1 className="text-[22px] sm:text-[26px] font-semibold tracking-tight">
-          Batch diff
-        </h1>
-        <p className="text-muted-foreground mt-1.5 text-[14px]">
-          Pick two parsed batches — typically a submitted 837P and its
-          corrected follow-up — and see what was added, removed, or changed
-          between them.
-        </p>
-      </header>
 
-      <div className="surface rounded-xl p-4 grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
+        <div className="relative z-10 grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-8 items-end mb-7">
-        <BatchPicker
+          <div className="min-w-0 max-w-3xl">
-          label="A · left"
+            <div className="flex items-center gap-3 mb-5">
-          value={a}
+              <div className="h-px w-14 bg-foreground/25" />
-          onChange={setA}
+              <span className="mono text-[12px] uppercase tracking-[0.22em] text-muted-foreground">
-          items={batches ?? []}
+                Diff · Sheet 01
-          excludeId={b}
+              </span>
-          testid="diff-picker-a"
+              <span
+                className="mono text-[12px] uppercase tracking-[0.22em] text-muted-foreground/60 hidden sm:inline"
+                aria-hidden
+              >
+                · A vs B
+              </span>
+            </div>
+            <h1 className="display text-[48px] sm:text-[64px] lg:text-[80px] leading-[0.92] text-foreground tracking-[-0.04em]">
+              Compare{" "}
+              <span className="italic text-muted-foreground/85">batches.</span>
+            </h1>
+          </div>
+          <div className="flex flex-col items-start lg:items-end gap-3">
+            <div className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-card/60 px-3.5 py-2 text-[11.5px] mono uppercase tracking-[0.14em] text-muted-foreground backdrop-blur">
+              <GitCompareArrows
+                className="h-3.5 w-3.5"
+                strokeWidth={1.75}
+                style={{ color: "hsl(var(--accent))" }}
+              />
+              837P · 835 · first vs second
+            </div>
+            <kbd
+              className="mono text-[10.5px] uppercase tracking-[0.18em] text-muted-foreground/70"
+            >
+              Pick a batch for each side
+            </kbd>
+          </div>
+        </div>
+
+        <div className="relative z-10 max-w-2xl">
+          <p className="text-[14px] text-muted-foreground leading-relaxed">
+            Pick two parsed batches — typically a submitted 837P and its
+            corrected follow-up — and see what was added, removed, or changed
+            between them.
+          </p>
+        </div>
+      </section>
+
+      {/* =================================================================
+          FOLD — TORN PAGE
+          ================================================================= */}
+      <div
+        aria-hidden
+        className="relative h-14"
+        style={{ animationDelay: `${foldDelay}ms` }}
+      >
+        <div
+          className="absolute inset-x-0 top-0 h-1/2"
+          style={{
+            background:
+              "linear-gradient(to bottom, hsl(0 0% 0% / 0.55), transparent)",
+          }}
         />
-        <BatchPicker
+        <div
-          label="B · right"
+          className="absolute inset-x-0 bottom-0 h-1/2"
-          value={b}
+          style={{
-          onChange={setB}
+            background:
-          items={batches ?? []}
+              "linear-gradient(to top, hsl(30 14% 14% / 0.18), transparent)",
-          excludeId={a}
+          }}
-          testid="diff-picker-b"
         />
+        <div
+          className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px"
+          style={{
+            background:
+              "linear-gradient(to right, transparent, hsl(30 14% 14% / 0.5) 12%, hsl(30 14% 14% / 0.7) 50%, hsl(30 14% 14% / 0.5) 88%, transparent)",
+          }}
+        />
+        <div
+          className="absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-between px-2"
+          style={{ pointerEvents: "none" }}
+        >
+          {Array.from({ length: 48 }, (_, i) => (
+            <span
+              key={i}
+              className="block h-[3px] w-[3px] rounded-full"
+              style={{ backgroundColor: "hsl(30 14% 14% / 0.22)" }}
+            />
+          ))}
+        </div>
+        <div className="relative z-10 mx-auto h-full flex items-center justify-center gap-3 bg-background px-4 w-fit">
+          <span
+            className="display italic"
+            style={{ color: "hsl(var(--muted-foreground))", fontSize: 15 }}
+          >
+            ↘
+          </span>
+          <span
+            className="mono uppercase tracking-[0.24em]"
+            style={{
+              color: "hsl(var(--muted-foreground))",
+              fontSize: 11,
+              fontWeight: 500,
+            }}
+          >
+            A → B
+          </span>
+          <span
+            className="display italic"
+            style={{ color: "hsl(var(--muted-foreground))", fontSize: 15 }}
+          >
+            ↙
+          </span>
+        </div>
       </div>
 
-      {batchesError ? (
+      {/* =================================================================
-        <ErrorState
+          PAPER PLANE
-          message="Couldn't load batches from the backend."
+          ================================================================= */}
-          detail={
+      <div
-            batchesErrorMsg instanceof Error
+        className="relative max-w-[1280px] mx-auto"
-              ? batchesErrorMsg.message
+        style={{
-              : String(batchesErrorMsg)
+          animationDelay: `${titleDelay}ms`,
-          }
+          backgroundColor: "hsl(var(--surface))",
-          onRetry={() => refetchBatches()}
+          boxShadow:
+            "inset 0 1px 0 0 hsl(0 0% 100% / 0.5), 0 1px 0 0 hsl(30 14% 22% / 0.06), 0 30px 80px -24px hsl(0 0% 0% / 0.45)",
+        }}
+      >
+        {/* Paper grain */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 opacity-[0.04]"
+          style={{
+            backgroundImage:
+              "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")",
+            backgroundSize: "160px 160px",
+            mixBlendMode: "multiply",
+          }}
         />
-      ) : null}
 
-      {!ready ? (
+        {/* Title block */}
-        <div className="surface rounded-xl">
+        <div
-          <EmptyState
+          className="relative px-8 lg:px-14 pt-12 pb-9 border-b animate-fade-in-up"
-            icon={<GitCompareArrows className="h-4 w-4" strokeWidth={1.5} />}
+          style={{
-            eyebrow="Batch diff · awaiting picks"
+            animationDelay: `${titleDelay}ms`,
-            message="Choose one batch for A and one for B to compute the diff."
+            borderColor: "hsl(30 14% 14% / 0.12)",
+          }}
+        >
+          <div
+            aria-hidden
+            className="absolute left-7 lg:left-12 top-0 bottom-0 w-px"
+            style={{ backgroundColor: "hsl(30 14% 14% / 0.14)" }}
           />
+          <div className="flex items-end justify-between gap-8 flex-wrap">
+            <div>
+              <div
+                className="mono text-[12px] uppercase tracking-[0.24em] mb-4 font-medium"
+                style={{ color: "hsl(var(--surface-ink-3))" }}
+              >
+                Sheet 01 · Compare two batches
+              </div>
+              <h2
+                className="display leading-[0.92] tracking-[-0.04em]"
+                style={{
+                  color: "hsl(var(--surface-ink))",
+                  fontSize: "clamp(48px, 7vw, 96px)",
+                  fontWeight: 400,
+                }}
+              >
+                Compare them.
+              </h2>
+              <div
+                className="mt-4 display italic"
+                style={{
+                  color: "hsl(var(--surface-ink-2))",
+                  fontSize: "clamp(15px, 1.3vw, 18px)",
+                  lineHeight: 1.4,
+                  maxWidth: "32ch",
+                }}
+              >
+                Two picks, three buckets. What the second batch added, what
+                the first batch dropped, and which claims moved between them.
+              </div>
+            </div>
+            <div className="text-right shrink-0">
+              <div
+                className="mono text-[11px] uppercase tracking-[0.24em] mb-1.5 font-medium"
+                style={{ color: "hsl(var(--surface-ink-3))" }}
+              >
+                On the wire
+              </div>
+              <div
+                className="flex items-center justify-end gap-2 tabular-nums"
+                style={{
+                  color: "hsl(var(--surface-ink))",
+                  fontSize: 26,
+                  lineHeight: 1.1,
+                }}
+              >
+                <span
+                  className="display"
+                  style={{ color: a ? "hsl(212 100% 45%)" : "hsl(var(--surface-ink-3))" }}
+                >
+                  {a ? "A" : "—"}
+                </span>
+                <ArrowRight
+                  className="h-4 w-4 mt-0.5"
+                  strokeWidth={1.5}
+                  style={{ color: "hsl(var(--surface-ink-3))" }}
+                />
+                <span
+                  className="display"
+                  style={{ color: b ? "hsl(36 92% 50%)" : "hsl(var(--surface-ink-3))" }}
+                >
+                  {b ? "B" : "—"}
+                </span>
+              </div>
+              <div
+                className="mono text-[11px] mt-1"
+                style={{ color: "hsl(var(--surface-ink-3))" }}
+              >
+                {ready ? "ready to diff" : "two picks needed"}
+              </div>
+            </div>
+          </div>
         </div>
-      ) : loadingBatches ? (
-        <BatchDiffViewSkeleton />
-      ) : errKind === "not_found" ? (
-        <NotFoundState a={a as string} b={b as string} onReset={reset} />
-      ) : diff.isError ? (
-        <ErrorState
-          message="Couldn't compute the diff between these two batches."
-          detail={
-            diff.error instanceof Error
-              ? diff.error.message
-              : String(diff.error)
-          }
-          onRetry={() => diff.refetch()}
-        />
-      ) : diff.isLoading || !diff.data ? (
-        <BatchDiffViewSkeleton />
-      ) : (
-        <BatchDiffView data={diff.data} />
-      )}
 
-      {/* Action footer — always visible so the operator can clear or
+        {/* § 01 The picks */}
-          force-refresh without scrolling back to the picker. */}
+        <section
-      {ready ? (
+          aria-label="The picks"
-        <div className="flex items-center justify-end gap-2 pt-2">
+          className="relative px-8 lg:px-14 py-7 animate-fade-in-up"
-          {diff.isFetching ? (
+          style={{ animationDelay: `${picksDelay}ms` }}
-            <span className="text-[12px] text-muted-foreground inline-flex items-center gap-1.5">
+        >
-              <CircleDashed className="h-3 w-3 animate-spin" strokeWidth={1.75} />
+          <Folio section="§ 01" label="The picks" />
-              Refreshing…
+          <div
-            </span>
+            className="pt-6 border-t"
-          ) : null}
+            style={{
-          <Button
+              borderTopStyle: "double",
-            variant="outline"
+              borderTopWidth: 3,
-            size="sm"
+              borderColor: "hsl(30 14% 14% / 0.12)",
-            onClick={() => diff.refetch()}
+            }}
-            data-testid="diff-refresh-button"
           >
-            Refresh
+            <div className="flex items-end justify-between gap-6 flex-wrap mb-5">
-          </Button>
+              <div>
-          <Button
+                <div
-            variant="ghost"
+                  className="mono text-[11.5px] uppercase tracking-[0.24em] font-semibold mb-2"
-            size="sm"
+                  style={{ color: "hsl(var(--surface-ink-3))" }}
-            onClick={reset}
+                >
-            data-testid="diff-clear-button"
+                  The picks
+                </div>
+                <h3
+                  className="display leading-[0.98] tracking-[-0.03em]"
+                  style={{
+                    color: "hsl(var(--surface-ink))",
+                    fontSize: "clamp(24px, 2.6vw, 32px)",
+                    fontWeight: 400,
+                  }}
+                >
+                  One on each <span className="italic">side.</span>
+                </h3>
+              </div>
+              <div
+                className="text-[12.5px] display italic"
+                style={{ color: "hsl(var(--surface-ink-2))", maxWidth: 380 }}
+              >
+                A is the "before" — B is the "after". A picked batch can't
+                be picked again on the other side.
+              </div>
+            </div>
+            <div className="relative grid grid-cols-1 md:grid-cols-2 gap-4">
+              <BatchPicker
+                label="A · left"
+                side="A"
+                value={a}
+                onChange={setA}
+                items={batches ?? []}
+                excludeId={b}
+                testid="diff-picker-a"
+              />
+              <BatchPicker
+                label="B · right"
+                side="B"
+                value={b}
+                onChange={setB}
+                items={batches ?? []}
+                excludeId={a}
+                testid="diff-picker-b"
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* § 02 The diff */}
+        <section
+          aria-label="The diff"
+          className="relative px-8 lg:px-14 pb-8 lg:pb-10 animate-fade-in-up"
+          style={{ animationDelay: `${diffDelay}ms` }}
+        >
+          <Folio section="§ 02" label="The diff" topClass="top-9" />
+          <div
+            className="pt-6 border-t"
+            style={{
+              borderTopStyle: "double",
+              borderTopWidth: 3,
+              borderColor: "hsl(30 14% 14% / 0.12)",
+            }}
           >
-            <AlertCircle className="h-3.5 w-3.5 mr-1" strokeWidth={1.75} />
+            <div className="flex items-end justify-between gap-6 flex-wrap mb-5">
-            Clear picks
+              <div>
-          </Button>
+                <div
+                  className="mono text-[11.5px] uppercase tracking-[0.24em] font-semibold mb-2"
+                  style={{ color: "hsl(var(--surface-ink-3))" }}
+                >
+                  The diff
+                </div>
+                <h3
+                  className="display leading-[0.98] tracking-[-0.03em]"
+                  style={{
+                    color: "hsl(var(--surface-ink))",
+                    fontSize: "clamp(24px, 2.6vw, 32px)",
+                    fontWeight: 400,
+                  }}
+                >
+                  What <span className="italic">moved.</span>
+                </h3>
+              </div>
+              {ready ? (
+                <div
+                  className="text-[12.5px] display italic"
+                  style={{
+                    color: "hsl(var(--surface-ink-2))",
+                    maxWidth: 380,
+                  }}
+                >
+                  Three buckets — added in B, removed from A, changed in
+                  place. Unchanged claims are summarized but not listed.
+                </div>
+              ) : null}
+            </div>
+
+            {batchesError ? (
+              <div
+                className="rounded-md border p-5"
+                style={{
+                  borderColor: "hsl(30 14% 14% / 0.16)",
+                  backgroundColor: "hsl(36 22% 96%)",
+                }}
+              >
+                <ErrorState
+                  message="Couldn't load batches from the backend."
+                  detail={
+                    batchesErrorMsg instanceof Error
+                      ? batchesErrorMsg.message
+                      : String(batchesErrorMsg)
+                  }
+                  onRetry={() => refetchBatches()}
+                />
+              </div>
+            ) : !ready ? (
+              <div
+                className="rounded-md border p-12 text-center"
+                style={{
+                  borderColor: "hsl(30 14% 14% / 0.16)",
+                  borderStyle: "dashed",
+                  backgroundColor: "hsl(36 22% 96%)",
+                }}
+                data-testid="batch-diff-awaiting"
+              >
+                <EmptyState
+                  icon={
+                    <GitCompareArrows
+                      className="h-4 w-4"
+                      strokeWidth={1.5}
+                    />
+                  }
+                  eyebrow="Batch diff · awaiting picks"
+                  message="Choose one batch for A and one for B to compute the diff."
+                />
+              </div>
+            ) : loadingBatches ? (
+              <BatchDiffViewSkeleton />
+            ) : errKind === "not_found" ? (
+              <NotFoundState a={a as string} b={b as string} onReset={reset} />
+            ) : diff.isError ? (
+              <div
+                className="rounded-md border p-5"
+                style={{
+                  borderColor: "hsl(30 14% 14% / 0.16)",
+                  backgroundColor: "hsl(36 22% 96%)",
+                }}
+              >
+                <ErrorState
+                  message="Couldn't compute the diff between these two batches."
+                  detail={
+                    diff.error instanceof Error
+                      ? diff.error.message
+                      : String(diff.error)
+                  }
+                  onRetry={() => diff.refetch()}
+                />
+              </div>
+            ) : diff.isLoading || !diff.data ? (
+              <BatchDiffViewSkeleton />
+            ) : (
+              <BatchDiffView data={diff.data} />
+            )}
+          </div>
+        </section>
+
+        {/* Action footer — always visible when ready so the operator can
+            clear or force-refresh without scrolling back to the picker. */}
+        {ready ? (
+          <div
+            className="relative px-8 lg:px-14 py-5 border-t flex items-center justify-between gap-3 flex-wrap"
+            style={{
+              borderColor: "hsl(30 14% 14% / 0.12)",
+            }}
+          >
+            <div
+              className="text-[12.5px] display italic"
+              style={{ color: "hsl(var(--surface-ink-2))" }}
+            >
+              {diff.isFetching ? (
+                <span className="inline-flex items-center gap-1.5">
+                  <CircleDashed
+                    className="h-3 w-3 animate-spin"
+                    strokeWidth={1.75}
+                  />
+                  Refreshing…
+                </span>
+              ) : (
+                <>
+                  Comparing{" "}
+                  <span
+                    className="display mono not-italic"
+                    style={{ color: "hsl(var(--surface-ink))" }}
+                  >
+                    {a}
+                  </span>{" "}
+                  with{" "}
+                  <span
+                    className="display mono not-italic"
+                    style={{ color: "hsl(var(--surface-ink))" }}
+                  >
+                    {b}
+                  </span>
+                  .
+                </>
+              )}
+            </div>
+            <div className="flex items-center gap-2 flex-wrap">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => diff.refetch()}
+                data-testid="diff-refresh-button"
+              >
+                Refresh
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={reset}
+                data-testid="diff-clear-button"
+              >
+                <AlertCircle className="h-3.5 w-3.5 mr-1" strokeWidth={1.75} />
+                Clear picks
+              </Button>
+            </div>
+          </div>
+        ) : null}
+
+        {/* Footer */}
+        <div
+          className="relative px-8 lg:px-14 py-5 border-t flex items-center justify-between mono text-[10.5px] uppercase tracking-[0.18em]"
+          style={{
+            borderColor: "hsl(30 14% 14% / 0.12)",
+            color: "hsl(var(--surface-ink-3))",
+          }}
+        >
+          <span>End of sheet 01</span>
+          <span>Cyclone · Batch diff</span>
+          <span>{ready ? "A vs B" : "awaiting picks"}</span>
         </div>
-      ) : null}
+      </div>
     </div>
   );
 }