/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ELEPHOUSE — Utopia Fluid Type & Space Tokens
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Configuration:
     Min viewport:  360px   — body font 16px (1rem)    — scale 1.2 (Minor Third)
     Max viewport:  1152px  — body font 18px (1.125rem) — scale 1.25 (Major Third)
     Steps:         -3 to +7 (11 steps total)

   Pre-filled calculator links:
     Type  → https://utopia.fyi/type/calculator?c=360,16,1.2,1152,18,1.25,7,3
     Space → https://utopia.fyi/space/calculator?c=360,16,1.2,1152,18,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* ── Fluid Type Scale ──────────────────────────────────────────

     ┌──────────────────────────────────────────────────────────────────────────┐
     │ Token         │ Step │ Min (360) │ Max (1152) │ Current value it covers │
     ├──────────────────────────────────────────────────────────────────────────┤
     │ --font-2xs    │  -3  │   9.3px   │    9.2px   │ 0.55–0.6rem (≈9–10px)  │
     │ --font-xs     │  -2  │  11.1px   │   11.5px   │ 0.65–0.75rem (≈10–12px)│
     │ --font-sm     │  -1  │  13.3px   │   14.4px   │ 0.8–0.95rem (≈13–15px) │
     │ --font-base   │   0  │  16.0px   │   18.0px   │ clamp(17px,1.8vw,19px) │
     │ --font-md     │  +1  │  19.2px   │   22.5px   │ 1.2–1.25rem (≈19–20px) │
     │ --font-lg     │  +2  │  23.0px   │   28.1px   │ —                      │
     │ --font-xl     │  +3  │  27.6px   │   35.2px   │ —                      │
     │ --font-2xl    │  +4  │  33.2px   │   43.9px   │ clamp(1.6rem…2.5rem)   │
     │ --font-3xl    │  +5  │  39.8px   │   54.9px   │ clamp(2.5rem…3.5rem)   │
     │ --font-4xl    │  +6  │  47.8px   │   68.7px   │ —                      │
     │ --font-5xl    │  +7  │  57.3px   │   85.8px   │ clamp(2.6rem…5.5rem)   │
     └──────────────────────────────────────────────────────────────────────────┘
  ────────────────────────────────────────────────────────────── */

  /* Negative steps (below body) */
  --font-2xs: clamp(0.576rem, 0.5799rem + -0.0055vw, 0.5787rem); /* step -3 │  9.3→9.2px  */
  --font-xs: clamp(0.6944rem, 0.6828rem + 0.0516vw, 0.72rem); /* step -2 │ 11.1→11.5px */
  --font-sm: clamp(0.8333rem, 0.803rem + 0.1347vw, 0.9rem); /* step -1 │ 13.3→14.4px */

  /* Base */
  --font-base: clamp(1rem, 0.9432rem + 0.2525vw, 1.125rem); /* step  0 │ 16→18px     */

  /* Positive steps (above body) */
  --font-md: clamp(1.2rem, 1.1062rem + 0.4167vw, 1.4063rem); /* step +1 │ 19.2→22.5px */
  --font-lg: clamp(1.44rem, 1.2955rem + 0.642vw, 1.7578rem); /* step +2 │ 23→28.1px   */
  --font-xl: clamp(1.728rem, 1.5147rem + 0.948vw, 2.1973rem); /* step +3 │ 27.6→35.2px */
  --font-2xl: clamp(2.0736rem, 1.7677rem + 1.3596vw, 2.7466rem); /* step +4 │ 33.2→43.9px */
  --font-3xl: clamp(2.4883rem, 2.0588rem + 1.9089vw, 3.4332rem); /* step +5 │ 39.8→54.9px */
  --font-4xl: clamp(2.986rem, 2.3926rem + 2.6375vw, 4.2915rem); /* step +6 │ 47.8→68.7px */
  --font-5xl: clamp(3.5832rem, 2.7735rem + 3.5985vw, 5.3644rem); /* step +7 │ 57.3→85.8px */

  /* ── Fluid Space Scale ─────────────────────────────────────────

     ┌──────────────────────────────────────────────────────────────────────────┐
     │ Token         │ Min (360) │ Max (1152) │ Current value it covers        │
     ├──────────────────────────────────────────────────────────────────────────┤
     │ --space-3xs   │    4px    │     5px    │ tiny gaps (0.2–0.4rem)         │
     │ --space-2xs   │    8px    │     9px    │ small gaps (0.45–0.6rem)       │
     │ --space-xs    │   12px    │    14px    │ element padding (0.75rem)      │
     │ --space-s     │   16px    │    18px    │ nav/footer pad, 1rem gaps      │
     │ --space-m     │   24px    │    27px    │ card padding (1.5–1.75rem)     │
     │ --space-l     │   32px    │    36px    │ pricing-col pad, 2rem values   │
     │ --space-xl    │   48px    │    54px    │ —                              │
     │ --space-2xl   │   64px    │    72px    │ —                              │
     │ --space-3xl   │   96px    │   108px    │ —                              │
     └──────────────────────────────────────────────────────────────────────────┘
  ────────────────────────────────────────────────────────────── */

  /* Individual values */
  --space-3xs: clamp(0.25rem, 0.2216rem + 0.1263vw, 0.3125rem); /*  4px →   5px */
  --space-2xs: clamp(0.5rem, 0.4716rem + 0.1263vw, 0.5625rem); /*  8px →   9px */
  --space-xs: clamp(0.75rem, 0.6932rem + 0.2525vw, 0.875rem); /* 12px →  14px */
  --space-s: clamp(1rem, 0.9432rem + 0.2525vw, 1.125rem); /* 16px →  18px */
  --space-m: clamp(1.5rem, 1.4148rem + 0.3788vw, 1.6875rem); /* 24px →  27px */
  --space-l: clamp(2rem, 1.8864rem + 0.5051vw, 2.25rem); /* 32px →  36px */
  --space-xl: clamp(3rem, 2.8295rem + 0.7576vw, 3.375rem); /* 48px →  54px */
  --space-2xl: clamp(4rem, 3.7727rem + 1.0101vw, 4.5rem); /* 64px →  72px */
  --space-3xl: clamp(6rem, 5.6591rem + 1.5152vw, 6.75rem); /* 96px → 108px */

  /* One-up pairs (more dramatic min→max scaling) */
  --space-3xs-2xs: clamp(0.25rem, 0.108rem + 0.6313vw, 0.5625rem); /*  4px →   9px */
  --space-2xs-xs: clamp(0.5rem, 0.3295rem + 0.7576vw, 0.875rem); /*  8px →  14px */
  --space-xs-s: clamp(0.75rem, 0.5795rem + 0.7576vw, 1.125rem); /* 12px →  18px */
  --space-s-m: clamp(1rem, 0.6875rem + 1.3889vw, 1.6875rem); /* 16px →  27px */
  --space-m-l: clamp(1.5rem, 1.1591rem + 1.5152vw, 2.25rem); /* 24px →  36px */
  --space-l-xl: clamp(2rem, 1.375rem + 2.7778vw, 3.375rem); /* 32px →  54px */
  --space-xl-2xl: clamp(3rem, 2.3182rem + 3.0303vw, 4.5rem); /* 48px →  72px */
  --space-2xl-3xl: clamp(4rem, 2.75rem + 5.5556vw, 6.75rem); /* 64px → 108px */

  /* Custom pairs — tailored for Elephouse layout patterns */
  --space-s-l: clamp(1rem, 0.4318rem + 2.5253vw, 2.25rem); /* 16px →  36px */
  --space-s-xl: clamp(1rem, -0.0795rem + 4.798vw, 3.375rem); /* 16px →  54px │ page gutter (--col) */
  --space-l-2xl: clamp(2rem, 0.8636rem + 5.0505vw, 4.5rem); /* 32px →  72px │ hero-body gap */
  --space-l-3xl: clamp(2rem, -0.1591rem + 9.596vw, 6.75rem); /* 32px → 108px │ manifesto/founder grid gap */
  --space-xl-3xl: clamp(3rem, 1.2955rem + 7.5758vw, 6.75rem); /* 48px → 108px │ hero padding-top */

  /* ── Brand Color Scale ────────────────────────────────────────
     Solid shades (dark → light):
  */
  --brand-deep: #002a17; /* not currently used — available for hover-on-dark or deep backgrounds */
  --brand: #004225; /* primary brand: footer bg, featured pricing bg, primary buttons, nav CTA, checkboxes, pull-quote border, testimonial-strip border */
  --brand-mid: #005c34; /* featured pricing CTA hover */
  --brand-light: #007a46; /* links, section-label, hero-eyebrow, beta-notice-label, status-live text, pricing-save text, primary button hover, featured pricing CTA, eyebrow line */
  --brand-muted: #3d8a64; /* btn-ghost text, search-field focus border, checkbox hover border */

  /* Brand alpha scale (opaque → transparent):
     0.25 → 0.18 → 0.10 → 0.07 → 0.03
  */
  --brand-soft: rgba(0, 66, 37, 0.25); /* visible borders: btn-ghost border-bottom, pricing-cta border */
  --brand-border: rgba(0, 66, 37, 0.18); /* subtle borders: beta-notice border, pricing-beta-notice border, footer border-top */
  --brand-tint: rgba(0, 66, 37, 0.1); /* bg tints: tag-today bg, status-live bg, pricing-save bg, decorative quote mark color */
  --brand-pale: rgba(0, 66, 37, 0.07); /* light bg fills: pricing-beta-notice bg */
  --brand-pale-light: rgba(0, 66, 37, 0.03); /* faintest hover: screenshot-row:hover, task-row:hover */

  /* Brand on dark — bright green for featured pricing column */
  --brand-bright: #7dd4a8; /* text on dark bg: "Beliebteste Wahl" label, featured save badge text, featured arrow markers */
  --brand-bright-pale: rgba(125, 212, 168, 0.15); /* tinted bg on dark: featured save badge bg */

  /* ── Paper Scale ────────────────────────────────────────────── */
  --paper: #fdfbf9; /* page bg, card bg, text on dark surfaces: nav-cta text, btn-primary text, screenshot bg, feature-screenshot bg, testimonial-card bg, featured pricing text, pricing-cta:hover text, footer text, search-area bg, search-field bg, checkbox checkmark color */
  --paper-2: #f3f0ec; /* slightly darker surface: nav-link:hover bg, screenshot-bar bg, beta-notice bg, feature-cell:hover bg, feature-screenshot-bar bg, testimonials section bg, nav-icon:hover bg */
  --paper-3: #e8e4de; /* medium tint: status-soon badge bg */
  --paper-dim: #c5bfb6; /* muted elements: screenshot-dot bg, feature-screenshot-dot bg, checkbox border, task-check border */
  --paper-fog: #9e9690; /* not currently used — available for placeholder text, disabled states */

  /* Paper on dark — alpha variants for use on --brand backgrounds */
  --paper-glass: rgba(253, 251, 249, 0.96); /* frosted glass: site-nav bg */
  --paper-80: rgba(253, 251, 249, 0.8); /* readable text on dark: featured pricing list items */
  --paper-50: rgba(253, 251, 249, 0.5); /* muted text on dark: featured pricing label, featured pricing period, footer links, footer-made */
  --paper-12: rgba(253, 251, 249, 0.12); /* subtle border on dark: featured pricing-features-list border */

  /* ── Text Scale ─────────────────────────────────────────────── */
  --text: #2a1f18; /* primary text: body, nav-brand, headlines, hero h1, section-title, pull-quote, feature-name, pricing-amount, founder-sig-name, strong tags, search-field text */
  --text-2: #3d3128; /* body prose: hero-text p, screenshot-task, beta-notice p, testimonial quotes, manifesto-body p, pricing-features li, founder-text p, task-title */
  --text-3: #6b5d52; /* secondary: nav-links, masthead, screenshot-body, feature-screenshot-body, feature-desc, status-soon text, pricing-subhead, pricing-period, nav-center, nav-icon */
  --text-4: #9a8b7e; /* tertiary: completed tasks, hashtags, screenshot-input placeholder, screenshot-caption, testimonial cite/author, feature-number, pricing-col-label, pricing arrow markers, founder-sig-role, search-field placeholder, task-tags, empty-hint */

  /* ── Functional Colors ──────────────────────────────────────── */
  --warn: #e05520; /* overdue/error: tag-overdue text */
  --warn-deep: #b8431a; /* not currently used — available for hover state on destructive actions */
  --warn-tint: rgba(224, 85, 32, 0.08); /* bg tint: tag-overdue bg */

  --gold: #b8860b; /* in-progress/attention: tag-soon text, status-building text */
  --gold-tint: rgba(184, 134, 11, 0.08); /* bg tint: tag-soon bg, status-building bg */

  --rule: rgba(
    42,
    31,
    24,
    0.12
  ); /* standard dividers: all section borders, hr lines, grid lines, feature-cell borders, pricing-col borders, pricing-features-list border, hero border, screenshot borders, input borders, search-field border, search-area border, founder-sig border */
  --rule-light: rgba(42, 31, 24, 0.08); /* lighter divider: testimonial-card border */
  --rule-strong: rgba(42, 31, 24, 0.2); /* heavier divider: masthead double border */

  --focus-ring-color: rgba(0, 122, 70, 0.08); /* focus state: input focus box-shadow */

  /* ── Typography Stacks (unchanged) ─────────────────────────── */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "DM Mono", monospace;

  /* ── Letter Spacing ────────────────────────────────────────── */
  --tracking-tight: -0.02em; /* headlines, display type */
  --tracking: 0.04em; /* buttons, nav links, CTAs */
  --tracking-wide: 0.05em; /* metadata, citations, footer */
  --tracking-wider: 0.1em; /* labels, eyebrows, col-labels */

  /* ── Line Height ───────────────────────────────────────────── */
  --leading: 1.65; /* body default */
  --leading-none: 1; /* single-line: tags, icons, pricing-amount */
  --leading-tight: 1.15; /* headlines: hero, section-title */
  --leading-snug: 1.4; /* tight prose: pricing features, pull-quote */
  --leading-normal: 1.5; /* textarea, relaxed prose */

  /* ── Font Weight ─────────────────────────────────────────────── */
  --weight-normal: 400; /* body default, reset override for headings */
  --weight-medium: 500; /* form labels */
  --weight-semi: 600; /* strong tags */
  --weight-bold: 700; /* headings, nav-brand, feature-name, dt */
  --weight-black: 900; /* hero headline, pricing-amount */

  /* ── Border Radius ─────────────────────────────────────────── */
  --radius-s: 3px; /* checkboxes, tags, status badges */
  --radius-m: 4px; /* buttons, nav links, inputs, rows */
  --radius-l: 6px; /* cards, grids, screenshots, search field */
  --radius-full: 9999px; /* pill shape: range input */

  /* ── Overlay ───────────────────────────────────────────────── */
  --overlay: rgba(0, 0, 0, 0.5); /* dialog backdrop */

  /* ── Borders ───────────────────────────────────────────────── */
  --border-width-thin: 1px; /* default border width: hr, table, fieldset, kbd */
  --border-style: solid; /* default border style: all borders */

  /* ── Icons ─────────────────────────────────────────────────── */
  --icon-size: 1em; /* svg default size — override per component */

  /* ── Composition Defaults ────────────────────────────────────────
     Configuration for Every Layout compositions.
     Override per-instance with inline custom properties:
       <div class="grid" style="--grid-min-size: 20rem">
  ────────────────────────────────────────────────────────────── */

  /* Flow (Stack) — vertical spacing between siblings */
  --flow-space: var(--space-s);

  /* Cluster — wrapping flex group (tags, buttons, nav) */
  --cluster-space: var(--space-s);
  --cluster-justify: flex-start;
  --cluster-align: center;

  /* Repel — space-between row (nav bars, header rows) */
  --repel-direction: row;
  --repel-vertical-alignment: center;
  --repel-gap: var(--space-s);

  /* Sidebar — two-column with fixed sidebar width */
  --sidebar-gap: var(--space-s);
  --sidebar-align: flex-start;
  --sidebar-size: 20rem;
  --sidebar-wrap-at: 50%;

  /* Switcher — row↔column based on container width */
  --switcher-space: var(--space-s);
  --switcher-threshold: 40rem;
  --switcher-vertical-alignment: flex-start;

  /* Grid — auto-responsive grid (no breakpoints) */
  --grid-min-size: 16rem;
  --grid-gap: var(--space-s);

  /* Ratio Grid — named column proportions */
  --ratio-grid-columns: 1fr 2fr;
  --ratio-grid-gap: var(--space-l-2xl);
  --ratio-grid-align: start;

  /* Box — padded container */
  --box-padding: var(--space-s);
  --box-border-width: 0;
  --box-border-color: currentColor;
  --box-color: inherit;
  --box-background: transparent;

  /* Cover — vertically centered hero/splash */
  --cover-min-height: 100dvh;
  --cover-space: var(--space-s);

  /* Center — horizontally centered with max-width */
  --center-measure: var(--measure, 54ch);
  --center-padding: var(--space-s);

  /* Frame — fixed aspect ratio container */
  --frame-ratio: 16 / 9;

  /* Reel — horizontal scroll strip */
  --reel-space: var(--space-s);
  --reel-padding: var(--space-s);
  --reel-thumb: var(--brand-light);
  --reel-track: transparent;
  --reel-item-width: auto;

  /* Icon — inline icon with text */
  --icon-space: 0.5em;

  /* Imposter — overlay/modal positioning */
  --positioning: absolute;

  /* Wrapper — page-level container */
  --wrapper-max-width: var(--max);
  --wrapper-padding-inline: var(--col);

  /* ── Links ─────────────────────────────────────────────────── */
  --link-decoration: underline; /* default link decoration — set to none in nav contexts */

  /* ── Form Controls ─────────────────────────────────────────── */
  --form-control-height: 2.5rem; /* textarea min-height, color input size */
  --form-control-toggle-size: 15px; /* checkbox/radio dimensions */

  /* ── Measure (readable line length) ────────────────────────── */
  --measure-narrow: 48ch; /* pricing-subhead */
  --measure: 54ch; /* founder-text, hero-text */
  --measure-wide: 58ch; /* manifesto-body */

  /* ── Layout ────────────────────────────────────────────────── */
  --max: 72rem;
  --col: var(--space-s-xl); /* 16px → 54px — page gutter */

  /* ── Semantic Mappings ─────────────────────────────────────────
     Contextual variable names used by global.css and blocks.
     These map roles to design tokens, making global.css portable
     and theming a matter of swapping this file.

     Override these inside blocks to invert contexts:
       .featured { --color-text: var(--paper); --color-bg: var(--brand); }
  ────────────────────────────────────────────────────────────── */

  /* Global */
  --color-text: var(--text);
  --color-text-muted: var(--text-3);
  --color-bg: var(--paper);
  --color-border: var(--rule);
  --color-link: var(--brand-light);
  --color-link-hover: var(--brand);
  --color-label: var(--text-2);
  --color-accent: var(--brand);
  --color-placeholder: var(--text-4);
  --color-placeholder-opacity: 0.5;
  --color-fill: var(--paper-2);
  --color-focus: var(--brand-muted);
  --color-focus-border: var(--brand-muted);
  --color-focus-ring: var(--focus-ring-color);
  --color-selection-bg: var(--brand);
  --color-selection-fg: var(--paper);
  --heading-font-family: var(--font-display);
  --form-control-font-family: inherit;

  /* Danger — destructive actions */
  --color-danger: var(--warn);
  --color-danger-hover: var(--warn-deep);

  /* Button */
  --button-display: inline-block;
  --button-font-family: var(--font-mono);
  --button-font-size: var(--font-sm);
  --button-line-height: var(--leading-snug);
  --button-letter-spacing: var(--tracking);
  --button-padding: var(--space-xs) var(--space-m);
  --button-border-radius: var(--radius-m);
  --button-border-color: var(--brand);
  --button-background-color: var(--brand);
  --button-color: var(--paper);
  --button-hover-background-color: var(--brand-light);
  --button-width: unset;

  /* Badge */
  --badge-font-family: var(--font-mono);
  --badge-font-size: var(--font-xs);
  --badge-letter-spacing: var(--tracking-wide);
  --badge-line-height: var(--leading-none);
  --badge-padding: var(--space-3xs) var(--space-2xs);
  --badge-border-radius: var(--radius-s);
  --badge-background-color: var(--paper-3);
  --badge-color: var(--text-3);

  /* Notice */
  --notice-font-family: var(--font-mono);
  --notice-font-size: var(--font-xs);
  --notice-letter-spacing: var(--tracking);
  --notice-padding: var(--space-2xs) var(--space-s);
  --notice-gap: var(--space-2xs);
  --notice-border-radius: var(--radius-m);
  --notice-background-color: var(--brand-pale);
  --notice-border-color: var(--brand-border);
  --notice-color: var(--brand);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   USAGE CHEAT-SHEET — Verified against every CSS rule in both files
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   LEGEND:
     ✓  = exact or near-exact match (< 1.5px difference)
     ~  = acceptable shift (1.5–4px) — intentional move to scale
     △  = notable shift (> 4px) — design decision, see notes

   ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY — landing.html
   ═══════════════════════════════════════════════════════════════

   Element                       │ Current           │ Proposed         │ Fit
   ──────────────────────────────┼───────────────────┼──────────────────┼────
   body                          │ clamp(17…19px)    │ --font-base      │ ~ body shrinks 1px at both ends
   .nav-brand                    │ 1.25rem (20px)    │ --font-md        │ ✓ 19.2→22.5px covers 20px
   .nav-links a                  │ 0.75rem (12px)    │ --font-xs        │ ✓ 11.5px ≈ 12px
   .nav-cta                      │ 0.75rem (12px)    │ --font-xs        │ ✓
   .masthead-inner               │ 0.7rem (11.2px)   │ --font-xs        │ ✓
   .hero-eyebrow                 │ 0.72rem (11.5px)  │ --font-xs        │ ✓ exact
   .hero-headline                │ clamp(41.6…88px)  │ --font-5xl       │ ~ 57.3→85.8px (mobile smaller, desktop -2px)
   .hero-text p                  │ 1.1rem (17.6px)   │ --font-base      │ ✓ 18px ≈ 17.6px
   .btn-primary                  │ 0.8rem (12.8px)   │ --font-sm        │ ~ 14.4px vs 12.8px (+1.6px) — keeps buttons readable
   .btn-ghost                    │ 0.8rem (12.8px)   │ --font-sm        │ ~ same as btn-primary
   .hero-screenshot-body         │ 0.72rem (11.5px)  │ --font-xs        │ ✓ exact
   .screenshot-check.done::after │ 0.55rem (8.8px)   │ --font-2xs       │ ✓ 9.2px ≈ 8.8px
   .screenshot-task              │ 0.78rem (12.5px)  │ --font-xs        │ ~ 11.5px vs 12.5px (-1px)
   .screenshot-hashtags          │ 0.55rem (8.8px)   │ --font-2xs       │ ✓
   .screenshot-tag               │ 0.58rem (9.3px)   │ --font-2xs       │ ✓ 9.2px ≈ 9.3px
   .screenshot-input-field       │ 0.72rem (11.5px)  │ --font-xs        │ ✓ exact
   .hero-screenshot-caption      │ 0.62rem (9.9px)   │ --font-2xs       │ ~ 9.2px vs 9.9px (-0.7px)
   .beta-notice-label            │ 0.65rem (10.4px)  │ --font-xs        │ ~ 11.5px vs 10.4px (+1.1px)
   .beta-notice p                │ 0.9rem (14.4px)   │ --font-sm        │ ✓ exact
   .testimonial-strip blockquote │ 0.95rem (15.2px)  │ --font-sm        │ ~ 14.4px vs 15.2px (-0.8px)
   .testimonial-strip cite       │ 0.7rem (11.2px)   │ --font-xs        │ ✓
   .section-label                │ 0.68rem (10.9px)  │ --font-xs        │ ✓
   .section-title                │ clamp(25.6…40px)  │ --font-2xl       │ ~ 33.2→43.9px (tighter range, max +4px)
   .manifesto-body p             │ 1.05rem (16.8px)  │ --font-base      │ ✓ 18px ≈ 16.8px
   .pull-quote p                 │ clamp(17.6…24px)  │ --font-lg        │ ~ 23→28.1px (keeps it a clear step above body)
   .feature-screenshot-body      │ 0.68rem (10.9px)  │ --font-xs        │ ✓
   .feature-screenshot .task     │ 0.72rem (11.5px)  │ --font-xs        │ ✓ exact
   .feature-number               │ 0.65rem (10.4px)  │ --font-xs        │ ~ 11.5px vs 10.4px (+1.1px)
   .feature-icon                 │ 1.5rem (24px)     │ --font-lg        │ ✓ decorative, 28px is fine
   .feature-name                 │ 1.05rem (16.8px)  │ --font-base      │ ✓ 18px ≈ 16.8px
   .feature-desc                 │ 0.88rem (14.1px)  │ --font-sm        │ ✓ 14.4px ≈ 14.1px
   .feature-status               │ 0.6rem (9.6px)    │ --font-2xs       │ ✓
   .testimonial-card blockquote  │ 0.95rem (15.2px)  │ --font-sm        │ ~ 14.4px vs 15.2px (-0.8px)
   .testimonial-author           │ 0.7rem (11.2px)   │ --font-xs        │ ✓
   .pricing-subhead              │ 1rem (16px)       │ --font-base      │ ✓ 16px = base min
   .pricing-beta-notice          │ 0.72rem (11.5px)  │ --font-xs        │ ✓ exact
   .pricing-col-label            │ 0.65rem (10.4px)  │ --font-xs        │ ~ 11.5px vs 10.4px (+1.1px)
   .pricing-amount               │ clamp(40…56px)    │ --font-3xl       │ ✓ 39.8→54.9px ≈ 40→56px
   .pricing-period               │ 0.72rem (11.5px)  │ --font-xs        │ ✓ exact
   .pricing-save                 │ 0.65rem (10.4px)  │ --font-xs        │ ~
   .pricing-features-list li     │ 0.88rem (14.1px)  │ --font-sm        │ ✓
   .pricing-features-list li::bf │ 0.75rem (12px)    │ --font-xs        │ ✓
   .pricing-cta                  │ 0.78rem (12.5px)  │ --font-xs        │ ~
   .founder-sig-name             │ 1.2rem (19.2px)   │ --font-md        │ ✓ 19.2px = exact md min
   .founder-sig-role             │ 0.68rem (10.9px)  │ --font-xs        │ ✓
   .footer-brand                 │ 1rem (16px)       │ --font-base      │ ✓
   .footer-links a               │ 0.7rem (11.2px)   │ --font-xs        │ ✓
   .footer-made                  │ 0.68rem (10.9px)  │ --font-xs        │ ✓

   ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY — tasks.html
   ═══════════════════════════════════════════════════════════════

   Element                       │ Current           │ Proposed         │ Fit
   ──────────────────────────────┼───────────────────┼──────────────────┼────
   body                          │ clamp(17…19px)    │ --font-base      │ ~
   .nav-brand                    │ 1.25rem (20px)    │ --font-md        │ ✓
   .nav-center                   │ 0.75rem (12px)    │ --font-xs        │ ✓
   .search-field                 │ 0.78rem (12.5px)  │ --font-xs        │ ~
   .task-title                   │ 0.92rem (14.7px)  │ --font-sm        │ ✓ 14.4px ≈ 14.7px
   .task-tags                    │ 0.62rem (9.9px)   │ --font-2xs       │ ~
   .task-tag                     │ 0.68rem (10.9px)  │ --font-xs        │ ✓
   .task-check::after            │ 0.5rem (8px)      │ --font-2xs       │ ~
   .empty-hint                   │ 0.72rem (11.5px)  │ --font-xs        │ ✓ exact

   ═══════════════════════════════════════════════════════════════
   SPACING — landing.html
   ═══════════════════════════════════════════════════════════════

   Element                       │ Current             │ Proposed               │ Fit
   ──────────────────────────────┼─────────────────────┼────────────────────────┼────
   .wrap padding-inline          │ clamp(24…64px)      │ --col (= --space-s-xl) │ ~ 16→54px (close to 24→64)
   .site-nav padding-block       │ 1rem (16px)         │ --space-s              │ ✓ 16→18px
   .site-nav .wrap gap           │ 1rem (16px)         │ --space-s              │ ✓
   .nav-brand gap                │ 0.4rem (6.4px)      │ --space-3xs            │ ~ 5px vs 6.4px
   .nav-links gap                │ 0.25rem (4px)       │ --space-3xs            │ ✓
   .nav-links a padding          │ 0.4rem 0.75rem      │ --space-3xs --space-xs │ ✓
   .nav-cta padding              │ 0.4rem 1rem         │ --space-3xs --space-s  │ ✓
   .masthead padding-block       │ 0.5rem (8px)        │ --space-2xs            │ ✓
   .masthead-inner gap           │ 1rem (16px)         │ --space-s              │ ✓
   .hero padding-block           │ clamp(48…96px)      │ --space-xl-3xl         │ ✓ 48→108px (close to 48→96)
                                 │ clamp(32…64px)      │ --space-l-xl           │ ✓ 32→54px (close to 32→64)
   .hero-eyebrow margin-bottom   │ 1.25rem (20px)      │ --space-s              │ ~ 18px vs 20px
   .hero-eyebrow gap             │ 0.75rem (12px)      │ --space-xs             │ ✓
   .hero-headline margin-bottom  │ 2rem (32px)         │ --space-l              │ ✓ 36px ≈ 32px
   .hero-body gap                │ clamp(32…80px)      │ --space-l-2xl          │ ✓ 32→72px (close to 32→80)
   .hero-text p margin-bottom    │ 1.25rem (20px)      │ --space-s              │ ~
   .hero-text p:last margin-bot  │ 2rem (32px)         │ --space-l              │ ✓
   .hero-actions gap             │ 1rem (16px)         │ --space-s              │ ✓
   .btn-primary padding          │ 0.75rem 1.5rem      │ --space-xs --space-m   │ ✓
   .btn-ghost padding            │ 0.75rem 0           │ --space-xs 0           │ ✓
   .hero-aside padding-top       │ 0.5rem (8px)        │ --space-2xs            │ ✓
   .hero-screenshot margin-bot   │ 1.5rem (24px)       │ --space-m              │ ✓
   .hero-screenshot-bar gap      │ 0.4rem (6.4px)      │ --space-3xs            │ ~
   .hero-screenshot-bar padding  │ 0.6rem 0.85rem      │ --space-2xs --space-xs │ ✓
   .hero-screenshot-body padding │ 1rem 1.1rem         │ --space-s              │ ✓
   .hero-screenshot-body gap     │ 0.35rem (5.6px)     │ --space-3xs            │ ✓
   .screenshot-row gap           │ 0.6rem (9.6px)      │ --space-2xs            │ ✓
   .screenshot-row padding       │ 0.4rem 0.5rem       │ --space-3xs --space-2xs│ ✓
   .screenshot-hashtags ml       │ 0.3rem (4.8px)      │ --space-3xs            │ ✓
   .screenshot-tag padding       │ 0.1rem 0.4rem       │ 0.1rem --space-3xs     │ ~ (0.1rem too small for any token)
   .screenshot-input mt          │ 0.5rem (8px)        │ --space-2xs            │ ✓
   .screenshot-input pt          │ 0.6rem (9.6px)      │ --space-2xs            │ ✓
   .screenshot-input gap         │ 0.5rem (8px)        │ --space-2xs            │ ✓
   .screenshot-input-field pad   │ 0.45rem 0.6rem      │ --space-2xs            │ ✓
   .hero-screenshot-caption mt   │ 0.6rem (9.6px)      │ --space-2xs            │ ✓
   .beta-notice padding          │ 1.25rem 1.5rem      │ --space-s --space-m    │ ✓
   .beta-notice margin-bottom    │ 1.5rem (24px)       │ --space-m              │ ✓
   .beta-notice-label mb         │ 0.5rem (8px)        │ --space-2xs            │ ✓
   .testimonial-strip pl         │ 1.25rem (20px)      │ --space-s              │ ~
   .testimonial-strip bq mb      │ 0.5rem (8px)        │ --space-2xs            │ ✓
   .section-label mb             │ 0.75rem (12px)      │ --space-xs             │ ✓
   .manifesto padding-block      │ clamp(48…80px)      │ --space-xl-2xl         │ ✓ 48→72px (close to 48→80)
   .manifesto .wrap gap          │ clamp(32…96px)      │ --space-l-3xl          │ ✓ 32→108px (close to 32→96)
   .manifesto-title .st mt       │ 0.75rem (12px)      │ --space-xs             │ ✓
   .manifesto-body p mb          │ 1.25rem (20px)      │ --space-s              │ ~
   .pull-quote padding-block     │ 1.25rem (20px)      │ --space-s              │ ~
   .pull-quote margin-block      │ 2rem (32px)         │ --space-l              │ ✓
   .features padding-block       │ clamp(48…80px)      │ --space-xl-2xl         │ ✓
   .features-header mb           │ 2.5rem (40px)       │ --space-l              │ ~ 36px vs 40px
   .features-header gap          │ 2rem (32px)         │ --space-l              │ ✓
   .feature-cell padding         │ 1.75rem (28px)      │ --space-m              │ ✓ 27px ≈ 28px
   .feature-cell.has-screenshot  │ 2rem (32px)         │ --space-l              │ ✓
     gap                         │ 2rem (32px)         │ --space-l              │ ✓
   .feature-screenshot-bar gap   │ 0.35rem (5.6px)     │ --space-3xs            │ ✓
   .feature-screenshot-bar pad   │ 0.5rem 0.75rem      │ --space-2xs --space-xs │ ✓
   .feature-screenshot-body pad  │ 0.75rem 0.9rem      │ --space-xs             │ ✓
   .feature-screenshot .row pad  │ 0.3rem 0.4rem       │ --space-3xs            │ ✓
   .feature-number mb            │ 0.75rem (12px)      │ --space-xs             │ ✓
   .feature-icon mb              │ 0.75rem (12px)      │ --space-xs             │ ✓
   .feature-name mb              │ 0.5rem (8px)        │ --space-2xs            │ ✓
   .feature-status mt            │ 0.75rem (12px)      │ --space-xs             │ ✓
   .feature-status padding       │ 0.2rem 0.5rem       │ --space-3xs --space-2xs│ ✓
   .testimonials padding-block   │ clamp(48…80px)      │ --space-xl-2xl         │ ✓
   .testimonials-header mb       │ 2.5rem (40px)       │ --space-l              │ ~
   .testimonials-grid gap        │ 1.5rem (24px)       │ --space-m              │ ✓
   .testimonial-card padding     │ 1.75rem (28px)      │ --space-m              │ ✓
   .testimonial-card bq mb       │ 1rem (16px)         │ --space-s              │ ✓
   .pricing padding-block        │ clamp(48…80px)      │ --space-xl-2xl         │ ✓
   .pricing-header mb            │ 0.5rem (8px)        │ --space-2xs            │ ✓
   .pricing-subhead mt           │ 0.75rem (12px)      │ --space-xs             │ ✓
   .pricing-beta-notice gap      │ 0.5rem (8px)        │ --space-2xs            │ ✓
   .pricing-beta-notice padding  │ 0.6rem 1rem         │ --space-2xs --space-s  │ ✓
   .pricing-beta-notice mb       │ 2rem (32px)         │ --space-l              │ ✓
   .pricing-col padding          │ 2rem (32px)         │ --space-l              │ ✓
   .pricing-col-label mb         │ 1rem (16px)         │ --space-s              │ ✓
   .pricing-amount mb            │ 0.25rem (4px)       │ --space-3xs            │ ✓
   .pricing-period mb            │ 1.5rem (24px)       │ --space-m              │ ✓
   .pricing-save padding         │ 0.15rem 0.5rem      │ 0.15rem --space-2xs    │ ~ (0.15rem too small for token)
   .pricing-save mb              │ 1.5rem (24px)       │ --space-m              │ ✓
   .pricing-features-list mb     │ 2rem (32px)         │ --space-l              │ ✓
   .pricing-features-list pt     │ 1.25rem (20px)      │ --space-s              │ ~
   .pricing-features-list li pb  │ 0.4rem (6.4px)      │ --space-3xs            │ ~
   .pricing-features-list li pl  │ 1.1rem (17.6px)     │ --space-s              │ ✓
   .pricing-cta padding          │ 0.75rem (12px)      │ --space-xs             │ ✓
   .founder padding-block        │ clamp(48…80px)      │ --space-xl-2xl         │ ✓
   .founder .wrap gap            │ clamp(32…96px)      │ --space-l-3xl          │ ✓
   .founder-text p mb            │ 1.25rem (20px)      │ --space-s              │ ~
   .founder-sig mt               │ 2rem (32px)         │ --space-l              │ ✓
   .founder-sig pt               │ 1.5rem (24px)       │ --space-m              │ ✓
   .founder-sig-name mb          │ 0.2rem (3.2px)      │ --space-3xs            │ ~ (3.2 vs 5px)
   .site-footer padding-block    │ 2rem (32px)         │ --space-l              │ ✓
   .site-footer .wrap gap        │ 1.5rem (24px)       │ --space-m              │ ✓
   .footer-links gap             │ 1.5rem (24px)       │ --space-m              │ ✓

   ═══════════════════════════════════════════════════════════════
   SPACING — tasks.html
   ═══════════════════════════════════════════════════════════════

   Element                       │ Current             │ Proposed               │ Fit
   ──────────────────────────────┼─────────────────────┼────────────────────────┼────
   .site-nav padding-block       │ 1rem (16px)         │ --space-s              │ ✓
   .nav-icons gap                │ 0.25rem (4px)       │ --space-3xs            │ ✓
   .content-area padding-inline  │ var(--col)          │ --col (= --space-s-l)  │ ✓
   .search-area padding (desk)   │ 1.25rem 0 0.6rem    │ --space-s 0 --space-2xs│ ✓
   .search-area padding (mob)    │ 0.6rem 0 1rem       │ --space-2xs 0 --space-s│ ✓
   .search-field padding         │ 0.6rem 1rem         │ --space-2xs --space-s  │ ✓
   .task-list padding (desk)     │ 0.5rem 0 2rem       │ --space-2xs 0 --space-l│ ✓
   .task-list gap                │ 0.15rem (2.4px)     │ --space-3xs            │ ~ (2.4 vs 5px — notable increase)
   .task-list padding (mob)      │ 0.75rem 0 1rem      │ --space-xs 0 --space-s │ ✓
   .task-row gap                 │ 0.75rem (12px)      │ --space-xs             │ ✓
   .task-row padding             │ 0.55rem 0.65rem     │ --space-2xs --space-2xs│ ✓
   .task-tags ml                 │ 0.4rem (6.4px)      │ --space-3xs            │ ~
   .task-tag padding             │ 0.2rem 0.55rem      │ --space-3xs --space-2xs│ ✓
   .empty-hint padding           │ 2.5rem 1rem         │ --space-l --space-s    │ ~ (40 vs 36px)


   ═══════════════════════════════════════════════════════════════
   NOTES
   ═══════════════════════════════════════════════════════════════

   ① --col (page gutter): Current clamp(24…64px) is now mapped to
     --space-s-xl (16→54px). Mobile is slightly tighter (16 vs 24px),
     desktop is slightly tighter (54 vs 64px), but both are within
     the Utopia system.

   ② Values under 4px (0.1rem, 0.15rem, 0.2rem) are too small
     for any space token. Keep these as raw values — they're
     decorative micro-spacing, not layout rhythm.

   ③ .task-list gap (2.4px → 5px via --space-3xs) is the largest
     proportional jump. If tasks feel too spaced, use a raw 2px
     or 3px value here instead.

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */