From 009153fc0c8ab39502462753677f56d9bf329d8d Mon Sep 17 00:00:00 2001
From: Yashas <yashas.c@getzino.com>
Date: Tue, 8 Sep 2026 23:36:21 +0530
Subject: [PATCH] console: a type scale, so size can carry meaning again
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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, so
body copy was 12.5px. That is not a hierarchy, it is a fog of small grey text,
and it is the main reason the screen read as a decade old: nothing could be
emphasised because everything was already the same size.

Nine steps now, with real jumps. 12px is the floor and is reserved for
uppercase eyebrows — every one of the 53 declarations sitting there that was
not an eyebrow has been lifted off it. The surfaces people actually read — the
trail's entries, WhatsApp bubbles, field values, table cells — are at body size
rather than meta size.

The hairline cages are gone with them. The lead metrics and the overview KPIs
were seven equal cells in a 1px grid, every value the same size as its label,
which left the reader to do the prioritising themselves on every lead. They are
separated by whitespace now, values at 22px against 12px labels, with premium
and commission larger again: size does the prioritising instead.

Panels breathe at 32px rather than 24, radii went 10/14 -> 12/16/20, borders
dropped to the softer line, and the stage rail, the queue table and the cards
were rebuilt on the same spacing rhythm.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/ActivityForm.css   |  34 ++--
 src/components/AgentCard.css      |  18 +-
 src/components/AgentChip.css      |   6 +-
 src/components/ClampText.css      |  14 +-
 src/components/Conversation.css   |  10 +-
 src/components/LeadFileDialog.css |   8 +-
 src/components/NewLeadDialog.css  |   2 +-
 src/components/StageRail.css      |  34 ++--
 src/components/Timeline.css       |  42 ++--
 src/index.css                     |  56 +++++-
 src/layout/Shell.css              |  20 +-
 src/layout/UserMenu.css           |  16 +-
 src/pages/Login.css               |  28 +--
 src/screens/Lead.jsx              |   4 +-
 src/screens/screens.css           | 320 +++++++++++++++++-------------
 15 files changed, 356 insertions(+), 256 deletions(-)

diff --git a/src/components/ActivityForm.css b/src/components/ActivityForm.css
index 2f7bd4b..4d38e37 100644
--- a/src/components/ActivityForm.css
+++ b/src/components/ActivityForm.css
@@ -6,7 +6,7 @@
 
 .af__loading {
   color: var(--zk-muted);
-  font-size: 0.86rem;
+  font-size: var(--fs-xs);
 }
 
 .af__grid {
@@ -26,7 +26,7 @@
 }
 
 .af__field > span {
-  font-size: 0.74rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   letter-spacing: 0.03em;
   color: var(--zk-muted);
@@ -37,7 +37,7 @@
 
 .af__req {
   font-style: normal;
-  font-size: 0.58rem;
+  font-size: var(--fs-3xs);
   font-weight: 500;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -51,7 +51,7 @@
 .af select,
 .af textarea {
   font: inherit;
-  font-size: 0.88rem;
+  font-size: var(--fs-xs);
   padding: 10px 12px;
   border-radius: var(--r-md);
   border: 1px solid var(--zk-line);
@@ -100,7 +100,7 @@
 
 .af__chip {
   font: inherit;
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   padding: 6px 13px;
   border-radius: var(--r-pill);
   cursor: pointer;
@@ -133,7 +133,7 @@
 
 .af__submit {
   font: inherit;
-  font-size: 0.88rem;
+  font-size: var(--fs-xs);
   font-weight: 500;
   padding: 10px 26px;
   border-radius: var(--r-md);
@@ -164,7 +164,7 @@
 
 .af__ghost {
   font: inherit;
-  font-size: 0.88rem;
+  font-size: var(--fs-xs);
   padding: 10px 20px;
   border-radius: var(--r-md);
   cursor: pointer;
@@ -186,7 +186,7 @@
   border-left: 3px solid var(--zk-danger);
   border-radius: var(--r-xs) var(--r-md) var(--r-md) var(--r-xs);
   padding: 12px 16px;
-  font-size: 0.84rem;
+  font-size: var(--fs-xs);
   color: var(--zk-ink);
   animation: zk-rise 0.2s var(--ease) both;
 }
@@ -203,13 +203,13 @@
 
 .af__err p {
   margin: 7px 0 0;
-  font-size: 0.8rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
   line-height: 1.55;
 }
 
 .af__auto {
-  font-size: 0.88rem;
+  font-size: var(--fs-xs);
   padding: 10px 12px;
   border-radius: var(--r-md);
   min-height: 41px;
@@ -223,7 +223,7 @@
 }
 
 .af__auto span {
-  font-size: 0.58rem;
+  font-size: var(--fs-3xs);
   font-weight: 500;
   letter-spacing: 0.09em;
   text-transform: uppercase;
@@ -247,7 +247,7 @@
 
 .ff__btn {
   font: inherit;
-  font-size: 0.84rem;
+  font-size: var(--fs-xs);
   font-weight: 500;
   padding: 14px 14px;
   border-radius: var(--r-md);
@@ -273,7 +273,7 @@
 }
 
 .ff__got {
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -293,7 +293,7 @@
 }
 
 .ff__readlabel {
-  font-size: 0.6rem;
+  font-size: var(--fs-3xs);
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -302,7 +302,7 @@
 }
 
 .ff__read div {
-  font-size: 0.8rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-ink);
 }
 
@@ -311,11 +311,11 @@
   color: var(--zk-grey);
   text-transform: capitalize;
   margin-right: 6px;
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
 }
 
 .ff__err {
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-danger-ink);
   background: var(--zk-danger-tint);
   border: 1px solid var(--zk-danger-line);
diff --git a/src/components/AgentCard.css b/src/components/AgentCard.css
index 9ee1b92..1aefdc5 100644
--- a/src/components/AgentCard.css
+++ b/src/components/AgentCard.css
@@ -8,12 +8,12 @@
   border-bottom: 1px solid var(--zk-line-soft);
 }
 
-.card__disc { width: 38px !important; height: 38px !important; font-size: 0.86rem !important; flex: none; }
+.card__disc { width: 38px !important; height: 38px !important; font-size: var(--fs-xs) !important; flex: none; }
 
 .card__head > div { flex: 1; min-width: 0; }
 
-.card__head h3 { margin: 0 0 3px; font-size: 1rem; font-weight: 500; color: var(--zk-ink); }
-.card__head p  { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--zk-muted); }
+.card__head h3 { margin: 0 0 3px; font-size: var(--fs-md); font-weight: 500; color: var(--zk-ink); }
+.card__head p  { margin: 0; font-size: var(--fs-2xs); line-height: 1.45; color: var(--zk-muted); }
 
 .card__head button {
   flex: none;
@@ -36,14 +36,14 @@
 
 .card__body h4 {
   margin: 0 0 8px;
-  font-size: 0.64rem;
+  font-size: var(--fs-3xs);
   font-weight: 500;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--zk-grey);
 }
 
-.card__body p { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--zk-muted); }
+.card__body p { margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--zk-muted); }
 
 .card__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
 .card__tools li {
@@ -55,11 +55,11 @@
 .card__tools code {
   display: block;
   margin-bottom: 5px;
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   font-weight: 600;
   color: var(--zk-blue-dark);
 }
-.card__tools span { font-size: 0.81rem; line-height: 1.5; color: var(--zk-muted); }
+.card__tools span { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-muted); }
 
 /* "No tools" is the most reassuring fact about an agent writing into an
    insurance file. An empty section would read as missing data instead. */
@@ -72,7 +72,7 @@
 
 .card__kb { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
 .card__kb li {
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   padding: 4px 11px;
   border-radius: var(--r-pill);
   background: var(--zk-tint-blue);
@@ -83,6 +83,6 @@
   margin-top: 20px !important;
   padding-top: 14px;
   border-top: 1px solid var(--zk-line-soft);
-  font-size: 0.75rem !important;
+  font-size: var(--fs-2xs) !important;
   color: var(--zk-grey) !important;
 }
diff --git a/src/components/AgentChip.css b/src/components/AgentChip.css
index 59255a6..e3f2423 100644
--- a/src/components/AgentChip.css
+++ b/src/components/AgentChip.css
@@ -8,17 +8,17 @@
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  font-size: 0.58rem;
+  font-size: var(--fs-2xs);
   font-weight: 600;
   letter-spacing: 0.02em;
   color: #fff;
   user-select: none;
 }
 
-.who--md .who__disc { width: 26px; height: 26px; font-size: 0.66rem; }
+.who--md .who__disc { width: 26px; height: 26px; font-size: var(--fs-2xs); }
 
 .who__name {
-  font-size: 0.76rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   color: var(--zk-muted);
   white-space: nowrap;
diff --git a/src/components/ClampText.css b/src/components/ClampText.css
index 30131b2..6dd1050 100644
--- a/src/components/ClampText.css
+++ b/src/components/ClampText.css
@@ -7,7 +7,7 @@
 
 .clamp__text {
   margin: 0;
-  font-size: 0.86rem;
+  font-size: var(--fs-sm);
   line-height: 1.6;
   color: var(--zk-ink);
   white-space: pre-wrap;
@@ -26,7 +26,7 @@
 
 .clamp__more {
   font: inherit;
-  font-size: 0.76rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   display: inline-flex;
   align-items: center;
@@ -54,7 +54,7 @@
    is that the finding can be read without opening anything. */
 .clamp__lead {
   margin: 0;
-  font-size: 0.9rem;
+  font-size: var(--fs-sm);
   line-height: 1.5;
   color: var(--zk-ink);
   font-weight: 500;
@@ -66,7 +66,7 @@
    can be read without opening anything. */
 .clamp__lead {
   margin: 0;
-  font-size: 0.9rem;
+  font-size: var(--fs-sm);
   line-height: 1.5;
   font-weight: 500;
   color: var(--zk-ink);
@@ -114,7 +114,7 @@
 
 .prose__head h3 {
   margin: 0;
-  font-size: 0.95rem;
+  font-size: var(--fs-sm);
   font-weight: 500;
   line-height: 1.35;
   color: var(--zk-ink);
@@ -143,7 +143,7 @@
 
 .prose__body p {
   margin: 0 0 12px;
-  font-size: 0.875rem;
+  font-size: var(--fs-xs);
   line-height: 1.62;
   color: var(--zk-muted);
   white-space: pre-wrap;
@@ -153,7 +153,7 @@
 /* The finding, kept at the top and kept emphasised: a reader who opened this
    to check one thing should not have to find it again. */
 .prose__lead {
-  font-size: 0.92rem !important;
+  font-size: var(--fs-sm) !important;
   font-weight: 500;
   color: var(--zk-ink) !important;
   padding-bottom: 12px;
diff --git a/src/components/Conversation.css b/src/components/Conversation.css
index d9e55b8..d77f78c 100644
--- a/src/components/Conversation.css
+++ b/src/components/Conversation.css
@@ -12,7 +12,7 @@
   margin: 0;
   padding: 24px 0;
   text-align: center;
-  font-size: 0.85rem;
+  font-size: var(--fs-xs);
   color: var(--zk-grey);
 }
 
@@ -26,7 +26,7 @@
 
 .bub p {
   margin: 0;
-  font-size: 0.86rem;
+  font-size: var(--fs-sm);
   line-height: 1.5;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -35,7 +35,7 @@
 .bub span {
   display: block;
   margin-top: 4px;
-  font-size: 0.66rem;
+  font-size: var(--fs-2xs);
   opacity: 0.65;
 }
 
@@ -57,7 +57,7 @@
   margin: 0;
   padding: 12px 22px 18px;
   border-top: 1px solid var(--zk-line-soft);
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   line-height: 1.5;
   color: var(--zk-grey);
 }
@@ -68,7 +68,7 @@
   margin: 0;
   padding: 14px 16px;
   font: inherit;
-  font-size: 0.82rem;
+  font-size: var(--fs-2xs);
   line-height: 1.6;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
diff --git a/src/components/LeadFileDialog.css b/src/components/LeadFileDialog.css
index 656ad2a..f99192e 100644
--- a/src/components/LeadFileDialog.css
+++ b/src/components/LeadFileDialog.css
@@ -4,7 +4,7 @@
 
 .lfd__sub {
   margin: 4px 0 0;
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   line-height: 1.5;
   color: var(--zk-muted);
 }
@@ -40,7 +40,7 @@
   outline: none;
   background: none;
   font: inherit;
-  font-size: 0.84rem;
+  font-size: var(--fs-xs);
   color: var(--zk-ink);
 }
 
@@ -48,7 +48,7 @@
 
 .lfd__count {
   flex: none;
-  font-size: 0.74rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
   font-variant-numeric: tabular-nums;
 }
@@ -60,6 +60,6 @@
   margin: 0;
   padding: 44px 24px;
   text-align: center;
-  font-size: 0.86rem;
+  font-size: var(--fs-xs);
   color: var(--zk-grey);
 }
diff --git a/src/components/NewLeadDialog.css b/src/components/NewLeadDialog.css
index dda698f..9885c46 100644
--- a/src/components/NewLeadDialog.css
+++ b/src/components/NewLeadDialog.css
@@ -5,7 +5,7 @@
 
 .nld__sub {
   margin: 4px 0 0;
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   line-height: 1.5;
   color: var(--zk-muted);
   max-width: 62ch;
diff --git a/src/components/StageRail.css b/src/components/StageRail.css
index 454b190..e613dcc 100644
--- a/src/components/StageRail.css
+++ b/src/components/StageRail.css
@@ -3,12 +3,13 @@
 .rail {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: var(--sp-6);
   flex-wrap: wrap;
-  margin-bottom: 20px;
-  padding: 16px 22px;
+  margin-bottom: var(--sp-5);
+  padding: var(--sp-6) var(--sp-7);
   border-radius: var(--r-lg);
-  border: 1px solid var(--zk-line);
+  border: 1px solid var(--zk-line-soft);
+  box-shadow: var(--sh-sm);
   background: var(--zk-white);
 }
 
@@ -27,24 +28,26 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 7px;
+  gap: var(--sp-3);
   flex: 1;
   min-width: 0;
   text-align: center;
 }
 
 .rail__dot {
-  width: 11px;
-  height: 11px;
+  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);
 }
 
 .rail__l {
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
   color: var(--zk-grey);
   white-space: nowrap;
   overflow: hidden;
@@ -55,7 +58,7 @@
 /* The connector sits behind the dots, drawn from each step to the next. */
 .rail__bar {
   position: absolute;
-  top: 4.5px;
+  top: 6px;
   left: 50%;
   width: 100%;
   height: 2px;
@@ -69,19 +72,24 @@
 .is-here .rail__dot {
   background: var(--zk-blue);
   border-color: var(--zk-blue);
-  box-shadow: 0 0 0 4px rgba(33, 103, 174, 0.16);
+  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);
 }
-.is-here .rail__l { color: var(--zk-blue-dark); font-weight: 600; }
 
 /* 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: 0.78rem;
+  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: 6px 14px;
+  padding: var(--sp-2) var(--sp-4);
   border-radius: var(--r-pill);
 }
 .rail__off.is-closed {
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index 2af431a..afefe8b 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -7,7 +7,7 @@
 .tl__loading,
 .tl__err {
   color: var(--zk-muted);
-  font-size: 0.86rem;
+  font-size: var(--fs-xs);
   padding: 14px 2px;
 }
 
@@ -17,7 +17,7 @@
 
 .tl__item {
   position: relative;
-  padding: 0 0 18px 26px;
+  padding: 0 0 var(--sp-6) var(--sp-7);
   border-left: 2px solid var(--zk-line-soft);
 }
 
@@ -88,13 +88,13 @@
 }
 
 .tl__what {
-  font-size: 0.89rem;
+  font-size: var(--fs-sm);
   font-weight: 500;
   color: var(--zk-ink);
 }
 
 .tl__who {
-  font-size: 0.66rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   letter-spacing: 0.03em;
   padding: 3px 9px;
@@ -119,12 +119,12 @@
 }
 
 .tl__stage {
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-blue);
 }
 
 .tl__when {
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-grey);
 }
 
@@ -142,7 +142,7 @@
 
 .tl__saylabel {
   display: block;
-  font-size: 0.62rem;
+  font-size: var(--fs-3xs);
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -152,10 +152,10 @@
 
 .tl__say p {
   margin: 0;
-  font-size: 0.84rem;
-  line-height: 1.55;
+  font-size: var(--fs-sm);
+  line-height: var(--lh-normal);
   color: var(--zk-muted);
-  max-width: 78ch;
+  max-width: 76ch;
 }
 
 .tl__figs {
@@ -166,7 +166,7 @@
 }
 
 .tl__figs span {
-  font-size: 0.8rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-ink);
   font-variant-numeric: tabular-nums;
   padding: 4px 11px;
@@ -177,7 +177,7 @@
 
 .tl__figs em {
   font-style: normal;
-  font-size: 0.68rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-grey);
   text-transform: capitalize;
   margin-right: 5px;
@@ -186,7 +186,7 @@
 /* ---- system noise ---- */
 .tl__toggle {
   font: inherit;
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   cursor: pointer;
   margin-bottom: 14px;
@@ -219,7 +219,7 @@
 
 .tl__docshead {
   display: block;
-  font-size: 0.74rem;
+  font-size: var(--fs-3xs);
   font-weight: 600;
   letter-spacing: 0.02em;
   text-transform: uppercase;
@@ -233,7 +233,7 @@
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   text-decoration: none;
   padding: 4px 10px 4px 8px;
   border-radius: var(--r-pill, 999px);
@@ -253,14 +253,14 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-size: 0.9rem;
+  font-size: var(--fs-sm);
   font-weight: 500;
   color: #0f7b45;
 }
 .tl__wa svg { width: 15px; height: 15px; }
 
 .tl__n {
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   font-variant-numeric: tabular-nums;
   color: var(--zk-muted);
   padding: 1px 8px;
@@ -274,7 +274,7 @@
 
 .tl__open {
   font: inherit;
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   cursor: pointer;
   padding: 0;
@@ -303,7 +303,7 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   color: var(--zk-blue);
 }
@@ -335,7 +335,7 @@
 .tl__wrote dt {
   flex: none;
   width: 42%;
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-grey);
   overflow-wrap: anywhere;
 }
@@ -344,7 +344,7 @@
   margin: 0;
   flex: 1;
   min-width: 0;
-  font-size: 0.75rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-ink);
   overflow-wrap: anywhere;
 }
diff --git a/src/index.css b/src/index.css
index 7101e74..1b83981 100644
--- a/src/index.css
+++ b/src/index.css
@@ -55,10 +55,11 @@
      One scale, used everywhere. The palette above is untouched; every shadow
      below is the brand navy at low alpha, so depth reads as part of the brand
      rather than as generic grey haze. */
-  --r-xs: 4px;
-  --r-sm: 6px;
-  --r-md: 10px;
-  --r-lg: 14px;
+  --r-xs: 6px;
+  --r-sm: 8px;
+  --r-md: 12px;
+  --r-lg: 16px;
+  --r-xl: 20px;
   --r-pill: 999px;
 
   --sh-xs: 0 1px 2px rgba(35, 54, 111, 0.05);
@@ -75,12 +76,57 @@
   --grad-blue: linear-gradient(135deg, var(--zk-blue) 0%, var(--zk-blue-deep) 100%);
   --grad-blue-hover: linear-gradient(135deg, var(--zk-blue-dark) 0%, var(--zk-navy) 100%);
 
+  /* ── 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.
+
+     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. */
+  --fs-3xs:  0.75rem;    /* 12px — uppercase eyebrows only */
+  --fs-2xs:  0.8125rem;  /* 13px — timestamps, meta */
+  --fs-xs:   0.875rem;   /* 14px — field labels */
+  --fs-sm:   0.9375rem;  /* 15px — body, field values */
+  --fs-md:   1rem;       /* 16px — 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;
+
+  --fw-normal: 400;
+  --fw-medium: 500;
+  --fw-semi: 600;
+
+  /* ── 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;
+  --sp-4: 16px;
+  --sp-5: 20px;
+  --sp-6: 24px;
+  --sp-7: 32px;
+  --sp-8: 40px;
+  --sp-9: 56px;
+
   --font-zurich: 'Zurich Sans', Arial, Helvetica, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, 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;
-  line-height: 1.5;
+  line-height: var(--lh-normal);
   color: var(--zk-ink);
   background: var(--zk-tint);
   -webkit-font-smoothing: antialiased;
diff --git a/src/layout/Shell.css b/src/layout/Shell.css
index 9f36ab0..bddcf1d 100644
--- a/src/layout/Shell.css
+++ b/src/layout/Shell.css
@@ -46,14 +46,14 @@
 }
 
 .shell__brandtext strong {
-  font-size: 0.95rem;
+  font-size: var(--fs-sm);
   font-weight: 500;
   letter-spacing: -0.005em;
   color: var(--zk-ink);
 }
 
 .shell__brandtext span {
-  font-size: 0.7rem;
+  font-size: var(--fs-3xs);
   font-weight: 400;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -88,7 +88,7 @@
 .shell__navlabel {
   margin: 0 0 10px;
   padding: 0 10px;
-  font-size: 0.64rem;
+  font-size: var(--fs-3xs);
   font-weight: 500;
   letter-spacing: 0.12em;
   text-transform: uppercase;
@@ -129,7 +129,7 @@
   border-radius: var(--r-md);
   text-decoration: none;
   color: var(--zk-muted);
-  font-size: 0.845rem;
+  font-size: var(--fs-xs);
   transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
 }
 
@@ -246,7 +246,7 @@
   margin: 0 0 8px;
   padding: 9px 12px;
   border-radius: var(--r-sm);
-  font-size: 14px;
+  font-size: var(--fs-xs);
   font-weight: 500;
   color: var(--zk-ink);
   text-decoration: none;
@@ -272,7 +272,7 @@
   padding: 1px 6px;
   border-radius: var(--r-pill);
   text-align: center;
-  font-size: 0.74rem;
+  font-size: var(--fs-2xs);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   color: var(--zk-blue-dark);
@@ -291,7 +291,7 @@
    it is in the queue, it is not your work. */
 .shell__auto {
   font-style: normal;
-  font-size: 0.7rem;
+  font-size: var(--fs-2xs);
   font-variant-numeric: tabular-nums;
   color: var(--zk-blue-mid);
 }
@@ -324,7 +324,7 @@
 }
 
 .shell__grouptally {
-  font-size: 0.68rem;
+  font-size: var(--fs-2xs);
   font-weight: 600;
   letter-spacing: 0;
   font-variant-numeric: tabular-nums;
@@ -346,7 +346,7 @@
   cursor: pointer;
   list-style: none;
   padding: 0 10px 10px;
-  font-size: 0.64rem;
+  font-size: var(--fs-3xs);
   font-weight: 500;
   letter-spacing: 0.12em;
   text-transform: uppercase;
@@ -355,7 +355,7 @@
 .shell__closed > summary::-webkit-details-marker { display: none; }
 .shell__closed > summary:hover { color: var(--zk-muted); }
 .shell__closed > summary b {
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   letter-spacing: 0;
   font-variant-numeric: tabular-nums;
diff --git a/src/layout/UserMenu.css b/src/layout/UserMenu.css
index 02b7d88..b3d5912 100644
--- a/src/layout/UserMenu.css
+++ b/src/layout/UserMenu.css
@@ -40,7 +40,7 @@
   place-items: center;
   background: var(--grad-blue);
   color: var(--zk-white);
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   letter-spacing: 0.03em;
   box-shadow: var(--sh-xs);
@@ -49,7 +49,7 @@
 .um__avatar--lg {
   width: 40px;
   height: 40px;
-  font-size: 0.86rem;
+  font-size: var(--fs-xs);
 }
 
 .um__id {
@@ -60,12 +60,12 @@
 }
 
 .um__id strong {
-  font-size: 0.85rem;
+  font-size: var(--fs-xs);
   font-weight: 500;
 }
 
 .um__id > span {
-  font-size: 0.7rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
 }
 
@@ -112,12 +112,12 @@
 }
 
 .um__headid strong {
-  font-size: 0.87rem;
+  font-size: var(--fs-xs);
   font-weight: 500;
 }
 
 .um__headid span {
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
   overflow-wrap: anywhere;
 }
@@ -125,7 +125,7 @@
 .um__headid .um__roles {
   margin-top: 4px;
   align-self: flex-start;
-  font-size: 0.68rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   color: var(--zk-blue-dark);
   background: var(--zk-tint-blue);
@@ -139,7 +139,7 @@
   text-align: left;
   cursor: pointer;
   font: inherit;
-  font-size: 0.82rem;
+  font-size: var(--fs-2xs);
   padding: 10px 11px;
   border-radius: var(--r-sm);
   background: none;
diff --git a/src/pages/Login.css b/src/pages/Login.css
index 77c6ff7..cabccf7 100644
--- a/src/pages/Login.css
+++ b/src/pages/Login.css
@@ -68,7 +68,7 @@
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.08);
   color: var(--zk-cyan);
-  font-size: 13px;
+  font-size: var(--fs-2xs);
   font-weight: 400;
   letter-spacing: 0.01em;
 }
@@ -81,7 +81,7 @@
 .login__headline {
   /* Zurich Kotak set their hero in Zurich Sans Light */
   margin: 26px 0 0;
-  font-size: 44px;
+  font-size: var(--fs-3xl);
   font-weight: 300;
   line-height: 1.16;
   letter-spacing: -0.01em;
@@ -104,7 +104,7 @@
   margin: 16px 0 0;
   max-width: 430px;
   text-wrap: balance;
-  font-size: 16px;
+  font-size: var(--fs-md);
   font-weight: 300;
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.8);
@@ -144,7 +144,7 @@
 
 .login__features strong {
   display: block;
-  font-size: 15px;
+  font-size: var(--fs-sm);
   font-weight: 500;
   letter-spacing: 0.005em;
 }
@@ -152,7 +152,7 @@
 .login__features em {
   display: block;
   margin-top: 3px;
-  font-size: 14px;
+  font-size: var(--fs-xs);
   font-style: normal;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.74);
@@ -178,7 +178,7 @@
 
 .login__title {
   margin: 0;
-  font-size: 30px;
+  font-size: var(--fs-2xl);
   font-weight: 500;
   letter-spacing: -0.015em;
   color: var(--zk-navy);
@@ -186,7 +186,7 @@
 
 .login__subtitle {
   margin: 8px 0 0;
-  font-size: 14px;
+  font-size: var(--fs-xs);
   font-weight: 300;
   color: var(--zk-muted);
 }
@@ -201,7 +201,7 @@
 .login__field span {
   display: block;
   margin-bottom: 7px;
-  font-size: 13px;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   color: var(--zk-ink);
 }
@@ -212,7 +212,7 @@
   border: 1px solid var(--zk-line);
   border-radius: 8px;
   background: var(--zk-white);
-  font-size: 14px;
+  font-size: var(--fs-xs);
   font-weight: 400;
   color: var(--zk-ink);
   transition:
@@ -232,7 +232,7 @@
 
 .login__error {
   margin: -4px 0 0;
-  font-size: 13px;
+  font-size: var(--fs-2xs);
   color: var(--zk-danger);
 }
 
@@ -247,7 +247,7 @@
   border-radius: 8px;
   background: var(--zk-blue);
   color: var(--zk-white);
-  font-size: 14px;
+  font-size: var(--fs-xs);
   font-weight: 500;
   cursor: pointer;
   transition:
@@ -277,7 +277,7 @@
 .login__powered {
   margin: 26px 0 0;
   text-align: center;
-  font-size: 12px;
+  font-size: var(--fs-2xs);
   font-weight: 300;
   color: var(--zk-grey);
 }
@@ -296,11 +296,11 @@
   }
 
   .login__headline {
-    font-size: 36px;
+    font-size: var(--fs-3xl);
   }
 
   .login__lede {
-    font-size: 15px;
+    font-size: var(--fs-sm);
   }
 }
 
diff --git a/src/screens/Lead.jsx b/src/screens/Lead.jsx
index b2988e4..034c1fa 100644
--- a/src/screens/Lead.jsx
+++ b/src/screens/Lead.jsx
@@ -427,12 +427,12 @@ export default function Lead() {
               <strong className="lm__v">{dwell === null ? '—' : dwell === 0 ? '<1d' : dwell + 'd'}</strong>
               <span className="lm__s">last activity {row.updated_at ? fmtWhen(row.updated_at) : '—'}</span>
             </div>
-            <div className="lm">
+            <div className="lm lm--hero">
               <span className="lm__l">Premium</span>
               <strong className="lm__v">{premium ?? '—'}</strong>
               <span className="lm__s">{premium ? 'quoted' : 'not yet rated'}</span>
             </div>
-            <div className="lm">
+            <div className="lm lm--hero">
               <span className="lm__l">Commission</span>
               <strong className="lm__v">{commission ?? '—'}</strong>
               <span className="lm__s">
diff --git a/src/screens/screens.css b/src/screens/screens.css
index e6190c6..9e3e91f 100644
--- a/src/screens/screens.css
+++ b/src/screens/screens.css
@@ -9,8 +9,8 @@
 
 .page__title {
   margin: 0;
-  font-size: 1.7rem;
-  font-weight: 500;
+  font-size: var(--fs-2xl);
+  font-weight: var(--fw-semi);
   letter-spacing: -0.022em;
   line-height: 1.2;
   color: var(--zk-ink);
@@ -19,7 +19,7 @@
 .page__sub {
   margin: 6px 0 0;
   max-width: 72ch;
-  font-size: 0.855rem;
+  font-size: var(--fs-xs);
   line-height: 1.5;
   color: var(--zk-muted);
 }
@@ -40,7 +40,7 @@
 }
 
 .page__count strong {
-  font-size: 1.6rem;
+  font-size: var(--fs-2xl);
   font-weight: 500;
   line-height: 1.1;
   color: var(--zk-blue);
@@ -48,7 +48,7 @@
 }
 
 .page__count span {
-  font-size: 0.6rem;
+  font-size: var(--fs-3xs);
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -58,7 +58,7 @@
 .empty {
   margin: 0;
   color: var(--zk-muted);
-  font-size: 0.88rem;
+  font-size: var(--fs-xs);
   text-align: center;
   padding: 44px 24px;
   border-radius: var(--r-lg);
@@ -84,13 +84,13 @@
 
 .notice p {
   margin: 0 0 6px;
-  font-size: 0.86rem;
+  font-size: var(--fs-xs);
   color: var(--zk-muted);
   line-height: 1.55;
 }
 
 .notice__detail {
-  font-size: 0.76rem !important;
+  font-size: var(--fs-2xs) !important;
   color: var(--zk-grey) !important;
 }
 
@@ -120,7 +120,7 @@
   min-width: 1000px;
   border-collapse: separate;
   border-spacing: 0;
-  font-size: 0.86rem;
+  font-size: var(--fs-sm);
 }
 
 .grid th {
@@ -128,11 +128,11 @@
   top: 0;
   z-index: 1;
   text-align: left;
-  font-size: 0.65rem;
-  font-weight: 500;
-  letter-spacing: 0.1em;
+  font-size: var(--fs-3xs);
+  font-weight: var(--fw-semi);
+  letter-spacing: 0.09em;
   text-transform: uppercase;
-  color: var(--zk-muted);
+  color: var(--zk-grey);
   padding: 12px 16px;
   background: var(--zk-tint);
   border-bottom: 1px solid var(--zk-line);
@@ -140,9 +140,9 @@
 }
 
 .grid td {
-  padding: 13px 16px;
+  padding: var(--sp-4) var(--sp-5);
   border-bottom: 1px solid var(--zk-line-soft);
-  vertical-align: top;
+  vertical-align: middle;
 }
 
 .grid tbody tr {
@@ -176,7 +176,7 @@
 }
 
 .grid__sub {
-  font-size: 0.76rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
   margin-top: 3px;
 }
@@ -223,7 +223,7 @@
 .chip {
   display: inline-flex;
   align-items: center;
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   padding: 3px 10px;
   border-radius: var(--r-pill);
@@ -290,7 +290,7 @@
 }
 
 .door strong {
-  font-size: 1.02rem;
+  font-size: var(--fs-md);
   font-weight: 500;
   letter-spacing: -0.01em;
   color: var(--zk-ink);
@@ -298,7 +298,7 @@
 
 .door p {
   margin: 0;
-  font-size: 0.82rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
   line-height: 1.55;
 }
@@ -310,31 +310,32 @@
 /* ---- panel ---- */
 .panel {
   background: var(--zk-white);
-  border: 1px solid var(--zk-line);
+  border: 1px solid var(--zk-line-soft);
   border-radius: var(--r-lg);
   box-shadow: var(--sh-sm);
-  padding: 24px 26px;
-  margin-bottom: 22px;
+  padding: var(--sp-7);
+  margin-bottom: var(--sp-5);
 }
 
 .panel__head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 20px;
-  margin-bottom: 18px;
+  gap: var(--sp-5);
+  margin-bottom: var(--sp-6);
 }
 
 .panel__title {
   margin: 0;
-  font-size: 1.06rem;
-  font-weight: 500;
-  letter-spacing: -0.012em;
+  font-size: var(--fs-lg);
+  font-weight: var(--fw-semi);
+  letter-spacing: -0.018em;
+  line-height: var(--lh-tight);
 }
 
 .panel__sub {
   margin: 5px 0 0;
-  font-size: 0.82rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
   max-width: 62ch;
   line-height: 1.55;
@@ -377,12 +378,12 @@
 }
 
 .act strong {
-  font-size: 0.885rem;
+  font-size: var(--fs-xs);
   font-weight: 500;
 }
 
 .act__by {
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
 }
 
@@ -416,13 +417,13 @@
 }
 
 .doing strong {
-  font-size: 0.95rem;
+  font-size: var(--fs-sm);
   font-weight: 500;
   color: var(--zk-blue-dark);
 }
 
 .doing span {
-  font-size: 0.82rem;
+  font-size: var(--fs-2xs);
   line-height: 1.5;
   color: var(--zk-muted);
 }
@@ -470,7 +471,7 @@
   align-self: flex-start;
   margin-top: 9px;
   font: inherit;
-  font-size: 0.82rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   cursor: pointer;
   padding: 7px 15px;
@@ -503,7 +504,7 @@
 .said p {
   flex: 1;
   margin: 0;
-  font-size: 0.88rem;
+  font-size: var(--fs-xs);
   line-height: 1.5;
   color: var(--zk-ink);
 }
@@ -511,7 +512,7 @@
 .said button {
   flex: none;
   font: inherit;
-  font-size: 1.1rem;
+  font-size: var(--fs-lg);
   line-height: 1;
   cursor: pointer;
   padding: 2px 6px;
@@ -531,7 +532,7 @@
 .page__stage {
   display: block;
   margin-top: 4px;
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-grey);
 }
 
@@ -669,14 +670,14 @@
 }
 
 .prop dt {
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
   line-height: 1.45;
 }
 
 .prop dd {
   margin: 0;
-  font-size: 0.875rem;
+  font-size: var(--fs-xs);
   color: var(--zk-ink);
   line-height: 1.45;
   overflow-wrap: anywhere;
@@ -708,7 +709,7 @@
 
 .prop--note dt {
   margin-bottom: 7px;
-  font-size: 0.66rem;
+  font-size: var(--fs-3xs);
   font-weight: 500;
   letter-spacing: 0.09em;
   text-transform: uppercase;
@@ -731,7 +732,7 @@
 
 .lead__stagelabel {
   display: block;
-  font-size: 0.6rem;
+  font-size: var(--fs-3xs);
   font-weight: 500;
   letter-spacing: 0.12em;
   text-transform: uppercase;
@@ -739,12 +740,12 @@
 }
 
 .lead__closed {
-  font-size: 0.7rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-grey);
 }
 
 .lead__stage strong {
-  font-size: 0.9rem;
+  font-size: var(--fs-sm);
   font-weight: 500;
   color: var(--zk-blue-dark);
   padding: 6px 14px;
@@ -764,7 +765,7 @@
 .due {
   display: inline-flex;
   align-items: center;
-  font-size: 0.75rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   padding: 3px 10px;
   border-radius: var(--r-pill);
@@ -815,7 +816,7 @@
 }
 
 .lead__meta dt {
-  font-size: 0.6rem;
+  font-size: var(--fs-3xs);
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -824,7 +825,7 @@
 
 .lead__meta dd {
   margin: 0;
-  font-size: 0.85rem;
+  font-size: var(--fs-xs);
   color: var(--zk-ink);
 }
 
@@ -834,7 +835,7 @@
 }
 
 .lead__meta--money dd {
-  font-size: 1rem;
+  font-size: var(--fs-md);
   font-weight: 500;
   color: var(--zk-blue-dark);
   font-variant-numeric: tabular-nums;
@@ -848,44 +849,56 @@
 .stamp {
   flex: none;
   align-self: center;
-  font-size: 11.5px;
+  font-size: var(--fs-3xs);
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--zk-grey);
   font-variant-numeric: tabular-nums;
 }
 
-/* KPI strip. Tabular figures so the row does not jitter as it refreshes. */
+/* 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: grid;
-  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
-  gap: 1px;
-  background: var(--zk-line);
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-md);
-  overflow: hidden;
-  margin-bottom: 26px;
+  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
+  gap: var(--sp-5) var(--sp-7);
+  padding: var(--sp-6) var(--sp-7);
+  background: var(--zk-white);
+  border: 1px solid var(--zk-line-soft);
+  border-radius: var(--r-lg);
+  box-shadow: var(--sh-sm);
+  margin-bottom: var(--sp-6);
 }
-.kpi { background: var(--zk-white); padding: 16px 18px 14px; }
+
+.kpi { min-width: 0; }
+
 .kpi__l {
   display: block;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: .07em;
+  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: 7px 0 3px;
-  font-size: 26px;
-  font-weight: 400;
-  line-height: 1.05;
+  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: -.02em;
+  letter-spacing: -.028em;
+}
+
+.kpi__s {
+  display: block;
+  font-size: var(--fs-2xs);
+  line-height: var(--lh-snug);
+  color: var(--zk-muted);
 }
-.kpi__s { display: block; font-size: 12px; 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. */
@@ -896,14 +909,14 @@
   align-items: baseline;
   gap: 10px;
   margin: 0 0 12px;
-  font-size: 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: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--zk-grey); }
+.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; }
@@ -921,12 +934,12 @@
   transition: border-color .12s, background .12s;
 }
 .q:hover { border-color: var(--zk-blue-light); background: var(--zk-tint); }
-.q__n { font-size: 20px; font-weight: 500; color: var(--zk-grey); font-variant-numeric: tabular-nums; text-align: right; }
-.q__t { font-size: 14px; color: var(--zk-ink); }
-.q__t em { display: block; font-style: normal; font-size: 12px; color: var(--zk-muted); margin-top: 1px; }
-.q__age { font-size: 12px; color: var(--zk-grey); font-variant-numeric: tabular-nums; }
+.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: 10px; letter-spacing: .06em; text-transform: uppercase;
+  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
@@ -942,8 +955,8 @@
   border-radius: var(--r-sm);
   background: var(--zk-white);
 }
-.bucket strong { display: block; font-size: 21px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
-.bucket span { display: block; margin-top: 2px; font-size: 12px; color: var(--zk-muted); }
+.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); }
@@ -965,7 +978,7 @@
   color: inherit;
 }
 .dist__r:hover { background: var(--zk-tint); }
-.dist__l { font-size: 12.5px; color: var(--zk-ink); }
+.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); }
@@ -973,7 +986,7 @@
 .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: 12.5px; text-align: right; color: var(--zk-muted); font-variant-numeric: tabular-nums; }
+.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; }
@@ -989,32 +1002,65 @@
    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;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 1px;
-  background: var(--zk-line);
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-md);
-  overflow: hidden;
-  margin-bottom: 22px;
+  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
+  gap: var(--sp-5) var(--sp-7);
+  padding: var(--sp-6) var(--sp-7);
+  background: var(--zk-white);
+  border: 1px solid var(--zk-line-soft);
+  border-radius: var(--r-lg);
+  box-shadow: var(--sh-sm);
+  margin-bottom: var(--sp-5);
 }
-.lm { background: var(--zk-white); padding: 13px 15px 12px; }
+
+.lm { min-width: 0; }
+
 .lm__l {
   display: block;
-  font-size: 10.5px; font-weight: 500; letter-spacing: .07em;
-  text-transform: uppercase; color: var(--zk-grey);
+  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: 6px 0 2px;
-  font-size: 19px; font-weight: 400; line-height: 1.1;
-  color: var(--zk-navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
+  display: block;
+  margin-bottom: var(--sp-1);
+  font-size: var(--fs-xl);
+  font-weight: var(--fw-semi);
+  line-height: var(--lh-tight);
+  color: var(--zk-navy);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -.02em;
 }
-.lm__v--sm { font-size: 16px; }
+
+/* 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: 11.5px; color: var(--zk-muted);
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  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); }
@@ -1039,8 +1085,8 @@
   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: 15px; font-weight: 500; }
-.step__btn span { display: block; margin-top: 2px; font-size: 12px; opacity: .85; }
+.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
@@ -1062,13 +1108,13 @@
   border-radius: var(--r-sm);
   background: var(--zk-white);
   color: var(--zk-ink);
-  font-size: 13px;
+  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: 11.5px; color: var(--zk-grey); }
+.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); }
 
@@ -1076,7 +1122,7 @@
 .stuck { margin-top: 18px; border-top: 1px solid var(--zk-line-soft); padding-top: 14px; }
 .stuck > summary {
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
   list-style: none;
   display: inline-flex;
@@ -1084,10 +1130,10 @@
   gap: 6px;
 }
 .stuck > summary::-webkit-details-marker { display: none; }
-.stuck > summary::before { content: '▸'; font-size: 10px; color: var(--zk-grey); }
+.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: 12.5px; color: var(--zk-muted); max-width: 64ch; }
+.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
@@ -1119,7 +1165,7 @@
    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: 0.8rem; line-height: 1.3; }
+.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); }
@@ -1150,7 +1196,7 @@
   align-items: center;
   gap: 5px;
   max-width: 100%;
-  font-size: 0.8rem;
+  font-size: var(--fs-2xs);
   text-decoration: none;
   padding: 3px 10px;
   border-radius: var(--r-pill, 999px);
@@ -1168,7 +1214,7 @@
 .q__auto {
   display: block;
   font-weight: 400;
-  font-size: 0.72rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
   margin-top: 2px;
 }
@@ -1201,7 +1247,7 @@
   gap: 7px;
   flex: none;
   font: inherit;
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   cursor: pointer;
   padding: 6px 12px;
@@ -1213,7 +1259,7 @@
 }
 .panel__act svg { width: 13px; height: 13px; opacity: .75; }
 .panel__act b {
-  font-size: 0.68rem;
+  font-size: var(--fs-2xs);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   padding: 1px 6px;
@@ -1235,7 +1281,7 @@
   border-bottom: 1px solid var(--zk-line-soft);
 }
 .crew__l {
-  font-size: 0.64rem;
+  font-size: var(--fs-3xs);
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -1272,7 +1318,7 @@
 .appr__n {
   flex: none;
   min-width: 46px;
-  font-size: 1.9rem;
+  font-size: var(--fs-2xl);
   font-weight: 300;
   line-height: 1;
   letter-spacing: -0.02em;
@@ -1287,13 +1333,13 @@
   gap: 3px;
   min-width: 0;
   flex: 1;
-  font-size: 0.95rem;
+  font-size: var(--fs-sm);
   font-weight: 500;
   color: var(--zk-ink);
 }
 .appr__t em {
   font-style: normal;
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   font-weight: 400;
   line-height: 1.45;
   color: var(--zk-muted);
@@ -1301,7 +1347,7 @@
 
 .appr__go {
   flex: none;
-  font-size: 0.76rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
   white-space: nowrap;
 }
@@ -1324,7 +1370,7 @@
   display: inline-flex;
   align-items: center;
   gap: 7px;
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-muted);
   cursor: pointer;
   user-select: none;
@@ -1352,7 +1398,7 @@
   padding: 9px 16px;
   border-radius: var(--r-pill);
   text-decoration: none;
-  font-size: 0.84rem;
+  font-size: var(--fs-xs);
   font-weight: 500;
   color: var(--zk-white);
   background: var(--grad-blue);
@@ -1385,7 +1431,7 @@
 }
 
 .fgroup {
-  padding: 12px 15px 14px;
+  padding: var(--sp-5);
   border: 1px solid var(--zk-line-soft);
   border-radius: var(--r-md);
   background: var(--zk-white);
@@ -1394,20 +1440,20 @@
 .fgroup h3 {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin: 0 0 9px;
-  padding-bottom: 7px;
+  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: 0.64rem;
-  font-weight: 600;
-  letter-spacing: 0.1em;
+  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: 0.62rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   letter-spacing: 0;
   color: var(--zk-grey);
@@ -1422,10 +1468,10 @@
 .file360 .prop {
   display: grid;
   grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
-  gap: 12px;
+  gap: var(--sp-4);
   align-items: baseline;
   margin: 0;
-  padding: 3px 0;
+  padding: var(--sp-2) 0;
   border: 0;
   border-radius: 0;
 }
@@ -1433,14 +1479,14 @@
 .file360 .prop:hover { background: transparent; }
 
 .file360 .prop dt {
-  font-size: 0.71rem;
+  font-size: var(--fs-2xs);
   line-height: 1.5;
   color: var(--zk-grey);
   margin: 0;
 }
 
 .file360 .prop dd {
-  font-size: 0.8rem;
+  font-size: var(--fs-2xs);
   line-height: 1.5;
   color: var(--zk-ink);
   overflow-wrap: anywhere;
@@ -1464,7 +1510,7 @@
 .fnote__l {
   display: block;
   margin-bottom: 2px;
-  font-size: 0.66rem;
+  font-size: var(--fs-3xs);
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--zk-grey);
@@ -1474,7 +1520,7 @@
    one fact among fifty, so it drops to body weight and two lines. */
 .file360 .clamp__lead,
 .file360 .clamp__text {
-  font-size: 0.78rem;
+  font-size: var(--fs-2xs);
   font-weight: 400;
   line-height: 1.5;
   color: var(--zk-muted);
@@ -1485,7 +1531,7 @@
   overflow: hidden;
 }
 
-.file360 .clamp__more { margin-top: 3px; font-size: 0.7rem; }
+.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
@@ -1504,24 +1550,24 @@
 
 .glance .prop {
   display: grid;
-  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
-  gap: 12px;
+  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
+  gap: var(--sp-4);
   align-items: baseline;
   margin: 0;
-  padding: 3px 0;
+  padding: var(--sp-2) 0;
   border: 0;
   border-radius: 0;
 }
 
 .glance .prop:hover { background: transparent; }
-.glance .prop dt { font-size: 0.71rem; line-height: 1.5; color: var(--zk-grey); margin: 0; }
-.glance .prop dd { font-size: 0.8rem; line-height: 1.5; color: var(--zk-ink); overflow-wrap: anywhere; }
+.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: 0.78rem;
+  font-size: var(--fs-2xs);
   font-weight: 400;
   line-height: 1.5;
   color: var(--zk-muted);
@@ -1532,7 +1578,7 @@
   overflow: hidden;
 }
 
-.glance .clamp__more { margin-top: 3px; font-size: 0.7rem; }
+.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
@@ -1548,7 +1594,7 @@
   background: var(--zk-white);
   cursor: pointer;
   font: inherit;
-  font-size: 0.74rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   color: var(--zk-blue-dark);
   transition: background var(--t-fast), border-color var(--t-fast);
@@ -1574,7 +1620,7 @@
   background: none;
   cursor: pointer;
   font: inherit;
-  font-size: 0.82rem;
+  font-size: var(--fs-2xs);
   font-weight: 500;
   color: var(--zk-blue-dark);
   transition: background var(--t-fast);
@@ -1587,14 +1633,14 @@
 .glance__all b {
   margin-left: auto;
   font-weight: 400;
-  font-size: 0.74rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-grey);
   font-variant-numeric: tabular-nums;
 }
 
 .panel__meta {
   flex: none;
-  font-size: 0.74rem;
+  font-size: var(--fs-2xs);
   color: var(--zk-grey);
   font-variant-numeric: tabular-nums;
 }