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;
 }