fix(type-scale): tokenize mode-home hero sizes so check:type-scale --strict passes

docs/process-hardening.md

@@ -196,7 +196,7 @@ passes `p_worker_id`. Ordered apply steps, R17 manual `CONCURRENTLY` index, and
 ## Design convergence & type-scale ratchet (2026-07-06)
 
 - **`docs/design-system.md` is now the front door** for all UI work: token contract, type-scale rules, z-index ladder, Sheet-only modals, a11y requirements, and the UI Definition of Done. The `docs/redesign/*` documents remain the deep references it links to.
-- **Type-scale ratchet:** `node scripts/check-type-scale.mjs` baseline is **20 hits / 9 files** (was 168/22). Remaining hits are rem display headings (accepted exceptions) and one mockup file. UI PRs must not raise the count; flip `check:type-scale --strict` into `verify:cheap` if the accepted exceptions are ever tokenized.
+- **Type-scale ratchet — backlog cleared, gate now strict:** `node scripts/check-type-scale.mjs --strict` reports **0 hits / 0 files** (this pass retires the last 8 hits in 1 file; the prior recorded baseline was 20/9, originally 168/22). The final holdouts — the compact mode-home hero + action-card sizes in `src/components/mode-home-template.tsx` — were tokenized into size-only named `@theme` steps in `src/app/globals.css` (`--text-xs-plus … --text-4xl-minus`, pixel-parity with the `text-[…rem]` values they replace). `check:type-scale --strict` is wired into `verify:cheap` (package.json), so any newly introduced arbitrary `text-[<n>px|rem|em]` size now fails the gate — UI PRs must keep the count at zero. Colour utilities (`text-[color:var(--…)]`) are the sanctioned token form and are not counted.
 - **Cleared this pass:** dead launcher mobile detail rows now expand (aria-expanded disclosures); launcher detail dialog migrated to the `Sheet` primitive (focus trap/return-focus restored); launcher filter tablists gained `aria-controls` + a `role="tabpanel"` results region; styled `src/app/not-found.tsx` added (the `notFound()` calls in differentials no longer fall through to the unstyled default); `?page=abc` NaN leak in the document viewer clamped; `/services` off-palette preview deleted (dead export) and the live navigator's residual hardcodes tokenized; launcher icon tones moved from raw Tailwind palette classes to categorical `--type-*` / semantic danger triads (dark-mode + forced-colors correct); mockups layout emits `robots: noindex`.
 
 ## Repository hygiene + production surface pass (2026-07-06)

src/app/globals.css

@@ -59,7 +59,20 @@
        base-minus  15px  one notch under base — comfortable body just under 16
        (lg 18 · xl 20 · 2xl 24 come from Tailwind's default scale)
        lg-minus    17px  one notch under lg — display titles a shade under 18
-       2xl-minus   22px  one notch under 2xl — wide-screen nowrap headings */
+       2xl-minus   22px  one notch under 2xl — wide-screen nowrap headings
+     The mode-home hero/action steps below are the same size-only kind, just
+     bespoke to the compact mode-home scale in mode-home-template.tsx (they
+     retire that file's last `text-[…rem]` arbitrary values at pixel parity).
+     Naming: `-plus`/`-minus` sit just above/below the nearest Tailwind anchor;
+     `-sub` is a second "just under <anchor>" step used where that anchor's
+     `-minus` is already taken above at a different size.
+       xs-plus     12.8px  mode-home action description (≥sm)
+       sm-plus     15.2px  mode-home subtitle + action title (≥sm)
+       base-sub    15.7px  mode-home action title (base)
+       2xl-sub     23.2px  compact mode-home hero heading (base)
+       3xl-sub     29.6px  mode-home hero heading (base)
+       3xl-plus    30.4px  mode-home hero heading (≥sm)
+       4xl-minus   34.4px  mode-home hero heading (≥lg) */
   --text-4xs: 0.5rem;
   --text-3xs: 0.625rem;
   --text-2xs: 0.6875rem;
@@ -68,6 +81,13 @@
   --text-lg-minus: 1.0625rem;
   --text-2xl-minus: 1.375rem;
   --text-3xl-minus: 1.625rem;
+  --text-xs-plus: 0.8rem;
+  --text-sm-plus: 0.95rem;
+  --text-base-sub: 0.98rem;
+  --text-2xl-sub: 1.45rem;
+  --text-3xl-sub: 1.85rem;
+  --text-3xl-plus: 1.9rem;
+  --text-4xl-minus: 2.15rem;
 
   /* Font families: bind Tailwind's font-sans / font-mono to the loaded Geist
      faces (variables set on <html> by next/font). font-mono is used for

src/components/mode-home-template.tsx

@@ -90,15 +90,15 @@ export function ModeHomeHero({
         <Heading
           id={`${testId ?? "mode-home"}-title`}
           className={cn(
-            "text-balance font-extrabold leading-[1.05] tracking-normal text-[color:var(--text-heading)] sm:text-[1.9rem] lg:text-[2.15rem]",
-            compact ? "text-[1.45rem]" : "text-[1.85rem]",
+            "text-balance font-extrabold leading-[1.05] tracking-normal text-[color:var(--text-heading)] sm:text-3xl-plus lg:text-4xl-minus",
+            compact ? "text-2xl-sub" : "text-3xl-sub",
           )}
         >
           {title}
         </Heading>
         <p
           className={cn(
-            "mx-auto max-w-2xl text-pretty text-sm font-medium text-[color:var(--text-muted)] sm:text-[0.95rem] sm:leading-5 lg:text-base",
+            "mx-auto max-w-2xl text-pretty text-sm font-medium text-[color:var(--text-muted)] sm:text-sm-plus sm:leading-5 lg:text-base",
             compact ? "leading-5" : "leading-6",
           )}
         >
@@ -245,10 +245,10 @@ export function ModeHomeTemplate({
                   <ActionIcon className="h-5 w-5 sm:h-6 sm:w-6" aria-hidden="true" />
                 </span>
                 <span className="min-w-0">
-                  <span className="block text-balance text-[0.98rem] font-bold leading-5 text-[color:var(--text-heading)] [overflow-wrap:anywhere] sm:text-[0.95rem]">
+                  <span className="block text-balance text-base-sub font-bold leading-5 text-[color:var(--text-heading)] [overflow-wrap:anywhere] sm:text-sm-plus">
                     {action.title}
                   </span>
-                  <span className="mt-1 block text-xs font-medium leading-5 text-[color:var(--text-muted)] sm:text-[0.8rem] sm:leading-[1.3]">
+                  <span className="mt-1 block text-xs font-medium leading-5 text-[color:var(--text-muted)] sm:text-xs-plus sm:leading-[1.3]">
                     {action.description}
                   </span>
                 </span>