/* LoanHank public stylesheet — generated. Edit standalone/src/styles/*.css. */
/* Generated by standalone/build/build-styles.mjs — do not edit.
   Self-hosted latin-subset WOFF2. No third-party font request is made. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/archivo-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/archivo-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/archivo-latin-900-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/barlow-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/barlow-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/barlow-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/barlow-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dm-mono-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* design/tokens/colors.css */
/* LoanHank color tokens — every hue sampled from the Hank artwork (assets/hank-inspecting.png).
   Light is the default; dark mode scopes under [data-theme="dark"]. */
:root{
/* base — navy ink (Hank's outlines + overalls) */
--navy-950:#0A1B2E;--navy-900:#132B47;--navy-800:#1B3A5E;--navy-700:#21436B;--navy-500:#4A6584;--navy-300:#9FB2C6;
/* base — cream (shirt + cap panel) */
--cream-050:#FDF8EC;--cream-100:#FAF3E1;--cream-200:#F6EEDB;--cream-300:#EFE3C8;--cream-400:#E2D2AE;
/* base — cap-X green (brand accent + primary action) */
--green-800:#2A472C;--green-700:#335636;--green-600:#477443;--green-400:#7FA46F;--green-200:#D8E4CE;--green-100:#E8EEDD;
/* base — boot copper (warm secondary) */
--copper-800:#5F4025;--copper-700:#71543F;--copper-600:#8A5A36;--copper-400:#C79463;--copper-200:#EBD9BF;--copper-100:#F3E8D4;
/* base — semantic hues */
--red-700:#983325;--red-800:#7C2417;--red-100:#F4DFD7;--gold-700:#7A6118;--gold-100:#F2E8C6;--white:#FFFFFF;
/* surfaces */
--bg:var(--cream-200);--surface:var(--white);--surface-warm:var(--cream-100);--surface-sunken:#EFE6CD;--surface-hero:var(--navy-900);
/* text */
--ink:var(--navy-900);--text-muted:#54677D;--text-faint:#7C8CA0;--text-on-hero:var(--cream-050);--text-muted-on-hero:#B9C6D6;
/* lines + sticker outline */
--line:rgba(19,43,71,.16);--line-strong:rgba(19,43,71,.30);--line-cream:#E7DBBD;--outline-sticker:var(--navy-900);
/* actions */
--action:var(--green-700);--action-hover:var(--green-800);--action-ink:var(--cream-050);--action-text:var(--green-800);
--accent-warm:var(--copper-600);--accent-warm-ink:var(--copper-800);--accent-warm-bg:var(--copper-100);
--danger:var(--red-700);--danger-hover:var(--red-800);--danger-ink:#FFF6F0;
--focus:#8A5A36;
/* provenance badges — Known / Estimated / Scenario / External reference */
--prov-known-bg:var(--green-100);--prov-known-ink:var(--green-800);--prov-known-dot:var(--green-600);
--prov-est-bg:#F3E5CC;--prov-est-ink:#6E4A22;--prov-est-dot:#B07B3E;
--prov-scen-bg:#E4E9F1;--prov-scen-ink:var(--navy-700);--prov-scen-dot:var(--navy-500);
--prov-ext-bg:transparent;--prov-ext-ink:#54677D;--prov-ext-dot:#8B99AB;
/* status */
--ok:var(--green-700);--warn:var(--gold-700);--warn-bg:var(--gold-100);--info-bg:#E4E9F1;--info-ink:var(--navy-700);
/* a "this scenario is worse" tint — the delta chip and the rotated verdict stamp when the reading is unfavourable */
--delta-bad-bg:var(--red-100);--delta-bad-ink:var(--red-800);
/* balance-over-time chart: current-terms line, scenario line (grid uses --line, marker uses --accent-warm) */
--chart-current:var(--navy-500);--chart-scenario:var(--green-600);
}
[data-theme="dark"]{
--bg:#0F1D31;--surface:#182B44;--surface-warm:#1D3049;--surface-sunken:#0B1727;--surface-hero:#182B44;
--ink:#F2EAD7;--text-muted:#A8B6C8;--text-faint:#8496AC;--text-on-hero:#F2EAD7;--text-muted-on-hero:#A8B6C8;
--line:rgba(242,234,215,.15);--line-strong:rgba(242,234,215,.30);--line-cream:rgba(242,234,215,.15);--outline-sticker:#0A1B2E;
--action:#477443;--action-hover:#335636;--action-ink:#FDF8EC;--action-text:#9CC489;
--accent-warm:#C79463;--accent-warm-ink:#E4C193;--accent-warm-bg:#3A2E1F;
--danger:#A84031;--danger-hover:#8A2E20;--danger-ink:#FFF6F0;--focus:#C79463;
--prov-known-bg:#24402A;--prov-known-ink:#BFDCAF;--prov-known-dot:#7FA46F;
--prov-est-bg:#453722;--prov-est-ink:#E4C193;--prov-est-dot:#C79463;
--prov-scen-bg:#1F334F;--prov-scen-ink:#B7C9E0;--prov-scen-dot:#7A93B5;
--prov-ext-bg:transparent;--prov-ext-ink:#A8B6C8;--prov-ext-dot:#8496AC;
--ok:#9CC489;--warn:#D9BC5E;--warn-bg:#3D3418;--info-bg:#1F334F;--info-ink:#B7C9E0;
--delta-bad-bg:#3D211B;--delta-bad-ink:#E8A99A;
--chart-current:var(--navy-300);--chart-scenario:var(--green-600);
}
/* Public pages ship no client JS, so [data-theme="dark"] — which needs a
   script to set the attribute — can never activate there. This mirrors the
   block above under the OS preference instead, scoped to
   :root:not([data-theme="light"]) so a future manual toggle (which sets the
   attribute) still wins over the OS setting. Keep in sync with the block
   above by hand; both are reviewed, low-churn token edits. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#0F1D31;--surface:#182B44;--surface-warm:#1D3049;--surface-sunken:#0B1727;--surface-hero:#182B44;
--ink:#F2EAD7;--text-muted:#A8B6C8;--text-faint:#8496AC;--text-on-hero:#F2EAD7;--text-muted-on-hero:#A8B6C8;
--line:rgba(242,234,215,.15);--line-strong:rgba(242,234,215,.30);--line-cream:rgba(242,234,215,.15);--outline-sticker:#0A1B2E;
--action:#477443;--action-hover:#335636;--action-ink:#FDF8EC;--action-text:#9CC489;
--accent-warm:#C79463;--accent-warm-ink:#E4C193;--accent-warm-bg:#3A2E1F;
--danger:#A84031;--danger-hover:#8A2E20;--danger-ink:#FFF6F0;--focus:#C79463;
--prov-known-bg:#24402A;--prov-known-ink:#BFDCAF;--prov-known-dot:#7FA46F;
--prov-est-bg:#453722;--prov-est-ink:#E4C193;--prov-est-dot:#C79463;
--prov-scen-bg:#1F334F;--prov-scen-ink:#B7C9E0;--prov-scen-dot:#7A93B5;
--prov-ext-bg:transparent;--prov-ext-ink:#A8B6C8;--prov-ext-dot:#8496AC;
--ok:#9CC489;--warn:#D9BC5E;--warn-bg:#3D3418;--info-bg:#1F334F;--info-ink:#B7C9E0;
--delta-bad-bg:#3D211B;--delta-bad-ink:#E8A99A;
--chart-current:var(--navy-300);--chart-scenario:var(--green-600);
}
}
/* design/tokens/spacing.css */
/* LoanHank spacing — 8-point grid, 4px half-step */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
--gutter:16px;--gutter-wide:32px;--content-max:720px;--page-max:1080px;
--tap-min:44px;--control-h:52px;--control-h-sm:44px;
--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
}
/* design/tokens/radii-shadows.css */
/* LoanHank radii, borders, elevation, motion */
:root{
--radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:18px;--radius-xl:24px;--radius-sheet:28px;--radius-pill:999px;
/* sticker system: sturdy navy outline + solid underside — buttons, badges, mascot plates ONLY */
--border-sticker:2px solid var(--outline-sticker);--shadow-sticker:0 2px 0 var(--outline-sticker);--shadow-sticker-lg:0 3px 0 var(--outline-sticker);
/* calm system: hairlines + soft shadows — cards, data surfaces */
--border-hairline:1px solid var(--line);
--shadow-card:0 1px 2px rgba(19,43,71,.05),0 6px 16px rgba(19,43,71,.06);
--shadow-raised:0 2px 6px rgba(19,43,71,.08),0 16px 32px rgba(19,43,71,.10);
--shadow-sheet:0 -18px 48px rgba(10,27,46,.24);
--blur-frost:saturate(1.4) blur(18px);/* @kind other */
/* motion */
--dur-fast:140ms;/* @kind other */--dur-med:220ms;/* @kind other */--dur-slow:340ms;/* @kind other */
--ease-out:cubic-bezier(.2,.7,.3,1);/* @kind other */--ease-spring:cubic-bezier(.24,.9,.32,1.14);/* @kind other */
}
[data-theme="dark"]{--shadow-card:0 1px 2px rgba(0,0,0,.25),0 6px 16px rgba(0,0,0,.28);--shadow-raised:0 2px 6px rgba(0,0,0,.3),0 16px 32px rgba(0,0,0,.34)}
/* See colors.css for why this duplicates under the OS preference too. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--shadow-card:0 1px 2px rgba(0,0,0,.25),0 6px 16px rgba(0,0,0,.28);--shadow-raised:0 2px 6px rgba(0,0,0,.3),0 16px 32px rgba(0,0,0,.34)}}
/* design/tokens/typography.css */
/* LoanHank typography — all sans: Archivo (bold display + money) / Barlow (UI + data) / DM Mono (ledger labels) */
:root{
--font-display:"Archivo",-apple-system,"Helvetica Neue",Arial,sans-serif;
--font-sans:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--font-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
/* scale (mobile-first) */
--text-hero:clamp(2.625rem,10vw,3.5rem);--lh-hero:1.02;/* @kind other */      /* Archivo 900 — hero money + headlines */
--text-display:2.125rem;--lh-display:1.08;/* @kind other */                    /* Archivo 800 — section titles */
--text-heading:1.625rem;--lh-heading:1.15;/* @kind other */                    /* Archivo 800 — sheet + card titles */
--text-title:1.0625rem;--lh-title:1.3;/* @kind other */                        /* Barlow 700 — row + tile titles */
--text-body:0.9375rem;--lh-body:1.55;/* @kind other */
--text-small:0.8125rem;--lh-small:1.5;/* @kind other */
--text-caption:0.75rem;--lh-caption:1.45;/* @kind other */
--text-label:0.65625rem;--ls-label:.09em;/* @kind other */                     /* DM Mono 500 caps — kickers, provenance */
--text-metric:1.375rem;                                       /* Archivo 800 — metric-tile values */
}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--lh-body);font-weight:500;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,.lh-display{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;margin:0}
a{color:var(--action-text);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--action-hover)}
[data-theme="dark"] a:hover{color:var(--action-text);opacity:.85}
strong{font-weight:700}
.num,[data-num],input,td.num{font-variant-numeric:tabular-nums lining-nums}
.kicker{font:500 var(--text-label)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
::selection{background:var(--green-200);color:var(--navy-900)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* LoanHank shared primitives.
   Colour, spacing, radius, and type values come from design/tokens only.
   No inline style attribute is used anywhere, so the CSP can keep
   `style-src 'self'` with no `unsafe-inline`.

   This file is the single shared layer between the two build pipelines: the
   SSR public-page bundle (build-styles.mjs concatenates this + public.css
   into standalone/public/assets/loanhank.css) and the React app bundle
   (Vite imports this + app.css via main.tsx). A class defined here means the
   same thing on every route — public or app — with identical markup on
   both sides where a component has both an SSR and a React version (see
   standalone/src/ssr/chrome.ts and standalone/src/app/chrome/*.tsx). */

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body { min-height: 100dvh; min-width: 320px; }

img { max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }

ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

/* --- Page shell -----------------------------------------------------------
   .lh-page is the full-height flex-column root, identical whether it's the
   SSR <body> or the SPA's root <div>. .lh-shell is the horizontal
   constraint, composed wherever content needs to be capped and centered —
   at the <main> level on app routes (which have no full-bleed section), or
   per-section on public routes (which do: the Home hero is deliberately
   full-bleed, so public bodies constrain each section individually rather
   than the whole <main>). .lh-shell-main carries the vertical rhythm and the
   safe-area clearance every route needs above its tab bar. */

.lh-page { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.lh-page > main { flex: 1; }

.lh-shell {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Vertical rhythm only — horizontal constraint always comes from .lh-shell,
   composed either on <main> itself (app routes, no full-bleed sections) or
   per-section (public routes, whose hero is deliberately full-bleed). Keeping
   the gutter in exactly one place is what makes the content edge land on the
   same pixel on every page. */
.lh-shell-main {
  padding-block: var(--space-6) calc(var(--space-16) + var(--safe-bottom));
}

/* A full-bleed hero sits flush under the header. Without this the
   container's top rhythm shows as a band of page background between the
   two. Specificity beats the wider-viewport padding rule below, so it
   holds at every width. */
.lh-shell-main:has(> .lh-hero-band:first-child) { padding-top: 0; }

/* Icon default size.
   Every icon is a <svg viewBox="0 0 24 24"> with no width/height, so
   without this it would lay out at the replaced-element default of
   300x150. Containers that want another size override with a more
   specific selector (.lh-tabbar svg, .lh-upload-tile svg, and so on).

   The container selectors below repeat the size deliberately. HTML and
   CSS have different cache lifetimes — public HTML is edge-cached for a
   day, assets for an hour — so after a deploy a browser can pair new CSS
   with old markup that predates the .lh-icon class. Sizing by container
   too means an icon is never left at 300x150 during that window. */
.lh-icon { flex: none; width: 20px; height: 20px; }
.lh-btn > svg,
.lh-btn-text > svg,
.lh-prov > svg { flex: none; width: 20px; height: 20px; }

.lh-skip {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: var(--border-sticker);
  box-shadow: var(--shadow-sticker);
  font-weight: 700;
  text-decoration: none;
}
.lh-skip:focus { left: var(--space-4); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Brand lockup ------------------------------------------------------- */

.lh-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
  min-height: var(--tap-min);
}
.lh-plate {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--cream-100);
  border: var(--border-sticker);
  box-shadow: var(--shadow-sticker);
  overflow: hidden;
}
.lh-plate img { width: 34px; height: 34px; margin-top: 3px; }
.lh-plate-lg { width: 132px; height: 132px; border-radius: var(--radius-xl); box-shadow: var(--shadow-sticker-lg); }
.lh-plate-lg img { width: 112px; height: 112px; margin-top: 8px; }
.lh-plate-xl { width: 176px; height: 176px; border-radius: var(--radius-xl); box-shadow: var(--shadow-sticker-lg); }
.lh-plate-xl img { width: 150px; height: 150px; margin-top: 10px; }
.lh-plate-sm { width: 34px; height: 34px; border-radius: var(--radius-xs); box-shadow: 0 1px 0 var(--outline-sticker); }
.lh-plate-sm img { width: 28px; height: 28px; margin-top: 2px; }

.lh-word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3125rem;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}
.lh-word b { color: var(--green-700); font-weight: 900; }
[data-theme="dark"] .lh-word { color: var(--ink); }
[data-theme="dark"] .lh-word b { color: var(--action-text); }

.lh-kicker {
  font: 500 var(--text-label) / 1 var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Header ---------------------------------------------------------------
   One header, every route. Sticky and frosted, matching the design mockup's
   AppHeader. The only thing that varies is the right-hand status slot,
   which public routes never render (no user state in public HTML) and app
   routes always do (session-aware). Counterpart: ssr/chrome.ts renderHeader()
   and app/chrome/Header.tsx. */

.lh-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: var(--blur-frost);
  -webkit-backdrop-filter: var(--blur-frost);
  border-bottom: 1px solid var(--line);
}
.lh-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding-block: var(--safe-top) 0;
}
.lh-header .lh-word { font-size: 1.125rem; }
.lh-header-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  color: var(--text-muted);
  min-width: 0;
}
.lh-privacy-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

/* --- Footer -----------------------------------------------------------
   One footer, every route, including app routes (new — the app shell had
   none before). This is where the site links (How it works / Learn /
   Privacy) live; the tab bar never carries them. Counterpart:
   ssr/chrome.ts renderFooter() and app/chrome/Footer.tsx. */

.lh-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-warm);
  padding-block: var(--space-8);
  padding-bottom: calc(var(--space-8) + var(--safe-bottom));
  margin-top: var(--space-8);
}
.lh-footer .lh-footnote { max-width: 78ch; }
.lh-footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); }
.lh-footer-nav a { font-size: var(--text-small); display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* --- Tab bar / navigation rail ------------------------------------------
   Bottom bar under 760px, left rail at/above it. Every route gets this —
   public pages render plain, uninterecpted <a href> tags with
   server-computed aria-current; the SPA intercepts the 3 in-app tabs and
   leaves Home as a real link (see app/chrome/Nav.tsx). Counterpart:
   ssr/chrome.ts renderTabBar(). */

.lh-tabbar {
  position: fixed;
  z-index: 30;
  inset: auto 0 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: var(--space-1) var(--space-2) var(--safe-bottom);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: var(--blur-frost);
  -webkit-backdrop-filter: var(--blur-frost);
  border-top: 1px solid var(--line);
}
.lh-tabbar a {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: var(--tap-min);
  padding: var(--space-2) 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  position: relative;
}
.lh-tabbar a[aria-current="page"] { color: var(--action-text); }
.lh-tabbar svg { width: 22px; height: 22px; }
.lh-tab-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; }
.lh-tab-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 20px);
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent-warm);
  color: var(--cream-050);
  font: 700 0.625rem / 1 var(--font-sans);
}

/* --- Buttons: the sticker system ---------------------------------------- */

.lh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font: 700 0.9375rem / 1 var(--font-sans);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.lh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lh-btn-sm { min-height: var(--control-h-sm); padding: 0 var(--space-4); font-size: 0.875rem; }
.lh-btn-lg { min-height: 56px; padding: 0 var(--space-6); font-size: 1rem; }
.lh-btn-full { width: 100%; }

.lh-btn-primary {
  background: var(--action);
  color: var(--action-ink);
  border: var(--border-sticker);
  box-shadow: var(--shadow-sticker);
}
.lh-btn-primary:hover:not(:disabled) { background: var(--action-hover); color: var(--action-ink); }

.lh-btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: var(--border-sticker);
  box-shadow: var(--shadow-sticker);
}
.lh-btn-secondary:hover:not(:disabled) { background: var(--surface-warm); color: var(--ink); }

.lh-btn-destructive {
  background: var(--danger);
  color: var(--danger-ink);
  border: var(--border-sticker);
  box-shadow: var(--shadow-sticker);
}
.lh-btn-destructive:hover:not(:disabled) { background: var(--danger-hover); color: var(--danger-ink); }

.lh-btn-primary:active:not(:disabled),
.lh-btn-secondary:active:not(:disabled),
.lh-btn-destructive:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--outline-sticker);
}

.lh-btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--action-text);
  font-weight: 600;
}
.lh-btn-text:hover:not(:disabled) { color: var(--action-hover); }
[data-theme="dark"] .lh-btn-text:hover:not(:disabled) { color: var(--action-text); opacity: 0.85; }

/* --- Provenance badges --------------------------------------------------
   Every badge is bound to real metadata at the call site. There is no
   decorative variant. */

.lh-prov {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font: 500 0.625rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lh-prov i { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.lh-prov-known { background: var(--prov-known-bg); color: var(--prov-known-ink); }
.lh-prov-known i { background: var(--prov-known-dot); }
.lh-prov-estimated { background: var(--prov-est-bg); color: var(--prov-est-ink); }
.lh-prov-estimated i { background: var(--prov-est-dot); }
.lh-prov-scenario { background: var(--prov-scen-bg); color: var(--prov-scen-ink); }
.lh-prov-scenario i { background: var(--prov-scen-dot); }
.lh-prov-external {
  background: var(--prov-ext-bg);
  color: var(--prov-ext-ink);
  border: 1px solid var(--line-strong);
}
.lh-prov-external i { width: 5px; height: 5px; background: none; border: 1.5px solid var(--prov-ext-dot); }

.lh-prov-on-hero { background: rgba(253, 248, 236, 0.16); color: var(--text-on-hero); }
.lh-prov-on-hero i { background: var(--text-on-hero); }

/* --- Surfaces ----------------------------------------------------------- */

.lh-card {
  background: var(--surface);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.lh-card h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-title); margin-bottom: var(--space-2); }
.lh-card p { color: var(--text-muted); font-size: var(--text-small); line-height: var(--lh-small); }

.lh-note {
  border-radius: var(--radius-md);
  background: var(--info-bg);
  color: var(--info-ink);
  padding: var(--space-4);
  font-size: var(--text-small);
  line-height: var(--lh-small);
}
.lh-note-warn { background: var(--warn-bg); color: var(--gold-700); }
.lh-note-danger { background: var(--red-100); color: var(--red-800); }
[data-theme="dark"] .lh-note-danger { background: #40201A; color: #F0BFB3; }

/* --- Page / section rhythm ------------------------------------------------
   .lh-page-head opens a screen (kicker + h1 + lede). .lh-section is the
   vertical-rhythm unit between stacked sections; .lh-section-band adds the
   divider public long-form pages use between them (suppressed on the first
   section). .lh-stack is the generic grid-of-cards list, with column
   modifiers for wherever a grid (not a single column) is wanted. */

.lh-page-head { margin-bottom: var(--space-5); }
.lh-page-head h1 {
  font-size: var(--text-display);
  line-height: var(--lh-display);
  margin-top: var(--space-2);
  max-width: 20ch;
}
.lh-page-head p { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-small); line-height: var(--lh-small); }

.lh-section { margin-top: var(--space-8); }
.lh-section-band { padding-top: var(--space-8); margin-top: 0; border-top: 1px solid var(--line); }
.lh-section-band:first-child { border-top: 0; padding-top: 0; }
.lh-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.lh-section-head h2 { font-size: var(--text-heading); line-height: var(--lh-heading); }
.lh-section > h2, .lh-section-band > h2 {
  font-size: var(--text-heading);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-4);
}

.lh-stack { display: grid; gap: var(--space-3); }
.lh-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- Hero -------------------------------------------------------------
   .lh-hero carries the shared color/type treatment. .lh-hero-band is the
   full-bleed 2-column band with an art slot (Home only). .lh-hero-card is
   the bordered sticker card with no art slot (Result, Analyze). Two real
   visual variants of one pattern, not a forced merge. */

.lh-hero .lh-kicker { color: var(--text-muted-on-hero); }
.lh-hero p { color: var(--text-muted-on-hero); }
.lh-hero h1 {
  font-weight: 900;
  color: var(--text-on-hero);
  font-variant-numeric: tabular-nums lining-nums;
}

.lh-hero-band { background: var(--surface-hero); color: var(--text-on-hero); padding-block: var(--space-12); }
.lh-hero-band-inner { display: grid; gap: var(--space-8); align-items: center; }
.lh-hero-band h1 { font-size: var(--text-hero); line-height: var(--lh-hero); margin-block: var(--space-4); max-width: 18ch; }
.lh-hero-band h1 em { font-style: normal; color: var(--green-400); }
.lh-hero-band .lh-lede { color: var(--text-muted-on-hero); }
.lh-hero-art { display: flex; justify-content: center; }

.lh-hero-card {
  background: var(--surface-hero);
  color: var(--text-on-hero);
  border: var(--border-sticker);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sticker-lg);
  padding: var(--space-6);
}
.lh-hero-card h1 {
  font-size: var(--text-hero);
  line-height: var(--lh-hero);
  margin-block: var(--space-4) var(--space-2);
}
.lh-hero-card p { font-size: var(--text-small); line-height: var(--lh-small); }
.lh-hero-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

.lh-hero-band .lh-cta-row, .lh-hero-card .lh-cta-row { margin-top: var(--space-6); }

/* --- Metric tiles ---------------------------------------------------------
   Shared by the app screens' result/loan-detail tiles and the public Home
   page's sample X-Ray card. */

.lh-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-block: var(--space-5);
}
.lh-metric-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lh-metric { background: var(--surface); padding: var(--space-4) var(--space-3); min-width: 0; }
.lh-metric-label {
  display: block;
  font: 500 0.59375rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lh-metric-value {
  display: block;
  margin: var(--space-2) 0 var(--space-1);
  font: 800 var(--text-metric) var(--font-display);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lh-metric-sub { display: block; font-size: var(--text-caption); color: var(--text-muted); }

/* --- Shared text/list patterns ------------------------------------------ */

.lh-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.lh-lede { font-size: 1.0625rem; line-height: 1.6; color: var(--text-muted); max-width: 62ch; }
.lh-plain-list { display: grid; gap: var(--space-3); max-width: 72ch; }
.lh-plain-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-muted);
}
.lh-plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-400);
}

.lh-footnote { font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted); }

.num { font-variant-numeric: tabular-nums lining-nums; }

/* --- Larger viewports ----------------------------------------------------
   760px is the one shell/chrome breakpoint, used everywhere: nav rail,
   header/footer gutter, hero columns, stack columns. Content-specific grids
   ported per screen (e.g. a form's own 2-column layout) may keep their own
   breakpoint where 760px genuinely doesn't fit that content — see the
   screen's own stylesheet for any such exception and why. */

@media (min-width: 760px) {
  .lh-shell { padding-inline: var(--gutter-wide); }
  /* Clears space for the left rail (below). The header shifts right along
     with the rest of .lh-page's normal-flow content, so it never sits
     underneath the fixed rail. */
  .lh-page { padding-left: 88px; }
  .lh-shell-main { padding-block: var(--space-10) var(--space-16); }
  .lh-hero-band-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .lh-stack-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lh-stack-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lh-stack-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lh-tabbar {
    inset: 0 auto 0 0;
    width: 88px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 76px);
    align-content: center;
    padding: 0 var(--space-2);
    border-top: 0;
    border-right: 1px solid var(--line);
  }
  .lh-tab-badge { right: calc(50% - 24px); }
  .lh-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .lh-stack-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lh-stack-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 419px) {
  .lh-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lh-metric-grid > .lh-metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Public, server-rendered marketing and education pages — content not
   shared with the app screens. Shared chrome (page shell, header, footer,
   tab bar, container, section rhythm, hero, buttons, provenance, cards)
   lives in base.css; see that file's header comment.

   These pages ship no JavaScript, so every state here is CSS-only. */

.lh-microcopy {
  margin-top: var(--space-4);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted-on-hero);
  max-width: 52ch;
}

/* --- Home hero: country toggle, CTA, sample X-Ray card -------------------
   Static and non-interactive by necessity (this page ships no JS) — the
   country options are real links into the flow, pre-selecting a country;
   the card is illustrative, built from the product's own documented fixture
   numbers (context/12_TESTS_EVALS_ACCEPTANCE.md), not invented. */

.country-toggle {
  display: flex;
  gap: 2px;
  margin-top: var(--space-5);
  padding: 3px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--navy-950) 45%, transparent);
  max-width: 420px;
}
.country-toggle .ct-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  border-radius: var(--radius-pill);
  color: var(--text-muted-on-hero);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
}
.country-toggle .ct-option:hover { color: var(--text-on-hero); background: color-mix(in srgb, var(--cream-050) 12%, transparent); }
.ct-flag {
  flex: none;
  width: 21px;
  height: 15.75px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--navy-950) 28%, transparent);
}
.ct-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-cta { max-width: 420px; justify-content: space-between; }
.hero-micro {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted-on-hero);
}
.hero-micro svg { flex: none; width: 16px; height: 16px; }

.hero-preview { display: flex; flex-direction: column; gap: var(--space-3); }

.preview-card {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: var(--space-5);
}
.preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.preview-amount {
  margin: var(--space-2) 0 0;
  font: 900 clamp(1.875rem, 4.5vw, 2.5rem) / 1.04 var(--font-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.preview-amount-suffix { font-size: 0.45em; font-weight: 700; color: var(--text-muted); }
.preview-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 4px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--text-muted);
}

.verdict-stamp {
  flex: none;
  font: 800 0.8125rem var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--delta-bad-ink);
  border: 2.5px solid var(--delta-bad-ink);
  border-radius: 6px;
  padding: 4px 9px;
  background: var(--delta-bad-bg);
  transform: rotate(-3deg);
}

.savings-callout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--prov-known-bg);
}
.savings-callout > div { flex: 1; min-width: 0; }
.savings-callout svg { flex: none; width: 20px; height: 20px; color: var(--prov-known-ink); }
.savings-callout strong { display: block; font: 800 1.5rem / 1 var(--font-display); color: var(--prov-known-ink); }
.savings-callout span { display: block; margin-top: 2px; font-size: var(--text-caption); font-weight: 600; color: var(--prov-known-ink); }

.verdict-rows { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.verdict-row { display: flex; align-items: flex-start; gap: 9px; font-size: var(--text-caption); font-weight: 500; line-height: 1.4; color: var(--ink); }
.verdict-row svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent-warm-ink); }
.verdict-row:last-child svg { color: var(--action-text); }
.verdict-row b { font-weight: 700; }

.preview-chart { margin-top: var(--space-4); }
.preview-chart svg { width: 100%; height: auto; display: block; }
.preview-chart-label { font: 600 10px var(--font-sans); fill: var(--accent-warm-ink); }
.preview-chart-x {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font: 500 0.53125rem var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.preview-card .lh-metric-grid { margin-block: var(--space-4) 0; }
.preview-card .lh-metric { padding: var(--space-3) var(--space-2); }
.preview-card .lh-metric-value { font-size: 1.03125rem; }

.preview-cap { margin-top: var(--space-3); font-size: var(--text-caption); color: var(--text-muted-on-hero); text-align: center; }

/* --- Page sections ------------------------------------------------------- */

.lh-prov-list { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.lh-prov-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.lh-prov-list p { font-size: var(--text-small); color: var(--text-muted); }

.lh-steps { display: grid; gap: var(--space-3); }
.lh-steps li {
  background: var(--surface);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.lh-step-index {
  display: block;
  font: 500 var(--text-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  color: var(--accent-warm);
  margin-bottom: var(--space-4);
}
.lh-steps h2 { font-size: var(--text-title); line-height: var(--lh-title); margin-bottom: var(--space-2); }
.lh-steps p { font-size: var(--text-small); line-height: var(--lh-small); color: var(--text-muted); }

.lh-prose { max-width: 72ch; }
.lh-prose h2 {
  font-size: var(--text-heading);
  line-height: var(--lh-heading);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.lh-prose h2:first-child { margin-top: 0; }
.lh-prose p { font-size: var(--text-body); line-height: 1.65; color: var(--text-muted); margin-bottom: var(--space-4); }
.lh-prose em { color: var(--ink); font-style: normal; font-weight: 700; }

.lh-operator-notice { margin-top: var(--space-6); }

@media (min-width: 760px) {
  .lh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lh-prov-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .lh-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}