diff --git a/index.html b/index.html
index 710be6e..85a8a15 100644
--- a/index.html
+++ b/index.html
@@ -13,12 +13,9 @@
     <!--BASE_HREF-->
     <link rel="icon" type="image/webp" href="./brand/zurich_logo.webp" />
     <title>Zurich Kotak | Lead Desk</title>
-    <!-- Geist — a modern enterprise UI typeface (Vercel). Renders crisp at
-         data-density sizes where the previous face went soft. Zurich Sans is
-         kept in the fallback stack, and Geist Mono carries refs and figures. -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap" />
+    <!-- Typeface is Source Sans 3, self-hosted and bundled from src/assets
+         (see src/index.css). No CDN request, and it renders under the
+         sub-path mount because Vite resolves the URLs at build. -->
     <!-- Written next to the artifact at placement; carries this environment's
          VITE_ZINO_API_URL, which src/runtimeConfig.js reads off
          window.__RUNTIME_CONFIG__. Without it requireConfigValue throws and the
diff --git a/src/api/config.js b/src/api/config.js
index 87403e2..ede5219 100644
--- a/src/api/config.js
+++ b/src/api/config.js
@@ -69,11 +69,12 @@ export const STAGES = [
  * waiting on me?".
  */
 export const NAV_GROUPS = [
-  { label: 'Action required',   kind: 'needs' },
-  { label: 'Customer response', kind: 'customer' },
-  { label: 'Automated',         kind: 'auto' },
-  { label: 'Scheduled',         kind: 'waiting' },
-  { label: 'Closed',            kind: 'end' },
+  // The sidebar answers "is anything waiting on me?", so a group is WHO holds
+  // the work, not where it sits in the process. A person's queues and the
+  // customer's queues both need a human to look, so they share one heading.
+  { label: 'Needs you', kinds: ['needs', 'customer'] },
+  { label: 'Scheduled', kinds: ['waiting'] },
+  { label: 'History',   kinds: ['end'] },
 ]
 
 /** Channel presentation. source_channel is data on the instance, never a branch. */
diff --git a/src/api/holder.js b/src/api/holder.js
new file mode 100644
index 0000000..3d1ed7f
--- /dev/null
+++ b/src/api/holder.js
@@ -0,0 +1,36 @@
+import { phaseOf } from './config.js'
+
+/**
+ * Who is holding a lead right now, said the way the colour rule says it:
+ * blue = the AI, amber = a person, teal = the customer, grey = nobody (closed).
+ *
+ * Derived from phaseOf, so it agrees with the sidebar tallies and the lead
+ * header. `label` is the short form for a table cell: "AI · Intake",
+ * "Underwriter", "Customer", "Closed".
+ */
+const AI_NAMES = [
+  ['intake', 'Intake'], ['engage', 'Engage'], ['advisor', 'Advisor'],
+  ['kyc', 'KYC'], ['voice', 'Meera'], ['rating', 'Rating'],
+]
+
+function tidy(by) {
+  const s = String(by || '').replace(/^(the|an|a)\s+/i, '').trim()
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : '—'
+}
+
+export function holderOf(stageDef, row) {
+  if (!stageDef) return { tone: 'grey', label: '—' }
+  const ph = phaseOf(stageDef, row) || stageDef
+  switch (ph.kind) {
+    case 'auto': {
+      const by = String(ph.by || '').toLowerCase()
+      const hit = AI_NAMES.find(([k]) => by.includes(k))
+      return { tone: 'blue', label: 'AI · ' + (hit ? hit[1] : 'Engage') }
+    }
+    case 'customer': return { tone: 'teal', label: 'Customer' }
+    case 'needs':    return { tone: 'amber', label: tidy(ph.by) }
+    case 'waiting':  return { tone: 'grey', label: 'Calendar' }
+    case 'end':      return { tone: 'grey', label: 'Closed' }
+    default:         return { tone: 'grey', label: tidy(ph.by) }
+  }
+}
diff --git a/src/assets/fonts/source-sans-3-latin-400-normal.woff2 b/src/assets/fonts/source-sans-3-latin-400-normal.woff2
new file mode 100644
index 0000000..0c4242e
Binary files /dev/null and b/src/assets/fonts/source-sans-3-latin-400-normal.woff2 differ
diff --git a/src/assets/fonts/source-sans-3-latin-500-normal.woff2 b/src/assets/fonts/source-sans-3-latin-500-normal.woff2
new file mode 100644
index 0000000..5918916
Binary files /dev/null and b/src/assets/fonts/source-sans-3-latin-500-normal.woff2 differ
diff --git a/src/assets/fonts/source-sans-3-latin-600-normal.woff2 b/src/assets/fonts/source-sans-3-latin-600-normal.woff2
new file mode 100644
index 0000000..9351177
Binary files /dev/null and b/src/assets/fonts/source-sans-3-latin-600-normal.woff2 differ
diff --git a/src/assets/fonts/source-sans-3-latin-700-normal.woff2 b/src/assets/fonts/source-sans-3-latin-700-normal.woff2
new file mode 100644
index 0000000..3cb944c
Binary files /dev/null and b/src/assets/fonts/source-sans-3-latin-700-normal.woff2 differ
diff --git a/src/assets/fonts/source-sans-3-latin-ext-400-normal.woff2 b/src/assets/fonts/source-sans-3-latin-ext-400-normal.woff2
new file mode 100644
index 0000000..73c9edc
Binary files /dev/null and b/src/assets/fonts/source-sans-3-latin-ext-400-normal.woff2 differ
diff --git a/src/assets/fonts/source-sans-3-latin-ext-500-normal.woff2 b/src/assets/fonts/source-sans-3-latin-ext-500-normal.woff2
new file mode 100644
index 0000000..dcaff79
Binary files /dev/null and b/src/assets/fonts/source-sans-3-latin-ext-500-normal.woff2 differ
diff --git a/src/assets/fonts/source-sans-3-latin-ext-600-normal.woff2 b/src/assets/fonts/source-sans-3-latin-ext-600-normal.woff2
new file mode 100644
index 0000000..4ebc744
Binary files /dev/null and b/src/assets/fonts/source-sans-3-latin-ext-600-normal.woff2 differ
diff --git a/src/assets/fonts/source-sans-3-latin-ext-700-normal.woff2 b/src/assets/fonts/source-sans-3-latin-ext-700-normal.woff2
new file mode 100644
index 0000000..2b448cb
Binary files /dev/null and b/src/assets/fonts/source-sans-3-latin-ext-700-normal.woff2 differ
diff --git a/src/components/AgentChip.css b/src/components/AgentChip.css
index ed5002e..08373cc 100644
--- a/src/components/AgentChip.css
+++ b/src/components/AgentChip.css
@@ -1,96 +1,39 @@
-.who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
 
+/* A soft disc in the worker's colour: blue for the AI at large, amber for KYC,
+   teal for the Advisor, grey initials for a person. */
 .who__disc {
-  position: relative;
-  display: grid;
-  place-items: center;
-  flex: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  font-size: var(--fs-2xs);
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  color: #fff;
-  user-select: none;
+  position: relative; display: grid; place-items: center; flex: none;
+  width: 22px; height: 22px; border-radius: 50%;
+  font-size: 11px; font-weight: 700; letter-spacing: .02em; user-select: none;
+  background: var(--zk-tint-blue); color: var(--zk-blue);
+}
+.who--md .who__disc { width: 36px; height: 36px; font-size: 13px; }
+.who--lg .who__disc { width: 40px; height: 40px; font-size: 14px; }
+
+.who__disc--blue, .who__disc--violet, .who__disc--plum { background: var(--zk-tint-blue); color: var(--zk-blue); }
+.who__disc--teal  { background: var(--zk-teal-tint);  color: var(--zk-teal); }
+.who__disc--amber { background: var(--zk-amber-tint); color: var(--zk-amber); }
+.who__disc--grey  { background: var(--zk-line-soft);  color: var(--zk-muted); }
+
+.who__glyph { width: 52%; height: 52%; }
+.who__init { font-weight: 700; }
+
+.who__name { font-size: var(--fs-sm); font-weight: 600; color: var(--zk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.who__tag {
+  font-size: 12px; font-weight: 700; letter-spacing: .04em;
+  color: var(--zk-blue); background: var(--zk-tint-blue);
+  padding: 1px 6px; border-radius: 4px;
 }
 
-.who--md .who__disc { width: 26px; height: 26px; font-size: var(--fs-2xs); }
-
-.who__name {
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  color: var(--zk-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Five agents, five hues, all readable on white at 20px and all distinguishable
-   from the Zurich blue the interface already uses for its own chrome. */
-.who__disc--blue   { background: #2167ae; }
-.who__disc--teal   { background: #0f7b78; }
-.who__disc--violet { background: #5b4bb7; }
-.who__disc--amber  { background: #a8651a; }
-.who__disc--plum   { background: #8a3d6b; }
-.who__disc--grey   { background: #6b7280; }
-
-/* The chip becomes a control only where a card exists to open. */
 .who--btn {
-  font: inherit;
-  cursor: pointer;
-  padding: 2px 8px 2px 2px;
-  border: 1px solid transparent;
-  border-radius: var(--r-pill, 999px);
-  background: transparent;
-  transition: background .12s, border-color .12s;
+  font: inherit; cursor: pointer; padding: 2px 8px 2px 2px;
+  border: 1px solid transparent; border-radius: var(--r-pill); background: transparent;
+  transition: background var(--t-fast), border-color var(--t-fast);
 }
 .who--btn:hover { background: var(--zk-tint); border-color: var(--zk-line); }
 .who--btn:hover .who__i { opacity: 1; }
-.who--btn:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
+.who--btn:focus-visible { outline: none; box-shadow: var(--ring); }
+.who__i { width: 12px; height: 12px; flex: none; color: var(--zk-grey); opacity: 0; transition: opacity .12s; }
 
-.who__i {
-  width: 12px;
-  height: 12px;
-  flex: none;
-  color: var(--zk-grey);
-  opacity: 0;
-  transition: opacity .12s;
-}
-
-/* The AI mark, on the disc rather than beside the name: it has to survive
-   showName={false}, and it belongs to the worker, not to the label. Sits
-   proud of the disc so it stays legible against every one of the five hues,
-   with a white ring to separate it from the colour underneath. */
-.who__ai {
-  position: absolute;
-  right: -3px;
-  bottom: -3px;
-  width: 11px;
-  height: 11px;
-  fill: var(--zk-amber, #b5761f);
-  stroke: var(--zk-white, #fff);
-  stroke-width: 0.9;
-  stroke-linejoin: round;
-  paint-order: stroke fill;
-}
-
-.who--md .who__ai { width: 13px; height: 13px; right: -3px; bottom: -3px; }
-
-/* Said out loud for a screen reader, which cannot see a sparkle. */
-.who__sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* Role icon fills most of the disc, leaving room for the AI spark at the
-   corner. Sized off the disc so it scales with .who--md. */
-.who__glyph { width: 60%; height: 60%; }
-.who--md .who__glyph { width: 58%; height: 58%; }
+.who__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
diff --git a/src/components/AgentChip.jsx b/src/components/AgentChip.jsx
index 4c35ca0..70d651f 100644
--- a/src/components/AgentChip.jsx
+++ b/src/components/AgentChip.jsx
@@ -1,4 +1,4 @@
-import { AGENTS } from '../api/agents.js'
+import { AGENTS, initialsOf } from '../api/agents.js'
 import './AgentChip.css'
 
 /**
@@ -20,16 +20,6 @@ function SparkleGlyph() {
   )
 }
 
-function PersonGlyph() {
-  return (
-    <svg className="who__glyph who__glyph--person" viewBox="0 0 16 16" fill="none"
-         stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
-      <circle cx="8" cy="5.6" r="2.7" />
-      <path d="M2.9 13.8a5.1 5.1 0 0 1 10.2 0" strokeLinecap="round" />
-    </svg>
-  )
-}
-
 /**
  * Who did this — as a face, not a slug.
  *
@@ -58,10 +48,11 @@ export default function AgentChip({ agentKey, name, size = 'sm', showName = true
           Only agents get it. A trail where a human's disc also carried one
           would say nothing at all. */}
       <span className={`who__disc who__disc--${tone}`} aria-hidden="true">
-        {/* A machine wears the sparkle; a person wears the person. */}
-        {a ? <SparkleGlyph /> : <PersonGlyph />}
+        {/* A machine wears the sparkle; a person wears their initials. */}
+        {a ? <SparkleGlyph /> : <span className="who__init">{initialsOf(name)}</span>}
       </span>
       {showName ? <span className="who__name">{label}</span> : null}
+      {showName && a ? <small className="who__tag">AI</small> : null}
       {a ? <span className="who__sr"> (AI)</span> : null}
     </>
   )
diff --git a/src/components/ChainOfThought.css b/src/components/ChainOfThought.css
index 12d8732..09c8d61 100644
--- a/src/components/ChainOfThought.css
+++ b/src/components/ChainOfThought.css
@@ -1,102 +1,32 @@
-.cot { margin-top: var(--sp-3); }
+.cot { margin-top: 8px; }
+.cot__finding { margin: 0 0 8px; font-size: 15.5px; line-height: 1.5; color: var(--zk-ink); max-width: 64ch; }
 
-/* The finding — the one sentence that answers "what did it conclude", visible
-   without opening the reasoning. */
-.cot__finding {
-  margin: 0 0 var(--sp-3);
-  font-size: var(--fs-sm);
-  line-height: var(--lh-normal);
-  font-weight: var(--fw-medium);
-  color: var(--zk-ink);
-}
-
-/* THE THINKING CHIP. A quiet pill, tinted in the accent, that reads as an AI
-   reasoning affordance rather than a plain link — the "how did it decide"
-   handle. */
+/* The handle is a link, in the row of actions under the entry. */
 .cot__toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sp-2);
-  padding: 5px 12px 5px 9px;
-  border: 1px solid var(--zk-blue-light);
-  border-radius: var(--r-pill);
-  background: var(--zk-tint-blue);
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--fs-2xs);
-  font-weight: var(--fw-semi);
-  color: var(--zk-blue-dark);
-  transition: background var(--t-fast), border-color var(--t-fast);
+  display: inline-flex; align-items: center; gap: 6px; padding: 0;
+  border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-blue);
 }
-.cot__toggle:hover { background: var(--zk-white); border-color: var(--zk-blue-mid); }
-.cot__brain { width: 14px; height: 14px; flex: none; }
-.cot__ct { color: var(--zk-blue-dark); font-weight: var(--fw-normal); opacity: .72; }
+.cot__toggle:hover { text-decoration: underline; }
+.cot__toggle:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
+.cot__brain { display: none; }
+.cot__ct { font-weight: 600; }
 .cot__caret { width: 11px; height: 11px; transition: transform .18s var(--ease); opacity: .7; }
 .cot__caret.is-open { transform: rotate(90deg); }
 
-/* THE REASONING, revealed as its own artifact: a soft accent-tinted panel with
-   a stepped rail, so the chain reads as a distinct object — the record of how
-   the machine got there — not loose text under a link. */
+/* The reasoning, as a flat card with a stepped rail. */
 .cot__steps {
-  list-style: none;
-  margin: var(--sp-3) 0 0;
-  padding: var(--sp-4) var(--sp-5) var(--sp-3);
-  border: 1px solid var(--zk-blue-light);
-  border-radius: var(--r-md);
-  background:
-    linear-gradient(180deg, var(--zk-tint-blue) 0%, transparent 70%),
-    var(--zk-white);
+  list-style: none; margin: 10px 0 0; padding: 14px 18px 10px;
+  border: 1px solid var(--zk-line); border-radius: var(--r-md); background: #fff;
 }
-
-.cot__step {
-  position: relative;
-  display: grid;
-  grid-template-columns: 76px 1fr;
-  gap: var(--sp-3);
-  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
-}
-/* the marker dot */
+.cot__step { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 8px 0 8px 16px; }
 .cot__step::before {
-  content: "";
-  position: absolute;
-  left: 2px;
-  top: 9px;
-  width: 9px; height: 9px;
-  border-radius: 50%;
-  background: var(--zk-white);
-  border: 2px solid var(--zk-blue);
-  z-index: 1;
-}
-/* the connector between markers */
-.cot__step:not(:last-child)::after {
-  content: "";
-  position: absolute;
-  left: 5.5px;
-  top: 18px;
-  bottom: -6px;
-  width: 1.5px;
-  background: var(--zk-blue-light);
-}
-
-.cot__mark {
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-bold);
-  letter-spacing: .06em;
-  text-transform: uppercase;
-  color: var(--zk-blue-dark);
-  padding-top: 2px;
-}
-
-.cot__b { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--zk-muted); overflow-wrap: anywhere; }
-.cot__b b { color: var(--zk-ink); font-weight: var(--fw-semi); }
-
-.cot__foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
-.cot__conf {
-  font-size: 11.5px;
-  font-weight: var(--fw-bold);
-  color: var(--zk-blue-dark);
-  background: var(--zk-tint-blue);
-  border: 1px solid var(--zk-blue-light);
-  padding: 1px 10px;
-  border-radius: var(--r-pill);
+  content: ''; position: absolute; left: 2px; top: 11px; width: 9px; height: 9px;
+  border-radius: 50%; background: #fff; border: 2px solid var(--zk-blue); z-index: 1;
 }
+.cot__step:not(:last-child)::after { content: ''; position: absolute; left: 5.5px; top: 20px; bottom: -6px; width: 1.5px; background: var(--zk-blue-light); }
+.cot__mark { font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--zk-blue); padding-top: 2px; }
+.cot__b { font-size: var(--fs-xs); line-height: 1.5; color: var(--zk-muted); overflow-wrap: anywhere; }
+.cot__b b { color: var(--zk-ink); font-weight: 600; }
+.cot__foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.cot__conf { font-size: 12px; font-weight: 700; color: var(--zk-blue); background: var(--zk-tint-blue); padding: 1px 10px; border-radius: var(--r-pill); }
diff --git a/src/components/ChainOfThought.jsx b/src/components/ChainOfThought.jsx
index e2c15b9..440246a 100644
--- a/src/components/ChainOfThought.jsx
+++ b/src/components/ChainOfThought.jsx
@@ -49,7 +49,7 @@ export default function ChainOfThought({ reasoning, decided, confidence }) {
           <path d="M6 2.5a2 2 0 0 0-2 2 2 2 0 0 0-1 3.7A2 2 0 0 0 4 11.5a2 2 0 0 0 2 2M10 2.5a2 2 0 0 1 2 2 2 2 0 0 1 1 3.7 2 2 0 0 1-1 3.3 2 2 0 0 1-2 2M8 3v10"
                 fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
         </svg>
-        Chain of thought
+        See reasoning
         <span className="cot__ct">· {steps} step{steps === 1 ? '' : 's'}</span>
         <svg className={'cot__caret' + (open ? ' is-open' : '')} viewBox="0 0 12 12" aria-hidden="true">
           <path d="M4 2.5 8 6l-4 3.5" fill="none" stroke="currentColor" strokeWidth="1.6"
diff --git a/src/components/StageRail.css b/src/components/StageRail.css
index 443bad6..3ed727f 100644
--- a/src/components/StageRail.css
+++ b/src/components/StageRail.css
@@ -1,104 +1,36 @@
-/* The journey, across the top. Eight steps have to fit without wrapping on a
-   laptop, so the labels are short and the dots carry the state. */
+/* The journey, across the top of the lead. Eight steps, one row. */
 .rail {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-6);
-  flex-wrap: wrap;
-  margin: 0 0 var(--sp-5);
-  padding: var(--sp-6) var(--sp-7);
-  border: 1px solid var(--zk-line-soft);
-  border-radius: var(--r-md);
-  box-shadow: var(--sh-sm);
-  background: var(--zk-white);
-}
-
-.rail ol {
-  display: flex;
-  align-items: flex-start;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  flex: 1;
-  min-width: 0;
-}
-
-.rail__s {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sp-3);
-  flex: 1;
-  min-width: 0;
-  text-align: center;
+  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
+  margin: 0 0 18px; padding: 20px 28px 18px;
+  border: 1px solid var(--zk-line); border-radius: var(--r-md); background: #fff;
 }
+.rail ol { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
+.rail__s { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: center; }
 
 .rail__dot {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  flex: none;
-  background: var(--zk-white);
-  border: 2px solid var(--zk-line);
-  z-index: 1;
-  transition: background var(--t-fast), border-color var(--t-fast);
+  width: 16px; height: 16px; border-radius: 50%; flex: none; z-index: 1;
+  background: var(--zk-navy); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--zk-navy);
+  transition: background var(--t-fast), box-shadow var(--t-fast);
 }
+.rail__l { font-size: var(--fs-xs); font-weight: 500; color: var(--zk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
 
-.rail__l {
-  font-size: var(--fs-2xs);
-  font-weight: var(--fw-medium);
-  color: var(--zk-grey);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
+.rail__bar { position: absolute; top: 7px; left: 50%; width: 100%; height: 2px; background: var(--zk-line); }
+.rail__bar.is-done { background: var(--zk-navy); }
 
-/* The connector sits behind the dots, drawn from each step to the next. */
-.rail__bar {
-  position: absolute;
-  top: 6px;
-  left: 50%;
-  width: 100%;
-  height: 2px;
-  background: var(--zk-line-soft);
-}
-.rail__bar.is-done { background: var(--zk-blue-light); }
+.is-todo .rail__dot { background: #fff; box-shadow: 0 0 0 1px var(--zk-line); }
+.is-todo .rail__l { color: var(--zk-grey); }
 
-.is-done .rail__dot { background: var(--zk-blue-light); border-color: var(--zk-blue-light); }
-.is-done .rail__l   { color: var(--zk-muted); }
+.is-here .rail__l { font-weight: 700; color: var(--zk-navy); }
+.is-here.tone-teal .rail__dot { background: var(--zk-teal); box-shadow: 0 0 0 1px var(--zk-teal), 0 0 0 5px var(--zk-teal-tint); }
+.is-here.tone-blue .rail__dot { background: var(--zk-blue); box-shadow: 0 0 0 1px var(--zk-blue), 0 0 0 5px var(--zk-tint-blue); }
+.is-here.tone-blue .rail__l { color: var(--zk-blue); }
+.is-here.tone-navy .rail__dot { box-shadow: 0 0 0 1px var(--zk-navy), 0 0 0 5px var(--zk-tint-blue); }
 
-.is-here .rail__dot {
-  background: var(--zk-blue);
-  border-color: var(--zk-blue);
-  box-shadow: 0 0 0 5px rgba(33, 103, 174, 0.15);
-}
-.is-here .rail__l {
-  color: var(--zk-blue-dark);
-  font-weight: var(--fw-semi);
-  font-size: var(--fs-xs);
-}
-
-/* Off the path — Parked, Referred, Lost, Declined. Named rather than drawn
-   into the row: these are departures, not points every lead passes. */
 .rail__off {
-  flex: none;
-  font-size: var(--fs-xs);
-  font-weight: var(--fw-medium);
-  color: var(--zk-amber-ink);
-  background: var(--zk-amber-tint);
-  border: 1px solid var(--zk-amber-line);
-  padding: var(--sp-2) var(--sp-4);
-  border-radius: var(--r-pill);
-}
-.rail__off.is-closed {
-  color: var(--zk-muted);
-  background: var(--zk-tint);
-  border-color: var(--zk-line);
+  flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-amber);
+  background: var(--zk-amber-tint); border: 1px solid var(--zk-amber-line);
+  padding: 6px 14px; border-radius: var(--r-pill);
 }
+.rail__off.is-closed { color: var(--zk-muted); background: var(--zk-line-soft); border-color: var(--zk-line); }
 
-@media (max-width: 900px) {
-  .rail__l { display: none; }
-  .rail { padding: 14px 18px; }
-}
+@media (max-width: 900px) { .rail__l { display: none; } .rail { padding: 14px 18px; } }
diff --git a/src/components/StageRail.jsx b/src/components/StageRail.jsx
index d10733d..c837223 100644
--- a/src/components/StageRail.jsx
+++ b/src/components/StageRail.jsx
@@ -47,6 +47,9 @@ export default function StageRail({ audit, currentName }) {
   if (current) visited.add(current.uid)
 
   const currentIndex = PATH.indexOf(current?.uid)
+  // The current step takes its holder's colour: teal when the lead is closed
+  // (issued, onboarded), blue while the AI has it, navy otherwise.
+  const hereTone = current?.kind === 'end' ? 'teal' : current?.kind === 'auto' ? 'blue' : 'navy'
   // A lead sitting somewhere off the path — Parked, Referred, Lost, Declined.
   const aside = current && currentIndex === -1 ? current : null
 
@@ -60,7 +63,7 @@ export default function StageRail({ audit, currentName }) {
           // risk may never see payment — so nothing after it is called "to do".
           const state = here ? 'here' : been ? 'done' : 'todo'
           return (
-            <li key={uid} className={'rail__s is-' + state}>
+            <li key={uid} className={'rail__s is-' + state + (here ? ' tone-' + hereTone : '')}>
               <span className="rail__dot" aria-hidden="true" />
               <span className="rail__l">{SHORT[uid]}</span>
               {i < PATH.length - 1 ? (
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index 7ded4ba..ad7626d 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,351 +1,80 @@
-.tl {
-  list-style: none;
-  margin: 0;
-  padding: 0 0 0 4px;
+.tl { list-style: none; margin: 0; padding: 0; }
+.tl__loading, .tl__err { color: var(--zk-muted); font-size: var(--fs-xs); padding: 14px 2px; }
+.tl__err { color: var(--zk-danger-ink); }
+
+/* One event: a 36px avatar gutter, then the body. A thin connector runs down
+   the gutter between avatars. */
+.tl__ev { display: grid; grid-template-columns: 36px 1fr; gap: 14px; position: relative; padding-bottom: 22px; }
+.tl__ev::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--zk-line-soft); }
+.tl__ev:last-child::before { display: none; }
+.tl__ev:last-child { padding-bottom: 6px; }
+.tl__ev--sys { opacity: .75; }
+
+.tl__gutter { width: 36px; height: 36px; display: grid; place-items: center; position: relative; z-index: 1; }
+.tl__gutter .who--btn { padding: 0; border: 0; }
+.tl__disc {
+  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
+  font-weight: 700; font-size: 13px;
+  background: var(--zk-line-soft); color: var(--zk-muted);
 }
+.tl__disc--sys { font-size: 18px; color: var(--zk-grey); }
+.tl__disc--cust { background: var(--zk-teal-tint); color: var(--zk-teal); }
+.tl__disc--cust svg { width: 16px; height: 16px; }
 
-.tl__loading,
-.tl__err {
-  color: var(--zk-muted);
-  font-size: var(--fs-xs);
-  padding: 14px 2px;
-}
+.tl__body { min-width: 0; display: flex; flex-direction: column; }
+.tl__line1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 36px; }
+.tl__what { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--zk-ink); }
+.tl__what--wa { display: inline-flex; align-items: center; gap: 6px; color: var(--zk-teal); }
+.tl__what--wa svg { width: 15px; height: 15px; }
+.tl__ev--ai.is-live .tl__what { color: var(--zk-blue); }
+.tl__to { font-size: var(--fs-xs); color: var(--zk-muted); padding: 2px 10px; border-radius: var(--r-pill); background: var(--zk-line-soft); }
+.tl__to::before { content: '→ '; color: var(--zk-grey); }
+.tl__n { font-size: var(--fs-2xs); color: var(--zk-muted); padding: 1px 8px; border-radius: var(--r-pill); background: var(--zk-line-soft); font-variant-numeric: tabular-nums; }
+.tl__when { margin-left: auto; font-size: var(--fs-xs); color: var(--zk-grey); white-space: nowrap; }
 
-.tl__err {
-  color: var(--zk-danger-ink);
-}
+.tl__by { font-size: 14.5px; color: var(--zk-muted); margin-top: -2px; display: flex; align-items: center; gap: 6px; }
+.tl__byname { font-weight: 600; color: var(--zk-ink); }
+.tl__byname--cust { color: var(--zk-teal); }
+.tl__tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--zk-blue); background: var(--zk-tint-blue); padding: 1px 6px; border-radius: 4px; }
 
-.tl__item {
-  position: relative;
-  padding: 0 0 var(--sp-6) var(--sp-7);
-  border-left: 2px solid var(--zk-line-soft);
-}
+/* What was said — a quote block. */
+.tl__say { margin-top: 8px; padding: 10px 14px; border-left: 2px solid var(--zk-line); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--zk-tint); max-width: 72ch; }
+.tl__saylabel { display: block; font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--zk-grey); margin-bottom: 6px; }
+.tl__say p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--zk-ink); }
 
-.tl__item:last-child {
-  border-left-color: transparent;
-  padding-bottom: 4px;
-}
-
-.tl__dot {
-  position: absolute;
-  left: -8px;
-  top: 3px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--zk-white);
-  border: 2px solid var(--zk-grey);
-  box-shadow: 0 0 0 4px var(--zk-white);
-}
-
-/* Machine work is blue, people are amber, the platform itself is grey — so a
-   file can be read at a glance for how much of it was done by hand. */
-.tl__item--ai .tl__dot {
-  border-color: var(--zk-blue);
-  background: var(--zk-blue);
-  box-shadow: 0 0 0 4px var(--zk-white), 0 0 0 7px rgba(33, 103, 174, 0.12);
-}
-
-.tl__item--human .tl__dot {
-  border-color: var(--zk-amber);
-  background: var(--zk-white);
-  box-shadow: 0 0 0 4px var(--zk-white), 0 0 0 7px rgba(181, 118, 31, 0.14);
-}
-
-.tl__item--sys .tl__dot {
-  border-color: var(--zk-line);
-  background: var(--zk-line);
-}
-
-.tl__body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-2);
-  padding: var(--sp-2) var(--sp-3) var(--sp-3);
-  margin-left: calc(var(--sp-3) * -1);
-  border-radius: var(--r-md);
-  transition: background var(--t-fast);
-}
-
-.tl__item:hover .tl__body {
-  background: var(--zk-tint);
-}
-
-.tl__head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: var(--sp-1) var(--sp-2);
-}
-
-/* Who and when sit on their own line: in a 384px rail, badge-beside-title wraps
-   into a ragged block that is harder to scan than two clean rows. */
-.tl__meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sp-1) var(--sp-3);
-}
-
-.tl__what {
-  font-size: var(--fs-sm);
-  font-weight: var(--fw-semi);
-  letter-spacing: -0.008em;
-  color: var(--zk-ink);
-}
-
-.tl__who {
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  letter-spacing: 0.03em;
-  padding: 3px 9px;
-  border-radius: var(--r-pill);
-  white-space: nowrap;
-}
-
-.tl__who--ai {
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
-}
-
-.tl__who--human {
-  background: var(--zk-amber-tint);
-  color: var(--zk-amber-ink);
-}
-
-.tl__who--sys {
-  background: var(--zk-tint);
-  color: var(--zk-muted);
-  border: 1px solid var(--zk-line);
-}
-
-.tl__stage {
-  font-size: var(--fs-2xs);
-  color: var(--zk-blue);
-}
-
-.tl__when {
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-}
-
-.tl__say {
-  margin-top: var(--sp-2);
-  padding: var(--sp-3) var(--sp-4);
-  border-left: 2px solid var(--zk-blue-light);
-  border-radius: 0 var(--r-md) var(--r-md) 0;
-  background: var(--zk-tint);
-}
-
-.tl__item:hover .tl__say {
-  background: var(--zk-white);
-}
-
-.tl__saylabel {
-  display: block;
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-  margin-bottom: var(--sp-2);
-}
-
-.tl__say p {
-  margin: 0;
-  font-size: var(--fs-sm);
-  line-height: var(--lh-normal);
-  color: var(--zk-muted);
-  max-width: 82ch;
-}
-
-.tl__figs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 9px;
-}
-
-.tl__figs span {
-  font-size: var(--fs-2xs);
-  color: var(--zk-ink);
-  font-variant-numeric: tabular-nums;
-  padding: 4px 11px;
-  border-radius: var(--r-pill);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-}
-
-.tl__figs em {
-  font-style: normal;
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-  text-transform: capitalize;
-  margin-right: 5px;
-}
-
-/* ---- system noise ---- */
-.tl__toggle {
-  font: inherit;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  cursor: pointer;
-  margin-bottom: 14px;
-  padding: 5px 12px;
-  border-radius: var(--r-pill);
-  border: 1px solid var(--zk-line);
-  background: var(--zk-white);
-  color: var(--zk-muted);
-  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
-}
-
-.tl__toggle:hover {
-  border-color: var(--zk-blue-light);
-  background: var(--zk-tint);
-  color: var(--zk-blue-dark);
-}
-
-/* ── What was attached ────────────────────────────────────────────────────
-   The audit trail's job at this step is to prove receipt. A line saying
-   "Collect Documents" and nothing else left the operator to open the record
-   and count for themselves — and until the views were fixed, the record could
-   not see the files either. */
-.tl__docs {
-  margin-top: 8px;
-  padding: 9px 11px;
-  border: 1px solid var(--zk-line-soft);
-  border-radius: var(--r-sm, 6px);
-  background: var(--zk-tint);
-}
-
-.tl__docshead {
-  display: block;
-  font-size: var(--fs-3xs);
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-  color: var(--zk-muted);
-  margin-bottom: 7px;
-}
-
-.tl__doclist { display: flex; flex-wrap: wrap; gap: 6px; }
+/* Figures the step wrote — money, as chips. */
+.tl__figs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
+.tl__figs span { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 12px; border: 1px solid var(--zk-line); border-radius: var(--r-sm); font-size: 14.5px; font-variant-numeric: tabular-nums; }
+.tl__figs em { font-style: normal; color: var(--zk-grey); text-transform: capitalize; }
 
+/* Documents received, as chips. */
+.tl__docs { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14.5px; }
+.tl__docshead { color: var(--zk-grey); }
+.tl__doclist { display: flex; flex-wrap: wrap; gap: 8px; }
 .tl__doc {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: var(--fs-2xs);
-  text-decoration: none;
-  padding: 4px 10px 4px 8px;
-  border-radius: var(--r-pill, 999px);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  color: var(--zk-blue-dark);
-  transition: border-color .12s, background .12s;
+  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
+  border: 1px solid var(--zk-line); border-radius: var(--r-sm); background: #fff;
+  font-size: 14.5px; color: var(--zk-ink); text-decoration: none;
 }
-.tl__doc svg { width: 12px; height: 12px; flex: none; opacity: .7; }
-.tl__doc:hover { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); }
-.tl__doc:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
+.tl__doc svg { width: 13px; height: 13px; color: var(--zk-blue); }
+.tl__doc:hover { border-color: var(--zk-blue-light); background: var(--zk-tint-blue); }
 
-/* ── the conversation, as one entry ───────────────────────────────────────
-   Every WhatsApp turn used to be its own entry, so a four-message exchange
-   took more of the trail than the whole underwriting chain. */
-.tl__wa {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--fs-sm);
-  font-weight: 500;
-  color: #0f7b45;
-}
-.tl__wa svg { width: 15px; height: 15px; }
-
-.tl__n {
-  font-size: var(--fs-2xs);
-  font-variant-numeric: tabular-nums;
-  color: var(--zk-muted);
-  padding: 1px 8px;
-  border-radius: var(--r-pill, 999px);
-  background: var(--zk-line-soft);
-}
-
-/* The channel performs these as the system, but the person who typed is the
-   actor worth naming. "System · Customer Reply" said the opposite. */
-.tl__who--cust { color: #0f7b45; font-weight: 500; }
-
-.tl__open {
-  font: inherit;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  cursor: pointer;
-  padding: 0;
-  border: 0;
-  background: none;
-  color: var(--zk-blue);
-  margin-left: auto;
-}
-.tl__open:hover { color: var(--zk-blue-dark); text-decoration: underline; }
-.tl__open:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }
-
-/* A chat entry's dot takes the channel's colour, so a scan down the rail shows
-   where the conversation happened without reading a word. */
-.tl__item--chat .tl__dot { background: #0f7b45; border-color: #0f7b45; }
-
-/* ── what this step wrote ────────────────────────────────────────────────
-   Folded by default: most steps write a dozen fields and the trail has to
-   stay readable as a story. Opened, the entry becomes an itemised account of
-   what the agent decided — which is the closest an app JWT can get to its
-   reasoning, since ai_reasoning is on the row but not in the API. */
-.tl__wrote { margin-top: 8px; }
-
-.tl__wrote > summary {
-  cursor: pointer;
-  list-style: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  color: var(--zk-blue);
-}
+/* The action row: links, in blue. */
+.tl__acts { display: flex; gap: 18px; margin-top: 8px; font-size: var(--fs-xs); align-items: baseline; flex-wrap: wrap; }
+.tl__link { font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-blue); background: none; border: 0; padding: 0; cursor: pointer; }
+.tl__link:hover { text-decoration: underline; }
+.tl__wrote > summary { cursor: pointer; list-style: none; font-size: var(--fs-xs); font-weight: 500; color: var(--zk-muted); }
 .tl__wrote > summary::-webkit-details-marker { display: none; }
-.tl__wrote > summary::after {
-  content: '';
-  width: 5px; height: 5px;
-  border-right: 1.4px solid currentColor;
-  border-bottom: 1.4px solid currentColor;
-  transform: rotate(45deg) translate(-1px, -1px);
-  transition: transform var(--t-fast);
-}
-.tl__wrote[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
-.tl__wrote > summary:hover { color: var(--zk-blue-dark); }
-
-.tl__wrote dl {
-  margin: 8px 0 0;
-  padding: 10px 12px;
-  border: 1px solid var(--zk-line-soft);
-  border-radius: var(--r-sm, 6px);
-  background: var(--zk-tint);
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
+.tl__wrote > summary::after { content: ' ▾'; color: var(--zk-grey); }
+.tl__wrote[open] > summary::after { content: ' ▴'; }
+.tl__wrote dl { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--zk-line-soft); border-radius: var(--r-sm); background: var(--zk-tint); display: flex; flex-direction: column; gap: 6px; }
 .tl__wrote dl > div { display: flex; gap: 10px; align-items: baseline; }
+.tl__wrote dt { flex: none; width: 42%; font-size: var(--fs-2xs); color: var(--zk-grey); overflow-wrap: anywhere; }
+.tl__wrote dd { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-2xs); color: var(--zk-ink); overflow-wrap: anywhere; }
 
-.tl__wrote dt {
-  flex: none;
-  width: 42%;
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-  overflow-wrap: anywhere;
-}
-
-.tl__wrote dd {
-  margin: 0;
-  flex: 1;
-  min-width: 0;
-  font-size: var(--fs-2xs);
-  color: var(--zk-ink);
-  overflow-wrap: anywhere;
+/* System updates, folded behind a pill. */
+.tl__toggle {
+  display: inline-block; margin: 6px 0 14px; font: inherit; font-size: var(--fs-xs); color: var(--zk-muted);
+  padding: 6px 12px; border: 1px solid var(--zk-line); border-radius: var(--r-pill); background: #fff; cursor: pointer;
 }
+.tl__toggle:hover { background: var(--zk-tint); color: var(--zk-ink); }
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 1236fef..29462f1 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -5,6 +5,7 @@ import ClampText from './ClampText.jsx'
 import ChainOfThought from './ChainOfThought.jsx'
 import { AGENTS } from '../api/agents.js'
 import { APP_ID, STAGES, baseFieldId } from '../api/config.js'
+import { initialsOf } from '../api/agents.js'
 import './Timeline.css'
 
 /* The roster lives in api/agents.js now — one short name, one colour and one
@@ -378,12 +379,26 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
 
       <ol className="tl">
         {visible.map((it) => (
-          <li key={it.key} className={'tl__item tl__item--' + it.kind}>
-            <span className="tl__dot" aria-hidden="true" />
+          <li key={it.key} className={'tl__ev tl__ev--' + it.kind}>
+            {/* The worker, as a face in the gutter. Recognition down a column
+                beats reading five names to notice it was one agent throughout. */}
+            <span className="tl__gutter" aria-hidden="true">
+              {it.kind === 'sys' ? (
+                <span className="tl__disc tl__disc--sys">·</span>
+              ) : it.isChat && !it.agentKey ? (
+                <span className="tl__disc tl__disc--cust">
+                  <svg viewBox="0 0 16 16"><path d="M2.5 3.5h11v7h-6l-3 2.5v-2.5h-2z" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" /></svg>
+                </span>
+              ) : it.agentKey ? (
+                <AgentChip agentKey={it.agentKey} size="md" showName={false} onOpen={onOpenAgent} />
+              ) : (
+                <span className="tl__disc tl__disc--hu">{initialsOf(it.actor)}</span>
+              )}
+            </span>
             <div className="tl__body">
-              <div className="tl__head">
+              <div className="tl__line1">
                 {it.isChat ? (
-                  <span className="tl__wa">
+                  <h4 className="tl__what tl__what--wa">
                     <svg viewBox="0 0 16 16" aria-hidden="true">
                       <path d="M8 1.6a6.3 6.3 0 0 0-5.4 9.5L1.7 14.4l3.4-.9A6.3 6.3 0 1 0 8 1.6z"
                             fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
@@ -391,32 +406,22 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
                             fill="currentColor" />
                     </svg>
                     WhatsApp
-                  </span>
+                  </h4>
                 ) : (
-                  <strong className="tl__what">{it.what}</strong>
+                  <h4 className="tl__what">{it.what}</h4>
                 )}
                 {it.count > 1 ? <span className="tl__n">{it.count} messages</span> : null}
-                {it.stage && !it.isChat ? <span className="tl__stage">→ {it.stage.name}</span> : null}
-              </div>
-              {/* The worker, as a face. Recognition down a column beats
-                  reading five names to notice it was one agent throughout. */}
-              <div className="tl__meta">
-                {it.kind === 'sys'
-                  ? <span className="tl__who tl__who--sys">system</span>
-                  : it.isChat && !it.agentKey
-                    ? <span className="tl__who tl__who--cust">the customer</span>
-                    : <AgentChip agentKey={it.agentKey} name={it.actor} onOpen={onOpenAgent} />}
+                {it.stage && !it.isChat ? <span className="tl__to">{it.stage.name}</span> : null}
                 <span className="tl__when">{it.when}</span>
-                {it.isChat && onOpenChat ? (
-                  <button type="button" className="tl__open" onClick={onOpenChat}>
-                    Open thread
-                  </button>
-                ) : null}
-                {it.hasCall && onOpenCall ? (
-                  <button type="button" className="tl__open" onClick={onOpenCall}>
-                    Hear the call
-                  </button>
-                ) : null}
+              </div>
+              <div className="tl__by">
+                {it.kind === 'sys'
+                  ? <span className="tl__byname">System</span>
+                  : it.isChat && !it.agentKey
+                    ? <span className="tl__byname tl__byname--cust">the customer</span>
+                    : it.agentKey
+                      ? <><span className="tl__byname">{it.actor}</span><small className="tl__tag">AI</small></>
+                      : <span className="tl__byname">{it.actor}</span>}
               </div>
 
               {/* What was received, named and openable. The count is stated
@@ -491,19 +496,27 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
                 </div>
               ) : null}
 
-              {/* Folded, because most steps write a lot and the trail has to
-                  stay readable as a story. Open it and the step becomes an
-                  itemised account of what it decided. */}
-              {it.wrote.length ? (
-                <details className="tl__wrote">
-                  <summary>{it.wrote.length} field{it.wrote.length === 1 ? '' : 's'} written</summary>
-                  <dl>
-                    {it.wrote.map(([k, v]) => (
-                      <div key={k}><dt>{k}</dt><dd>{v}</dd></div>
-                    ))}
-                  </dl>
-                </details>
-              ) : null}
+              <div className="tl__acts">
+                {it.hasCall && onOpenCall ? (
+                  <button type="button" className="tl__link" onClick={onOpenCall}>Hear the call</button>
+                ) : null}
+                {it.isChat && onOpenChat ? (
+                  <button type="button" className="tl__link" onClick={onOpenChat}>Open thread</button>
+                ) : null}
+                {/* Folded, because most steps write a lot and the trail has to
+                    stay readable as a story. Open it and the step becomes an
+                    itemised account of what it decided. */}
+                {it.wrote.length ? (
+                  <details className="tl__wrote">
+                    <summary>{it.wrote.length} field{it.wrote.length === 1 ? '' : 's'} written</summary>
+                    <dl>
+                      {it.wrote.map(([k, v]) => (
+                        <div key={k}><dt>{k}</dt><dd>{v}</dd></div>
+                      ))}
+                    </dl>
+                  </details>
+                ) : null}
+              </div>
             </div>
           </li>
         ))}
diff --git a/src/index.css b/src/index.css
index e4d6c76..d09a1da 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,130 +1,112 @@
-/* ── Zurich Kotak brand typeface ───────────────────────────── */
-@font-face {
-  font-family: 'Zurich Sans';
-  src: url('./assets/fonts/ZurichSans-Light.otf') format('opentype');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: 'Zurich Sans';
-  src: url('./assets/fonts/ZurichSans-Regular.otf') format('opentype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: 'Zurich Sans';
-  src: url('./assets/fonts/ZurichSans-Medium.otf') format('opentype');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
+/* ── Typeface: Source Sans 3, self-hosted ───────────────────────────────────
+   Bundled from src/assets so Vite resolves the URLs under the sub-path mount;
+   an absolute /fonts/ path would 404 behind the BASE_HREF rewrite. */
+@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-display: swap;
+  src: url('./assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2'),
+       url('./assets/fonts/source-sans-3-latin-ext-400-normal.woff2') format('woff2'); }
+@font-face { font-family: 'Source Sans 3'; font-weight: 500; font-display: swap;
+  src: url('./assets/fonts/source-sans-3-latin-500-normal.woff2') format('woff2'),
+       url('./assets/fonts/source-sans-3-latin-ext-500-normal.woff2') format('woff2'); }
+@font-face { font-family: 'Source Sans 3'; font-weight: 600; font-display: swap;
+  src: url('./assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2'),
+       url('./assets/fonts/source-sans-3-latin-ext-600-normal.woff2') format('woff2'); }
+@font-face { font-family: 'Source Sans 3'; font-weight: 700; font-display: swap;
+  src: url('./assets/fonts/source-sans-3-latin-700-normal.woff2') format('woff2'),
+       url('./assets/fonts/source-sans-3-latin-ext-700-normal.woff2') format('woff2'); }
 
 :root {
-  /* ── PALETTE — assured-inspired ──────────────────────────────
-     A clean white ground, warm near-black ink, and ONE confident accent:
-     a magenta-pink, reserved for action and active state. The token names
-     keep their history (the accent still lives under the --zk-blue-* names
-     the whole app references), but the values are the new scheme. Teal is
-     the customer, amber a person; the pink is "act / here", nothing else. */
-  --zk-blue: #e5227f;         /* THE ACCENT (was brand blue) — pink */
-  --zk-blue-dark: #c30f68;
-  --zk-blue-deep: #c30f68;
-  --zk-navy: #2a1d3d;         /* a deep plum-ink for the logo / darkest text */
-  --zk-blue-mid: #ee5fa0;
-  --zk-blue-light: #f6cfe3;   /* pink hairline / ring */
-  --zk-cyan: #fdebf4;         /* pink-soft */
-  --zk-teal: #0e9e8f;
-  --zk-teal-ink: #0a6b60;
-  --zk-teal-tint: #e2f5f2;
-  --zk-teal-line: #bfe6e1;
-  --zk-good: #18a558;
+  /* ── PALETTE — Lead Desk redesign ───────────────────────────────────────
+     Colour MEANS something here, and the meaning is fixed on every screen:
+       blue  = the AI holds it        amber = a person holds it
+       teal  = the customer holds it  red   = risk, and nothing else
+     Navy is the masthead and the brand; blue is the one action colour.
+     The token NAMES keep their history — the whole app references --zk-blue
+     and friends — so remapping the values here re-themes every surface. */
+  --zk-navy: #0B2A5B;
+  --zk-navy-2: #12386F;
+  --zk-blue: #1F55A6;          /* primary action; "with the AI" */
+  --zk-blue-dark: #12386F;
+  --zk-blue-deep: #0B2A5B;
+  --zk-blue-mid: #4E7FC4;
+  --zk-blue-light: #C3D3EC;    /* hairline / ring */
+  --zk-cyan: #E4ECF9;          /* blue-soft */
+  --zk-tint-blue: #E4ECF9;     /* blue-soft */
 
-  --zk-ink: #1c1626;          /* warm near-black */
-  --zk-muted: #645d72;
-  --zk-grey: #a49dae;
-  --zk-line: #e3e1ea;
-  --zk-line-soft: #ececf1;
-  --zk-tint: #faf9fb;         /* off-white section ground */
-  --zk-sunk: #f5f3f8;         /* a touch deeper — hover / inset */
-  --zk-tint-blue: #fdebf4;    /* pink-soft (was tint-blue) */
-  --zk-white: #fff;
-  --zk-danger: #d64545;
+  --zk-teal: #137A66;          /* the customer; issued */
+  --zk-teal-ink: #0F6353;
+  --zk-teal-tint: #DDF1EC;
+  --zk-teal-line: #B8DDD3;
+  --zk-good: #137A66;
 
-  --zk-amber: #c77d1a;
-  --zk-amber-ink: #9a5d10;
-  --zk-amber-tint: #fbf0dd;
-  --zk-amber-line: #ecd3a3;
-  --zk-danger-ink: #b23636;
-  --zk-danger-tint: #fbeaea;
-  --zk-danger-line: #f0c9c9;
+  --zk-amber: #A86A0B;         /* a person holds it */
+  --zk-amber-ink: #8A5609;
+  --zk-amber-tint: #FBF0DC;
+  --zk-amber-line: #EAD6AE;
+  --zk-amber-bar: #D99A2B;     /* the brighter amber for bars and legends */
 
-  /* ── Shape, depth, motion ────────────────────────────────────
-     Rounder than before and softer shadows — the assured cards read as
-     objects that float a little, on a warm plum-ink low alpha rather than
-     generic grey haze. */
-  --r-xs: 8px;
-  --r-sm: 10px;
-  --r-md: 14px;
-  --r-lg: 18px;
-  --r-xl: 22px;
+  --zk-danger: #C8102E;        /* Kotak red: risk only */
+  --zk-danger-ink: #A30D25;
+  --zk-danger-tint: #FBE7EA;
+  --zk-danger-line: #F1C5CC;
+
+  --zk-ink: #152238;
+  --zk-muted: #4B5A72;         /* ink-2 */
+  --zk-grey: #7A8699;          /* ink-3 */
+  --zk-line: #D9DFE9;
+  --zk-line-soft: #E9EDF3;
+  --zk-tint: #F2F4F8;          /* the canvas */
+  --zk-sunk: #E9EDF3;
+  --zk-white: #FFFFFF;
+  --zk-card: #FFFFFF;
+
+  /* ── Shape ────────────────────────────────────────────────────────────
+     Flat. Cards are white on the grey canvas with a 1px line and a 10px
+     radius; nothing floats, nothing casts a shadow. */
+  --r-xs: 6px;
+  --r-sm: 8px;
+  --r-md: 10px;
+  --r-lg: 10px;
+  --r-xl: 12px;
   --r-pill: 999px;
 
-  --sh-xs: 0 1px 2px rgba(28, 22, 38, 0.04);
-  --sh-sm: 0 1px 2px rgba(28, 22, 38, 0.04), 0 4px 14px -8px rgba(28, 22, 38, 0.10);
-  --sh-md: 0 1px 2px rgba(28, 22, 38, 0.04), 0 8px 24px -10px rgba(28, 22, 38, 0.12);
-  --sh-lg: 0 2px 6px rgba(28, 22, 38, 0.06), 0 24px 48px -16px rgba(28, 22, 38, 0.22);
-  --sh-accent: 0 6px 20px -6px rgba(229, 34, 127, 0.42);
+  --sh-xs: none;
+  --sh-sm: none;
+  --sh-md: none;
+  --sh-lg: 0 12px 32px -12px rgba(21, 34, 56, 0.28);   /* dialogs only */
+  --sh-accent: none;
 
-  --ring: 0 0 0 3px rgba(229, 34, 127, 0.16);
+  --ring: 0 0 0 3px rgba(31, 85, 166, 0.18);
 
   --ease: cubic-bezier(0.4, 0, 0.2, 1);
   --t-fast: 0.14s var(--ease);
   --t: 0.2s var(--ease);
 
-  --grad-blue: linear-gradient(135deg, var(--zk-blue) 0%, var(--zk-blue-dark) 100%);
-  --grad-blue-hover: linear-gradient(135deg, var(--zk-blue-dark) 0%, #a80c59 100%);
+  --grad-blue: var(--zk-blue);
+  --grad-blue-hover: var(--zk-navy-2);
 
-  /* ── TYPE SCALE ───────────────────────────────────────────────
-     The app had FIFTY-FOUR distinct font sizes, and forty of them sat
-     between 0.58rem and 0.95rem — a three-pixel band. The most-used size
-     was 0.78rem, which is 12.5px of body copy. That is not a hierarchy;
-     it is a fog of small grey text, and it is exactly why the screen read
-     as a decade-old enterprise tool. Nothing could be emphasised, because
-     everything was already the same size.
+  /* ── TYPE SCALE — on a 15px root, so the rem steps land on the design's
+     pixel sizes: 12.5 eyebrows, 13.5 small, 14 labels, 15 body, 17 card
+     titles, 20 tab figures, 28 page title / KPI, 44 the one risk number. */
+  --fs-3xs: 0.8333rem;   /* 12.5px — uppercase eyebrows, table heads */
+  --fs-2xs: 0.9rem;      /* 13.5px — meta, pills, secondary lines */
+  --fs-xs:  0.9333rem;   /* 14px   — labels */
+  --fs-sm:  1rem;        /* 15px   — body */
+  --fs-md:  1.0667rem;   /* 16px   — emphasis */
+  --fs-lg:  1.1333rem;   /* 17px   — card titles */
+  --fs-xl:  1.3333rem;   /* 20px   — tab figures, small headings */
+  --fs-2xl: 1.8667rem;   /* 28px   — page title, KPI figures */
+  --fs-3xl: 2.9333rem;   /* 44px   — renewals at risk */
 
-     Nine steps, with real jumps between them. Body sits at 15px, labels
-     at 14, and 12px is the FLOOR — reserved for uppercase eyebrows, never
-     for anything a person has to read. Size does the prioritising so the
-     reader does not have to. */
-  /* Shifted up one notch after an audit found 124 of ~200 sizings sitting at
-     12-13px — the "meta" tier had quietly become the body size, so the whole
-     app read tiny and uniform with nothing for the eye to land on. Body is 14
-     now, values 15, emphasis 16; 12px stays for uppercase eyebrows only. */
-  --fs-3xs:  0.75rem;    /* 12px — uppercase eyebrows only */
-  --fs-2xs:  0.875rem;   /* 14px — was 13; the app's dominant size, now comfortable */
-  --fs-xs:   0.9375rem;  /* 15px — field labels */
-  --fs-sm:   1rem;       /* 16px — body, field values */
-  --fs-md:   1.0625rem;  /* 17px — emphasis */
-  --fs-lg:   1.125rem;   /* 18px — panel titles */
-  --fs-xl:   1.375rem;   /* 22px — section headings */
-  --fs-2xl:  1.75rem;    /* 28px — page title */
-  --fs-3xl:  2.25rem;    /* 36px — the one number that matters */
-
-  --lh-tight: 1.25;
-  --lh-snug: 1.4;
-  --lh-normal: 1.55;
+  --lh-tight: 1.15;
+  --lh-snug: 1.35;
+  --lh-normal: 1.4;
 
   --fw-normal: 400;
   --fw-medium: 500;
   --fw-semi: 600;
   --fw-bold: 700;
-  --fw-x: 800;
+  --fw-x: 700;
 
-  /* ── SPACING ──────────────────────────────────────────────────
-     One rhythm. Panels breathe at 24-28px rather than 14-18px, which is
-     the other half of why this felt cramped. */
   --sp-1: 4px;
   --sp-2: 8px;
   --sp-3: 12px;
@@ -135,111 +117,58 @@
   --sp-8: 40px;
   --sp-9: 56px;
 
-  /* Display and body are the SAME brand face — Zurich Sans has no bold,
-     so headings and figures lean on weight 500 and tighter tracking, set per
-     use, not on a second family. */
-  --font-display: 'Plus Jakarta Sans', 'Geist', system-ui, sans-serif;
-  --font-zurich: 'Plus Jakarta Sans', 'Geist', system-ui, -apple-system, sans-serif;
-  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-display: 'Source Sans 3', system-ui, -apple-system, sans-serif;
+  --font-zurich: 'Source Sans 3', system-ui, -apple-system, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 
   font-family: var(--font-zurich);
-  /* The root MUST stay an absolute size — every --fs-* token is rem, so
-     sizing the root from one of them is circular. */
-  font-size: 16px;
+  /* Absolute on purpose: every --fs-* token is rem and sizing the root from
+     one of them would be circular. */
+  font-size: 15px;
   line-height: var(--lh-normal);
   color: var(--zk-ink);
-  /* ONE CANVAS. The app used to be white cards floating on a grey-blue
-     ground — the generic admin-template look. The content ground is white
-     now; the sidebar is the only tinted surface, and sections are separated
-     by hairlines and space rather than boxed in shadowed cards. */
-  background: var(--zk-white);
+  background: var(--zk-tint);
+  font-feature-settings: 'tnum' 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
 }
 
-* {
-  box-sizing: border-box;
-}
+* { box-sizing: border-box; }
 
-html,
-body,
-#root {
-  height: 100%;
-}
+html, body, #root { height: 100%; }
 
-body {
-  margin: 0;
-  background: var(--zk-white);
-}
+body { margin: 0; background: var(--zk-tint); }
 
-button,
-input,
-select,
-textarea {
-  font: inherit;
-  color: inherit;
-}
+button, input, select, textarea { font: inherit; color: inherit; }
 
-/* One focus treatment for the whole console: a soft brand ring, never the
-   browser's default outline halfway through a card's rounded corner. */
-:focus-visible {
-  outline: 2px solid var(--zk-blue);
-  outline-offset: 2px;
-}
+/* One focus treatment for the whole console. */
+:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }
 
-::selection {
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
-}
-
-/* Scrollbars, toned to the palette. Chrome/Safari take the ::-webkit rules,
-   Firefox the standard properties. */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--zk-line) transparent;
-}
-
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
+::selection { background: var(--zk-tint-blue); color: var(--zk-navy); }
 
+* { scrollbar-width: thin; scrollbar-color: var(--zk-line) transparent; }
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb {
-  border: 3px solid transparent;
-  border-radius: var(--r-pill);
-  background-clip: content-box;
-  background-color: var(--zk-line);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--zk-grey);
+  border: 3px solid transparent; border-radius: var(--r-pill);
+  background-clip: content-box; background-color: var(--zk-line);
 }
+::-webkit-scrollbar-thumb:hover { background-color: var(--zk-grey); }
 
 @keyframes zk-rise {
-  /* Opacity ONLY. A translateY here promoted every element it touched to a GPU
-     layer, and text composited on a transformed layer renders blurry in Chrome
-     on Linux — which made the whole app look soft. The fade alone gives the
-     entrance without ever moving text onto a fractional-pixel layer. */
+  /* Opacity only — a transform here composites text onto a GPU layer and it
+     renders soft in Chrome on Linux. */
   from { opacity: 0; }
   to   { opacity: 1; }
 }
-
 @keyframes zk-shimmer {
   from { background-position: -420px 0; }
   to   { background-position: 420px 0; }
 }
 
-/* Motion is decoration here — every animation is an entrance or a hover, so
-   dropping them costs nothing. */
 @media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
+  *, *::before, *::after {
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;
diff --git a/src/layout/Shell.css b/src/layout/Shell.css
index 8a72ada..0e5cb10 100644
--- a/src/layout/Shell.css
+++ b/src/layout/Shell.css
@@ -5,341 +5,141 @@
   background: var(--zk-tint);
 }
 
-/* ── Top bar ───────────────────────────────────────────────── */
+/* ── Masthead ─────────────────────────────────────────────────────────────── */
 .shell__top {
   position: sticky;
   top: 0;
   z-index: 30;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--sp-6);
-  height: 72px;
-  padding: 0 var(--sp-7);
-  background: var(--zk-white);
-  border-bottom: 1px solid var(--zk-line);
+  gap: 22px;
+  height: 56px;
+  padding: 0 24px;
+  background: var(--zk-navy);
+  color: #fff;
 }
 
-.shell__brand {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  min-width: 0;
+.mast__logo { display: flex; align-items: center; gap: 10px; }
+.mast__z {
+  width: 30px; height: 30px; border-radius: 50%;
+  background: #fff; color: var(--zk-navy);
+  font-weight: 700; font-size: 17px;
+  display: grid; place-items: center;
 }
+.mast__word b { display: block; font-weight: 700; font-size: 17px; letter-spacing: .06em; line-height: 1.15; }
+.mast__word b span { font-weight: 500; letter-spacing: 0; }
+.mast__word small { display: block; font-size: 11.5px; opacity: .75; margin-top: -1px; letter-spacing: .02em; }
 
-.shell__brand img {
-  height: 30px;
-  width: auto;
-  display: block;
-}
+.mast__sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .22); }
 
-.shell__brandtext {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  line-height: 1.2;
-  padding-left: 16px;
-  border-left: 1px solid var(--zk-line);
-}
+.mast__app { font-size: 17px; font-weight: 600; }
+.mast__app span { font-weight: 400; opacity: .7; margin-left: 8px; font-size: 15px; }
 
-.shell__brandtext strong {
-  font-size: var(--fs-md);
-  font-weight: var(--fw-semi);
-  letter-spacing: -0.012em;
-  color: var(--zk-ink);
-}
+.mast__user { margin-left: auto; }
 
-.shell__brandtext span {
-  font-size: var(--fs-3xs);
-  font-weight: 400;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-/* ── Body ──────────────────────────────────────────────────── */
-.shell__body {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  align-items: stretch;
-}
+/* ── Frame ────────────────────────────────────────────────────────────────── */
+.shell__body { display: flex; flex: 1; min-height: 0; align-items: stretch; }
 
 .shell__nav {
   position: sticky;
-  top: 72px;
+  top: 56px;
   align-self: flex-start;
-  width: 264px;
+  width: 232px;
   flex: none;
-  min-height: calc(100vh - 72px);
-  max-height: calc(100vh - 72px);
+  min-height: calc(100vh - 56px);
+  max-height: calc(100vh - 56px);
   overflow-y: auto;
   overscroll-behavior: contain;
-  background: var(--zk-tint);
+  background: #fff;
   border-right: 1px solid var(--zk-line);
-  padding: var(--sp-6) var(--sp-4) var(--sp-8);
+  padding: 20px 12px;
   display: flex;
   flex-direction: column;
+  gap: 2px;
 }
 
-.shell__navlabel {
-  margin: 0 0 var(--sp-3);
-  padding: 0 var(--sp-3);
+.nav__h {
+  margin: 0;
+  padding: 18px 12px 6px;
   font-size: var(--fs-3xs);
-  font-weight: 400;
-  letter-spacing: 0.04em;
+  font-weight: 600;
+  letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--zk-grey);
-  opacity: 0.85;
 }
+.nav__group { display: flex; flex-direction: column; gap: 2px; }
 
-.shell__group + .shell__group {
-  margin-top: var(--sp-5);
-}
-
-/* The stage list is drawn as a rail with a node per state: the sidebar should
-   look like the pipeline it represents, not like a list of links. */
-.shell__stages {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-1);
-}
-
-
-.shell__stage {
-  position: relative;
+.nav__link {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--sp-2);
-  padding: 9px 12px;
-  border-radius: var(--r-md);
-  text-decoration: none;
-  color: var(--zk-muted);
-  font-size: var(--fs-xs);
-  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
-}
-
-.shell__stage:hover {
-  background: var(--zk-tint);
-  color: var(--zk-ink);
-}
-
-.shell__stage.is-active {
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
-  font-weight: 500;
-}
-
-/* WHICH ONE YOU ARE ON. The node circles used to carry this, but they also sat,
-   empty, on every inactive row and read as checkboxes. An accent bar that exists
-   only when active says the same thing and says nothing the rest of the time. */
-.shell__stage.is-active::before,
-.shell__today.is-active::before {
-  content: '';
-  position: absolute;
-  left: 4px;
-  top: 50%;
-  width: 3px;
-  height: 18px;
-  margin-top: -9px;
-  border-radius: var(--r-pill);
-  background: var(--zk-blue);
-}
-
-/* Queues where the machine stops and a person decides. */
-.shell__stage.is-needed .shell__stagename {
-  font-weight: 500;
-  color: var(--zk-ink);
-}
-
-.shell__stage.is-needed.is-active .shell__stagename {
-  color: var(--zk-blue-dark);
-}
-
-/* Stage names wrap rather than truncate: "Referred to Underwriting" is the one
-   queue a person has to find, and it is also the longest label. */
-.shell__stagename {
-  min-width: 0;
-  line-height: 1.35;
-}
-
-.shell__main {
-  flex: 1;
-  min-width: 0;
-  background: var(--zk-white);
-  /* Fill the whole width beside the nav. No centring cap: a sidebar dashboard
-     should use the screen, so the content spans from the rail to the right
-     edge. The reading columns cap their own line length internally, so text
-     stays comfortable while the layout itself uses every pixel. */
-  width: 100%;
-  padding: 30px 40px 76px;
-}
-
-/* ── Narrow viewports: the rail lies down and scrolls ──────── */
-@media (max-width: 900px) {
-  .shell__body {
-    flex-direction: column;
-  }
-
-  .shell__nav {
-    position: static;
-    width: 100%;
-    min-height: 0;
-    max-height: none;
-    border-right: 0;
-    border-bottom: 1px solid var(--zk-line);
-    padding: 14px 16px 16px;
-  }
-
-  .shell__stages {
-    flex-direction: row;
-    overflow-x: auto;
-    padding-bottom: 4px;
-  }
-
-  /* Laid out horizontally the stages are a scrolling strip of pills, and a rail
-     behind them would just be a line struck through the row. */
-  .shell__stages::before {
-    display: none;
-  }
-
-  .shell__stage {
-    padding: 8px 14px;
-    white-space: nowrap;
-    background: var(--zk-white);
-    border: 1px solid var(--zk-line);
-  }
-
-  .shell__stage::before {
-    display: none;
-  }
-
-  .shell__main {
-    padding: 22px 18px 56px;
-  }
-}
-
-/* The way back to the overview. It sits above "Add a lead" because reading
-   the book is the commoner act — most sessions start by looking, not filing. */
-.shell__today {
-  position: relative;
-  display: block;
-  margin: 0 0 8px;
+  gap: 8px;
   padding: 9px 12px;
   border-radius: var(--r-sm);
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);
   font-weight: 500;
-  color: var(--zk-ink);
-  text-decoration: none;
-  transition: background .12s, color .12s;
-}
-.shell__today:hover { background: var(--zk-tint); }
-.shell__today.is-active { background: var(--zk-tint-blue); color: var(--zk-blue-dark); }
-
-/* ── Queue tallies ─────────────────────────────────────────────────────────
-   Three numbers, deliberately unequal in weight, because they are unequal in
-   importance: what needs YOU, what an agent holds, and whether anything in
-   there is about to lapse. */
-.shell__tally {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex: none;
-}
-
-/* What is waiting on a person. The only figure with full contrast. */
-.shell__n {
-  min-width: 20px;
-  padding: 1px 6px;
-  border-radius: var(--r-pill);
-  text-align: center;
-  font-size: var(--fs-2xs);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: var(--zk-blue-dark);
-  background: var(--zk-tint-blue);
-}
-
-/* Zero is shown, not hidden. "Nothing here" is an answer, and a queue that
-   disappears when it empties makes the sidebar move under the cursor. */
-.shell__n.is-zero {
-  color: var(--zk-grey);
-  background: transparent;
-  font-weight: 400;
-}
-
-/* What an agent is carrying. Present, quiet, and never added to the badge —
-   it is in the queue, it is not your work. */
-.shell__auto {
-  font-style: normal;
-  font-size: var(--fs-2xs);
-  font-variant-numeric: tabular-nums;
-  color: var(--zk-grey);
-}
-
-/* A renewal inside a week sitting in this queue. */
-.shell__urgent {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--zk-amber);
-  flex: none;
-}
-
-.shell__stage.is-empty { color: var(--zk-grey); }
-.shell__stage.is-empty.is-needed .shell__stagename { color: var(--zk-muted); font-weight: 400; }
-
-/* The one number worth carrying on a group heading: everything this role has
-   to clear, across its queues. */
-.shell__navlabel {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-/* ── Closed, folded ───────────────────────────────────────────────────────
-   Three of the twelve queues, opened about once a week. */
-.shell__closed { margin-top: var(--sp-4); }
-
-/* Closed matches a queue row — same padding, hover and count — but stays a
-   disclosure: a chevron marks it as foldable, closed by default because it is
-   reporting, not work. */
-.shell__closed > summary {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  list-style: none;
-  padding: 9px 12px;
-  border-radius: var(--r-md);
-  font-size: var(--fs-xs);
   color: var(--zk-muted);
+  text-decoration: none;
+  cursor: pointer;
   transition: background var(--t-fast), color var(--t-fast);
 }
-.shell__closed > summary::-webkit-details-marker { display: none; }
-.shell__closed > summary:hover { background: var(--zk-tint); color: var(--zk-ink); }
-.shell__closed > summary::before {
+.nav__link:hover { background: var(--zk-tint); color: var(--zk-ink); }
+.nav__link.is-on {
+  background: var(--zk-tint-blue);
+  color: var(--zk-navy);
+  font-weight: 600;
+  box-shadow: inset 3px 0 0 var(--zk-blue);
+}
+.nav__name { min-width: 0; line-height: 1.35; }
+
+/* The count is who is being waited on: red a person urgently, amber the
+   customer, grey the calendar or history. */
+.nav__n {
+  margin-left: auto;
+  font-size: var(--fs-2xs);
+  font-weight: 600;
+  padding: 1px 8px;
+  border-radius: var(--r-pill);
+  font-variant-numeric: tabular-nums;
+  background: var(--zk-line-soft);
+  color: var(--zk-muted);
+}
+.nav__n--red   { background: var(--zk-danger-tint); color: var(--zk-danger); }
+.nav__n--amber { background: var(--zk-amber-tint);  color: var(--zk-amber); }
+.nav__n--blue  { background: var(--zk-tint-blue);   color: var(--zk-blue); }
+
+/* Closed folds. The summary IS a nav row; a chevron says it opens. */
+.nav__fold > summary { list-style: none; }
+.nav__fold > summary::-webkit-details-marker { display: none; }
+.nav__fold > summary .nav__name::before {
   content: '';
-  flex: none;
+  display: inline-block;
   width: 5px; height: 5px;
+  margin: 0 8px 1px 0;
   border-right: 1.5px solid var(--zk-grey);
   border-bottom: 1.5px solid var(--zk-grey);
   transform: rotate(-45deg);
   transition: transform var(--t-fast);
 }
-.shell__closed[open] > summary::before { transform: rotate(45deg); }
-.shell__closed > summary b {
-  margin-left: auto;
-  min-width: 20px;
-  padding: 1px 6px;
-  border-radius: var(--r-pill);
-  text-align: center;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-  color: var(--zk-grey);
+.nav__fold[open] > summary .nav__name::before { transform: rotate(45deg); }
+.nav__sub { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; }
+
+/* ── Canvas ───────────────────────────────────────────────────────────────── */
+.shell__main {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
   background: var(--zk-tint);
+  padding: 28px 32px 40px;
+}
+
+@media (max-width: 900px) {
+  .shell__body { flex-direction: column; }
+  .shell__nav {
+    position: static; width: 100%; min-height: 0; max-height: none;
+    border-right: 0; border-bottom: 1px solid var(--zk-line);
+    flex-direction: row; flex-wrap: wrap; padding: 10px 12px;
+  }
+  .nav__h { display: none; }
+  .nav__group { flex-direction: row; flex-wrap: wrap; }
+  .shell__main { padding: 20px 16px 48px; }
 }
diff --git a/src/layout/Shell.jsx b/src/layout/Shell.jsx
index 05c252f..5da293b 100644
--- a/src/layout/Shell.jsx
+++ b/src/layout/Shell.jsx
@@ -1,69 +1,56 @@
 import { NavLink, Outlet } from 'react-router-dom'
-import { NAV_GROUPS } from '../api/config.js'
+import { NAV_GROUPS, STAGES } from '../api/config.js'
 import { rolesOf, visibleStages } from '../api/permissions.js'
 import { useStageCounts } from '../api/portfolio.jsx'
 import { useZino } from '../api/provider.jsx'
 import UserMenu from './UserMenu.jsx'
-import logo from '../assets/brand/zurich_logo.webp'
 import './Shell.css'
 
 /**
- * The sidebar groups the pipeline by WHO IS HOLDING each lead, not by where it
- * sits in the process. Fourteen flat stages answer "what is the process?", which
- * is not the question anyone signing in has; these answer "is anything waiting
- * on me?". Queues that need a person are named by what they want done.
+ * The frame: a navy masthead, a white rail, a grey canvas.
  *
- * IT CARRIES COUNTS NOW. It used not to, on the reasoning that a tally could
- * only come from a second full list call that would then disagree with the
- * queue's own total. That was right about the cost and wrong about the
- * conclusion — with no numbers, the only way to learn whether anything is
- * waiting on you is to open all nine queues in turn, which is precisely the
- * question navigation exists to answer. The overview's existing fetch moved
- * into PortfolioProvider and both surfaces read it, so this is one call fewer
- * than before rather than one more.
+ * The rail groups the pipeline by WHO IS HOLDING each lead — a person, the
+ * customer, the calendar — because "is anything waiting on me?" is the question
+ * anyone signing in actually has. The count on each row is what needs a person;
+ * its colour says how urgently, on the one colour rule the whole console keeps:
+ * red for risk, amber for a person, teal for the customer, blue for the AI.
  *
- * The badge counts leads whose PHASE needs a person, not leads in the state —
- * see phaseOf. A dot marks a queue holding a renewal inside a week, which is
- * the only reason to open one queue before another.
- *
- * The closed states are folded away. They are three of the twelve, they are
- * reporting rather than work, and at equal weight they made the live queues
- * harder to find.
+ * Closed lives under History and stays folded: it is reporting, not work.
  */
+
+/** The badge colour for a queue: the colour of whoever is being waited on. */
+function tone(stage) {
+  if (stage.kind === 'needs') return 'red'
+  if (stage.kind === 'customer') return 'amber'
+  return 'grey'
+}
+
 export default function Shell() {
   const { user } = useZino()
   const roles = rolesOf(user)
-  // The sidebar shows the queues this role WORKS in. Reporting on the rest
-  // lives on the overview, which counts the whole book for everyone.
   const stages = visibleStages(roles)
   const { counts, ready } = useStageCounts()
 
-  // One queue row. Extracted because the live groups and the folded Closed
-  // group render the same thing and drifted apart when they did not.
-  const queue = (s) => {
-    const c = counts[s.uid] || { total: 0, waiting: 0, working: 0, urgent: 0 }
+  const count = (s) => counts[s.uid] || { total: 0, waiting: 0, working: 0, urgent: 0 }
+
+  // "All leads" carries the open book, not the whole book.
+  const openTotal = STAGES
+    .filter((s) => s.kind !== 'end')
+    .reduce((t, s) => t + count(s).total, 0)
+
+  const row = (s) => {
+    const c = count(s)
     const n = s.kind === 'end' ? c.total : c.waiting
+    const hint = c.working ? `${c.working} being worked by the AI` : undefined
     return (
       <NavLink
         key={s.uid}
         to={`/stage/${s.uid}`}
-        title={s.need ? s.name : undefined}
-        className={({ isActive }) =>
-          'shell__stage' + (isActive ? ' is-active' : '')
-          + (s.kind === 'needs' ? ' is-needed' : '')
-          + (ready && !n && !c.working ? ' is-empty' : '')
-        }
+        title={hint}
+        className={({ isActive }) => 'nav__link' + (isActive ? ' is-on' : '')}
       >
-        <span className="shell__stagename">{s.need ?? s.name}</span>
-        {ready ? (
-          <span className="shell__tally">
-            {c.urgent ? <span className="shell__urgent" title={`${c.urgent} expiring within 7 days`} /> : null}
-            {/* The agents' share is shown in the middle dot notation rather
-                than added in: it is in the queue, it is not your work. */}
-            {c.working ? <em className="shell__auto" title={`${c.working} being worked by an agent`}>{c.working} with AI</em> : null}
-            <b className={'shell__n' + (n ? '' : ' is-zero')}>{n}</b>
-          </span>
-        ) : null}
+        <span className="nav__name">{s.need ?? s.name}</span>
+        {ready ? <span className={`nav__n nav__n--${n ? tone(s) : 'grey'}`}>{n}</span> : null}
       </NavLink>
     )
   }
@@ -71,63 +58,55 @@ export default function Shell() {
   return (
     <div className="shell">
       <header className="shell__top">
-        <div className="shell__brand">
-          <img src={logo} alt="Zurich Kotak General Insurance" />
-          <div className="shell__brandtext">
-            <strong>Lead Desk</strong>
-            <span>Lead to Policy</span>
+        <div className="mast__logo">
+          <span className="mast__z" aria-hidden="true">Z</span>
+          <div className="mast__word">
+            <b>ZURICH <span>kotak</span></b>
+            <small>General Insurance</small>
           </div>
         </div>
-        <UserMenu />
+        <span className="mast__sep" aria-hidden="true" />
+        <div className="mast__app">Lead Desk <span>Lead to policy</span></div>
+        <div className="mast__user"><UserMenu /></div>
       </header>
 
       <div className="shell__body">
         <nav className="shell__nav" aria-label="Pipeline">
-          <NavLink
-            to="/"
-            end
-            className={({ isActive }) => 'shell__today' + (isActive ? ' is-active' : '')}
-          >
-            Overview
+          <NavLink to="/" end className={({ isActive }) => 'nav__link' + (isActive ? ' is-on' : '')}>
+            <span className="nav__name">Overview</span>
           </NavLink>
-          <NavLink
-            to="/stage/all"
-            className={({ isActive }) => 'shell__today' + (isActive ? ' is-active' : '')}
-          >
-            All leads
+          <NavLink to="/stage/all" className={({ isActive }) => 'nav__link' + (isActive ? ' is-on' : '')}>
+            <span className="nav__name">All leads</span>
+            {ready ? <span className="nav__n nav__n--grey">{openTotal}</span> : null}
           </NavLink>
 
-          {/* "New lead" used to sit here. A sidebar is for moving between
-              places; filing a lead is an ACTION, and an action in a list of
-              destinations is the one item that does not behave like its
-              neighbours. It lives on the screens where leads are looked at —
-              the overview and the queues — beside the thing it adds to. */}
-
-          {NAV_GROUPS.filter((g) => g.kind !== 'end').map((group) => {
-            const inGroup = stages.filter((s) => s.kind === group.kind)
+          {NAV_GROUPS.map((group) => {
+            const inGroup = stages.filter((s) => group.kinds.includes(s.kind))
             if (!inGroup.length) return null
+
+            if (group.kinds.includes('end')) {
+              const closed = inGroup.reduce((t, s) => t + count(s).total, 0)
+              return (
+                <div className="nav__group" key={group.label}>
+                  <h6 className="nav__h">{group.label}</h6>
+                  <details className="nav__fold">
+                    <summary className="nav__link">
+                      <span className="nav__name">Closed</span>
+                      {ready ? <span className="nav__n nav__n--grey">{closed}</span> : null}
+                    </summary>
+                    <div className="nav__sub">{inGroup.map(row)}</div>
+                  </details>
+                </div>
+              )
+            }
+
             return (
-              <div className="shell__group" key={group.kind}>
-                <p className="shell__navlabel">{group.label}</p>
-                <div className="shell__stages">{inGroup.map(queue)}</div>
+              <div className="nav__group" key={group.label}>
+                <h6 className="nav__h">{group.label}</h6>
+                {inGroup.map(row)}
               </div>
             )
           })}
-
-          {/* Closed. Folded, because it is reporting rather than work — and at
-              equal weight with the live queues it made them harder to find. */}
-          {stages.some((s) => s.kind === 'end') ? (
-            <details className="shell__closed">
-              <summary>
-                Closed
-                {ready ? (
-                  <b>{stages.filter((s) => s.kind === 'end')
-                        .reduce((t, s) => t + (counts[s.uid]?.total || 0), 0)}</b>
-                ) : null}
-              </summary>
-              <div className="shell__stages">{stages.filter((s) => s.kind === 'end').map(queue)}</div>
-            </details>
-          ) : null}
         </nav>
 
         <main className="shell__main">
diff --git a/src/layout/UserMenu.css b/src/layout/UserMenu.css
index b3d5912..9039ff6 100644
--- a/src/layout/UserMenu.css
+++ b/src/layout/UserMenu.css
@@ -1,161 +1,59 @@
-.um {
-  position: relative;
-}
+.um { position: relative; }
 
+/* The trigger sits on the navy masthead, so it is white type on navy and the
+   avatar inverts: a white disc with navy initials. */
 .um__trigger {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+  display: flex; align-items: center; gap: 10px;
   cursor: pointer;
-  padding: 5px 12px 5px 5px;
+  padding: 5px 10px 5px 5px;
   border-radius: var(--r-pill);
   background: transparent;
   border: 1px solid transparent;
-  color: inherit;
-  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
-}
-
-.um__trigger:hover {
-  background: var(--zk-tint);
-  border-color: var(--zk-line);
-}
-
-.um__trigger.is-open {
-  background: var(--zk-tint-blue);
-  border-color: var(--zk-blue-light);
-}
-
-.um__trigger:focus-visible {
-  outline: none;
-  border-color: var(--zk-blue);
-  box-shadow: var(--ring);
+  color: #fff;
+  transition: background var(--t-fast);
 }
+.um__trigger:hover, .um__trigger.is-open { background: rgba(255, 255, 255, .10); }
+.um__trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
 
 .um__avatar {
-  flex: none;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  background: var(--grad-blue);
-  color: var(--zk-white);
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  letter-spacing: 0.03em;
-  box-shadow: var(--sh-xs);
+  flex: none; width: 32px; height: 32px; border-radius: 50%;
+  display: grid; place-items: center;
+  background: #fff; color: var(--zk-navy);
+  font-size: 13px; font-weight: 700; letter-spacing: .02em;
 }
+.um__avatar--lg { width: 40px; height: 40px; font-size: 15px; background: var(--zk-tint-blue); color: var(--zk-navy); }
 
-.um__avatar--lg {
-  width: 40px;
-  height: 40px;
-  font-size: var(--fs-xs);
-}
+.um__id { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
+.um__id strong { font-size: 15px; font-weight: 600; }
+.um__id > span { font-size: 12.5px; opacity: .72; }
 
-.um__id {
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-  line-height: 1.3;
-}
-
-.um__id strong {
-  font-size: var(--fs-xs);
-  font-weight: 500;
-}
-
-.um__id > span {
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-}
-
-.um__caret {
-  width: 12px;
-  height: 12px;
-  flex: none;
-  color: var(--zk-grey);
-  transition: transform var(--t);
-}
-
-.um__trigger.is-open .um__caret {
-  transform: rotate(180deg);
-}
+.um__caret { width: 12px; height: 12px; flex: none; opacity: .6; transition: transform var(--t); }
+.um__trigger.is-open .um__caret { transform: rotate(180deg); }
 
+/* The menu drops onto the white canvas below the bar. */
 .um__menu {
-  position: absolute;
-  top: calc(100% + 10px);
-  right: 0;
-  z-index: 40;
-  min-width: 300px;
-  padding: 7px;
-  border-radius: var(--r-lg);
-  background: var(--zk-white);
+  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
+  min-width: 300px; padding: 7px;
+  border-radius: var(--r-md);
+  background: #fff; color: var(--zk-ink);
   border: 1px solid var(--zk-line);
   box-shadow: var(--sh-lg);
-  transform-origin: top right;
-  animation: zk-rise 0.16s var(--ease) both;
+  animation: zk-rise .16s var(--ease) both;
 }
-
-.um__head {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 12px 11px 14px;
-}
-
-.um__headid {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  line-height: 1.35;
-  min-width: 0;
-}
-
-.um__headid strong {
-  font-size: var(--fs-xs);
-  font-weight: 500;
-}
-
-.um__headid span {
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  overflow-wrap: anywhere;
-}
-
+.um__head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 11px 14px; }
+.um__headid { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; min-width: 0; }
+.um__headid strong { font-size: var(--fs-sm); font-weight: 600; }
+.um__headid span { font-size: var(--fs-2xs); color: var(--zk-muted); overflow-wrap: anywhere; }
 .um__headid .um__roles {
-  margin-top: 4px;
-  align-self: flex-start;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  color: var(--zk-blue-dark);
-  background: var(--zk-tint-blue);
-  border-radius: var(--r-pill);
-  padding: 2px 9px;
+  margin-top: 4px; align-self: flex-start;
+  font-size: var(--fs-2xs); font-weight: 600;
+  color: var(--zk-navy); background: var(--zk-tint-blue);
+  border-radius: var(--r-pill); padding: 2px 9px;
 }
-
 .um__item {
-  display: block;
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--fs-2xs);
-  padding: 10px 11px;
-  border-radius: var(--r-sm);
-  background: none;
-  border: 0;
-  border-top: 1px solid var(--zk-line-soft);
-  color: var(--zk-ink);
-  transition: background var(--t-fast), color var(--t-fast);
-}
-
-.um__item:hover {
-  background: var(--zk-tint);
-  color: var(--zk-blue-dark);
-}
-
-.um__item:focus-visible {
-  outline: none;
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
+  display: block; width: 100%; text-align: left; cursor: pointer;
+  font: inherit; font-size: var(--fs-sm); padding: 10px 11px;
+  border-radius: var(--r-sm); background: none; border: 0;
+  border-top: 1px solid var(--zk-line-soft); color: var(--zk-ink);
 }
+.um__item:hover, .um__item:focus-visible { outline: none; background: var(--zk-tint); color: var(--zk-navy); }
diff --git a/src/layout/UserMenu.jsx b/src/layout/UserMenu.jsx
index 95f17a8..d32aa27 100644
--- a/src/layout/UserMenu.jsx
+++ b/src/layout/UserMenu.jsx
@@ -43,7 +43,12 @@ export default function UserMenu() {
   }, [open])
 
   const name = user?.name || user?.email || 'Signed in'
-  const roles = (user?.roles || []).join(', ')
+  // Role slugs read as titles: partner_agent -> Partner agent.
+  const roles = (user?.roles || [])
+    // `sme_underwriter` → "SME underwriter": the acronyms the roles here use stay upper.
+    .map((r) => String(r).replace(/_/g, ' ').replace(/^./, (c) => c.toUpperCase())
+      .replace(/\b(sme|uw|rm|posp|csr|ops|kyc)\b/gi, (m) => m.toUpperCase()))
+    .join(', ')
 
   return (
     <div className="um" ref={wrapRef}>
diff --git a/src/screens/Lead.jsx b/src/screens/Lead.jsx
index 4fa6e3e..21e7f54 100644
--- a/src/screens/Lead.jsx
+++ b/src/screens/Lead.jsx
@@ -164,11 +164,11 @@ function fmt(k, v) {
 function holdsOf(stage) {
   if (!stage) return null
   switch (stage.kind) {
-    case 'auto':     return { tone: 'ai',     label: 'With the AI' }
-    case 'customer': return { tone: 'grey', pillTone: 'cust', label: 'With the customer' }
-    case 'needs':    return { tone: 'person', label: stage.approval ? 'Awaiting your approval' : 'Waiting on a person' }
-    case 'waiting':  return { tone: 'grey',   label: 'In nurture' }
-    case 'end':      return { tone: 'grey',   label: 'Closed' }
+    case 'auto':     return { tone: 'blue',  label: 'With the AI' }
+    case 'customer': return { tone: 'teal',  label: 'With the customer' }
+    case 'needs':    return { tone: 'amber', label: stage.approval ? 'Awaiting your approval' : 'Waiting on a person' }
+    case 'waiting':  return { tone: 'grey',  label: 'In nurture' }
+    case 'end':      return { tone: 'grey',  label: 'Closed' }
     default:         return null
   }
 }
@@ -395,78 +395,75 @@ export default function Lead() {
      the premium" — so the status strip (an alert when blocked or stalled, the
      live state otherwise) sits directly under the header, before the metrics.
      Rendered full-width there rather than inside the narrow work column. */
+  // THE BANNER. One sentence about what this lead needs from a person, with
+  // the button that does it — amber for a task, red for a stall, blue while
+  // the AI has it. Nothing else on the page competes with it.
   const statusStrip = (
-blocked ? (
-            <div className="doing doing--blocked">
-              <span className="doing__stop" aria-hidden="true" />
-              <div>
-                <strong>Stopped — {blocked.what}</strong>
-                <span>
-                  {blocked.fix} The agents will pick the lead up again on their own once it
-                  is there; nothing else is running in the meantime.
-                </span>
-                <button
-                  type="button" className="doing__fix"
-                  onClick={() => setOpen(blocked.via)}
-                >
-                  Open Collect Documents
-                </button>
-              </div>
-            </div>
-          ) : stalled ? (
-            <div className="doing doing--stalled">
-              <span className="doing__stop" aria-hidden="true" />
-              <div>
-                <strong>{stage.doing} — nothing for {stalled.mins} minutes</strong>
-                <span>
-                  {stage.by} has not come back. That is usually the model provider being
-                  slow or dropping a request, not a problem with this lead — the work so far
-                  is safe and nothing has been lost.
-                  {stalled.nudge
-                    ? ` Running ${stalled.nudge.label.toLowerCase()} wakes ${stalled.nudge.by} to try again.`
-                    : ' There is no step to re-run from here; the actions below are the way on.'}
-                </span>
-                {stalled.nudge ? (
-                  <button
-                    type="button" className="doing__fix"
-                    onClick={() => setOpen(stalled.nudge.uid)}
-                  >
-                    {stalled.nudge.label}
-                  </button>
-                ) : null}
-              </div>
-            </div>
-          ) : stage?.kind === 'customer' && stage.doing ? (
-            /* Not an agent working, and not a task of yours either — the lead
-               is with someone outside the business. Without this the screen
-               went blank at exactly the stage where an operator is most likely
-               to wonder whether something has broken. */
-            <div className="doing doing--waiting">
-              <span className="doing__wait" aria-hidden="true" />
-              <div>
-                <strong>{stage.doing}</strong>
-                <span>
-                  Their answer comes back to this lead on its own — Engage reads it and
-                  records the acceptance. Nothing is waiting on you.
-                </span>
-              </div>
-            </div>
-          ) : stage?.kind === 'auto' ? (
-            <div className="doing">
-              <span className="doing__pulse" aria-hidden="true" />
-              <div>
-                <strong>{stage.doing}</strong>
-                <span>
-                  Handled by {stage.by}.
-                  {stage.after ? ` The lead stays in ${stateName} until a quote exists — nothing is waiting on you.` : ''}
-                  {' '}Typically completes within two minutes; this view refreshes automatically.
-                </span>
-              </div>
-            </div>
-          ) : null
+    blocked ? (
+      <div className="attn" role="status">
+        <div>
+          <h3><span className="dot dot--amber" />Stopped: {blocked.what}</h3>
+          <p>
+            {blocked.fix} The agents will pick the lead up again on their own once it is
+            there; nothing else is running in the meantime.
+          </p>
+        </div>
+        <div className="attn__acts">
+          <button type="button" className="btn btn--navy" onClick={() => setOpen(blocked.via)}>Open Collect Documents</button>
+        </div>
+      </div>
+    ) : stalled ? (
+      <div className="attn attn--red" role="status">
+        <div>
+          <h3><span className="dot dot--red" />{stage.doing}: nothing for {stalled.mins} minutes</h3>
+          <p>
+            {stage.by} has not come back. That is usually the model provider being slow or
+            dropping a request, not a problem with this lead; the work so far is safe.
+            {stalled.nudge
+              ? ` Running ${stalled.nudge.label.toLowerCase()} wakes ${stalled.nudge.by} to try again.`
+              : ' There is no step to re-run from here; the actions below are the way on.'}
+          </p>
+        </div>
+        {stalled.nudge ? (
+          <div className="attn__acts">
+            <button type="button" className="btn btn--navy" onClick={() => setOpen(stalled.nudge.uid)}>{stalled.nudge.label}</button>
+          </div>
+        ) : null}
+      </div>
+    ) : primaryAction ? (
+      <div className="attn" role="status">
+        <div>
+          <h3><span className="dot dot--amber" />Your turn: {primaryAction.label}</h3>
+          <p>{stage?.need ? `${stage.need}. ` : ''}This lead is waiting on you; the AI carries on as soon as it is done.</p>
+        </div>
+        <div className="attn__acts">
+          <button type="button" className="btn btn--navy" onClick={goToAction}>{primaryAction.label}</button>
+        </div>
+      </div>
+    ) : stage?.kind === 'customer' && stage.doing ? (
+      <div className="attn attn--teal" role="status" style={{ borderColor: 'var(--zk-teal-line)', background: 'var(--zk-teal-tint)' }}>
+        <div>
+          <h3><span className="dot dot--teal" />{stage.doing}</h3>
+          <p>
+            Their answer comes back to this lead on its own; Engage reads it and records the
+            acceptance. Nothing is waiting on you.
+          </p>
+        </div>
+      </div>
+    ) : stage?.kind === 'auto' ? (
+      <div className="attn attn--blue" role="status">
+        <div>
+          <h3><span className="dot dot--blue" />{stage.doing}</h3>
+          <p>
+            Handled by {stage.by}.
+            {stage.after ? ` The lead stays in ${stateName} until a quote exists; nothing is waiting on you.` : ''}
+            {' '}Typically completes within two minutes; this view refreshes automatically.
+          </p>
+        </div>
+      </div>
+    ) : null
   )
 
-
   return (
     <section>
       <header className="page__head">
@@ -475,7 +472,7 @@ blocked ? (
               so a lead opened from its own URL has nothing to go back TO and
               lands on the queue instead of leaving the app. */}
           <button
-            type="button" className="backbtn" title="Back to the queue" aria-label="Back to the queue"
+            type="button" className="back" title="Back to the queue" aria-label="Back to the queue"
             onClick={() => (location.key === 'default' ? navigate('/') : navigate(-1))}
           >
             <svg viewBox="0 0 16 16" aria-hidden="true">
@@ -484,90 +481,71 @@ blocked ? (
             </svg>
           </button>
           <div>
-          <h1 className="page__title">{row.customer_name || row.lead_ref || `Lead ${instanceId}`}</h1>
-          <p className="page__sub">
-            {row.lead_ref || `Lead ${instanceId}`}
-            {row.entity_name ? ` · ${row.entity_name}` : ''}
-          </p>
+            <h1 className="page__title">{row.customer_name || row.lead_ref || `Lead ${instanceId}`}</h1>
+            <p className="idline">
+              {row.lead_ref || `Lead ${instanceId}`}
+              {row.entity_name ? ` · ${row.entity_name}` : ''}
+              {row.product_line ? ` · ${row.product_line === 'motor' ? 'Motor' : 'SME'}` : ''}
+              {row.vehicle_reg ? ` · ${row.vehicle_reg}` : ''}
+            </p>
           </div>
         </div>
         {/* WHOSE MOVE IT IS. The stage name is in the rail below; this says
-            who holds the lead right now, which is the question the header is
-            really being asked. The customer tone reuses the teal cust palette. */}
-        {primaryAction ? (
-          /* YOUR MOVE. When this user owns the next step, the header carries it
-             as the prominent thing — amber, because it is waiting on a person —
-             and pressing it opens the form below and scrolls to it. */
-          <button type="button" className="cta" onClick={goToAction}>
-            <span className="cta__txt">
-              <small>Your move</small>
-              <b>{primaryAction.label}</b>
-            </span>
-            <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
-          </button>
-        ) : holds ? (
-          <div className={'holds holds--' + (holds.pillTone === 'cust' ? 'cust' : holds.tone)}>
-            <span className="holds__puck" aria-hidden="true">
-              {holds.tone === 'ai' ? (
-                <svg width="20" height="20" viewBox="0 0 20 20"><path d="M6 3a2 2 0 0 0-2 2 2 2 0 0 0-1 3.6A2 2 0 0 0 4 12a2 2 0 0 0 2 2M14 3a2 2 0 0 1 2 2 2 2 0 0 1 1 3.6A2 2 0 0 1 16 12a2 2 0 0 1-2 2M10 3.5v12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
-              ) : holds.pillTone === 'cust' ? (
-                <svg width="20" height="20" viewBox="0 0 20 20"><path d="M4 5h12v8h-6l-3 2.5V13H4z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>
-              ) : holds.tone === 'person' ? (
-                <svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="6.5" r="2.8" fill="none" stroke="currentColor" strokeWidth="1.5"/><path d="M4.5 15.5a5.5 5.5 0 0 1 11 0" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
-              ) : (
-                <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 5.5v4.5l3 2" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/><circle cx="10" cy="10" r="6.5" fill="none" stroke="currentColor" strokeWidth="1.5"/></svg>
-              )}
-            </span>
-            <span className="holds__txt">
-              <small>Right now</small>
-              <b>{holds.label}</b>
-            </span>
+            who holds the lead right now, in that holder's colour. */}
+        <div className="page__right">
+          <div className="state">
+            <span>{stateName}</span>
+            {holds ? <span className={'pill pill--' + holds.tone}><span className={'dot dot--' + holds.tone} />{holds.label}</span> : null}
           </div>
-        ) : null}
+        </div>
       </header>
 
       {statusStrip}
 
-      {/* Measures, not fields. Age and dwell time are computed — neither is on
-          the record — and they are the two that answer "is this lead moving?",
-          which no label/value pair on the page could. */}
+      {/* FOUR NUMBERS, NOT SEVEN. Money leads, because that is what a renewal
+          is about; the AI's confidence in the cover sits beside it; the
+          renewal countdown is the one deadline that matters. */}
       {(() => {
         const e = expiryOf(row.renewal_due_date)
         const premium = inrShort(row.quoted_premium)
         const commission = inrShort(row.commission_amount)
         const conf = Number(row.ai_recommendation_confidence)
-        // FOUR NUMBERS, NOT SEVEN. Money leads, because that is what a renewal
-        // is about; the AI's confidence in the cover sits beside it; the
-        // renewal countdown is the one deadline that matters. Dropped: lead age
-        // and time-in-stage (they overlapped each other and the feed carries
-        // timing), and product/vehicle (the rail's "The vehicle" holds them).
-        // Nothing is lost — every removed measure is still on the page once,
-        // where it belongs.
+        const dueTone = e ? (e.tone === 'lapsed' ? 'red' : e.tone === 'urgent' ? 'amber' : '') : ''
         return (
-          <div className="lmetrics">
-            <div className="lm lm--hero">
-              <span className="lm__l">Premium</span>
-              <strong className="lm__v">{premium ?? '—'}</strong>
-              <span className="lm__s">{premium ? 'quoted, incl. GST' : 'not yet rated'}</span>
+          <div className="card facts">
+            <div className="fact">
+              <span className="fact__l">Premium</span>
+              <strong className={'fact__v' + (premium ? '' : ' is-none')}>{premium ?? 'Not yet rated'}</strong>
+              <span className="fact__s">{premium ? 'quoted, incl. GST' : 'a quote appears once Rating has run'}</span>
             </div>
-            <div className="lm lm--hero">
-              <span className="lm__l">Commission</span>
-              <strong className="lm__v">{commission ?? '—'}</strong>
-              <span className="lm__s">
+            <div className="fact">
+              <span className="fact__l">Commission</span>
+              <strong className={'fact__v' + (commission ? '' : ' is-none')}>{commission ?? '—'}</strong>
+              <span className="fact__s">
                 {row.commission_rate_pct ? row.commission_rate_pct + '% · on issue' : 'on placement'}
               </span>
             </div>
-            {Number.isFinite(conf) && conf > 0 ? (
-              <div className="lm">
-                <span className="lm__l">AI confidence</span>
-                <strong className="lm__v">{conf}%</strong>
-                <span className="lm__s">on the cover advice</span>
-              </div>
-            ) : null}
-            <div className="lm">
-              <span className="lm__l">Renewal</span>
-              <strong className={'lm__v' + (e ? ' due--' + e.tone : '')}>{e ? e.label : '—'}</strong>
-              <span className="lm__s">{e ? e.on : 'no date on file'}</span>
+            <div className="fact">
+              <span className="fact__l">AI confidence</span>
+              {Number.isFinite(conf) && conf > 0 ? (
+                <>
+                  <strong className="fact__v">{conf}%</strong>
+                  <div className="fact__conf">
+                    <span className="tr" aria-hidden="true"><i style={{ width: Math.min(100, conf) + '%' }} /></span>
+                    <span>on the cover advice</span>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <strong className="fact__v is-none">—</strong>
+                  <span className="fact__s">once the Advisor has spoken</span>
+                </>
+              )}
+            </div>
+            <div className="fact">
+              <span className="fact__l">Renewal due</span>
+              <strong className={'fact__v' + (dueTone ? ' due--' + dueTone : '')}>{e ? e.label : '—'}</strong>
+              <span className="fact__s">{e ? e.on : 'no date on file'}</span>
             </div>
           </div>
         )
@@ -575,8 +553,8 @@ blocked ? (
 
       <StageRail audit={audit} currentName={stateName} />
 
-      <div className="lead">
-        <div className="lead__main">
+      <div className="detail">
+        <div className="detail__main">
           {note ? (
             <div className="said" role="status">
               <p>{note}</p>
@@ -761,7 +739,7 @@ blocked ? (
 
         {/* Reference, not narrative. Sticky, so the facts stay put while the
             story is read against them. */}
-        <aside className="lead__side">
+        <aside className="detail__side">
           {/* Who worked this lead. Five agents carry it and their names appear
               only inside individual entries, so the team was never visible at
               a glance. */}
diff --git a/src/screens/Overview.jsx b/src/screens/Overview.jsx
index 9d26c30..0672977 100644
--- a/src/screens/Overview.jsx
+++ b/src/screens/Overview.jsx
@@ -6,6 +6,7 @@ import { ENTRY, STAGES, phaseOf } from '../api/config.js'
 import { entryDoorsFor, rolesOf, visibleStages } from '../api/permissions.js'
 import { describeError } from '../api/errors.js'
 import NewLeadDialog from '../components/NewLeadDialog.jsx'
+import { holderOf } from '../api/holder.js'
 import './screens.css'
 
 /**
@@ -65,13 +66,6 @@ const PREM_RANGES = [
 ]
 const PREM_MATCH = Object.fromEntries(PREM_RANGES.map(([k, , fn]) => [k, fn]))
 
-function expiryTone(d) {
-  if (d === null) return 'later'
-  if (d < 0) return 'lapsed'
-  if (d <= 7) return 'urgent'
-  if (d <= 30) return 'soon'
-  return 'later'
-}
 
 export default function Overview() {
   const { user } = useZino()
@@ -218,7 +212,7 @@ export default function Overview() {
       <header className="page__head">
         <div>
           <h1 className="page__title">Portfolio overview</h1>
-          <p className="page__sub">Motor and SME renewals · organisation-wide</p>
+          <p className="page__sub">Motor and SME renewals, organisation-wide</p>
         </div>
         {/* The action sits with the thing it acts on. It was in the sidebar,
             which is for moving between places — an action among destinations
@@ -245,35 +239,53 @@ export default function Overview() {
           are being worked by the AI, this many are waiting on a person, this
           many on a customer. It sits above the money because it is the claim
           the money is evidence for. */}
-      <div className="now">
-        <div className="now__cell now__cell--ai">
-          <span className="now__l">With the AI</span>
-          <strong className="now__v">{m.withAI}</strong>
-          <span className="now__s">being qualified, rated, checked or chased — no one waiting</span>
-        </div>
-        <div className={'now__cell now__cell--person' + (m.withPerson ? ' is-live' : '')}>
-          <span className="now__l">Waiting on a person</span>
-          <strong className="now__v">{m.withPerson}</strong>
-          <span className="now__s">{m.withPerson ? 'a decision or an upload is owed' : 'nothing owed by anyone'}</span>
-        </div>
-        <div className="now__cell now__cell--cust">
-          <span className="now__l">With the customer</span>
-          <strong className="now__v">{m.withCustomer}</strong>
-          <span className="now__s">a quote or a payment is theirs to answer</span>
-        </div>
-        <div className={'now__cell now__cell--risk' + (m.exposure.lapsed.length ? ' is-live' : '')}>
-          <span className="now__l">Renewals at risk</span>
-          <strong className="now__v">{m.exposure.lapsed.length + m.exposure.week.length}</strong>
-          <span className="now__s">{m.exposure.lapsed.length} lapsed · {m.exposure.week.length} within 7 days</span>
-        </div>
-      </div>
+      {/* WHO HOLDS THE WORK, RIGHT NOW. Every open lead is in exactly one of
+          three hands — the AI's, a person's, the customer's — and that is the
+          sentence this console exists to say. The money below is evidence for
+          it. Risk stands apart, in the one colour reserved for it. */}
+      {(() => {
+        const total = m.open.length || 1
+        const pct = (n) => Math.max(n ? 2 : 0, Math.round((n / total) * 100))
+        const risk = m.exposure.lapsed.length + m.exposure.week.length
+        return (
+          <section className="hero">
+            <div className="card holders">
+              <div className="holders__top">
+                <b>{m.open.length}</b>
+                <span>open leads. Who is holding each one right now:</span>
+              </div>
+              <div className="bar" aria-hidden="true">
+                <div className="bar__blue"  style={{ width: pct(m.withAI) + '%' }} />
+                <div className="bar__amber" style={{ width: pct(m.withPerson) + '%' }} />
+                <div className="bar__teal"  style={{ width: pct(m.withCustomer) + '%' }} />
+              </div>
+              <div className="legend">
+                <div className="legend__item legend__item--blue">
+                  <b>{m.withAI}</b><strong>With the AI</strong>
+                  <span>Being qualified, rated, checked or chased. Nothing for anyone to do.</span>
+                </div>
+                <div className="legend__item legend__item--amber">
+                  <b>{m.withPerson}</b><strong>Waiting on a person</strong>
+                  <span>A decision or an upload is owed by an agent, underwriter or ops.</span>
+                </div>
+                <div className="legend__item legend__item--teal">
+                  <b>{m.withCustomer}</b><strong>With the customer</strong>
+                  <span>A quote or a payment is theirs to answer.</span>
+                </div>
+              </div>
+            </div>
+            <div className={'card risk' + (risk ? '' : ' is-quiet')}>
+              <b>{risk}</b><strong>{risk === 1 ? 'renewal at risk' : 'renewals at risk'}</strong>
+              <div className="risk__rows">
+                <div><span>Already lapsed</span><em>{m.exposure.lapsed.length}</em></div>
+                <div><span>Expire within 7 days</span><em>{m.exposure.week.length}</em></div>
+              </div>
+            </div>
+          </section>
+        )
+      })()}
 
-      <div className="kpis">
-        <div className="kpi">
-          <span className="kpi__l">Open leads</span>
-          <strong className="kpi__v">{m.open.length}</strong>
-          <span className="kpi__s">{m.closed} closed to date</span>
-        </div>
+      <section className="card kpis">
         <div className="kpi">
           <span className="kpi__l">Pipeline value</span>
           <strong className="kpi__v">{inr(m.pipeline)}</strong>
@@ -287,154 +299,162 @@ export default function Overview() {
         <div className="kpi">
           <span className="kpi__l">Conversion</span>
           <strong className="kpi__v">{m.conversion === null ? '—' : m.conversion + '%'}</strong>
-          <span className="kpi__s">{m.won.length} won · {m.lost.length} lost</span>
+          <span className="kpi__s">of leads that closed</span>
         </div>
         <div className="kpi">
           <span className="kpi__l">Commission</span>
           <strong className="kpi__v">{inr(m.commission)}</strong>
           <span className="kpi__s">payable to partners</span>
         </div>
-      </div>
+        <div className="kpi">
+          <span className="kpi__l">Closed to date</span>
+          <strong className="kpi__v">{m.closed}</strong>
+          <span className="kpi__s">{m.won.length} won · {m.lost.length} lost</span>
+        </div>
+      </section>
 
-      {/* SIGN-OFF, not work. The only queue that is a person's approval rather
-          than a task, shown to the role that owns it and to nobody else. It sat
-          fourth in a list of six and read like any other item, which is the
-          wrong weight for the step that decides whether cover begins. */}
+      {/* SIGN-OFF, not work: the one queue that is a person's approval rather
+          than a task, shown to the role that owns it and to nobody else. */}
       {m.approvals.map((s) => (
         <Link key={s.uid} to={`/stage/${s.uid}`} className={'appr' + (s.n ? ' is-live' : '')}>
           <strong className="appr__n">{s.n}</strong>
-          <span className="appr__t">
-            {s.approvalLabel}
-            <em>{s.approvalNote}</em>
-          </span>
-          <span className="appr__go">
-            {s.n ? (s.oldest !== undefined ? `oldest ${s.oldest}d` : 'review') : 'nothing waiting'}
-          </span>
+          <span className="appr__t">{s.approvalLabel}<em>{s.approvalNote}</em></span>
+          <span className="appr__go">{s.n ? (s.oldest !== undefined ? `oldest ${s.oldest} days` : 'review') : 'nothing waiting'}</span>
         </Link>
       ))}
 
-      <div className="split">
-        <div>
-          <h2 className="sec">Action required</h2>
-          <div className="qlist">
-            {m.actionable.map((s) => (
-              <Link key={s.uid} to={`/stage/${s.uid}`} className={'q' + (s.n ? ' is-live' : '')}>
-                <strong className="q__n">{s.n}</strong>
-                <span className="q__t">
-                  {s.need ?? s.name}
-                  <em>{s.by}</em>
-                </span>
-                <span className="q__age">
-                  {s.n === 0 ? 'clear' : s.oldest !== undefined ? `oldest ${s.oldest}d` : ''}
-                  {s.working ? <b className="q__auto">+{s.working} with the AI</b> : null}
-                </span>
-                {!mine.has(s.uid) ? <span className="q__ro" title="View only for your role">view</span> : null}
+      <section className="cols">
+        <div className="card">
+          <div className="card__hd">
+            <h3>Waiting on a person</h3>
+            <p>{m.actionable.reduce((t, s) => t + s.n, 0)} leads, oldest first</p>
+          </div>
+          <div className="queue">
+            {[...m.actionable].sort((a, b) => (b.oldest ?? -1) - (a.oldest ?? -1)).map((s) => (
+              <Link key={s.uid} to={`/stage/${s.uid}`} className={'queue__row' + (s.n ? '' : ' is-clear')}>
+                <b className="queue__n">{s.n}</b>
+                <div>
+                  <div className="queue__t">{s.need ?? s.name}</div>
+                  <div className="queue__who">
+                    <span className={'dot dot--' + (s.kind === 'customer' ? 'teal' : 'amber')} />
+                    {String(s.by).replace(/^(the|an|a)\s+/i, '').replace(/^./, (c) => c.toUpperCase())}
+                    {!mine.has(s.uid) ? <span className="queue__ro" title="View only for your role">view</span> : null}
+                  </div>
+                </div>
+                <div className="queue__age">
+                  {s.n === 0 ? 'clear' : s.oldest !== undefined ? `oldest ${s.oldest} day${s.oldest === 1 ? '' : 's'}` : ''}
+                  {s.working ? <em>{s.working} more with the AI</em> : null}
+                </div>
+                <span className="btn btn--ghost btn--small">Open</span>
               </Link>
             ))}
           </div>
-
-          <h2 className="sec">Renewal exposure<span className="sec__hint">open leads by time to expiry</span></h2>
-          <div className="buckets">
-            <div className="bucket bucket--lapsed"><strong>{m.exposure.lapsed.length}</strong><span>Lapsed</span></div>
-            <div className="bucket bucket--urgent"><strong>{m.exposure.week.length}</strong><span>Within 7 days</span></div>
-            <div className="bucket bucket--soon"><strong>{m.exposure.month.length}</strong><span>8 to 30 days</span></div>
-          </div>
-
-          {/* Plain dropdown filters over the columns the table shows. Empty
-              option = no filter on that field; they narrow together. */}
-          <div className="xfd">
-            <label className="xfd__f">
-              <span>Stage</span>
-              <select value={fStage} onChange={(e) => setFStage(e.target.value)}>
-                <option value="">All stages</option>
-                {expoStages.map((st) => <option key={st} value={st}>{st}</option>)}
-              </select>
-            </label>
-            <label className="xfd__f">
-              <span>Time to expiry</span>
-              <select value={fExpiry} onChange={(e) => setFExpiry(e.target.value)}>
-                <option value="">Any time</option>
-                {Object.entries(EXPO_LABEL).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
-              </select>
-            </label>
-            <label className="xfd__f">
-              <span>Premium</span>
-              <select value={fPrem} onChange={(e) => setFPrem(e.target.value)}>
-                <option value="">Any premium</option>
-                {PREM_RANGES.map(([k, l]) => <option key={k} value={k}>{l}</option>)}
-              </select>
-            </label>
-            {anyFilter ? (
-              <button type="button" className="xfd__clear"
-                onClick={() => { setFStage(''); setFExpiry(''); setFPrem('') }}>
-                Clear
-              </button>
-            ) : null}
-          </div>
-
-          {shown.length ? (
-            <div className="gridwrap">
-              <table className="grid grid--tight">
-                <thead>
-                  <tr><th>Lead</th><th>Expiry</th><th>Stage</th><th className="num">Premium</th></tr>
-                </thead>
-                <tbody>
-                  {shown.slice(0, anyFilter ? 100 : 8).map((r) => {
-                    const id = r.instance_id ?? r.id
-                    return (
-                      <tr
-                        key={id}
-                        className="grid__row"
-                        onClick={() => navigate(`/lead/${id}`)}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); navigate(`/lead/${id}`) }
-                        }}
-                        tabIndex={0}
-                        role="link"
-                        aria-label={`Open ${r.customer_name || r.lead_ref || id}`}
-                      >
-                        <td>
-                          <span className="grid__name">{r.customer_name || r.lead_ref || `#${id}`}</span>
-                          <div className="grid__sub">{r.lead_ref || ''}</div>
-                        </td>
-                        <td><span className={'due due--' + expiryTone(r._d)}>
-                          {r._d < 0 ? Math.abs(r._d) + 'd overdue' : r._d === 0 ? 'today' : r._d + 'd'}
-                        </span></td>
-                        <td><span className="grid__sub">{r.current_state_name}</span></td>
-                        <td className="num">{r.quoted_premium ? inr(num(r.quoted_premium)) : '—'}</td>
-                      </tr>
-                    )
-                  })}
-                </tbody>
-              </table>
-            </div>
-          ) : (
-            <p className="empty">
-              {anyFilter ? 'No open leads match these filters.' : 'No renewals due within 30 days.'}
-            </p>
-          )}
         </div>
 
-        <div>
-          <h2 className="sec">Pipeline distribution</h2>
-          {/* Every stage, zeroes included. A stage that has quietly stopped
-              receiving leads is only visible if its zero is on the page. */}
+        <div className="card">
+          <div className="card__hd"><h3>Pipeline by stage</h3><p>{m.open.length} open</p></div>
           <div className="dist">
-            {STAGES.map((s) => {
+            {STAGES.filter((s) => s.kind !== 'end').map((s) => {
               const n = m.byStage[s.name] || 0
+              const tone = s.kind === 'auto' ? 'blue' : s.kind === 'customer' ? 'teal' : s.kind === 'needs' ? 'amber' : 'grey'
               return (
                 <Link key={s.uid} to={`/stage/${s.uid}`} className={'dist__r' + (n ? '' : ' is-zero')}>
                   <span className="dist__l">{s.name}</span>
                   <span className="dist__bar" aria-hidden="true">
-                    <span style={{ width: (n / m.maxStage) * 100 + '%' }} className={'dist__f dist__f--' + s.kind} />
+                    <span style={{ width: (n / m.maxStage) * 100 + '%' }} className={'dist__f dist__f--' + tone} />
                   </span>
-                  <span className="dist__n">{n}</span>
+                  <b className="dist__n">{n}</b>
+                </Link>
+              )
+            })}
+            <div className="dist__sec">Closed · {m.closed}</div>
+            {STAGES.filter((s) => s.kind === 'end').map((s) => {
+              const n = m.byStage[s.name] || 0
+              const max = Math.max(1, ...STAGES.filter((x) => x.kind === 'end').map((x) => m.byStage[x.name] || 0))
+              return (
+                <Link key={s.uid} to={`/stage/${s.uid}`} className="dist__r is-dim">
+                  <span className="dist__l">{s.name}</span>
+                  <span className="dist__bar" aria-hidden="true">
+                    <span style={{ width: (n / max) * 100 + '%' }} className="dist__f dist__f--grey" />
+                  </span>
+                  <b className="dist__n">{n}</b>
                 </Link>
               )
             })}
           </div>
         </div>
-      </div>
+      </section>
+
+      <section className="card exp">
+        <div className="card__hd"><h3>Renewal exposure</h3><p>open leads by time to expiry</p></div>
+        <div className="exp__tabs">
+          <div className="tab tab--red"><b>{m.exposure.lapsed.length}</b>lapsed</div>
+          <div className="tab tab--amber"><b>{m.exposure.week.length}</b>within 7 days</div>
+          <div className="tab"><b>{m.exposure.month.length}</b>8 to 30 days</div>
+          <div className="exp__filters">
+            <label className="xfd__f">
+              <select value={fStage} onChange={(e) => setFStage(e.target.value)} aria-label="Stage">
+                <option value="">All stages</option>
+                {expoStages.map((st) => <option key={st} value={st}>{st}</option>)}
+              </select>
+            </label>
+            <label className="xfd__f">
+              <select value={fExpiry} onChange={(e) => setFExpiry(e.target.value)} aria-label="Time to expiry">
+                <option value="">Any time</option>
+                {Object.entries(EXPO_LABEL).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
+              </select>
+            </label>
+            <label className="xfd__f">
+              <select value={fPrem} onChange={(e) => setFPrem(e.target.value)} aria-label="Premium">
+                <option value="">Any premium</option>
+                {PREM_RANGES.map(([k, l]) => <option key={k} value={k}>{l}</option>)}
+              </select>
+            </label>
+            {anyFilter ? (
+              <button type="button" className="xfd__clear" onClick={() => { setFStage(''); setFExpiry(''); setFPrem('') }}>Clear</button>
+            ) : null}
+          </div>
+        </div>
+
+        {shown.length ? (
+          <div className="gridwrap">
+            <table className="grid">
+              <thead>
+                <tr><th>Lead</th><th>Expiry</th><th>Stage</th><th>Holding it</th><th className="num">Premium</th></tr>
+              </thead>
+              <tbody>
+                {shown.slice(0, anyFilter ? 100 : 8).map((r) => {
+                  const id = r.instance_id ?? r.id
+                  const def = STAGES.find((s) => s.name === r.current_state_name)
+                  const h = holderOf(def, r)
+                  const tone = r._d < 0 ? 'red' : r._d <= 7 ? 'amber' : 'grey'
+                  return (
+                    <tr key={id} className="grid__row" tabIndex={0} role="link"
+                        onClick={() => navigate(`/lead/${id}`)}
+                        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); navigate(`/lead/${id}`) } }}
+                        aria-label={`Open ${r.customer_name || r.lead_ref || id}`}>
+                      <td>
+                        <span className="grid__name" style={{ fontSize: 'var(--fs-sm)' }}>{r.customer_name || r.lead_ref || `#${id}`}</span>
+                        <div className="grid__sub">{r.lead_ref || ''}</div>
+                      </td>
+                      <td><span className={'pill pill--' + tone}>
+                        {r._d < 0 ? Math.abs(r._d) + (r._d === -1 ? ' day' : ' days') + ' overdue' : r._d === 0 ? 'today' : r._d + (r._d === 1 ? ' day' : ' days')}
+                      </span></td>
+                      <td>{r.current_state_name}</td>
+                      <td><span className="who"><span className={'dot dot--' + h.tone} />{h.label}</span></td>
+                      <td className="num">{r.quoted_premium ? '₹' + Math.round(num(r.quoted_premium)).toLocaleString('en-IN') : '—'}</td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <p className="empty" style={{ margin: '0 20px 20px' }}>
+            {anyFilter ? 'No open leads match these filters.' : 'No renewals due within 30 days.'}
+          </p>
+        )}
+      </section>
       {adding ? <NewLeadDialog onClose={() => setAdding(false)} /> : null}
     </section>
   )
diff --git a/src/screens/Pipeline.jsx b/src/screens/Pipeline.jsx
index b5bf40f..0b1c261 100644
--- a/src/screens/Pipeline.jsx
+++ b/src/screens/Pipeline.jsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { useZino } from '../api/provider.jsx'
-import { CHANNELS, ENTRY, RV_LEADS, STAGES, phaseOf } from '../api/config.js'
+import { ENTRY, RV_LEADS, STAGES, phaseOf } from '../api/config.js'
 import { entryDoorsFor, rolesOf } from '../api/permissions.js'
 import { describeError } from '../api/errors.js'
 import NewLeadDialog from '../components/NewLeadDialog.jsx'
+import { holderOf } from '../api/holder.js'
 
 /** Short absolute date plus how long ago — a queue needs both: the absolute
  *  for "when exactly", the relative for "is this going stale". */
@@ -87,6 +88,8 @@ export default function Pipeline() {
   // answer. Closed rows are shown, and dimmed, and can be hidden by choice.
   const isAll = stageUid === 'all'
   const [hideClosed, setHideClosed] = useState(false)
+  // Find-a-lead. Client-side, over the page already fetched.
+  const [q, setQ] = useState('')
   const stage = isAll
     ? { uid: 'all', name: 'All leads', kind: 'all', by: 'everyone' }
     : STAGES.find((s) => s.uid === stageUid)
@@ -140,12 +143,82 @@ export default function Pipeline() {
   // are closed instead of silently showing fewer than the page claims.
   const CLOSED = new Set(STAGES.filter((x) => x.kind === 'end').map((x) => x.name))
   const closedCount = isAll ? state.rows.filter((r) => CLOSED.has(r.current_state_name)).length : 0
-  const shownRows = isAll && hideClosed
+  const needle = q.trim().toLowerCase()
+  const shownRows = (isAll && hideClosed
     ? state.rows.filter((r) => !CLOSED.has(r.current_state_name))
     : state.rows
+  ).filter((r) => !needle || [r.customer_name, r.lead_ref, r.vehicle_reg, r.entity_name, r.customer_phone]
+    .some((v) => String(v || '').toLowerCase().includes(needle)))
+
+  // Inside a person-gated queue the rows split in two: the ones that are that
+  // person's turn, and the ones the AI is still working inside the same state.
+  // Two group rows say so; a flat list read as one queue when it was two.
+  const grouped = !isAll && (stage.kind === 'needs' || stage.kind === 'customer')
+  const yourTurn = grouped ? shownRows.filter((r) => phaseOf(stage, r).kind !== 'auto') : shownRows
+  const withAI = grouped ? shownRows.filter((r) => phaseOf(stage, r).kind === 'auto') : []
 
   if (!stage) return <p className="empty">Unknown stage.</p>
 
+  function renderRows(rows) {
+    return (
+      <>
+              {rows.map((r) => {
+                const id = r.instance_id ?? r.id
+                const exp = expiry(r.renewal_due_date)
+                const add = added(r.updated_at || r.created_at)
+                // What is really happening in the state, not just its name —
+                // a lead whose documents are in is being worked by the AI, not
+                // waiting on the agent whose queue it is sitting in.
+                const def = STAGES.find((x) => x.name === r.current_state_name)
+                const rowStage = phaseOf(def, r)
+                const prog = progress(r, rowStage)
+                const h = holderOf(def, r)
+                const done = CLOSED.has(r.current_state_name)
+                const dueTone = exp ? (exp.tone === 'lapsed' ? 'red' : exp.tone === 'urgent' ? 'amber' : '') : ''
+                return (
+                  <tr
+                    key={id}
+                    className={'grid__row'
+                      + (prog?.state === 'stalled' ? ' is-stalled' : '')
+                      + (done ? ' is-done' : '')}
+                    onClick={() => navigate(`/lead/${id}`)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); navigate(`/lead/${id}`) }
+                    }}
+                    tabIndex={0}
+                    role="link"
+                    aria-label={`Open ${r.customer_name || r.lead_ref || id}`}
+                  >
+                    <td>
+                      <span className="grid__name">{r.customer_name || '—'}</span>
+                      <div className="grid__sub">
+                        {r.lead_ref || `#${id}`}
+                        {r.product_line ? ` · ${r.product_line === 'motor' ? 'Motor' : 'SME'}` : ''}
+                        {r.vehicle_reg ? ` · ${r.vehicle_reg}` : r.entity_name ? ` · ${r.entity_name}` : ''}
+                      </div>
+                    </td>
+                    <td>
+                      {prog?.state === 'stalled' ? (
+                        <><span className="stall">Stalled</span><div className="grid__sub">{prog.label}</div></>
+                      ) : (
+                        <>{r.current_state_name || '—'}{prog ? <div className="grid__sub">{prog.label}</div> : null}</>
+                      )}
+                    </td>
+                    <td>
+                      {exp
+                        ? <span className={'due' + (dueTone ? ' due--' + dueTone : '')}><b>{exp.label}</b><small>{exp.on}</small></span>
+                        : <span className="grid__sub">—</span>}
+                    </td>
+                    <td><span className="who"><span className={'dot dot--' + h.tone} />{h.label}</span></td>
+                    <td className="num">{r.quoted_premium ? '₹' + Math.round(Number(r.quoted_premium)).toLocaleString('en-IN') : '—'}</td>
+                    <td><span className="grid__sub">{add.rel || add.abs}</span></td>
+                  </tr>
+                )
+              })}
+      </>
+    )
+  }
+
   return (
     <section>
       <header className="page__head">
@@ -164,22 +237,8 @@ export default function Pipeline() {
             {stage.need ? <span className="page__stage">Stage · {stage.name}</span> : null}
           </p>
         </div>
-        {state.status === 'ready' ? (
+        {canFile ? (
           <div className="page__right">
-            {/* Offered only where there is something to hide, and OFF by
-                default: this page's job is that nothing disappears from it. */}
-            {isAll && closedCount ? (
-              <label className="toggle">
-                <input type="checkbox" checked={hideClosed}
-                       onChange={(ev) => setHideClosed(ev.target.checked)} />
-                Hide {closedCount} closed
-              </label>
-            ) : null}
-            <div className="page__count">
-              <strong>{isAll ? shownRows.length : state.total}</strong>
-              <span>{(isAll ? shownRows.length : state.total) === 1 ? 'lead' : 'leads'}</span>
-            </div>
-            {canFile ? (
             <button type="button" className="newlead" onClick={() => setAdding(true)}>
               <svg viewBox="0 0 16 16" aria-hidden="true">
                 <path d="M8 3.2v9.6M3.2 8h9.6" fill="none" stroke="currentColor"
@@ -187,7 +246,6 @@ export default function Pipeline() {
               </svg>
               New lead
             </button>
-            ) : null}
           </div>
         ) : null}
       </header>
@@ -206,86 +264,68 @@ export default function Pipeline() {
         </div>
       ) : null}
 
-      {state.status === 'ready' && shownRows.length === 0 ? (
-        <p className="empty">{isAll ? 'No leads yet.' : 'No records in this stage.'}</p>
-      ) : null}
+      {state.status === 'ready' ? (
+        <div className="card">
+          <div className="tools">
+            <label className="search">
+              <svg viewBox="0 0 16 16" aria-hidden="true">
+                <circle cx="7" cy="7" r="4.5" fill="none" stroke="currentColor" strokeWidth="1.5" />
+                <path d="M10.5 10.5 14 14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              </svg>
+              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Find a lead, a registration, a reference" aria-label="Find a lead" />
+            </label>
+            {/* Offered only where there is something to hide, and OFF by
+                default: this page's job is that nothing disappears from it. */}
+            {isAll && closedCount ? (
+              <label className={'tools__toggle' + (hideClosed ? ' is-on' : '')}>
+                <input type="checkbox" checked={hideClosed} onChange={(ev) => setHideClosed(ev.target.checked)} />
+                <i aria-hidden="true" />
+                Hide {closedCount} closed
+              </label>
+            ) : null}
+            <span className="tools__count">
+              {shownRows.length} {shownRows.length === 1 ? 'lead' : 'leads'}
+              {!isAll && state.total > shownRows.length && !needle ? ` of ${state.total}` : ''}
+            </span>
+          </div>
 
-      {state.status === 'ready' && shownRows.length > 0 ? (
-        <div className="gridwrap">
-          <table className="grid">
-            <thead>
-              <tr>
-                <th>Customer</th>
-                <th>{isAll ? 'Stage' : 'Status'}</th>
-                <th>Renewal due</th>
-                <th className="num">Premium</th>
-                <th>Waiting</th>
-              </tr>
-            </thead>
-            <tbody>
-              {shownRows.map((r) => {
-                const id = r.instance_id ?? r.id
-                const ch = CHANNELS[r.source_channel] || { label: r.source_channel || '—' }
-                const exp = expiry(r.renewal_due_date)
-                const add = added(r.created_at)
-                // What is really happening in the state, not just its name —
-                // a lead whose documents are in is being worked by the AI, not
-                // waiting on the agent whose queue it is sitting in.
-                const rowStage = phaseOf(STAGES.find((x) => x.name === r.current_state_name), r)
-                const prog = progress(r, rowStage)
-                return (
-                  <tr
-                    key={id}
-                    className={'grid__row'
-                      + (prog ? ' is-' + prog.state : '')
-                      + (CLOSED.has(r.current_state_name) ? ' is-done' : '')}
-                    onClick={() => navigate(`/lead/${id}`)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); navigate(`/lead/${id}`) }
-                    }}
-                    tabIndex={0}
-                    role="link"
-                    aria-label={`Open ${r.customer_name || r.lead_ref || id}`}
-                  >
-                    <td>
-                      <span className="grid__name">{r.customer_name || '—'}</span>
-                      <div className="grid__sub">
-                        {r.lead_ref || `#${id}`}
-                        {r.product_line ? ` · ${r.product_line === 'motor' ? 'Motor' : 'SME'}` : ''}
-                        {ch.label ? ` · ${ch.label}` : ''}
-                      </div>
-                    </td>
-                    {/* Who holds it, and — where an agent does — whether it is
-                        moving. On the all-leads view the stage name is the
-                        useful column; inside a queue every row shares it, so
-                        the useful thing is progress. */}
-                    <td>
-                      {prog ? (
-                        <span className={'run run--' + prog.state}>
-                          <span className="run__dot" aria-hidden="true" />
-                          {prog.label}
-                        </span>
-                      ) : isAll ? (
-                        <span className="grid__sub">{r.current_state_name || '—'}</span>
-                      ) : (
-                        <span className="grid__sub">
-                          {rowStage?.by ? `with ${rowStage.by}` : '—'}
-                        </span>
-                      )}
-                    </td>
-                    <td>
-                      {exp
-                        ? <><span className={'due due--' + exp.tone}>{exp.label}</span>
-                            <div className="grid__sub">{exp.on}</div></>
-                        : <span className="grid__sub">—</span>}
-                    </td>
-                    <td className="num">{r.quoted_premium ? '₹' + Number(r.quoted_premium).toLocaleString('en-IN') : '—'}</td>
-                    <td><span className="grid__sub">{add.rel || add.abs}</span></td>
+          {shownRows.length === 0 ? (
+            <p className="empty" style={{ margin: 20 }}>
+              {needle ? 'No lead matches that.' : isAll ? 'No leads yet.' : 'No records in this stage.'}
+            </p>
+          ) : (
+            <div className="gridwrap">
+              <table className="grid">
+                <thead>
+                  <tr>
+                    <th>Customer</th>
+                    <th>Stage</th>
+                    <th>Renewal due</th>
+                    <th>Holding it</th>
+                    <th className="num">Premium</th>
+                    <th>Last activity</th>
                   </tr>
-                )
-              })}
-            </tbody>
-          </table>
+                </thead>
+                <tbody>
+                  {grouped && withAI.length ? (
+                    <tr className="grp-row"><td colSpan={6}>
+                      <span className={'dot dot--' + (stage.kind === 'customer' ? 'teal' : 'amber')} />
+                      {stage.kind === 'customer' ? 'With the customer' : 'Your turn'}<span>{yourTurn.length}</span>
+                    </td></tr>
+                  ) : null}
+                  {renderRows(yourTurn)}
+                  {grouped && withAI.length ? (
+                    <>
+                      <tr className="grp-row"><td colSpan={6}>
+                        <span className="dot dot--blue" />With the AI<span>{withAI.length} · nothing for anyone to do</span>
+                      </td></tr>
+                      {renderRows(withAI)}
+                    </>
+                  ) : null}
+                </tbody>
+              </table>
+            </div>
+          )}
         </div>
       ) : null}
       {adding ? <NewLeadDialog onClose={() => setAdding(false)} /> : null}
diff --git a/src/screens/screens.css b/src/screens/screens.css
index 4559b43..b6ae9c6 100644
--- a/src/screens/screens.css
+++ b/src/screens/screens.css
@@ -1,1943 +1,385 @@
-/* ---- page header ---- */
-.page__head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 24px;
-  margin-bottom: 24px;
-}
+/* ═══════════════════════════════════════════════════════════════════════════
+   Lead Desk screens. Flat white cards on the grey canvas, one colour rule:
+   blue = the AI holds it, amber = a person, teal = the customer, red = risk.
+   ═══════════════════════════════════════════════════════════════════════════ */
 
-.page__title {
-  margin: 0;
-  font-size: var(--fs-2xl);
-  font-weight: var(--fw-x);
-  letter-spacing: -0.022em;
-  line-height: 1.2;
-  color: var(--zk-ink);
-}
+/* ── Page head ──────────────────────────────────────────────────────────── */
+.page__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
+.page__lead { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
+.page__title { margin: 0; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--zk-ink); }
+.page__sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--zk-muted); }
+.page__stage { color: var(--zk-grey); }
+.page__stage::before { content: ' · '; }
+.page__sub .idline, .idline { font-size: var(--fs-sm); color: var(--zk-grey); margin-top: 2px; }
+.page__right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: var(--fs-xs); color: var(--zk-grey); }
+.stamp { font-size: var(--fs-xs); color: var(--zk-grey); white-space: nowrap; }
 
-.page__sub {
-  margin: 6px 0 0;
-  max-width: 72ch;
-  font-size: var(--fs-xs);
-  line-height: 1.5;
-  color: var(--zk-muted);
+/* ── Buttons, pills, dots ───────────────────────────────────────────────── */
+.btn, .newlead {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 9px 16px; border-radius: var(--r-sm);
+  font: inherit; font-weight: 600; font-size: var(--fs-sm);
+  cursor: pointer; border: 1px solid transparent; text-decoration: none;
+  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
 }
+.btn svg, .newlead svg { width: 14px; height: 14px; }
+.newlead, .btn--primary { background: var(--zk-blue); color: #fff; }
+.newlead:hover, .btn--primary:hover { background: var(--zk-navy-2); }
+.btn--navy { background: var(--zk-navy); color: #fff; }
+.btn--navy:hover { background: var(--zk-navy-2); }
+.btn--ghost { border-color: var(--zk-line); background: #fff; color: var(--zk-ink); }
+.btn--ghost:hover { background: var(--zk-tint); border-color: var(--zk-grey); }
+.btn--small { padding: 5px 12px; font-size: var(--fs-xs); }
+.btn:focus-visible, .newlead:focus-visible { outline: none; box-shadow: var(--ring); }
+.btn:disabled { opacity: .55; cursor: default; }
 
-/* The queue depth, as a stat tile rather than a loose number. */
-.page__count {
-  flex: none;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1px;
-  min-width: 84px;
-  padding: 10px 18px;
-  border-radius: var(--r-lg);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  box-shadow: var(--sh-sm);
+.pill {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 2px 10px; border-radius: var(--r-pill);
+  font-size: var(--fs-2xs); font-weight: 600; line-height: 1.5; white-space: nowrap;
 }
+.pill--red   { background: var(--zk-danger-tint); color: var(--zk-danger); }
+.pill--amber { background: var(--zk-amber-tint);  color: var(--zk-amber); }
+.pill--teal  { background: var(--zk-teal-tint);   color: var(--zk-teal); }
+.pill--blue  { background: var(--zk-tint-blue);   color: var(--zk-blue); }
+.pill--grey  { background: var(--zk-line-soft);   color: var(--zk-muted); }
 
-.page__count strong {
-  font-size: var(--fs-2xl);
-  font-weight: 500;
-  line-height: 1.1;
-  color: var(--zk-blue);
-  font-variant-numeric: tabular-nums;
-}
+.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
+.dot--blue  { background: var(--zk-blue); }
+.dot--amber { background: var(--zk-amber); }
+.dot--teal  { background: var(--zk-teal); }
+.dot--red   { background: var(--zk-danger); }
+.dot--grey  { background: var(--zk-grey); }
 
-.page__count span {
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
+.who { display: inline-flex; align-items: center; gap: 7px; color: var(--zk-muted); white-space: nowrap; }
+.muted { color: var(--zk-grey); }
+.link { color: var(--zk-blue); font-weight: 600; }
 
-.empty {
-  margin: 0;
-  color: var(--zk-muted);
-  font-size: var(--fs-xs);
-  text-align: center;
-  padding: 44px 24px;
-  border-radius: var(--r-lg);
-  border: 1px dashed var(--zk-line);
-  background: linear-gradient(180deg, var(--zk-white) 0%, var(--zk-tint) 100%);
-}
+/* ── Cards ──────────────────────────────────────────────────────────────── */
+.card { background: var(--zk-card); border: 1px solid var(--zk-line); border-radius: var(--r-md); }
+.card__hd { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px 12px; }
+.card__hd h3 { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--zk-ink); }
+.card__hd p { margin: 0; font-size: var(--fs-xs); color: var(--zk-grey); }
+.card__hd .card__right { margin-left: auto; font-size: var(--fs-xs); color: var(--zk-muted); }
 
+/* ── States: notice, empty, skeleton ────────────────────────────────────── */
 .notice {
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  border-left: 3px solid var(--zk-blue);
-  border-radius: var(--r-xs) var(--r-lg) var(--r-lg) var(--r-xs);
-  box-shadow: var(--sh-sm);
-  padding: 18px 22px;
-  max-width: 64ch;
+  background: #fff; border: 1px solid var(--zk-line); border-left: 3px solid var(--zk-blue);
+  border-radius: var(--r-xs) var(--r-md) var(--r-md) var(--r-xs); padding: 18px 22px; max-width: 64ch;
 }
-
-.notice strong {
-  display: block;
-  font-weight: 500;
-  margin-bottom: 7px;
+.notice strong { display: block; font-weight: 600; margin-bottom: 7px; }
+.notice p { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--zk-muted); line-height: 1.55; }
+.notice__detail { font-size: var(--fs-2xs) !important; color: var(--zk-grey) !important; }
+.empty {
+  margin: 0; color: var(--zk-muted); font-size: var(--fs-xs); text-align: center;
+  padding: 44px 24px; border-radius: var(--r-md); border: 1px dashed var(--zk-line); background: #fff;
 }
-
-.notice p {
-  margin: 0 0 6px;
-  font-size: var(--fs-xs);
-  color: var(--zk-muted);
-  line-height: 1.55;
-}
-
-.notice__detail {
-  font-size: var(--fs-2xs) !important;
-  color: var(--zk-grey) !important;
-}
-
-.notice code {
-  font-family: var(--font-mono);
-  font-size: 0.8em;
-  background: var(--zk-tint);
-  border: 1px solid var(--zk-line-soft);
-  border-radius: var(--r-xs);
-  padding: 1px 5px;
-}
-
-/* ---- queue table ---- */
-.gridwrap {
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-lg);
-  box-shadow: var(--sh-sm);
-  overflow: hidden;
-  overflow-x: auto;
-}
-
-.grid {
-  width: 100%;
-  /* Eight columns of operational data do not compress: below this the card
-     scrolls sideways rather than squeezing every cell into two words a line. */
-  min-width: 1000px;
-  border-collapse: separate;
-  border-spacing: 0;
-  font-size: var(--fs-sm);
-}
-
-.grid th {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  text-align: left;
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-  padding: 12px 16px;
-  background: var(--zk-tint);
-  border-bottom: 1px solid var(--zk-line);
-  white-space: nowrap;
-}
-
-.grid td {
-  padding: var(--sp-4) var(--sp-5);
-  border-bottom: 1px solid var(--zk-line-soft);
-  vertical-align: middle;
-}
-
-.grid tbody tr {
-  transition: background var(--t-fast);
-}
-
-.grid tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.grid tbody tr:hover {
-  background: var(--zk-tint);
-}
-
-/* An accent that arrives on hover, drawn inside the cell so it never disturbs
-   the table's own borders. */
-.grid tbody tr:hover td:first-child {
-  box-shadow: inset 3px 0 0 var(--zk-blue);
-}
-
-.grid .num {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-/* The lead reference is the thing an operator quotes on a call. */
-.grid__ref {
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  color: var(--zk-muted);
-}
-
-.grid__sub {
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  margin-top: 3px;
-}
-
-.grid__link {
-  color: var(--zk-blue);
-  text-decoration: none;
-  font-weight: 500;
-  border-bottom: 1px solid transparent;
-  transition: border-color var(--t-fast);
-}
-
-.grid__link:hover {
-  border-bottom-color: currentColor;
-}
-
-/* ---- loading skeleton ---- */
-.skel {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  padding: 14px 0;
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-lg);
-  box-shadow: var(--sh-sm);
-  overflow: hidden;
-}
-
+.skel { display: flex; flex-direction: column; gap: 10px; }
 .skel__row {
-  height: 18px;
-  margin: 9px 16px;
-  border-radius: var(--r-sm);
-  background: linear-gradient(90deg, var(--zk-line-soft) 0%, var(--zk-tint) 40%, var(--zk-line-soft) 80%);
-  background-size: 420px 100%;
-  animation: zk-shimmer 1.25s linear infinite;
-}
-
-.skel__row:nth-child(odd) { width: calc(100% - 32px); }
-.skel__row:nth-child(3n) { width: 72%; }
-.skel__row:nth-child(3n + 2) { width: 88%; }
-
-/* ---- chips ---- */
-.chip {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  padding: 3px 10px;
-  border-radius: var(--r-pill);
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
-  border: 1px solid var(--zk-blue-light);
-}
-
-.chip--warn {
-  background: var(--zk-amber-tint);
-  color: var(--zk-amber-ink);
-  border-color: var(--zk-amber-line);
-}
-
-/* ---- doors ---- */
-.doors {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
-  gap: 18px;
-}
-
-.door {
-  position: relative;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-lg);
-  box-shadow: var(--sh-sm);
-  padding: 22px 22px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  overflow: hidden;
-  transition: box-shadow var(--t), transform var(--t-fast), border-color var(--t-fast);
-}
-
-/* The accent bar is the door's handle: 3px at rest, the full brand gradient
-   once the pointer is on it. */
-.door::before {
-  content: '';
-  position: absolute;
-  inset: 0 0 auto;
-  height: 3px;
-  background: var(--grad-blue);
-  transform-origin: left;
-  transition: height var(--t);
-}
-
-.door:hover {
-  border-color: var(--zk-blue-light);
-  box-shadow: var(--sh-md);
-  transform: translateY(-2px);
-}
-
-.door:hover::before {
-  height: 5px;
-}
-
-.door:focus-visible {
-  border-color: var(--zk-blue);
-  box-shadow: var(--ring);
-}
-
-.door strong {
-  font-size: var(--fs-md);
-  font-weight: 500;
-  letter-spacing: -0.01em;
-  color: var(--zk-ink);
-}
-
-.door p {
-  margin: 0;
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  line-height: 1.55;
-}
-
-.door .chip {
-  align-self: flex-start;
-}
-
-/* ---- panel ---- */
-.panel {
-  /* CARD. The assured look is clean white cards that float a little on the
-     off-white ground — rounded, soft-shadowed, bounded. */
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line-soft);
-  border-radius: var(--r-lg);
-  box-shadow: var(--sh-sm);
-  padding: var(--sp-6) var(--sp-7);
-  margin-bottom: var(--sp-5);
-}
-
-.panel__head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--sp-5);
-  margin-bottom: var(--sp-6);
-}
-
-.panel__title {
-  margin: 0;
-  font-size: var(--fs-lg);
-  font-weight: var(--fw-bold);
-  letter-spacing: -0.018em;
-  line-height: var(--lh-tight);
-}
-
-.panel__sub {
-  margin: 5px 0 0;
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  max-width: 62ch;
-  line-height: 1.55;
-}
-
-/* ---- actions ---- */
-.acts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.act {
-  font: inherit;
-  cursor: pointer;
-  text-align: left;
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-md);
-  padding: 11px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 196px;
-  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
-}
-
-.act:hover {
-  border-color: var(--zk-blue-light);
-  background: var(--zk-tint);
-  box-shadow: var(--sh-sm);
-  transform: translateY(-1px);
-}
-
-.act.is-open {
-  border-color: var(--zk-blue);
-  background: var(--zk-tint-blue);
-  box-shadow: var(--ring);
-  transform: none;
-}
-
-.act strong {
-  font-size: var(--fs-xs);
-  font-weight: 500;
-}
-
-.act__by {
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-}
-
-.acts__form {
-  margin-top: 22px;
-  padding-top: 22px;
-  border-top: 1px solid var(--zk-line-soft);
-  animation: zk-rise 0.24s var(--ease) both;
-}
-
-/* ---- what the machine is doing ----
-   Shown where an empty action bar used to be. Most stages are carried by an AI
-   employee that takes a minute or two, and a screen that says nothing for two
-   minutes reads as broken. */
-.doing {
-  display: flex;
-  align-items: flex-start;
-  gap: 14px;
-  margin-bottom: var(--sp-5);
-  padding: var(--sp-4) var(--sp-5);
-  border-radius: var(--r-md);
-  border: 1px solid var(--zk-teal-line);
-  background: var(--zk-teal-tint);
-  color: var(--zk-teal-ink);
-}
-.doing strong { color: var(--zk-teal-ink); }
-
-.doing div {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 0;
-}
-
-.doing strong {
-  font-size: var(--fs-sm);
-  font-weight: 500;
-  color: var(--zk-blue-dark);
-}
-
-.doing span {
-  font-size: var(--fs-2xs);
-  line-height: 1.5;
-  color: var(--zk-muted);
-}
-
-.doing__pulse {
-  flex: none;
-  margin-top: 5px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--zk-blue);
-  box-shadow: 0 0 0 0 rgba(33, 103, 174, 0.5);
-  animation: zk-pulse 1.9s var(--ease) infinite;
-}
-
-@keyframes zk-pulse {
-  70%  { box-shadow: 0 0 0 9px rgba(33, 103, 174, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(33, 103, 174, 0); }
-}
-
-/* ---- and when it has stopped ----
-   Same strip, amber, and NOT pulsing: the animation is what says "something is
-   happening", so it is the first thing that has to go when nothing is. The
-   agents refuse rather than invent — the rating engine will not price without
-   an IDV — and that refusal used to be visible only as a lead that never moved
-   again. */
-.doing--blocked {
-  border-color: var(--zk-amber-line);
-  background: var(--zk-amber-tint);
-  align-items: flex-start;
-}
-
-.doing--blocked strong { color: var(--zk-amber-ink); }
-
-.doing__stop {
-  flex: none;
-  margin-top: 5px;
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
-  background: var(--zk-amber);
-}
-
-.doing__fix {
-  align-self: flex-start;
-  margin-top: 9px;
-  font: inherit;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  cursor: pointer;
-  padding: 7px 15px;
-  border-radius: var(--r-pill);
-  color: var(--zk-amber-ink);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-amber-line);
-  transition: background var(--t-fast), border-color var(--t-fast);
-}
-.doing__fix:hover { background: #fff8f1; border-color: var(--zk-amber); }
-.doing__fix:focus-visible { outline: 2px solid var(--zk-amber); outline-offset: 1px; }
-
-/* ---- what the workflow said ----
-   The message the API returns per activity, shown verbatim: it is the workflow
-   telling the operator what it just set in motion. */
-.said {
-  display: flex;
-  align-items: flex-start;
-  gap: 14px;
-  margin-bottom: 22px;
-  padding: 14px 16px 14px 20px;
-  border-radius: var(--r-lg);
-  border: 1px solid var(--zk-line);
-  border-left: 3px solid var(--zk-blue);
-  background: var(--zk-white);
-  box-shadow: var(--sh-sm);
-  animation: zk-rise 0.24s var(--ease) both;
-}
-
-.said p {
-  flex: 1;
-  margin: 0;
-  font-size: var(--fs-xs);
-  line-height: 1.5;
-  color: var(--zk-ink);
-}
-
-.said button {
-  flex: none;
-  font: inherit;
-  font-size: var(--fs-lg);
-  line-height: 1;
-  cursor: pointer;
-  padding: 2px 6px;
-  border: 0;
-  border-radius: var(--r-sm);
-  background: none;
-  color: var(--zk-grey);
-  transition: background var(--t-fast), color var(--t-fast);
-}
-
-.said button:hover {
-  background: var(--zk-tint);
-  color: var(--zk-ink);
-}
-
-/* The stage a queue named by need actually maps to. */
-.page__stage {
-  display: block;
-  margin-top: 4px;
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-}
-
-/* ---- back ----
-   An icon, not a sentence: the way out of a record is a known shape and does not
-   need naming twice on the page. It carries a title and an aria-label, so the
-   name is still there for a pointer that hovers and for a screen reader. */
-.backbtn {
-  flex: none;
-  margin-top: var(--sp-1);
-  width: 38px;
-  height: 38px;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  border-radius: var(--r-md);
-  border: 1px solid var(--zk-line);
-  background: var(--zk-white);
-  color: var(--zk-muted);
-  box-shadow: var(--sh-xs);
-  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
-}
-
-.backbtn svg {
-  width: 16px;
-  height: 16px;
-  transition: transform var(--t-fast);
-}
-
-.backbtn:hover {
-  border-color: var(--zk-blue-light);
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
-  box-shadow: var(--sh-sm);
-}
-
-.backbtn:hover svg {
-  transform: translateX(-2px);
-}
-
-.backbtn:focus-visible {
-  outline: none;
-  border-color: var(--zk-blue);
-  box-shadow: var(--ring);
-}
-
-.page__lead {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--sp-4);
-  min-width: 0;
-}
-
-/* ---- lead: the file beside the story ---- */
-.lead {
-  display: grid;
-  /* Fill the full width. The story column takes all the slack, the facts rail
-     is fixed to the width its key/value pairs need. Reading comfort is handled
-     inside the feed (its paragraphs cap their own line length), so the panel
-     can be wide without the text sprawling. */
-  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
-  gap: var(--sp-6);
-  align-items: start;
-}
-
-.lead__main {
-  min-width: 0;
-}
-
-/* The trail stays in view while the file is read against it. */
-.lead__side {
-  position: sticky;
-  top: 92px;
-  min-width: 0;
-  max-height: calc(100vh - 108px);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-
-/* Rail panels are tighter than main panels — a 340px measure cannot afford
-   32px of padding on each side. */
-.lead__side .panel { padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-4); }
-.lead__side .panel > .panel__head { padding: 0; margin-bottom: var(--sp-4); }
-.lead__side .panel--crew { border-bottom: 0; }
-/* rail headings sit at label size, not the big panel-title size — the rail is
-   reference, and a 18px "Customer" heading would shout over the facts. */
-.lead__side .panel__title {
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--zk-blue-dark);
-}
-.lead__side .panel__sub { display: none; }
-
-.panel--rail {
-  padding: 0;
-  margin-bottom: 0;
-  overflow: hidden;
-}
-
-.panel--rail .panel__head {
-  padding: 20px 22px 0;
-  margin-bottom: 14px;
-}
-
-/* .lead__feed is gone: the trail is page content and scrolls with the page.
-   An inner scroll region is a widget; the story is not a widget. */
-
-/* One column below the width where a rail stops paying for itself. */
-@media (max-width: 1100px) {
-  .lead {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .lead__side {
-    position: static;
-    max-height: none;
-    overflow: visible;
-  }
-}
-
-/* ---- tabs ----
-   Underline rather than pills: these swap the whole panel below them, which is
-   what a tab is for; a pill segment reads as a filter on shared content. The
-   2px rule lives on the button, so a strip that wraps to two rows still marks
-   the active one correctly. */
-.props {
-  margin: 0;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
-  gap: 0 36px;
-}
-
-.prop {
-  display: grid;
-  grid-template-columns: minmax(96px, 33%) minmax(0, 1fr);
-  gap: 16px;
-  align-items: baseline;
-  padding: 11px 10px;
-  margin: 0 -10px;
-  border-radius: var(--r-md);
-  border-bottom: 1px solid var(--zk-line-soft);
-  transition: background var(--t-fast);
-}
-
-.prop:hover {
-  background: var(--zk-tint);
-}
-
-.prop dt {
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  line-height: 1.45;
-}
-
-.prop dd {
-  margin: 0;
-  font-size: var(--fs-xs);
-  color: var(--zk-ink);
-  line-height: 1.45;
-  overflow-wrap: anywhere;
-}
-
-.prop__num {
-  font-variant-numeric: tabular-nums;
-  font-weight: 500;
-}
-
-/* Prose is not a property. It takes the full width, is labelled above rather
-   than beside, and is folded by ClampText. */
-.prop--note {
-  grid-column: 1 / -1;
-  display: block;
-  margin: 10px -10px;
-  padding: 14px 16px;
-  border-bottom: 0;
-  border: 1px solid var(--zk-line-soft);
-  border-left: 3px solid var(--zk-blue-light);
-  border-radius: 0 var(--r-md) var(--r-md) 0;
-  background: var(--zk-tint);
-}
-
-.prop--note:hover {
-  background: var(--zk-tint);
-  border-color: var(--zk-blue-light);
-}
-
-.prop--note dt {
-  margin-bottom: 7px;
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--zk-blue-dark);
-}
-
-.prop--note dd {
-  margin: 0;
-}
-
-/* ---- lead file ---- */
-.lead__stage {
-  flex: none;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: var(--sp-2);
-  text-align: right;
-}
-
-.lead__stagelabel {
-  display: block;
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-.lead__closed {
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-}
-
-.lead__stage strong {
-  font-size: var(--fs-md);
-  font-weight: var(--fw-semi);
-  letter-spacing: -0.01em;
-  color: var(--zk-blue-dark);
-  padding: var(--sp-2) var(--sp-5);
-  border-radius: var(--r-pill);
-  background: var(--zk-tint-blue);
-  border: 1px solid var(--zk-blue-light);
-}
-
-/* A closed lead is not a live stage; it should not wear the live stage's blue. */
-.lead__stage strong.is-closed {
-  color: var(--zk-muted);
-  background: var(--zk-tint);
-  border-color: var(--zk-line);
-}
-
-/* ---- renewal countdown ---- */
-.due {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  padding: 3px 10px;
-  border-radius: var(--r-pill);
-  white-space: nowrap;
-}
-
-.due--lapsed {
-  background: var(--zk-danger-tint);
-  color: var(--zk-danger-ink);
-  border: 1px solid var(--zk-danger-line);
-}
-
-.due--urgent {
-  background: var(--zk-amber-tint);
-  color: var(--zk-amber-ink);
-  border: 1px solid var(--zk-amber-line);
-}
-
-.due--soon {
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
-  border: 1px solid var(--zk-blue-light);
-}
-
-.due--later {
-  background: var(--zk-tint);
-  color: var(--zk-muted);
-  border: 1px solid var(--zk-line);
-}
-
-/* ---- lead header meta ---- */
-.lead__meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin: 0 0 22px;
-}
-
-.lead__meta div {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  padding: 9px 16px;
-  border-radius: var(--r-md);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  box-shadow: var(--sh-xs);
-}
-
-.lead__meta dt {
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-.lead__meta dd {
-  margin: 0;
-  font-size: var(--fs-xs);
-  color: var(--zk-ink);
-}
-
-.lead__meta--money {
-  border-color: var(--zk-blue-light) !important;
-  background: var(--zk-tint-blue) !important;
-}
-
-.lead__meta--money dd {
-  font-size: var(--fs-md);
-  font-weight: 500;
-  color: var(--zk-blue-dark);
-  font-variant-numeric: tabular-nums;
-}
-
-/* ── Portfolio overview ──────────────────────────────────────────────────
-   An operations dashboard: numbers first, prose nowhere. Every measure on
-   this page is derived from the lead list in the browser, so nothing here is
-   a figure the reader cannot get back to by opening a queue. */
-
-.stamp {
-  flex: none;
-  align-self: center;
-  font-size: var(--fs-3xs);
-  letter-spacing: .04em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-  font-variant-numeric: tabular-nums;
-}
-
-/* ── Right now ─────────────────────────────────────────────────────────────
-   The overview's first row. Four large numbers on a navy ground so the page
-   opens on a statement rather than a grid: this is who holds the work. Each
-   cell carries its own hue at the top edge — blue for the machine, amber for
-   a person, teal for the customer, red for risk — so the row can be read as
-   colour before it is read as text. */
-.now {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--sp-3);
-  margin-bottom: var(--sp-5);
-}
-
-/* FLAT, TO MATCH THE REST. This was four heavy dark-navy cards with shadows —
-   the cards-on-canvas language removed everywhere else, so on the flat white
-   page it clashed. Now light tiles, each read by a coloured left rule: blue
-   for the AI, amber for a person, teal for the customer, red for risk. The
-   number takes that colour, so the row is read as colour before text. Prominence
-   comes from a big figure and the accent, not from a dark fill. */
-.now__cell {
-  position: relative;
-  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
-  border-radius: var(--r-md);
-  background: var(--zk-white);
-  color: var(--zk-ink);
-  border: 1px solid var(--zk-line-soft);
-  overflow: hidden;
-}
-
-.now__cell::before {
-  content: '';
-  position: absolute;
-  inset: 0 auto 0 0;
-  width: 4px;
-  background: var(--zk-blue);
-}
-.now__cell--person::before { background: var(--zk-amber); }
-.now__cell--cust::before   { background: var(--zk-teal); }
-.now__cell--risk::before   { background: var(--zk-grey); }
-
-.now__l {
-  display: block;
-  margin-bottom: var(--sp-3);
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: .09em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-.now__v {
-  display: block;
-  margin-bottom: var(--sp-2);
-  font-size: var(--fs-2xl);
-  font-weight: var(--fw-semi);
-  line-height: 1;
-  letter-spacing: -.02em;
-  font-variant-numeric: tabular-nums;
-  color: var(--zk-blue-dark);
-}
-.now__cell--person .now__v { color: var(--zk-amber-ink); }
-.now__cell--cust   .now__v { color: var(--zk-teal-ink); }
-.now__cell--risk   .now__v { color: var(--zk-ink); }
-
-/* A live person-queue or a lapsed renewal is the one thing actually owed. It
-   warms its whole tile; the rest stay plain white. */
-.now__cell--person.is-live { background: var(--zk-amber-tint); border-color: var(--zk-amber-line); }
-.now__cell--risk.is-live { background: var(--zk-danger-tint); border-color: var(--zk-danger-line); }
-.now__cell--risk.is-live::before { background: var(--zk-danger); }
-.now__cell--risk.is-live .now__v { color: var(--zk-danger-ink); }
-
-.now__s {
-  display: block;
-  font-size: var(--fs-2xs);
-  line-height: var(--lh-snug);
-  color: var(--zk-muted);
-}
-
-/* KPI strip. Whitespace rather than rules — see .lmetrics for why the cage
-   went. Tabular figures so the row does not jitter as it refreshes. */
-.kpis {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-6) var(--sp-8);
-  padding: var(--sp-6) 0;
-  border-top: 1px solid var(--zk-line);
-  border-bottom: 1px solid var(--zk-line);
-  margin-bottom: var(--sp-6);
-}
-
-.kpi { min-width: 0; }
-
-.kpi__l {
-  display: block;
-  margin-bottom: var(--sp-2);
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: .08em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-.kpi__v {
-  display: block;
-  margin-bottom: var(--sp-1);
-  font-size: var(--fs-3xl);
-  font-weight: var(--fw-semi);
-  line-height: var(--lh-tight);
-  color: var(--zk-navy);
-  font-variant-numeric: tabular-nums;
-  letter-spacing: -.028em;
-}
-
-.kpi__s {
-  display: block;
-  font-size: var(--fs-2xs);
-  line-height: var(--lh-snug);
-  color: var(--zk-muted);
-}
-
-/* Two columns on a desk, one on anything narrower. The distribution is the
-   half that survives being pushed below the fold. */
-.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; align-items: start; }
-
-.sec {
-  display: flex;
-  align-items: baseline;
-  gap: 10px;
-  margin: 0 0 12px;
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: .07em;
-  text-transform: uppercase;
-  color: var(--zk-muted);
-}
-.split > div > .sec:not(:first-child) { margin-top: 30px; }
-.sec__hint { font-size: var(--fs-2xs); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--zk-grey); }
-
-/* Work queues. A row rather than a card: five of them as cards is a wall. */
-.qlist { display: flex; flex-direction: column; gap: 6px; }
-.q {
-  display: grid;
-  grid-template-columns: 44px 1fr auto auto;
-  align-items: center;
-  gap: 12px;
-  padding: 11px 14px;
-  border: 1px solid var(--zk-line-soft);
-  border-radius: var(--r-sm);
-  background: var(--zk-white);
-  text-decoration: none;
-  color: inherit;
-  transition: border-color .12s, background .12s;
-}
-.q:hover { border-color: var(--zk-blue-light); background: var(--zk-tint); }
-.q__n { font-size: var(--fs-xl); font-weight: 500; color: var(--zk-grey); font-variant-numeric: tabular-nums; text-align: right; }
-.q__t { font-size: var(--fs-xs); color: var(--zk-ink); }
-.q__t em { display: block; font-style: normal; font-size: var(--fs-2xs); color: var(--zk-muted); margin-top: 1px; }
-.q__age { font-size: var(--fs-2xs); color: var(--zk-grey); font-variant-numeric: tabular-nums; }
-.q__ro {
-  font-size: var(--fs-3xs); letter-spacing: .06em; text-transform: uppercase;
-  color: var(--zk-grey); border: 1px solid var(--zk-line); border-radius: 3px; padding: 1px 5px;
-}
-/* Only a queue with work in it earns weight. The eye should land on the
-   number that needs clearing, not read five identical rows. */
-.q.is-live { border-color: var(--zk-line); }
-.q.is-live .q__n { color: var(--zk-navy); }
-
-.buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
-.bucket {
-  padding: 13px 15px;
-  border: 1px solid var(--zk-line);
-  border-left-width: 3px;
-  border-radius: var(--r-sm);
-  background: var(--zk-white);
-}
-.bucket strong { display: block; font-size: var(--fs-xl); font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
-.bucket span { display: block; margin-top: 2px; font-size: var(--fs-2xs); color: var(--zk-muted); }
-.bucket--lapsed { border-left-color: var(--zk-danger); }
-.bucket--lapsed strong { color: var(--zk-danger-ink); }
-.bucket--urgent { border-left-color: var(--zk-amber); }
-.bucket--urgent strong { color: var(--zk-amber-ink); }
-.bucket--soon   { border-left-color: var(--zk-blue-mid); }
-.bucket--soon strong { color: var(--zk-blue-dark); }
-
-
-
-/* Stage distribution. A bar per stage, scaled to the largest — enough to see
-   where the book is banked without pulling in a charting library. */
-.dist { display: flex; flex-direction: column; gap: 3px; }
-.dist__r {
-  display: grid;
-  grid-template-columns: 1fr 74px 26px;
-  align-items: center;
-  gap: 10px;
-  padding: 5px 8px;
-  border-radius: var(--r-xs);
-  text-decoration: none;
-  color: inherit;
-}
-.dist__r:hover { background: var(--zk-tint); }
-.dist__l { font-size: var(--fs-2xs); color: var(--zk-ink); }
-.dist__bar { height: 6px; border-radius: 3px; background: var(--zk-line-soft); overflow: hidden; }
-.dist__f { display: block; height: 100%; border-radius: 3px; background: var(--zk-blue-mid); min-width: 0; }
-.dist__f--needs { background: var(--zk-amber); }
-.dist__f--customer { background: var(--zk-blue); }
-.dist__f--auto { background: var(--zk-blue-light); }
-.dist__f--waiting { background: var(--zk-grey); }
-.dist__f--end { background: var(--zk-line); }
-.dist__n { font-size: var(--fs-2xs); text-align: right; color: var(--zk-muted); font-variant-numeric: tabular-nums; }
-.dist__r.is-zero .dist__l, .dist__r.is-zero .dist__n { color: var(--zk-grey); }
-
-.grid--tight th, .grid--tight td { padding-top: 8px; padding-bottom: 8px; }
-
-@media (max-width: 1080px) {
-  .split { grid-template-columns: 1fr; gap: 26px; }
-}
-@media (max-width: 640px) {
-  .buckets { grid-template-columns: 1fr; }
-}
-
-/* ── Lead measures ───────────────────────────────────────────────────────
-   The same strip as the portfolio KPIs, at lead scale. Age and dwell time are
-   computed rather than stored, and they are the two figures that answer "is
-   this moving?" — a question the record itself cannot answer. */
-/* ── The numbers that matter ──────────────────────────────────────────────
-   This was a 1px-gap hairline grid — seven equal cells in a cage, every
-   value the same size as every label. The cage is a 2015 device and the
-   equality was the real fault: if nothing is bigger, the reader has to do
-   the prioritising themselves, seven times, on every lead.
-
-   Whitespace separates the cells now instead of rules, and the values are
-   22px against 12px labels. Premium and commission — the two numbers
-   anyone actually came for — are bigger again. */
-.lmetrics {
-  display: grid;
-  /* Auto-fit so the row always fills the width whether three tiles show or
-     four (AI-confidence is conditional); no empty hard-coded 4th cell. */
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: var(--sp-4);
-  margin-bottom: var(--sp-5);
-}
-
-.lm {
-  min-width: 0;
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line-soft);
-  border-radius: var(--r-md);
-  box-shadow: var(--sh-sm);
-  padding: var(--sp-5);
-}
-/* Money leads: the two figures a renewal is about sit in the accent tint. */
-.lm--hero { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); }
-.lm--hero .lm__v { color: var(--zk-blue-dark); }
-.lm--hero .lm__l { color: var(--zk-blue-dark); }
-
-@media (max-width: 1040px) { .lmetrics { grid-template-columns: 1fr 1fr; } }
-
-.lm__l {
-  display: block;
-  margin-bottom: var(--sp-2);
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: .08em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-.lm__v {
-  display: block;
-  margin-bottom: var(--sp-1);
-  font-size: var(--fs-xl);
-  font-weight: var(--fw-x);
-  line-height: var(--lh-tight);
-  color: var(--zk-navy);
-  font-variant-numeric: tabular-nums;
-  letter-spacing: -.02em;
-}
-
-/* Money leads. Size does the prioritising so the reader does not have to. */
-.lm--hero .lm__v { font-size: var(--fs-2xl); }
-
-.lm__v--sm { font-size: var(--fs-md); font-weight: var(--fw-medium); }
-
-.lm__s {
-  display: block;
-  font-size: var(--fs-2xs);
-  line-height: var(--lh-snug);
-  color: var(--zk-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* The countdown carries its own tone here, the same one the queues use, so a
-   lapsed renewal reads the same wherever it appears. */
-.lm__v.due--lapsed { color: var(--zk-danger-ink); }
-.lm__v.due--urgent { color: var(--zk-amber-ink); }
-
-/* ── Next step ───────────────────────────────────────────────────────────
-   One decision, sized like one. The stage's own step is the only thing at
-   full weight; loops sit under it, and an AI's own work is folded away
-   entirely — it is recovery, not an outstanding task. */
-
-.step { display: flex; flex-wrap: wrap; gap: 10px; }
-.step__btn {
-  flex: 1 1 220px;
-  display: block;
-  padding: 14px 18px;
-  border: 1px solid var(--zk-blue);
-  border-radius: var(--r-md);
-  background: var(--zk-blue);
-  color: var(--zk-white);
-  text-align: left;
-  cursor: pointer;
-  transition: background .12s, border-color .12s, box-shadow .12s;
-}
-.step__btn:hover { background: var(--zk-blue-dark); border-color: var(--zk-blue-dark); box-shadow: 0 2px 10px rgba(33,103,174,.25); }
-.step__btn strong { display: block; font-size: var(--fs-sm); font-weight: 500; }
-.step__btn span { display: block; margin-top: 2px; font-size: var(--fs-2xs); opacity: .85; }
-.step__btn.is-open { background: var(--zk-blue-deep); border-color: var(--zk-blue-deep); }
-
-/* Decline sits beside Clear as an equal — an underwriter is choosing between
-   two decisions, not deciding whether to act. It is outlined rather than
-   filled so the pair does not read as two identical recommendations. */
-.step__btn--no {
-  background: var(--zk-white);
-  color: var(--zk-danger-ink);
-  border-color: var(--zk-danger-line);
-}
-.step__btn--no:hover { background: var(--zk-danger-tint); border-color: var(--zk-danger); box-shadow: none; }
-.step__btn--no.is-open { background: var(--zk-danger-tint); border-color: var(--zk-danger); }
-
-/* Loops. Real, bounded, and never the answer to "what now". */
-.alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
-.alt__btn {
-  padding: 8px 13px;
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-sm);
-  background: var(--zk-white);
-  color: var(--zk-ink);
-  font-size: var(--fs-2xs);
-  cursor: pointer;
-  transition: border-color .12s, background .12s;
-}
-.alt__btn:hover { border-color: var(--zk-blue-light); background: var(--zk-tint); }
-.alt__btn.is-open { border-color: var(--zk-blue); background: var(--zk-tint-blue); }
-.alt__btn em { font-style: normal; margin-left: 7px; font-size: var(--fs-2xs); color: var(--zk-grey); }
-.alt__btn--exit { color: var(--zk-danger-ink); }
-.alt__btn--exit:hover { border-color: var(--zk-danger-line); background: var(--zk-danger-tint); }
-
-/* Recovery, folded. Needed on the day an agent stalls and never otherwise. */
-.stuck { margin-top: 18px; border-top: 1px solid var(--zk-line-soft); padding-top: 14px; }
-.stuck > summary {
-  cursor: pointer;
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  list-style: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-.stuck > summary::-webkit-details-marker { display: none; }
-.stuck > summary::before { content: '▸'; font-size: var(--fs-2xs); color: var(--zk-grey); }
-.stuck[open] > summary::before { content: '▾'; }
-.stuck > summary:hover { color: var(--zk-blue-dark); }
-.stuck__why { margin: 10px 0 0; font-size: var(--fs-2xs); color: var(--zk-muted); max-width: 64ch; }
-
-/* ── The row IS the control ───────────────────────────────────────────────
-   An "Open" button was a ~90px target inside a 1000px row that already reads
-   as one object, and it put a second tab stop on every line. The row carries
-   the click, the keyboard and the affordance; the button is gone.
-
-   role="link" + tabIndex on a <tr> rather than wrapping cells in <a>: an
-   anchor cannot span table cells without breaking the table layout, and
-   display:block on a <td> collapses the column alignment the queue depends on. */
-.grid__row { cursor: pointer; transition: background .11s, box-shadow .11s; }
-.grid__row:hover { background: var(--zk-tint); }
-.grid__row:hover .grid__name { color: var(--zk-blue-dark); }
-.grid__row:focus-visible {
-  outline: 2px solid var(--zk-blue);
-  outline-offset: -2px;
-  background: var(--zk-tint);
-}
-.grid__name { font-weight: 500; color: var(--zk-ink); }
-
-/* A left edge that says who holds the lead, readable before any text is.
-   Only the states worth acting on are marked — colouring every row would
-   make the marking mean nothing. */
-.grid__row.is-stalled td:first-child { box-shadow: inset 3px 0 0 var(--zk-danger); }
-.grid__row.is-working td:first-child { box-shadow: inset 3px 0 0 var(--zk-blue-mid); }
-
-/* ── What the agent is doing ──────────────────────────────────────────────
-   Agent-status disclosure: an automated stage is either moving or stuck, and
-   after an hour those look identical without this. `working` pulses because
-   something is happening right now; `waiting` is steady because it is normal;
-   `stalled` is red because a lead three hours into a two-minute step is the
-   thing this console exists to catch. */
-.run { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-2xs); line-height: 1.3; }
-.run__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
-
-.run--working { color: var(--zk-blue-dark); }
-.run--working .run__dot { background: var(--zk-blue); animation: runPulse 1.6s ease-in-out infinite; }
-
-.run--waiting { color: var(--zk-muted); }
-.run--waiting .run__dot { background: var(--zk-blue-light); }
-
-.run--stalled { color: var(--zk-danger-ink); font-weight: 500; }
-.run--stalled .run__dot { background: var(--zk-danger); }
-
-@keyframes runPulse {
-  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(33,103,174,.45); }
-  50%      { opacity: .55; box-shadow: 0 0 0 5px rgba(33,103,174,0); }
-}
-/* Respect a reader who has asked the interface to stop moving. */
-@media (prefers-reduced-motion: reduce) {
-  .run--working .run__dot { animation: none; }
-}
-
-/* ── An attached document is a thing to open ──────────────────────────────
-   The record printed a filename as text, so the only way to see what an
-   agent had actually uploaded was to perform the activity again. */
-.prop__files { display: flex; flex-wrap: wrap; gap: 6px; }
-
-.prop__file {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  max-width: 100%;
-  font-size: var(--fs-2xs);
-  text-decoration: none;
-  padding: 3px 10px;
-  border-radius: var(--r-pill, 999px);
-  background: var(--zk-tint-blue);
-  border: 1px solid transparent;
-  color: var(--zk-blue-dark);
-  overflow-wrap: anywhere;
-}
-.prop__file:hover { border-color: var(--zk-blue-light); }
-.prop__file:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
-
-/* The part of a queue that is not anyone's task. Reported rather than hidden:
-   the leads are in that state, they are just being carried by an agent, and an
-   operator who counts the queue by hand should find the same total. */
-.q__auto {
-  display: block;
-  font-weight: 400;
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  margin-top: 2px;
-}
-
-/* ---- waiting on someone outside the business ----
-   Neither an agent working nor a task of yours. Grey rather than blue, and
-   no pulse: nothing is happening, and that is the correct state. */
-.doing--waiting {
-  border-color: var(--zk-line);
-  background: var(--zk-tint);
-}
-.doing--waiting strong { color: var(--zk-ink); }
-
-.doing__wait {
-  flex: none;
-  margin-top: 5px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 2px solid var(--zk-grey);
-  background: transparent;
-}
-
-/* ---- panel action ----
-   A secondary control on a panel heading. Quiet: it opens a view, it does not
-   change anything. */
-.panel__act {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  flex: none;
-  font: inherit;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  cursor: pointer;
-  padding: 6px 12px;
-  border-radius: var(--r-pill);
-  color: var(--zk-blue-dark);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  transition: background var(--t-fast), border-color var(--t-fast);
-}
-.panel__act svg { width: 13px; height: 13px; opacity: .75; }
-.panel__act b {
-  font-size: var(--fs-2xs);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  padding: 1px 6px;
-  border-radius: var(--r-pill);
-  background: var(--zk-tint-blue);
-}
-.panel__act:hover { background: var(--zk-tint); border-color: var(--zk-blue-light); }
-.panel__act:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
-
-/* ---- who worked this lead ----
-   Five agents carry a lead and their names appeared only inside individual
-   entries. The team is a fact about the lead, so it sits above the trail. */
-.panel--crew { padding: var(--sp-5) var(--sp-6); }
-
-.crew {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sp-2) var(--sp-4);
-  margin-top: var(--sp-3);
-}
-
-.crew__l {
-  display: block;
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-/* ---- a sign-off, not a task ----
-   Confirming a premium is the only step in this workflow that is a person's
-   approval rather than a piece of work, and the only one locked to one role.
-   It sat fourth in a list of six queues, which is the wrong weight for the
-   decision that starts somebody's cover. Shown only to the role that owns it. */
+  height: 52px; border-radius: var(--r-md); border: 1px solid var(--zk-line-soft);
+  background: linear-gradient(90deg, #fff 0, var(--zk-tint) 40%, #fff 80%);
+  background-size: 840px 100%; animation: zk-shimmer 1.4s linear infinite;
+}
+
+/* ── Overview: who holds the work ───────────────────────────────────────── */
+.hero { display: grid; grid-template-columns: 1fr 300px; gap: 18px; margin-bottom: 22px; }
+.holders { padding: 20px 24px 22px; }
+.holders__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
+.holders__top b { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
+.holders__top span { font-size: var(--fs-md); color: var(--zk-muted); }
+.bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 3px; margin-bottom: 16px; background: var(--zk-line-soft); }
+.bar div { height: 100%; transition: width var(--t); }
+.bar__blue { background: var(--zk-blue); } .bar__amber { background: var(--zk-amber-bar); } .bar__teal { background: var(--zk-teal); }
+.legend { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
+.legend__item { border-left: 3px solid; padding-left: 14px; }
+.legend__item--blue { border-color: var(--zk-blue); } .legend__item--amber { border-color: var(--zk-amber-bar); } .legend__item--teal { border-color: var(--zk-teal); }
+.legend__item b { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
+.legend__item strong { display: block; font-size: var(--fs-sm); font-weight: 600; margin-top: 3px; }
+.legend__item span { display: block; font-size: var(--fs-xs); color: var(--zk-muted); margin-top: 2px; }
+.risk { background: var(--zk-danger-tint); border-color: var(--zk-danger-line); padding: 20px 22px; display: flex; flex-direction: column; }
+.risk b { font-size: var(--fs-3xl); font-weight: 700; color: var(--zk-danger); line-height: 1; letter-spacing: -.02em; }
+.risk strong { display: block; font-size: var(--fs-lg); font-weight: 600; margin-top: 6px; }
+.risk__rows { margin-top: auto; padding-top: 14px; display: grid; gap: 6px; font-size: var(--fs-sm); }
+.risk__rows div { display: flex; justify-content: space-between; }
+.risk__rows em { font-style: normal; font-weight: 700; color: var(--zk-danger); }
+.risk.is-quiet b { color: var(--zk-teal); } .risk.is-quiet { background: var(--zk-teal-tint); border-color: var(--zk-teal-line); }
+.risk.is-quiet .risk__rows em { color: var(--zk-teal); }
+
+/* ── KPI strip ──────────────────────────────────────────────────────────── */
+.kpis { display: grid; grid-template-columns: repeat(5, 1fr); padding: 18px 0; margin-bottom: 22px; }
+.kpi { padding: 0 24px; border-left: 1px solid var(--zk-line-soft); }
+.kpi:first-child { border-left: 0; }
+.kpi__l { display: block; font-size: var(--fs-xs); color: var(--zk-muted); font-weight: 500; }
+.kpi__v { display: block; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 4px 0 2px; color: var(--zk-ink); }
+.kpi__s { font-size: var(--fs-xs); color: var(--zk-grey); }
+
+/* ── Sign-off band (the role that confirms premium) ─────────────────────── */
 .appr {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  margin-bottom: 22px;
-  padding: 16px 22px;
-  border-radius: var(--r-lg);
-  text-decoration: none;
-  border: 1px solid var(--zk-line);
-  background: var(--zk-white);
-  transition: border-color var(--t-fast), box-shadow var(--t-fast);
+  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
+  padding: 16px 22px; margin-bottom: 22px; text-decoration: none; color: inherit;
+  border-radius: var(--r-md); border: 1px solid var(--zk-amber-line); background: var(--zk-amber-tint);
 }
+.appr__n { font-size: 30px; font-weight: 700; color: var(--zk-amber); min-width: 40px; text-align: center; }
+.appr__t { font-size: var(--fs-md); font-weight: 600; display: flex; flex-direction: column; gap: 3px; }
+.appr__t em { font-style: normal; font-size: var(--fs-xs); font-weight: 400; color: var(--zk-muted); }
+.appr__go { font-size: var(--fs-xs); font-weight: 600; color: var(--zk-amber); }
+.appr:not(.is-live) { background: #fff; border-color: var(--zk-line); }
+.appr:not(.is-live) .appr__n, .appr:not(.is-live) .appr__go { color: var(--zk-grey); }
 
-/* Amber only when something is actually waiting. A permanent alert colour on
-   an empty queue teaches people to stop seeing it. */
-.appr.is-live {
-  border-color: var(--zk-amber-line);
-  background: var(--zk-amber-tint);
-}
-.appr:hover { box-shadow: var(--sh-sm); border-color: var(--zk-blue-light); }
-.appr:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }
-
-.appr__n {
-  flex: none;
-  min-width: 46px;
-  font-size: var(--fs-2xl);
-  font-weight: 300;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  color: var(--zk-grey);
-  font-variant-numeric: tabular-nums;
-}
-.appr.is-live .appr__n { color: var(--zk-amber-ink); }
-
-.appr__t {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 0;
-  flex: 1;
-  font-size: var(--fs-sm);
-  font-weight: 500;
-  color: var(--zk-ink);
-}
-.appr__t em {
-  font-style: normal;
-  font-size: var(--fs-2xs);
-  font-weight: 400;
-  line-height: 1.45;
-  color: var(--zk-muted);
-}
-
-.appr__go {
-  flex: none;
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  white-space: nowrap;
-}
-
-/* ---- an agent that has not come back ----
-   Amber like `blocked`, because both need a person — but worded and coloured
-   apart from it: blocked means the workflow refused for a stated reason and
-   the fix is known; stalled means nobody knows, and the honest offer is to try
-   again. No pulse either way. */
-.doing--stalled {
-  border-color: var(--zk-amber-line);
-  background: var(--zk-amber-tint);
-}
-.doing--stalled strong { color: var(--zk-amber-ink); }
-
-/* ---- header right-hand cluster ---- */
-.page__right { display: flex; align-items: center; gap: 18px; flex: none; }
-
-.toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-}
-.toggle input { accent-color: var(--zk-blue); cursor: pointer; }
-.toggle:hover { color: var(--zk-ink); }
-
-/* A finished lead, still listed. Dimmed rather than removed: "where did it
-   go?" is the question this page exists to answer, and a lead that ended is
-   still a lead. Hover restores it — it is muted, not disabled. */
-.grid__row.is-done { color: var(--zk-grey); }
-.grid__row.is-done .grid__name { color: var(--zk-muted); font-weight: 400; }
-.grid__row.is-done:hover { color: var(--zk-ink); }
-.grid__row.is-done:hover .grid__name { color: var(--zk-blue-dark); }
-
-/* ---- file a lead ----
-   Moved off the sidebar. A nav is for moving between places; this adds
-   something, and it now sits beside the lists it adds to. */
-.newlead {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  flex: none;
-  padding: 9px 16px;
-  border-radius: var(--r-pill);
-  text-decoration: none;
-  font-size: var(--fs-xs);
-  font-weight: 500;
-  color: var(--zk-white);
-  background: var(--grad-blue);
-  box-shadow: var(--sh-sm);
-  transition: box-shadow var(--t), transform var(--t-fast), background var(--t);
-}
-.newlead svg { width: 14px; height: 14px; }
-.newlead:hover { background: var(--grad-blue-hover); box-shadow: var(--sh-md); transform: translateY(-1px); }
-.newlead:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }
-
-/* ── the lead file, all of it ─────────────────────────────────────────────
-   This was thirteen tabs with one group visible at a time, so "what do we
-   know about this lead?" took thirteen clicks and a good memory. Then it was
-   thirteen groups in CSS columns, which was worse in a different way: column
-   flow reads top-to-bottom-then-across, so a file whose groups run Source,
-   Customer, Intake landed on the page in an order nobody could predict, and
-   the groups are wildly uneven — Motor risk has twelve fields, Proposal has
-   two — so the columns tore raggedly.
-
-   A GRID OF CARDS instead. Reading order is left-to-right like every other
-   list on this screen, each group is bounded so its fields cannot be mistaken
-   for the next group's, and an uneven card leaves a clean gap under itself
-   rather than dragging the next heading up into the previous group's fields. */
-.file360 {
-  padding: 4px 22px 22px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 14px;
-  align-items: start;
-}
-
-.fgroup {
-  padding: var(--sp-5) 0;
-  border: 0;
-  border-bottom: 1px solid var(--zk-line);
-  border-radius: 0;
-  background: transparent;
-}
-
-.fgroup h3 {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  margin: 0 0 var(--sp-4);
-  padding-bottom: var(--sp-3);
-  border-bottom: 1px solid var(--zk-line-soft);
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--zk-blue-dark);
-}
-
-.fgroup h3 span {
-  margin-left: auto;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  letter-spacing: 0;
-  color: var(--zk-grey);
-  font-variant-numeric: tabular-nums;
-}
-
-/* Label and value on ONE line. Stacked pairs doubled the height of every fact
-   in the file for no gain — these are two-word labels against short values,
-   and a label gutter is what makes a column of them scannable. */
-.file360 .props { display: block; padding: 0; }
-
-.file360 .prop {
-  display: grid;
-  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
-  gap: var(--sp-4);
-  align-items: baseline;
-  margin: 0;
-  padding: var(--sp-2) 0;
-  border: 0;
-  border-radius: 0;
-}
-
-.file360 .prop:hover { background: transparent; }
-
-.file360 .prop dt {
-  font-size: var(--fs-2xs);
-  line-height: 1.5;
-  color: var(--zk-grey);
-  margin: 0;
-}
-
-.file360 .prop dd {
-  font-size: var(--fs-2xs);
-  line-height: 1.5;
-  color: var(--zk-ink);
-  overflow-wrap: anywhere;
-}
-
-/* ── the prose, folded ────────────────────────────────────────────────────
-   The AI paragraphs used to render inline with the same weight the audit
-   trail gives them — a tinted block, a bolded finding, a "Read the reasoning"
-   button — and with seven of them the file read as a wall of quotations with
-   the facts hidden between. Here they are a caption and two lines of grey.
-   Nothing is lost: the full text is one click away in the same dialog, and
-   the trail still shows each paragraph against the step that wrote it. */
-.fnotes {
-  margin-top: 11px;
-  padding-top: 10px;
-  border-top: 1px dashed var(--zk-line);
-  display: grid;
-  gap: 10px;
-}
-
-.fnote__l {
-  display: block;
-  margin-bottom: 2px;
-  font-size: var(--fs-3xs);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-/* The finding is emphasised in the trail, where it is the entry. Here it is
-   one fact among fifty, so it drops to body weight and two lines. */
-.file360 .clamp__lead,
-.file360 .clamp__text {
-  font-size: var(--fs-2xs);
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--zk-muted);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.file360 .clamp__more { margin-top: 3px; font-size: var(--fs-2xs); }
-
-/* ── at a glance ──────────────────────────────────────────────────────────
-   The same card as the full file uses, so opening the drawer feels like more
-   of the thing you were already reading rather than a different screen. Four
-   sections at most, so a fixed auto-fit grid never leaves a lone card on a
-   row of its own the way the thirteen-group version did. */
-.glance {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 0;
-  padding: 0;
-}
-
-.glance .props { display: block; padding: 0; }
-
-.glance .prop {
-  display: grid;
-  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
-  gap: var(--sp-4);
-  align-items: baseline;
-  margin: 0;
-  padding: var(--sp-2) 0;
-  border: 0;
-  border-radius: 0;
-}
-
-.glance .prop:hover { background: transparent; }
-.glance .prop dt { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-grey); margin: 0; }
-.glance .prop dd { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-ink); overflow-wrap: anywhere; }
-
-/* Same de-weighting as the full file: at a glance a reason is one fact among
-   a dozen, not the entry it is in the trail. */
-.glance .clamp__lead,
-.glance .clamp__text {
-  font-size: var(--fs-2xs);
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--zk-muted);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.glance .clamp__more { margin-top: 3px; font-size: var(--fs-2xs); }
-
-/* An action that belongs to one card, not to the panel. Quiet until hovered:
-   the notes above it are the answer most of the time, and the transcript is
-   the follow-up question. */
-.glance__rec {
-  margin-top: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.glance__rec-l {
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-.glance__rec audio {
-  width: 100%;
-  height: 36px;
-}
-
-.glance__act {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 10px;
-  padding: 5px 10px 5px 8px;
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-pill);
-  background: var(--zk-white);
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  color: var(--zk-blue-dark);
-  transition: background var(--t-fast), border-color var(--t-fast);
-}
-
-.glance__act:hover { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); }
-.glance__act:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
-.glance__act svg { width: 13px; height: 13px; flex: none; }
-
-/* HIDING IS ONLY SAFE WHILE IT STAYS FINDABLE, so this names the number it is
-   holding rather than saying "more". Full width and on the panel's own floor:
-   a link tucked into the header would be the discoverability problem that
-   sinks progressive disclosure. */
-.glance__all {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: 100%;
-  padding: 13px 22px;
-  border: 0;
-  border-top: 1px solid var(--zk-line-soft);
-  border-radius: 0 0 var(--r-lg) var(--r-lg);
-  background: none;
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  color: var(--zk-blue-dark);
+/* ── Two columns: queue + distribution ──────────────────────────────────── */
+.cols { display: grid; grid-template-columns: 1fr 380px; gap: 18px; margin-bottom: 22px; align-items: start; }
+.queue { padding: 4px 0 6px; }
+.queue__row {
+  display: grid; grid-template-columns: 52px 1fr auto auto; gap: 14px; align-items: center;
+  padding: 14px 20px; border-top: 1px solid var(--zk-line-soft); text-decoration: none; color: inherit;
   transition: background var(--t-fast);
 }
+.queue__row:first-child { border-top: 0; }
+.queue__row:hover { background: var(--zk-tint); }
+.queue__n { font-size: 26px; font-weight: 700; text-align: center; color: var(--zk-ink); }
+.queue__row.is-clear .queue__n { color: var(--zk-grey); }
+.queue__t { font-size: var(--fs-md); font-weight: 600; }
+.queue__who { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--zk-muted); margin-top: 2px; }
+.queue__age { font-size: var(--fs-xs); color: var(--zk-grey); text-align: right; line-height: 1.35; }
+.queue__age em { display: block; font-style: normal; color: var(--zk-blue); font-weight: 600; }
+.queue__ro { font-size: var(--fs-3xs); color: var(--zk-grey); border: 1px solid var(--zk-line); border-radius: var(--r-pill); padding: 1px 8px; }
 
-.glance__all:hover { background: var(--zk-tint); }
-.glance__all:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: -2px; }
-.glance__all svg { width: 15px; height: 15px; flex: none; }
-
-.glance__all b {
-  margin-left: auto;
-  font-weight: 400;
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-  font-variant-numeric: tabular-nums;
+.dist { padding: 6px 20px 14px; }
+.dist__r {
+  display: grid; grid-template-columns: 1fr 120px 34px; gap: 12px; align-items: center;
+  padding: 8px 0; font-size: var(--fs-sm); text-decoration: none; color: var(--zk-ink);
 }
+.dist__r:hover .dist__l { color: var(--zk-blue); }
+.dist__r.is-zero, .dist__r.is-dim { color: var(--zk-grey); }
+.dist__bar { height: 8px; background: var(--zk-line-soft); border-radius: 4px; overflow: hidden; }
+.dist__f { display: block; height: 100%; border-radius: 4px; background: var(--zk-navy); transition: width var(--t); }
+.dist__f--blue { background: var(--zk-blue); } .dist__f--amber { background: var(--zk-amber-bar); }
+.dist__f--teal { background: var(--zk-teal); } .dist__f--grey { background: #AEB7C6; }
+.dist__n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
+.dist__sec { padding: 12px 0 4px; font-size: var(--fs-2xs); color: var(--zk-grey); font-weight: 600; border-top: 1px solid var(--zk-line-soft); margin-top: 6px; }
 
-.panel__meta {
-  flex: none;
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-  font-variant-numeric: tabular-nums;
-}
-
-
-/* ── modern surface pass ──────────────────────────────────────────────────
-   The layout was right but the surface still read as a flat corporate form.
-   Two levers close most of the gap: a display face on the things the eye
-   lands on — the page title, panel headings and every figure — and one warm,
-   coloured signal for who holds the lead right now. */
-.page__title,
-.panel__title,
-.lead__stage strong,
-.lm__v,
-.kpi__v,
-.now__v,
-.fig .v {
-  font-family: var(--font-display);
-  letter-spacing: -0.02em;
-}
-
-.page__title { letter-spacing: -0.03em; }
-
-/* WHO HOLDS THE LEAD, as a coloured pill — the first thing the eye should
-   catch. The stage name lives in the rail below; this says whose move it is,
-   which is the question an operator actually opens a lead to answer. */
-.holds {
-  flex: none;
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-.holds__puck {
-  flex: none;
-  width: 10px; height: 10px;
-  border-radius: 50%;
-  background: var(--zk-teal);
-  box-shadow: 0 0 0 4px var(--zk-teal-tint);
-}
-/* the icon inside the disc is dropped in the flat treatment — the dot alone
-   carries the tone, and the label says the rest. */
-.holds__puck svg { display: none; }
-.holds__txt { display: inline; line-height: 1.3; }
-.holds__txt small { display: inline; }
-.holds__txt small {
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: .09em;
-  text-transform: uppercase;
-  color: var(--zk-teal-ink);
-  opacity: .9;
-}
-.holds__txt b {
-  font-weight: var(--fw-semi);
-  font-size: var(--fs-sm);
-  color: var(--zk-ink);
-  margin-left: var(--sp-1);
-}
-
-.holds--ai .holds__puck { background: var(--zk-blue); box-shadow: 0 0 0 4px var(--zk-tint-blue); }
-.holds--ai .holds__txt small { color: var(--zk-blue-dark); }
-
-.holds--person .holds__puck { background: var(--zk-amber); box-shadow: 0 0 0 4px var(--zk-amber-tint); }
-.holds--person .holds__txt small { color: var(--zk-amber-ink); }
-
-.holds--grey .holds__puck { background: var(--zk-grey); box-shadow: 0 0 0 4px var(--zk-tint); }
-.holds--grey .holds__txt small { color: var(--zk-muted); }
-
-.holds--cust .holds__puck { background: var(--zk-teal); box-shadow: 0 0 0 4px var(--zk-teal-tint); }
-.holds--cust .holds__txt small { color: var(--zk-teal-ink); }
-
-/* ── Your move: the immediate action, in the header ───────────────────────
-   The one thing this user must do, promoted top-right where the eye looks for
-   the next move. Amber because it is waiting on a person; pressing it opens
-   the form and scrolls to it. When nothing is owed, the passive holds status
-   sits here instead. */
-.cta {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sp-3);
-  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-5);
-  border: 0;
-  border-radius: var(--r-md);
-  background: var(--zk-blue);
-  color: #fff;
-  cursor: pointer;
-  box-shadow: var(--sh-accent);
-  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
-}
-.cta:hover { background: var(--zk-blue-dark); transform: translateY(-1px); }
-.cta:focus-visible { outline: 2px solid var(--zk-blue-dark); outline-offset: 2px; }
-.cta__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
-.cta__txt small {
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: .08em;
-  text-transform: uppercase;
-  opacity: .82;
-}
-.cta__txt b { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
-.cta svg { width: 16px; height: 16px; flex: none; }
-
-/* Frames optional (again) actions when there is no required step, so a
-   secondary button stops reading as the next move. */
-.alt__note {
-  display: inline-block;
-  align-self: center;
-  margin-right: var(--sp-2);
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: .07em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-/* ---- renewal-exposure dropdown filters ---- */
-.xfd {
-  margin-top: 12px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 14px;
-}
-.xfd__f {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-.xfd__f > span {
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
+/* ── Renewal exposure ───────────────────────────────────────────────────── */
+.exp__tabs { display: flex; align-items: center; gap: 10px; padding: 0 20px 14px; flex-wrap: wrap; }
+.tab {
+  display: flex; align-items: baseline; gap: 8px; padding: 8px 14px;
+  border: 1px solid var(--zk-line); border-radius: var(--r-sm); font-size: var(--fs-sm); background: #fff;
 }
+.tab b { font-size: var(--fs-xl); font-weight: 700; }
+.tab--red   { border-color: var(--zk-danger-line); background: var(--zk-danger-tint); } .tab--red b   { color: var(--zk-danger); }
+.tab--amber { border-color: var(--zk-amber-line);  background: var(--zk-amber-tint); }  .tab--amber b { color: var(--zk-amber); }
+.exp__filters { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
 .xfd__f select {
-  font: inherit;
-  font-size: var(--fs-2xs);
-  padding: 8px 30px 8px 11px;
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-sm);
-  background: var(--zk-white)
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23837a90' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>")
-    no-repeat right 10px center;
-  color: var(--zk-ink);
-  cursor: pointer;
-  min-width: 150px;
-  -webkit-appearance: none;
-  appearance: none;
-  transition: border-color var(--t-fast), box-shadow var(--t-fast);
+  font: inherit; font-size: var(--fs-xs); color: var(--zk-muted);
+  padding: 8px 30px 8px 12px; border: 1px solid var(--zk-line); border-radius: var(--r-sm);
+  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237A8699' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;
+  -webkit-appearance: none; appearance: none; cursor: pointer;
 }
-.xfd__f select:hover { border-color: var(--zk-blue-mid); }
+.xfd__f select:hover { border-color: var(--zk-grey); }
 .xfd__f select:focus-visible { outline: none; border-color: var(--zk-blue); box-shadow: var(--ring); }
+.xfd__clear { font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-blue); background: none; border: 0; cursor: pointer; padding: 8px 6px; }
+.xfd__clear:hover { text-decoration: underline; }
 
-.xfd__clear {
-  font: inherit;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  padding: 8px 12px;
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-sm);
-  background: var(--zk-white);
-  color: var(--zk-blue-dark);
-  cursor: pointer;
+/* ── Tables ─────────────────────────────────────────────────────────────── */
+.gridwrap { overflow-x: auto; }
+.grid { width: 100%; border-collapse: collapse; }
+.grid th {
+  font-size: var(--fs-3xs); font-weight: 600; color: var(--zk-grey); text-align: left;
+  padding: 10px 20px; border-top: 1px solid var(--zk-line-soft); border-bottom: 1px solid var(--zk-line-soft); background: #FAFBFD; white-space: nowrap;
+}
+.grid td { padding: 12px 20px; border-bottom: 1px solid var(--zk-line-soft); font-size: var(--fs-sm); vertical-align: middle; }
+.grid tr:last-child td { border-bottom: 0; }
+.grid th.num, .grid td.num { text-align: right; }
+.grid td.num { font-weight: 600; font-variant-numeric: tabular-nums; }
+.grid__row { cursor: pointer; transition: background var(--t-fast); }
+.grid__row:hover td { background: var(--zk-tint); }
+.grid__row:focus-visible { outline: none; } .grid__row:focus-visible td { background: var(--zk-tint-blue); }
+.grid__name { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--zk-ink); }
+.grid__sub { font-size: var(--fs-2xs); color: var(--zk-grey); margin-top: 2px; }
+.grid tr.is-done td { color: var(--zk-grey); }
+.grid tr.is-done .grid__name { font-weight: 500; color: var(--zk-muted); }
+.grid tr.is-stalled td:first-child { box-shadow: inset 3px 0 0 var(--zk-danger); }
+
+.due { display: flex; flex-direction: column; gap: 2px; }
+.due b { font-weight: 600; }
+.due--amber b { color: var(--zk-amber); } .due--red b { color: var(--zk-danger); }
+.due small { font-size: var(--fs-2xs); color: var(--zk-grey); }
+.stall { display: inline-flex; align-items: center; gap: 7px; color: var(--zk-danger); font-weight: 600; font-size: var(--fs-xs); }
+.stall::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--zk-danger); }
+.grp-row td { background: #FAFBFD; padding: 10px 20px; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-muted); border-top: 1px solid var(--zk-line-soft); }
+.grp-row td span { font-weight: 400; color: var(--zk-grey); margin-left: 8px; }
+.grp-row td .dot { margin-right: 8px; vertical-align: 1px; }
+.need { display: flex; gap: 6px; flex-wrap: wrap; }
+.need span { font-size: var(--fs-2xs); padding: 2px 9px; border-radius: 6px; background: var(--zk-amber-tint); color: var(--zk-amber); font-weight: 600; }
+.need span.need__ok { background: var(--zk-teal-tint); color: var(--zk-teal); }
+.pager { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--zk-line-soft); font-size: var(--fs-xs); color: var(--zk-grey); }
+.pager__pg { margin-left: auto; display: flex; gap: 4px; }
+.pager__pg button {
+  font: inherit; font-size: var(--fs-xs); padding: 4px 10px; border-radius: 6px; cursor: pointer;
+  border: 1px solid var(--zk-line); background: #fff; color: var(--zk-muted);
+}
+.pager__pg button.is-on { background: var(--zk-navy); color: #fff; border-color: var(--zk-navy); }
+.pager__pg button:disabled { opacity: .45; cursor: default; }
+
+/* ── List tools ─────────────────────────────────────────────────────────── */
+.tools { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--zk-line-soft); flex-wrap: wrap; }
+.search {
+  display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-width: 260px;
+  border: 1px solid var(--zk-line); border-radius: var(--r-sm); background: #fff; color: var(--zk-grey);
+}
+.search svg { width: 14px; height: 14px; flex: none; }
+.search input { border: 0; outline: 0; background: none; font: inherit; font-size: var(--fs-xs); color: var(--zk-ink); flex: 1; min-width: 0; }
+.search:focus-within { border-color: var(--zk-blue); box-shadow: var(--ring); }
+.fchip {
+  font: inherit; font-size: var(--fs-xs); color: var(--zk-muted); background: #fff;
+  padding: 7px 30px 7px 12px; border: 1px solid var(--zk-line); border-radius: var(--r-pill); cursor: pointer;
+  -webkit-appearance: none; appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237A8699' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  background-repeat: no-repeat; background-position: right 10px center;
+}
+.fchip.is-on { border-color: var(--zk-navy); color: var(--zk-navy); font-weight: 600; background-color: var(--zk-tint-blue); }
+.fchip:focus-visible { outline: none; box-shadow: var(--ring); }
+.tools__count { margin-left: auto; font-size: var(--fs-xs); color: var(--zk-grey); }
+.tools__toggle { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--zk-muted); cursor: pointer; user-select: none; }
+.tools__toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
+.tools__toggle i { width: 34px; height: 20px; border-radius: 10px; background: var(--zk-line); position: relative; display: inline-block; transition: background var(--t-fast); }
+.tools__toggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left var(--t-fast); }
+.tools__toggle.is-on i { background: var(--zk-blue); } .tools__toggle.is-on i::after { left: 16px; }
+.tools__toggle:focus-within i { box-shadow: var(--ring); }
+
+/* ── Lead detail ────────────────────────────────────────────────────────── */
+.back {
+  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--zk-line); background: #fff;
+  display: grid; place-items: center; color: var(--zk-muted); margin-top: 4px; cursor: pointer; flex: none;
   transition: background var(--t-fast), border-color var(--t-fast);
 }
-.xfd__clear:hover { background: var(--zk-tint-blue); border-color: var(--zk-blue-mid); }
-.xfd__clear:focus-visible { outline: none; box-shadow: var(--ring); }
+.back svg { width: 16px; height: 16px; }
+.back:hover { background: var(--zk-tint); border-color: var(--zk-grey); color: var(--zk-ink); }
+.state { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--zk-muted); }
+.state .pill { font-size: var(--fs-xs); }
+
+.attn {
+  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
+  padding: 18px 22px; margin-bottom: 18px; border-radius: var(--r-md);
+  border: 1px solid var(--zk-amber-line); background: var(--zk-amber-tint);
+}
+.attn--red  { border-color: var(--zk-danger-line); background: var(--zk-danger-tint); }
+.attn--blue { border-color: var(--zk-blue-light);  background: var(--zk-tint-blue); }
+.attn h3 { margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
+.attn h3 .dot { width: 10px; height: 10px; }
+.attn p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--zk-muted); max-width: 78ch; line-height: 1.5; }
+.attn__acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
+.attn__q { font: inherit; font-size: var(--fs-xs); color: var(--zk-muted); font-weight: 600; padding: 0 6px; background: none; border: 0; cursor: pointer; }
+.attn__q:hover { color: var(--zk-navy); text-decoration: underline; }
+
+.facts { display: grid; grid-template-columns: repeat(4, 1fr); padding: 18px 0; margin-bottom: 18px; }
+.fact { padding: 0 24px; border-left: 1px solid var(--zk-line-soft); min-width: 0; }
+.fact:first-child { border-left: 0; }
+.fact__l { display: block; font-size: var(--fs-xs); color: var(--zk-muted); font-weight: 500; }
+.fact__v { display: block; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 4px 0 2px; color: var(--zk-ink); }
+.fact__v.is-none { color: var(--zk-grey); font-weight: 500; font-size: 22px; }
+.fact__v.due--red { color: var(--zk-danger); } .fact__v.due--amber { color: var(--zk-amber); }
+.fact__s { font-size: var(--fs-xs); color: var(--zk-grey); }
+.fact__conf { display: flex; align-items: center; gap: 10px; }
+.fact__conf .tr { flex: 1; height: 6px; background: var(--zk-line-soft); border-radius: 3px; overflow: hidden; }
+.fact__conf .tr i { display: block; height: 100%; background: var(--zk-teal); border-radius: 3px; }
+.fact__conf span { font-size: var(--fs-xs); color: var(--zk-grey); }
+
+.detail { display: grid; grid-template-columns: 1fr 400px; gap: 18px; align-items: start; }
+.detail__main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
+.detail__side { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
+
+/* The panels on the lead page are cards. */
+.panel { background: var(--zk-card); border: 1px solid var(--zk-line); border-radius: var(--r-md); padding: 0 24px 20px; }
+.panel__head { display: flex; align-items: baseline; gap: 12px; padding: 18px 0 6px; flex-wrap: wrap; }
+.panel__title { margin: 0; font-size: 19px; font-weight: 700; color: var(--zk-ink); }
+.panel__sub { margin: 0; font-size: var(--fs-2xs); color: var(--zk-grey); }
+.panel__act {
+  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
+  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-ink);
+  padding: 5px 12px; border: 1px solid var(--zk-line); border-radius: var(--r-sm); background: #fff; cursor: pointer;
+}
+.panel__act svg { width: 14px; height: 14px; }
+.panel__act b { font-weight: 600; color: var(--zk-muted); }
+.panel__act:hover { background: var(--zk-tint); }
+
+/* Next step */
+.step { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
+.step__btn {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
+  font: inherit; text-align: left; cursor: pointer;
+  padding: 12px 18px; border-radius: var(--r-sm); border: 1px solid var(--zk-navy); background: var(--zk-navy); color: #fff;
+  transition: background var(--t-fast);
+}
+.step__btn strong { font-size: var(--fs-sm); font-weight: 700; }
+.step__btn span { font-size: var(--fs-2xs); opacity: .8; }
+.step__btn:hover, .step__btn.is-open { background: var(--zk-navy-2); }
+.step__btn--no { background: #fff; color: var(--zk-danger); border-color: var(--zk-danger-line); }
+.step__btn--no:hover, .step__btn--no.is-open { background: var(--zk-danger-tint); }
+.alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
+.alt__note { font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--zk-grey); margin-right: 4px; }
+.alt__btn {
+  font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--zk-line); background: #fff; color: var(--zk-ink);
+}
+.alt__btn em { font-style: normal; font-weight: 400; font-size: var(--fs-2xs); color: var(--zk-grey); }
+.alt__btn:hover, .alt__btn.is-open { border-color: var(--zk-navy); background: var(--zk-tint-blue); color: var(--zk-navy); }
+.alt__btn--exit { color: var(--zk-danger); } .alt__btn--exit:hover { border-color: var(--zk-danger-line); background: var(--zk-danger-tint); color: var(--zk-danger); }
+.stuck { margin-top: 14px; border-top: 1px solid var(--zk-line-soft); padding-top: 10px; }
+.stuck > summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-muted); list-style: none; }
+.stuck > summary::-webkit-details-marker { display: none; }
+.stuck > summary::before { content: '▸ '; color: var(--zk-grey); }
+.stuck[open] > summary::before { content: '▾ '; }
+.stuck__why { margin: 10px 0 0; font-size: var(--fs-2xs); color: var(--zk-grey); max-width: 64ch; }
+.acts__form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--zk-line-soft); }
+.said {
+  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
+  border-radius: var(--r-md); border: 1px solid var(--zk-teal-line); background: var(--zk-teal-tint); color: var(--zk-teal-ink);
+}
+.said p { margin: 0; font-size: var(--fs-sm); flex: 1; }
+.said button { font: inherit; font-size: 18px; line-height: 1; background: none; border: 0; cursor: pointer; color: inherit; opacity: .7; }
+
+/* Side cards: worked by, and the facts */
+.panel--crew { padding: 16px 20px 18px; }
+.crew__l { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-grey); margin-bottom: 10px; }
+.crew { display: flex; flex-wrap: wrap; gap: 8px; }
+.glance { display: flex; flex-direction: column; }
+.fgroup { padding-top: 14px; border-top: 1px solid var(--zk-line-soft); }
+.fgroup:first-child { border-top: 0; padding-top: 6px; }
+.fgroup h3 { margin: 0 0 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--zk-grey); display: flex; justify-content: space-between; }
+.fgroup h3 span { font-weight: 500; }
+.props { margin: 0; }
+.prop { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 7px 0; font-size: var(--fs-sm); }
+.prop dt { color: var(--zk-muted); }
+.prop dd { margin: 0; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
+.prop__num { font-variant-numeric: tabular-nums; }
+.prop__files { display: flex; flex-direction: column; gap: 4px; }
+.prop__file { color: var(--zk-blue); font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
+.prop__file::before { content: ''; width: 12px; height: 14px; flex: none; border: 1.4px solid currentColor; border-radius: 2px; opacity: .7; }
+.prop__file:hover { text-decoration: underline; }
+.pending { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0 4px; }
+.pending span { font-size: var(--fs-2xs); padding: 3px 10px; border-radius: 6px; background: var(--zk-line-soft); color: var(--zk-muted); }
+.glance__act {
+  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
+  padding: 5px 10px 5px 8px; border: 1px solid var(--zk-line); border-radius: var(--r-sm); background: #fff;
+  cursor: pointer; font: inherit; font-size: var(--fs-2xs); font-weight: 600; color: var(--zk-blue);
+}
+.glance__act svg { width: 13px; height: 13px; }
+.glance__act:hover { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); }
+.glance__rec { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
+.glance__rec-l { font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--zk-grey); }
+.glance__rec audio { width: 100%; height: 36px; }
+.glance__all {
+  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 14px; padding: 10px 0 0;
+  border: 0; border-top: 1px solid var(--zk-line-soft); background: none; cursor: pointer;
+  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-blue); text-align: left;
+}
+.glance__all svg { width: 14px; height: 14px; }
+.glance__all b { margin-left: auto; font-weight: 500; color: var(--zk-grey); }
+.glance__all:hover { text-decoration: underline; }
+
+@media (max-width: 1100px) {
+  .hero, .cols, .detail { grid-template-columns: 1fr; }
+  .kpis { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
+  .facts { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
+}