/* LicenceMap design system (overhaul 2026-07-09, DESIGN-OVERHAUL-2026-07-09.md)
   Refined dark-first "briefing room". One primitive palette consumed through
   semantic tokens; every legacy token name below is preserved as an alias so
   the whole surface re-skins from this block alone. Components never reference
   primitives directly in NEW code; use the semantic layer. */
:root {
  /* primitives: ink ramp (desaturated; elevation = lighter, never bluer) */
  --ink-950: #070A10;
  --ink-900: #0A0E16;
  --ink-850: #0D1219;
  --ink-800: #10151F;
  --ink-750: #141A26;
  --ink-700: #1A2130;
  --ink-600: #242D3F;
  /* primitives: text ramp */
  --grey-050: #F5F7FA;
  --grey-100: #EDF0F5;
  --grey-200: #D7DCE4;
  --grey-300: #C2C9D4;
  --grey-400: #98A1B0;
  --grey-450: #828C9D;
  /* WCAG floor (adversarial review 9 Jul): grey-500 was #6E7787 (4.05:1 on
     --surface-card) and grey-600 was #555E6D (3.03:1 on the footer's ink-950).
     Both carry real metadata text under 18px, so both are lifted to the
     minimum values that clear 4.5:1 on their darkest real backgrounds. */
  --grey-500: #767F8F;
  --grey-600: #707988;
  /* semantic: surfaces */
  --bg-page: var(--ink-900);
  --bg-band-alt: rgba(255,255,255,.012);
  --surface-card: var(--ink-800);
  --surface-deep: var(--ink-850);
  --surface-sunken: var(--ink-850);
  --surface-raised: var(--ink-700);
  --surface-footer: var(--ink-950);
  --grid-line: transparent;
  --bg-panel: var(--ink-850);
  --bg-panel-globe: #0B0F17;
  --bg-card-dark: var(--ink-800);
  --sphere-fill: var(--ink-850);
  /* brand blue (actions only) */
  --blue-600: #2563EB;
  --blue-500: #3B82F6;
  --blue-400: #60A5FA;
  --blue-300: #93C5FD;
  --blue-700: #1D4ED8;
  --blue-050: #DBEAFE;
  --accent: var(--blue-600);
  --accent-hover: var(--blue-500);
  /* semantic: text */
  --text-050: var(--grey-050);
  --text-100: var(--grey-100);
  --text-200: var(--grey-200);
  --text-300: var(--grey-300);
  --text-mute: var(--grey-400);
  --text-dot: var(--grey-450);
  --text-dim: var(--grey-500);
  --text-fnt: var(--grey-600);
  --text-primary: var(--grey-050);
  --text-secondary: var(--grey-200);
  --text-tertiary: var(--grey-400);
  --text-faint: var(--grey-500);
  --text: var(--grey-200);
  /* semantic: meaning */
  --emerald: #34D399;
  --amber: #FBBF24;
  --red: #F87171;
  --positive: var(--emerald);
  --caution: var(--amber);
  --negative: var(--red);
  --locked-mask: rgba(255,255,255,.28);
  /* lines */
  --border: rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.13);
  /* legacy aliases kept for templates */
  --navy: var(--text-050);
  --ink: var(--text-200);
  --slate: var(--text-mute);
  --line: var(--border);
  --green: var(--emerald);
  --gold: var(--blue-600);
  --gold-dark: var(--blue-700);
  --radius: 8px;
  --radius-ctl: 8px;
  --radius-card: 14px;
  --radius-lg: 20px;
  --shadow: 0 20px 50px rgba(0,0,0,.35);
  --elev-1: inset 0 1px 0 rgba(255,255,255,.04);
  --elev-2: 0 8px 24px rgba(0,0,0,.35);
  --elev-3: 0 24px 60px rgba(0,0,0,.5);
  /* motion */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 280ms;
  /* one family; hierarchy from size, weight and colour (spec 4.4) */
  --font: 'InterVariable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ui: 'InterVariable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'InterVariable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans: var(--font-ui);
  --font-code: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* DX-04 spacing scale — 4/8-pt grid. Migrate stylesheet px to the nearest
     step; see DESIGN-TOKENS.md. Values chosen so existing renders are preserved
     (nearest step within 2px of the prior hardcoded value). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 72px;
  --space-12: 88px;
  /* DX-04/DX-07 type scale — the small-text ramp the ad-hoc rem/px sizes drift
     around. Data/label contexts (mono) draw from the same steps. */
  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-base: .9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --danger: #B91C1C;
}

/* Self-hosted InterVariable (spec 4.4): removes the render-blocking Google
   Fonts CDN. Weight axis 100-900 in one file per subset; latin-ext loads only
   when a glyph needs it (unicode-range). */
@font-face {
  font-family: 'InterVariable';
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: 'InterVariable';
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-0303, U+0305-0307, U+0309-0323, U+0325-0328, U+032A-0331, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'InterVariable';
  src: url('/fonts/inter-latin-wght-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  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;
}

/* Tabular figures wherever numbers align (spec 4.4/4.8). */
.matrix td, .matrix th, .stat-n, .price, .figure-value, .cost-table td,
.cost-mid, .trace-body, .ro-row b, .deadline-date, .dim-chip-date, .upd-date,
.kn-value { font-variant-numeric: tabular-nums; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-ui); color: var(--text-300); line-height: 1.55; font-size: 15px;
  background: var(--bg-page);
  /* One barely-perceptible vignette; the grid background is gone (spec 4.3).
     The page goes quiet so the map and the data become the lit objects. */
  background-image: radial-gradient(1200px 640px at 18% -6%, rgba(37,99,235,.07), transparent 60%);
  background-attachment: fixed;
}
h1, h2, h3, .price { font-family: var(--font); color: var(--text-050); line-height: 1.15; font-weight: 600; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: -.022em; margin: 0 0 .55em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -.018em; margin: 0 0 .7em; }
h3 { font-size: 1.18rem; font-weight: 600; color: var(--text-100); margin: 0 0 .5em; }
a { color: var(--blue-400); }
a:hover { color: var(--blue-300); }
p { margin: 0 0 1em; }
img { max-width: 100%; }
code { font-family: var(--font-code); font-size: .85em; background: rgba(255,255,255,.06); border-radius: 4px; padding: 1px 5px; }
/* Metadata style (spec 4.4): one quiet voice for datelines, verified stamps,
   sources and captions. Replaces mono-as-texture. */
.meta-text { font-size: var(--text-xs); font-weight: 500; letter-spacing: .04em; color: var(--text-faint); }
.container { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.container-wide { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.narrow { max-width: 780px; }
.center { text-align: center; }
.muted { color: var(--text-mute); }
.small { font-size: .85rem; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { position: fixed; left: 8px; top: 8px; background: var(--surface-card); color: var(--text-100); padding: 8px 14px; z-index: 100; border-radius: 6px; border: 1px solid var(--blue-400); outline: 2px solid var(--blue-400); outline-offset: 1px; }

/* Eyebrow */
/* DX-07: section-label eyebrows move to the body UI face (mono reserved for
   numerals/data/code). Wide tracking + uppercase preserve the label rhythm. */
.eyebrow { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 1em; }

/* Header */
.site-header { background: rgba(11,17,32,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.nav-row { display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 16px; padding-top: 4px; padding-bottom: 4px; }
/* Wordmark (spec 4.2): one word, two capitals, weight-carried; the mark is a
   rounded square holding a 3x3 grid with one cell found. Monochrome ink. */
.brand { font-family: var(--font); font-size: 18px; font-weight: 650; color: var(--text-050); text-decoration: none; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 9px; }
.brand span { color: var(--text-050); }
.brand:hover { color: var(--text-050); }
.brand-mark { display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; color: var(--text-100); }
.brand-mark .found { fill: var(--accent); }
/* Legacy 4-square mark: still referenced by the admin header and report mocks. */
.logo-mark { display: inline-grid; grid-template-columns: 9px 9px; gap: 3px; margin-right: 11px; }
.logo-mark i { width: 9px; height: 9px; border-radius: 2px; background: var(--ink-600); }
.logo-mark i:first-child, .logo-mark i:last-child { background: var(--blue-600); }
.admin-tag { color: var(--amber); font-style: normal; font-size: .72rem; border: 1px solid var(--amber); border-radius: 4px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; letter-spacing: .05em; }
.main-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* DX-07: nav links move off the mono face to the body UI face (per O01: confine
   mono to numerals/data/code). Kept uppercase + tracking so the header rhythm is
   unchanged; only the letterforms soften for scannability. */
/* Sentence case (overhaul 4.4): nav reads as words, not chrome. */
.main-nav a { color: var(--text-mute); text-decoration: none; font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; letter-spacing: .01em; text-transform: none; transition: color var(--dur-fast) var(--ease); }
.main-nav a:hover, .main-nav a.active { color: var(--text-050); }
.main-nav .btn { text-transform: none; letter-spacing: 0; font-family: var(--font); }
.nav-toggle { display: none; background: none; border: none; color: var(--text-100); font-size: 1.5rem; cursor: pointer; }

/* Nav disclosures (Services, Resources): click-to-open dropdown groups */
.nav-group { position: relative; display: inline-flex; }
.nav-group-btn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-mute); font-family: var(--font-ui); font-size: 13.5px;
  font-weight: 500; letter-spacing: .01em; text-transform: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav-group-btn:hover, .nav-group-btn.active, .nav-group-btn[aria-expanded="true"] { color: var(--text-050); }
.nav-group-btn:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; border-radius: 4px; }
.nav-caret { font-size: 9px; transition: transform .15s ease; }
.nav-group-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-group-panel {
  /* 280px (was 220px): wide enough that every one-line service descriptor
     stays on one line ("£950: we answer your exact question" wrapped at 220,
     owner report 7 July 2026). The mobile stacked menu overrides to min-width
     0 in its media query, so this only affects the desktop dropdown. */
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 280px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: 0 16px 34px rgba(0,0,0,.5);
}
/* The display:flex above would otherwise beat the browser's [hidden] rule and
   leave the panels permanently open (the mobile stacked menu deliberately
   re-overrides this inside its media query, where the groups render as always
   visible headed sections). */
.nav-group-panel[hidden] { display: none; }
/* No-JS / hover fallback (desktop only). The disclosure JS toggles [hidden] +
   aria-expanded on click; without it these panels — three of the four revenue
   services and every resource page — would never open. Reveal on hover and on
   keyboard focus so the links are always reachable. When JS is present and has
   removed [hidden], the panel is shown by its own state; this rule only adds a
   hover-open. Scoped above the 820px mobile breakpoint, where the groups are
   already rendered as always-open headed sections. */
@media (min-width: 821px) {
  .nav-group:hover > .nav-group-panel[hidden],
  .nav-group:focus-within > .nav-group-panel[hidden] { display: flex; }
}
.nav-group-panel a {
  display: block; min-height: 40px; line-height: 1.2; padding: 11px 12px; border-radius: 7px;
  text-transform: none; letter-spacing: .01em; font-family: var(--font-ui); font-size: 13px;
  color: var(--text-300);
}
.nav-group-panel a:hover, .nav-group-panel a:focus-visible { background: rgba(37,99,235,.14); color: var(--text-050); }
.nav-group-panel a.active { color: var(--blue-300); }
.nav-group-panel a:focus-visible { outline: 2px solid var(--blue-400); outline-offset: -2px; }
/* IA-06: one-line differentiator + price hint under each service in the nav
   dropdown, quiet enough not to compete with the label itself. */
.nav-item-hint { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; text-transform: none; letter-spacing: 0; }
.nav-group-panel a:hover .nav-item-hint, .nav-group-panel a:focus-visible .nav-item-hint, .nav-group-panel a.active .nav-item-hint { color: inherit; opacity: .8; }

/* Compliance bar */
/* Quieter compliance bar (spec 5.11): metadata voice, neutral ground; it
   informs on every page without shouting on any. */
.topbar-disclaimer { background: var(--surface-sunken); border-bottom: 1px solid var(--border); color: var(--text-faint); font-size: var(--text-xs); letter-spacing: .02em; text-align: center; padding: 7px 16px; }
.topbar-disclaimer a { color: var(--text-tertiary); }
.topbar-disclaimer a:hover { color: var(--text-200); }

/* Buttons */
.btn { display: inline-block; border-radius: var(--radius-ctl); padding: 10px 20px; font-size: .92rem; font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); font-family: var(--font); }
/* The glow is gone (spec 4.6): confidence comes from the fill, not a halo. */
.btn-primary { background: var(--accent); color: #fff; border-color: var(--blue-700); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent); color: #fff; }
.btn-outline { background: transparent; color: var(--text-200); border-color: rgba(255,255,255,.18); }
.btn-outline:hover { border-color: rgba(255,255,255,.35); color: var(--text-050); }
.btn-ghost { background: none; color: var(--text-mute); border-color: transparent; }
.btn-ghost:hover { color: var(--text-100); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: .84rem; }
.btn-lg { padding: 14px 28px; font-size: 1.02rem; }
/* Double-submit guard (build charter item 4): a disabled submit button (set by
   lmGuardForm while its request is in flight) needs a visible cue distinct
   from its normal state, since it otherwise looks identical but silently does
   nothing on click. */
.btn:disabled, .btn[disabled] { opacity: .6; cursor: progress; box-shadow: none; }
button.btn { font-family: var(--font); }
/* Keyboard focus, distinct from :hover: a visible 2px ring on every .btn
   variant using the site's established focus token (--blue-400), offset so it
   never merges with .btn-primary's own blue fill/glow. :active gives the same
   buttons a pressed state distinct from both hover and focus. */
.btn:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn-primary:active { background: var(--blue-700); border-color: var(--blue-700); }
.btn-outline:active { border-color: rgba(255,255,255,.5); }
.btn-ghost:active { color: var(--text-050); }

/* Hero terminal */
.hero-terminal { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.ht-grid { display: grid; gap: 40px; align-items: center; padding: 56px 0 72px; }
.ht-atlas, .ht-globe { grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); }
.ht-globe .ht-text { order: 1; }
.ht-globe .ht-map { order: 2; }
.ht-map { position: relative; min-width: 0; }
.ht-eyebrow { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-400); margin-bottom: 1.1em; }
.ht-h1 { font-family: var(--font); font-weight: 700; font-size: clamp(32px, 3.9vw, 47px); letter-spacing: -1.5px; line-height: 1.03; color: var(--text-050); margin: 0 0 .5em; }
.ht-h1 .accent { color: var(--blue-400); }
.ht-sub { font-family: var(--font-ui); font-size: 15.5px; line-height: 1.55; color: var(--text-mute); max-width: 46ch; margin-bottom: 1.6em; }
.ht-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 1.2em; }
.hero-reassurance { color: var(--text-faint); font-size: var(--text-sm); margin: -8px 0 1.1em; }
/* The first viewport now sells the comparison itself. It has the calm, solid
   surface of a briefing document rather than the visual energy of a terminal. */
.hero-proof { min-width: 0; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--elev-2); padding: 26px; }
.hero-proof-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.hero-proof-head .eyebrow { margin-bottom: 8px; }
.hero-proof-head h2 { font-size: clamp(1.25rem, 2.1vw, 1.75rem); margin: 0; }
.hero-proof-fresh { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: var(--text-tertiary); font-size: var(--text-xs); white-space: nowrap; padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; }
.hero-proof-lead { color: var(--text-mute); font-size: var(--text-sm); margin: 0 0 16px; }
.hero-proof .chip-row { margin: 0 0 14px; }
.hero-proof .hero-matrix { max-width: 100%; box-shadow: none; }
.hero-matrix .mxp-row { min-width: 560px; }
.hero-matrix .mxp-cell { min-width: 100px; padding: 10px 9px; font-size: 11px; }
.hero-matrix .mxp-label { flex-basis: 150px; min-width: 150px; }
.hero-proof-link { display: inline-block; margin-top: 14px; color: var(--blue-300); font-weight: 600; text-decoration: none; }
.hero-proof-link:hover { color: var(--blue-050); }
/* DX-05: the hero buttons are now aliases of the canonical .btn taxonomy, not a
   parallel vocabulary. .ht-btn shares .btn's box; .ht-btn-primary == .btn-primary
   and .ht-btn-ghost == .btn-outline. Templates keep the old class names; the
   look is the single documented set. Hero sizing (14px / 12px 22px) is retained
   via the .ht-btn box so the hero CTAs render exactly as before. */
.ht-btn { font-family: var(--font); font-weight: 500; font-size: 14.5px; padding: 13px 24px; border-radius: var(--radius-ctl); text-decoration: none; display: inline-block; border: 1px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.ht-btn-primary { background: var(--accent); color: #fff; border-color: var(--blue-700); }
.ht-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent); color: #fff; }
.ht-btn-ghost { background: transparent; color: var(--text-200); border-color: rgba(255,255,255,.18); }
.ht-btn-ghost:hover { border-color: rgba(255,255,255,.35); color: var(--text-050); }
.ht-btn:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.ht-btn:active { transform: translateY(1px); }
.ht-caption { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }

/* Map panels */
.map-panel { position: relative; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.09); overflow: hidden; box-shadow: var(--elev-3); background: var(--surface-deep) radial-gradient(420px 300px at 50% 40%, rgba(37,99,235,.14), transparent 70%); height: 500px; }
.map-panel-globe { height: 512px; background-color: var(--bg-panel-globe); }
.map-panel-coverage { height: 452px; }
.map-panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-failed canvas, .map-failed .map-hint { display: none; }
.map-failed::after { content: 'Live map unavailable, see the matrix'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
/* Map tag: a quiet fresh-pill, not an all-caps terminal banner (spec 4.8). */
.map-tag { position: absolute; top: 14px; left: 16px; font-size: var(--text-xs); font-weight: 500; letter-spacing: .03em; color: var(--text-tertiary); background: rgba(7,10,16,.72); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; display: flex; align-items: center; gap: 7px; }
.live-dot, .hint-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); display: inline-block; }
.live-dot { animation: livepulse 2s infinite; }
@keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.map-hint { position: absolute; bottom: 14px; right: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dot); background: rgba(2,8,20,.8); border: 1px solid var(--border); border-radius: 20px; padding: 6px 12px; display: flex; align-items: center; gap: 7px; }
/* Readout docks bottom-left, minimised to a slim bar by default (so Mexico
   stays visible). It expands on tap, or automatically on marker click. */
.map-readout { position: absolute; bottom: 14px; left: 16px; width: 244px; background: rgba(14,23,41,.94); border: 1px solid var(--border-strong); border-radius: 9px; padding: 10px 12px; backdrop-filter: blur(4px); transition: width .15s ease; }
.map-readout .ro-row { padding: 5px 0; }
.map-readout .ro-cta { margin-top: 7px; font-size: 11.5px; }
.map-readout.ro-min { width: auto; padding: 7px 10px; cursor: pointer; }
.ro-min .ro-head { padding-bottom: 0; }
.ro-toggle { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 1px; padding: 3px 4px; margin-left: 2px; }
.ro-toggle .chev { width: 7px; height: 7px; border-left: 2px solid var(--blue-400); border-top: 2px solid var(--blue-400); transform: rotate(45deg); transition: transform .15s; }
.map-readout:not(.ro-min) .ro-toggle .chev { transform: rotate(225deg); }
/* DX-06: the readout-toggle chevrons were decorative infinite pulsers; now they
   rest at a static reduced opacity so only the live status dot pulses. */
.ro-min .ro-toggle .chev { opacity: .55; }
.ro-min .ro-toggle .chev:nth-child(2) { opacity: .35; }
.readout-table .ro-toggle { display: none; }
.readout-table { position: static; width: 100%; max-width: 340px; margin-top: 22px; background: var(--surface-card); }
.ro-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.ro-code, .code-badge { font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--text-050); background: rgba(255,255,255,.07); border-radius: 4px; padding: 2px 6px; }
.ro-name { font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--text-200); text-decoration: none; flex: 1; }
.ro-name:hover { color: var(--text-050); }
.ro-tier { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; display: flex; align-items: center; gap: 5px; }
.ro-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.ro-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid rgba(96,165,250,.14); padding: 6.5px 0; }
.ro-row span { font-family: var(--font-ui); font-size: 11.5px; color: var(--text-dot); }
.ro-row b { font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; color: var(--text-200); text-align: right; }
.ro-lock { color: var(--amber); font-size: 11px; }
.ro-cta { display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--blue-400); text-decoration: none; }
.sr-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0; list-style: none; }
.sr-list:focus-within { position: static; width: auto; height: auto; clip: auto; display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0; }
.sr-list button { font-family: var(--font-mono); font-size: 11px; background: var(--surface-card); color: var(--text-200); border: 1px solid var(--border-strong); border-radius: 6px; padding: 4px 8px; cursor: pointer; }

/* Stats band (replaces logo strip) */
.strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-band-alt); }
.strip-row { display: flex; justify-content: space-between; gap: 12px; padding: 18px 0; flex-wrap: wrap; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; color: var(--text-dot); text-transform: uppercase; }
.strip-row strong { color: var(--text-100); margin-right: 6px; }

/* Sections */
.section { padding: var(--space-12) 0; border-top: 1px solid var(--border); }
.section:first-of-type { border-top: none; }
.section-alt { background: var(--bg-band-alt); }
.decision-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 26px 0; }
.decision-points > div { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-card); }
.decision-points strong { display: block; color: var(--text-100); margin-bottom: 5px; }
.decision-points span { color: var(--text-mute); font-size: var(--text-sm); }
.coverage-explorer-copy { max-width: 680px; margin-bottom: 28px; }
.coverage-explorer .map-panel { height: 420px; }
/* A section that reads as a continuation of the one above it (no rule, no
   top padding). Replaces the repeated style="border-top:none;padding-top:0". */
.section-flush { border-top: none; padding-top: 0; }
.section-lead { color: var(--text-mute); font-size: 1.05rem; max-width: 720px; }
.page-head { padding: 44px 0 6px; }
.breadcrumb { font-family: var(--font-mono); font-size: .8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; }
.breadcrumb a { color: var(--text-dot); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-200); }
.breadcrumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb-item { display: inline; }
.breadcrumb-item[aria-current="page"] > span { color: var(--text-mute); }
.breadcrumb-sep { color: var(--text-fnt); padding: 0 2px; }

/* Grids / cards */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px var(--space-6); box-shadow: var(--shadow); }
.card p { color: var(--text-mute); }
.j-card { text-decoration: none; display: block; transition: transform .15s, border-color .15s; }
.j-card:hover { transform: translateY(-3px); border-color: rgba(96,165,250,.4); }
.j-card .muted { min-height: 2.6em; }
.j-flag { font-size: 2rem; }
.j-flag-sm { font-size: 1.1rem; }
.j-flag-lg { font-size: 2.2rem; vertical-align: middle; }

/* Step cards (how it works) */
.step-card { position: relative; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px 24px 28px; }
.step-card::before { content: ''; position: absolute; top: 0; left: 24px; width: 56px; height: 3px; background: var(--blue-600); border-radius: 0 0 3px 3px; }
.step-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--blue-400); letter-spacing: .1em; display: block; margin-bottom: 12px; }

/* Why pay */
.why-pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.why-col { border-radius: var(--radius-card); padding: 26px; }
.why-old { background: var(--surface-card); border: 1px solid var(--border); }
.why-new { background: var(--surface-card); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); color: var(--text-200); }
.why-new h3 { color: var(--text-050); }
.why-col ul { padding-left: 20px; margin: 0; color: var(--text-mute); }
.why-new ul { color: var(--text-200); }
.why-col li { margin-bottom: .6em; }

/* Badges */
.badge { display: inline-block; font-family: var(--font-ui); font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; padding: 3px 9px; vertical-align: middle; }
.badge-free { background: rgba(52,211,153,.14); color: var(--emerald); border: 1px solid rgba(52,211,153,.35); }
/* PW-06: the free showcase jurisdiction gets a louder badge in hub lists so it
   visibly stands out from the locked rows (solid emerald fill, a small unlock
   glyph). Same badge family, more presence than the quiet .badge-free pill. */
.badge-showcase { background: var(--emerald); color: #04120c; border: 1px solid var(--emerald); box-shadow: 0 0 0 2px rgba(52,211,153,.18); }
.badge-showcase::before { content: '★ '; }
.badge-locked { background: rgba(251,191,36,.12); color: var(--amber); border: 1px solid rgba(251,191,36,.3); }
.badge-featured { background: var(--blue-600); color: #fff; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }
.badge-analogue { background: rgba(148,163,184,.14); color: var(--text-mute); border: 1px solid rgba(148,163,184,.35); text-transform: none; letter-spacing: .02em; cursor: help; }
.field-gloss { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; vertical-align: middle; cursor: help; color: var(--text-mute); font-size: .85em; opacity: .75; border-radius: 6px; }
.field-gloss:hover, .field-gloss:focus { opacity: 1; }
.field-gloss:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 1px; }
/* A11y-05: the glossary hint lived only in the native `title`, which never
   appears on a touch tap. The icon is a focusable tabindex=0 target, so a tap
   focuses it — reveal the definition as a real bubble on :focus (and on hover
   as a nicer desktop echo). `title` is kept so a mouse user still gets the
   instant native tooltip and the two never both show (title is hover-only). */
.field-gloss[data-tip]:focus::after, .field-gloss[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  z-index: 60; width: max-content; max-width: 240px; white-space: normal; text-align: left;
  background: var(--surface-raised); color: var(--text-100); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 8px 10px; font-size: .78rem; font-weight: 400; line-height: 1.35;
  box-shadow: var(--shadow); pointer-events: none;
}

/* Regime toggle: segmented control switching crypto (CASP) and e-money (EMI) */
.regime-toggle { display: inline-flex; max-width: 100%; margin: 16px 0 2px; background: var(--surface-deep); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 3px; gap: 3px; }
/* Equal-width segments: the sliding pill below is exactly half the control,
   so the tabs must be too. Content-sized tabs made the pill overhang the wider
   label and bleed into the other side (owner report, 7 July 2026). The tabs
   must also stay equal when the container is squeezed: min-width:0 overrides
   the flex min-content floor so BOTH tabs shrink in step (otherwise the wider
   crypto label refuses to shrink, the tabs go unequal again, and the
   half-width pill ends mid-text - the second owner report, 7 July 2026).
   With nowrap gone, a too-tight label wraps INSIDE the pill instead of
   spilling past its right edge; the flex centering keeps a one-line label
   vertically centred beside a two-line neighbour. */
.regime-toggle a { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; text-decoration: none; color: var(--text-mute); padding: 8px 15px; border-radius: 6px; transition: color var(--dur-fast) var(--ease); min-height: 36px; }
.regime-toggle a:hover { color: var(--text-200); }
.regime-toggle a.active { background: var(--blue-600); color: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.35); }
/* Keyboard focus, distinct from :hover/.active's own blue fill: a visible 2px
   ring using the site's established focus token, offset so it reads clearly
   against both the plain tab and the filled/active tab. */
.regime-toggle a:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.regime-toggle a:active { color: var(--text-050); }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; align-items: stretch; }
.price-card { position: relative; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 30px 26px; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.price-featured { border: 1.5px solid var(--blue-600); box-shadow: 0 0 0 1px rgba(37,99,235,.2), 0 24px 60px rgba(37,99,235,.18); }
.price { font-size: 2.5rem; font-weight: 700; letter-spacing: -1.5px; margin: .2em 0; }
.price span { font-size: 1rem; color: var(--text-mute); font-family: var(--font-ui); letter-spacing: 0; }
.price-sub { color: var(--text-300); font-size: 1rem; font-weight: 600; margin: -.2em 0 .5em; }
.price-alt { color: var(--text-mute); font-size: .88rem; margin-bottom: .6em; }
.pricing-note { max-width: 640px; margin: .8em auto 0; font-weight: 600; color: var(--blue-300); }
.checkout-form[aria-busy="true"] .btn { cursor: progress; }
.best-for { font-family: var(--font-mono); font-size: .74rem; color: var(--blue-300); margin: 0 0 1em; text-align: left; border-top: 1px solid var(--border); padding-top: .8em; }
.price-card ul { text-align: left; padding-left: 0; list-style: none; color: var(--text-300); flex: 1; }
.price-card li { margin-bottom: .55em; padding-left: 22px; position: relative; }
.price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--emerald); font-weight: 700; }
.price-featured li::before { color: var(--blue-400); }
.price-card .btn, .price-card form { margin-top: auto; }
.price-card form .btn { width: 100%; }

/* ── Self-serve counsel introductions ──────────────────────────────────── */
.counsel-service-head { padding: 48px 0 34px; border-bottom: 1px solid var(--border); }
.counsel-service-head h1 { max-width: 680px; font-size: clamp(2.35rem, 5vw, 4.25rem); letter-spacing: -.04em; margin-bottom: 16px; }
.counsel-service-head .section-lead { max-width: 650px; font-size: 1.12rem; }
.counsel-service-assurance { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0; color: var(--text-tertiary); font-size: var(--text-sm); }
.counsel-service-assurance span { display: inline-flex; align-items: center; gap: 7px; }
.counsel-service-assurance span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
.counsel-process { background: var(--bg-band-alt); }
.counsel-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; }
.counsel-steps li { min-width: 0; padding: 18px 16px; border-left: 1px solid var(--border-strong); }
.counsel-steps li:first-child { border-left: 0; }
.counsel-steps span { display: block; color: var(--blue-400); font-size: var(--text-xs); font-weight: 700; margin-bottom: 8px; }
.counsel-steps strong { display: block; color: var(--text-100); font-size: var(--text-sm); }
.counsel-steps p { color: var(--text-mute); font-size: var(--text-xs); margin: 5px 0 0; }
.counsel-directory-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.counsel-directory-head h2 { margin-bottom: 10px; }
.intro-search-wrap { flex: 0 1 260px; }
.intro-search-wrap input { width: 100%; min-height: 44px; }
.intro-directory { display: grid; gap: 10px; }
.intro-directory-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0; padding: 17px 18px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
/* Explicitly beat the card's display:flex rule. Relying on the browser's
   default [hidden] styling makes the directory filter appear inert in some
   stylesheet/browser combinations. */
.intro-directory-item[hidden] { display: none !important; }
.intro-directory-item:hover { border-color: rgba(96,165,250,.5); background: var(--surface-raised); }
.intro-directory-main { min-width: 0; }
.intro-directory-jurisdiction { margin: 0 0 3px; color: var(--text-100); }
.intro-directory-meta { margin: 0; color: var(--text-mute); font-size: var(--text-sm); overflow-wrap: anywhere; }
.intro-directory-action { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.intro-directory-price { color: var(--text-200); font-weight: 650; font-variant-numeric: tabular-nums; }
.intro-directory-empty { color: var(--text-mute); margin: 20px 0 0; }

/* Matrix */
.matrix-toolbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; font-size: .9rem; color: var(--text-mute); }
.matrix-toolbar select, .compare-picker select, select { background: var(--surface-deep); color: var(--text-200); padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: .9rem; font-family: var(--font-ui); }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.btn-xs { padding: 4px 10px; font-size: .78rem; }
/* Jurisdiction filter disclosure (item 9). Native <details>, so keyboard
   operable out of the box; visible focus provided below. */
.jfilter { margin: 0 0 18px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-card); max-width: 720px; }
.jfilter > summary { cursor: pointer; padding: 10px 14px; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; color: var(--text-200); list-style: none; display: flex; align-items: center; gap: 8px; }
.jfilter > summary::-webkit-details-marker { display: none; }
.jfilter > summary::before { content: '▸'; color: var(--blue-400); transition: transform .15s ease; }
.jfilter[open] > summary::before { transform: rotate(90deg); }
.jfilter > summary:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; border-radius: 8px; }
.jfilter-count { color: var(--blue-300); }
.jfilter-panel { padding: 4px 14px 14px; border-top: 1px solid var(--border); }
.jfilter-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 12px; }
.jfilter-set { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; }
.jfilter-opt { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--text-300); font-weight: 400; cursor: pointer; padding: 8px 6px; min-height: 44px; border-radius: 8px; }
.jfilter-opt input { width: 18px; height: 18px; flex: none; }
.jfilter-opt:hover { color: var(--text-100); }
/* Resume-last-view affordance (item 9d): a quiet, dismissible bar. */
/* DX-05: neutral container (was a blue wash). Moved to the surface-card +
   left-accent treatment shared with .counsel-band / .cost-headline so the
   tinted-blue fill is reserved for genuine promo/CTA blocks and hierarchy
   re-emerges. */
.resume-view { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 14px; background: var(--surface-card); border: 1px solid var(--border-strong); border-left: 3px solid var(--blue-600); border-radius: 10px; }
.resume-icon { color: var(--blue-400); font-size: 1rem; }
.resume-text { margin: 0; color: var(--text-200); font-size: .9rem; }
.resume-apply { background: none; border: 0; padding: 0; color: var(--blue-300); font-weight: 600; text-decoration: underline; cursor: pointer; font-family: inherit; font-size: inherit; }
.resume-apply:focus-visible, .resume-dismiss:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; border-radius: 4px; }
.resume-dismiss { margin-left: auto; background: none; border: 0; color: var(--text-mute); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.resume-dismiss:hover { color: var(--text-100); }
/* My views (item 13): account-bound saved workspaces on the matrix */
.myviews { margin-top: -6px; margin-bottom: 18px; }
.myviews-save { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0 4px; }
.myviews-save input[type="text"] { flex: 1 1 220px; min-width: 180px; }
.myviews-hint { margin: 0 0 12px; }
.myviews-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.myviews-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--surface-deep); border: 1px solid var(--border); border-radius: 8px; }
.myviews-open { font-weight: 600; color: var(--blue-300); text-decoration: none; }
.myviews-open:hover { color: var(--blue-050); text-decoration: underline; }
.myviews-tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-mute); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
.myviews-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.myviews-signin { margin: 0 0 18px; }
.matrix-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--surface-card); }
table.matrix { border-collapse: collapse; width: 100%; min-width: 1100px; font-size: .87rem; }
/* Row separators only (spec 4.6): the one vertical rule left is the sticky
   jurisdiction column's shadow. Header row is a neutral raised surface in the
   metadata voice, not a blue wash. */
.matrix th, .matrix td { padding: 13px 15px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.matrix thead th { background: var(--surface-raised); color: var(--text-tertiary); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; position: sticky; top: 0; z-index: 4; }
.matrix tbody td { color: var(--text-300); }
.sticky-col { position: sticky; left: 0; background: var(--surface-card); z-index: 2; min-width: 180px; box-shadow: 2px 0 4px rgba(0,0,0,.35); }
.matrix thead .sticky-col { background: var(--surface-raised); z-index: 5; }
.jcell { font-weight: 600; }
.jlink { color: var(--text-100); text-decoration: none; font-weight: 600; }
.jlink:hover { color: var(--text-050); text-decoration: underline; }
.verified-tag { font-family: var(--font-mono); font-size: .7rem; color: var(--text-dim); font-weight: 400; margin-top: 4px; }
.dimcell { font-weight: 600; color: var(--text-100); }
.cell { max-width: 300px; overflow-wrap: anywhere; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; position: relative; }
/* Click-to-expand matrix cells */
td.cell:not(.cell-locked) { cursor: pointer; }
td.cell:not(.cell-locked):not(.open) .clamp::after { content: ''; position: absolute; inset: auto 0 0 0; height: 1em; background: linear-gradient(transparent, var(--surface-card)); }
td.cell:not(.cell-locked):not(.open):hover { background: rgba(96,165,250,.05); }
/* DX-08: keyboard focus ring on the now-focusable expandable cells. */
td.cell:not(.cell-locked):focus-visible { outline: 2px solid var(--blue-400); outline-offset: -2px; }
td.cell.open .clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* DX-07: emoji carets (⌄/⌃) replaced by an inline-SVG chevron rendered as a
   left-inset background on the affordance line (currentColor via a dim/blue
   stroke, no cross-OS glyph inconsistency). The label text ("expand"/"collapse")
   stays on its own block line above the cell content exactly as before; only the
   leading glyph changed from an emoji caret to an SVG. */
td.cell:not(.cell-locked)::before {
  content: 'expand'; display: block; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px;
  padding-left: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left 0 top .15em / 8px 8px no-repeat;
}
td.cell.open::before {
  content: 'collapse'; color: var(--blue-400);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 7.5 6 4l3.5 3.5' fill='none' stroke='%2360A5FA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left 0 top .15em / 8px 8px no-repeat;
}
.compare-table .cell { max-width: none; }
/* DX-08: a "not yet documented" blank renders as a dimmed em-dash (title on the
   span), never a bare "-", so an un-annotated gap doesn't read as sloppiness on
   a verified-data product. */
.cell-blank { color: var(--text-fnt); cursor: help; }

/* Compare: pin and benchmark (item 14) */
.benchmark-picker { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.bm-primary { display: flex; flex-direction: column; gap: 6px; }
.bm-primary label { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; color: var(--text-200); }
.bm-pin { color: var(--blue-400); }
.bm-primary select { max-width: 360px; }
.bm-peers { border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 16px 14px; margin: 0; }
.bm-peers legend { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--text-mute); padding: 0 6px; }
.bm-peer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; }
.bm-peer-opt { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-300); cursor: pointer; padding: 2px 0; }
.bm-peer-opt input { width: auto; }
.bm-peer-opt:hover { color: var(--text-100); }
.bm-peer-opt.is-primary { opacity: .5; cursor: not-allowed; }
.bm-peer-opt.is-maxed { opacity: .45; cursor: not-allowed; }
.bm-peer-opt.is-maxed:hover { color: var(--text-300); }
.bm-peer-opt input:disabled { cursor: not-allowed; }
.bm-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
/* Compare picker auto-submit (DX-02): the button stays fully functional as the
   no-JS fallback, but once html.js confirms auto-submit is live, it demotes to
   a quiet secondary style so the debounced auto-update reads as the primary
   mechanism. The reveal is opt-in (data-auto="1", set by app.js only after the
   listeners are wired), never CSS-only, so a JS-disabled visitor always sees
   the full primary button. */
.bm-submit-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bm-auto-hint { display: none; }
html.js .benchmark-picker[data-auto="1"] #bmSubmit { background: transparent; color: var(--text-300); border: 1px solid var(--border-strong); box-shadow: none; font-size: .82rem; padding: 7px 14px; }
html.js .benchmark-picker[data-auto="1"] #bmSubmit:hover { color: var(--text-050); border-color: var(--blue-400); }
html.js .benchmark-picker[data-auto="1"] .bm-auto-hint { display: inline; }
#bmAutoStatus { min-height: 1.1em; }
.benchmark-picker[data-pending="1"] #bmSubmit { opacity: .7; cursor: progress; }
/* Pinned primary column highlight */
.benchmark-table .col-primary { background: rgba(37,99,235,.08); border-left: 2px solid var(--blue-600); border-right: 2px solid var(--blue-600); }
.benchmark-table thead .col-primary { background: rgba(37,99,235,.14); }
.pin-tag { display: inline-block; font-family: var(--font-mono); font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-300); background: rgba(37,99,235,.16); border: 1px solid rgba(96,165,250,.4); border-radius: 4px; padding: 1px 6px; margin-bottom: 4px; }
/* Delta chips: better (favourable) emerald, worse amber, same neutral */
.delta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .02em; border-radius: 5px; padding: 2px 7px; margin: 6px 0 2px; }
.delta-better { color: var(--emerald); background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.35); }
.delta-worse { color: var(--amber); background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); }
.delta-same { color: var(--text-mute); background: rgba(148,163,184,.1); border: 1px solid var(--border-strong); }
.bm-legend .delta { margin: 0; }

/* Paywall: the locked-state language (spec 4.7).
   The mask is quiet; the price is said once per surface (column-header lock
   glyph + one paywall band), never per cell. Locked is neutral, never amber:
   the only colour on a locked cell is the blue of its action, and only on
   hover/focus. No value, sort key or source ever reaches the DOM. */
.cell-locked { background: rgba(255,255,255,.012); position: relative; }
.blurred { filter: none; user-select: none; pointer-events: none; color: var(--text-faint); }
.cell-mask { display: block; }
.mask-glyphs { letter-spacing: .18em; color: var(--locked-mask); user-select: none; font-weight: 600; }
/* The WHOLE locked cell stays one unlock link: cursor, hover and keyboard
   focus land on the entire cell; Enter activates natively (an anchor). */
.cell-lock-link { display: block; text-decoration: none; color: inherit; cursor: pointer; border-radius: 6px; padding: 2px; margin: -2px; }
.cell-lock-link:hover { background: rgba(37,99,235,.05); }
.cell-lock-link:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 1px; }
/* Hover/focus affix: "Included in the pass", hidden at rest so 50 locked cells
   read as one tidy privacy screen instead of 50 pleas. Touch: first tap focuses
   (affix shows), second tap follows the link. */
.cell-affix { display: none; margin-top: 6px; font-size: var(--text-xs); font-weight: 500; letter-spacing: .03em; color: var(--blue-300); white-space: nowrap; }
.cell-lock-link:hover .cell-affix, .cell-lock-link:focus .cell-affix, .cell-lock-link:focus-visible .cell-affix { display: inline-block; }
/* Legacy per-cell price label: retired visually (templates now emit .cell-affix);
   kept minimal for any straggler markup. */
.cell-unlock { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 500; color: var(--blue-300); white-space: nowrap; }
/* DX-07: emoji padlock (🔒) replaced by an inline-SVG lock rendered via
   mask-image so it inherits the cell-unlock text colour (currentColor) and
   renders identically across OSes. */
.cell-unlock::before {
  content: ''; display: inline-block; width: .82em; height: .82em; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--lm-lock) center / contain no-repeat; mask: var(--lm-lock) center / contain no-repeat;
}
:root { --lm-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='3' y='7' width='10' height='7' rx='1.4' fill='%23000'/%3E%3C/svg%3E"); }
.detail-unlock { margin-top: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Source citation on a gated cell (item 10): the regulator domain only, as a
   quiet monospace link next to the mask. Never carries the gated value. */
.cell-cite { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .01em; color: var(--text-mute); text-decoration: none; overflow-wrap: anywhere; }
.cell-locked .cell-cite { display: block; }
.cell-cite:hover { color: var(--blue-300); text-decoration: underline; }
.cell-cite:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; border-radius: 3px; }
.detail-unlock .cell-cite { margin-top: 0; }
/* Matrix filtered-to-zero empty state (item 8): a spanning message row, shown
   only when the active filter hides every jurisdiction. */
.matrix-empty-cell { text-align: center; padding: 40px 24px; color: var(--text-mute); }
.matrix-empty-msg { margin: 0; font-size: .95rem; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--blue-300); text-decoration: underline; cursor: pointer; }
.linklike:hover { color: var(--blue-400); }
.linklike:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; border-radius: 3px; }
.cell-context { display: inline-block; font-family: var(--font-mono); font-size: .82rem; color: var(--text-200); background: rgba(37,99,235,.12); border: 1px solid rgba(96,165,250,.35); border-radius: 8px; padding: 8px 14px; margin: 2px 0 6px; }
.cell-context strong { color: var(--text-050); }
/* The one alpha-blue component allowed per page (spec 4.3): the paywall band.
   Everything else sells nothing and stays neutral. */
.paywall-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: linear-gradient(160deg, rgba(37,99,235,.16), rgba(37,99,235,.04)); border: 1px solid rgba(96,165,250,.3); color: var(--text-300); border-radius: var(--radius-card); padding: 30px 34px; margin-top: 26px; }
.paywall-banner h2, .paywall-banner h3 { color: var(--text-050); margin-bottom: .3em; }
.paywall-banner p { margin: 0; max-width: 640px; color: var(--text-mute); }
.paywall-trust { flex-basis: 100%; margin-top: 4px; font-size: var(--text-xs); color: var(--text-faint); }
.paywall-trust a { color: var(--text-tertiary); }
.paywall-trust a:hover { color: var(--text-100); }
.paywall-inline { flex-direction: column; align-items: flex-start; }
.paywall-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Disputed / under-review cell treatment (item 3). Amber for a contested figure,
   a quieter slate for under-review. The status-tag is a static label with an
   sr-only description on the matrix (aria-describedby) so screen readers announce
   the dispute without needing any interaction; jurisdiction pages add a keyboard
   -operable details/summary for the full explanation. */
.status-tag { display: inline-block; font-family: var(--font-mono); font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; vertical-align: middle; }
.status-disputed { background: rgba(251,191,36,.14); color: var(--amber); border: 1px solid rgba(251,191,36,.4); }
.status-review { background: rgba(148,163,184,.14); color: var(--text-mute); border: 1px solid rgba(148,163,184,.35); }
.cell-disputed { position: relative; }
/* amber corner tick on a disputed matrix cell */
.cell-disputed::before { content: ''; position: absolute; top: 0; right: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: transparent var(--amber) transparent transparent; opacity: .8; }
.clamp-disputed { text-decoration: underline dashed rgba(251,191,36,.7); text-underline-offset: 3px; }
.detail-disputed { border-left: 4px solid var(--amber); }
.dispute-note { margin: 0 0 10px; font-size: .84rem; }
.dispute-note summary { cursor: pointer; color: var(--amber); font-weight: 600; font-family: var(--font-mono); font-size: .78rem; }
.dispute-note summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
.dispute-note[open] summary { margin-bottom: 6px; }
.dispute-note p { margin: 0; color: var(--text-mute); }

/* Detail pages */
.meta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.verified-pill { background: rgba(52,211,153,.14); color: var(--emerald); font-size: .84rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(52,211,153,.3); }
.detail-list { display: flex; flex-direction: column; gap: 16px; }
/* Editorial brief: the published prose block above the data card. */
.jur-brief { margin-bottom: 32px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.jur-brief .h-sub { margin-bottom: 12px; }
.detail-item { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px 24px; }
.detail-item h2, .detail-item h3 { margin-bottom: .4em; }
.detail-value { margin-bottom: .5em; white-space: pre-line; color: var(--text-300); }
.detail-meta { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: .74rem; color: var(--text-dim); }
/* Long source URLs (linkifySource output: BaFin MiCAR links and friends) must
   never escape their card. overflow-wrap:anywhere both breaks the URL at any
   character and, unlike break-word, lets a flex/table item shrink below the
   URL's one-line width, so this holds inside .detail-meta, compare cells,
   changes rows and the matrix stacked cards alike. The span keeps the whole
   "Source: <url>" line shrinkable inside flex rows. */
.source-url { overflow-wrap: anywhere; }
.detail-meta > span { min-width: 0; overflow-wrap: anywhere; }
.detail-locked { opacity: .92; }
/* PW-03: a locked dimension row is one clickable unlock link (whole cell),
   with a single short price-naming line instead of a repeated verbose block. */
.detail-lock-link { display: block; text-decoration: none; color: inherit; cursor: pointer; border-radius: 8px; margin: -4px; padding: 4px; }
.detail-lock-link .blurred { display: block; margin-bottom: .5em; }
.detail-lock-link .detail-value { display: block; margin-bottom: .5em; color: var(--text-faint); }
.detail-lock-line { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 500; letter-spacing: .02em; color: var(--blue-300); border: 1px solid rgba(96,165,250,.28); background: none; border-radius: var(--radius-ctl); padding: 5px 11px; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.detail-lock-icon { font-size: .82rem; }
.detail-lock-link:hover .detail-lock-line, .detail-lock-link:focus-visible .detail-lock-line { color: var(--text-050); background: rgba(37,99,235,.16); border-color: var(--blue-400); }
.detail-lock-link:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 1px; }
/* Lead paywall band sits above the first locked cell; end band closes the page. */
.paywall-lead { margin-top: 0; margin-bottom: 22px; }
.paywall-end { margin-top: 30px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.notify-box { background: var(--surface-deep); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; margin-top: 30px; }

/* Compare picker */
.compare-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.compare-picker select { min-width: 200px; }
.vs { font-family: var(--font-mono); color: var(--text-dim); font-size: .85rem; }

/* Forms */
.form-narrow { max-width: 560px; }
/* Email-gated export form (item 7): a plain, accessible server-rendered form. */
.export-gate-form { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.export-gate-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.export-gate-form label { font-weight: 600; font-size: .9rem; color: var(--text-200); }
.export-gate-form input[type="email"] { max-width: 420px; }
.export-gate-form .btn { align-self: flex-start; }
.form-error { color: var(--amber); background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.35); border-radius: 8px; padding: 10px 14px; font-size: .92rem; margin: 0 0 16px; }
.stack-form { display: flex; flex-direction: column; gap: 16px; }
.stack-form label, .field-grid label, .cell-editor label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .88rem; color: var(--text-200); }
input, textarea { background: var(--surface-deep); color: var(--text-200); border: 1px solid var(--border-strong); border-radius: 6px; padding: 11px 13px; font-size: .98rem; font-family: var(--font-ui); font-weight: 400; }
input::placeholder, textarea::placeholder { color: var(--text-dim); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blue-600); border-color: var(--blue-600); }
.inline-capture { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.inline-capture input { flex: 1; min-width: 220px; }
.capture-note { margin-top: 10px; font-size: var(--text-sm); }
.footer-capture { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-capture input { flex: 1; min-width: 150px; padding: 8px 10px; }
.row-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form { display: inline; }
.logout-form { margin-top: 16px; }

/* Alerts */
.alert { border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; font-size: .93rem; }
.alert-error { background: rgba(248,113,113,.1); color: #FCA5A5; border: 1px solid rgba(248,113,113,.3); }
.alert-success { background: rgba(52,211,153,.1); color: var(--emerald); border: 1px solid rgba(52,211,153,.3); }
/* overflow-wrap, never break-all: long tokens (URLs, run links) still wrap,
   but ordinary words are never split mid-word ("LicenceMa / p's"). */
.alert-info { background: rgba(96,165,250,.1); color: var(--blue-300); border: 1px solid rgba(96,165,250,.3); overflow-wrap: break-word; }
.alert-warning { background: rgba(251,191,36,.1); color: var(--amber); border: 1px solid rgba(251,191,36,.3); }
.alert-warning a { color: var(--amber); font-weight: 600; text-decoration: underline; }

/* Fine print */
.fineprint { font-size: .78rem; color: var(--text-dim); margin-top: 22px; }
.link-arrow { font-weight: 600; }

/* Landing: matrix preview */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: var(--text-200); background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 20px; padding: 6px 13px; cursor: pointer; opacity: .55; transition: all .15s; }
.chip.active { background: rgba(37,99,235,.16); border-color: rgba(96,165,250,.55); opacity: 1; }
.chip:hover { opacity: .85; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.mxp { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); overflow-x: auto; box-shadow: var(--shadow); }
.mxp-row { display: flex; min-width: 640px; border-bottom: 1px solid var(--border); }
.mxp-row:last-child { border-bottom: none; }
.mxp-head { background: var(--surface-raised); }
.mxp-cell { flex: 1; min-width: 130px; padding: 12px 14px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-200); border-right: 1px solid rgba(255,255,255,.04); }
.mxp-cell:last-child { border-right: none; }
.mxp-label { flex: 0 0 210px; min-width: 170px; font-family: var(--font-ui); font-size: 12.5px; color: var(--text-dot); font-weight: 600; }
.mxp-head .mxp-cell { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 600; color: var(--text-100); }
.mxp-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 16px; font-size: .8rem; color: var(--text-dim); background: rgba(255,255,255,.015); }
.locked-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--amber); border: 1px solid rgba(251,191,36,.3); background: rgba(251,191,36,.08); border-radius: 20px; padding: 4px 12px; }

/* Landing: coverage */
.cov-grid { display: grid; grid-template-columns: 1fr 372px; gap: 24px; align-items: start; }
.legend-list { display: flex; flex-direction: column; gap: 8px; max-height: 452px; overflow-y: auto; padding-right: 4px; }
.legend-row { display: flex; align-items: center; gap: 10px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; cursor: pointer; text-align: left; width: 100%; font-family: var(--font-ui); transition: border-color .15s; }
.legend-row:hover { border-color: rgba(96,165,250,.4); }
.legend-row.active { border-color: rgba(96,165,250,.65); background: rgba(37,99,235,.1); }
.legend-name { flex: 1; color: var(--text-200); font-weight: 600; font-size: 13.5px; }
.legend-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); display: block; font-weight: 400; }
.tier-chip { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; border-radius: 4px; padding: 2px 7px; }
.tier-FREE { color: var(--emerald); background: rgba(52,211,153,.12); }
.tier-CORE { color: var(--blue-400); background: rgba(96,165,250,.12); }
.tier-PRO { color: var(--amber); background: rgba(251,191,36,.12); }
.cov-foot { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); margin-top: 12px; }

/* Landing: source trace */
.method-grid { display: grid; grid-template-columns: 1fr 440px; gap: 40px; align-items: center; }
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.principle { background: var(--surface-card); border: 1px solid var(--border); border-radius: 11px; padding: 16px 18px; }
.principle h3 { font-size: .95rem; margin-bottom: .3em; }
.principle p { font-size: .82rem; color: var(--text-dim); margin: 0; }
.trace-card { background: var(--surface-deep); border: 1px solid var(--border-strong); border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden; }
.trace-bar { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.trace-bar i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.trace-bar i:nth-child(1) { background: #F87171; } .trace-bar i:nth-child(2) { background: var(--amber); } .trace-bar i:nth-child(3) { background: var(--emerald); }
.trace-body { padding: 18px 20px; font-family: var(--font-mono); font-size: 12.5px; }
.trace-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.trace-kv span { color: var(--text-dot); } .trace-kv b { color: var(--text-200); font-weight: 600; text-align: right; }
/* DX-05: neutral container (was a blue wash); left-accent instead of a full
   blue tint so it doesn't compete with real CTA blocks. */
.trace-src { margin-top: 14px; background: var(--surface-card); border: 1px solid var(--border-strong); border-left: 3px solid var(--blue-600); border-radius: 9px; padding: 12px 14px; font-size: 12px; color: var(--text-300); }
.trace-src .vpill { display: inline-block; background: rgba(52,211,153,.15); color: var(--emerald); border-radius: 12px; padding: 1px 9px; font-size: 10.5px; font-weight: 700; margin-left: 8px; }
.trace-src a { display: inline-block; margin-top: 8px; }

/* Landing: FAQ */
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; background: none; border: none; color: var(--text-100); font-family: var(--font); font-size: 1.05rem; font-weight: 600; text-align: left; padding: 18px 4px; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq-q .pm { color: var(--blue-400); font-size: 1.3rem; font-weight: 400; flex: 0 0 auto; }
.faq-a { display: none; padding: 0 4px 20px; color: var(--text-mute); max-width: 90%; }
.faq-item.open .faq-a { display: block; }
.faq-a a, .faq-detail-a a { color: var(--blue-400); }
/* Standalone /faq page: native details/summary accordion (works with JS off) */
.faq-page { max-width: 820px; }
.faq-detail { border-bottom: 1px solid var(--border); }
.faq-detail > summary { list-style: none; cursor: pointer; color: var(--text-100); font-family: var(--font); font-size: 1.05rem; font-weight: 600; padding: 18px 30px 18px 4px; position: relative; }
.faq-detail > summary::-webkit-details-marker { display: none; }
.faq-detail > summary::after { content: '+'; position: absolute; right: 4px; top: 15px; color: var(--blue-400); font-size: 1.3rem; font-weight: 400; }
.faq-detail[open] > summary::after { content: '\2013'; }
.faq-detail > summary:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; border-radius: 6px; }
.faq-detail-a { padding: 0 4px 20px; color: var(--text-mute); max-width: 92%; }

/* Landing: CTA band */
.cta-band { border-radius: var(--radius-lg); border: 1px solid rgba(96,165,250,.3); background: radial-gradient(620px 300px at 50% 0%, rgba(37,99,235,.22), rgba(37,99,235,.04)), var(--surface-deep); padding: 64px 40px; text-align: center; }
.cta-band h2 { margin-bottom: .4em; }
.cta-band p { color: var(--text-mute); max-width: 520px; margin: 0 auto 1.6em; }
.cta-band .btn-white { background: #fff; color: var(--ink-900); border-color: #fff; }
.cta-band .btn-white:hover { background: var(--blue-050); }

/* Footer */
.site-footer { background: var(--surface-footer); border-top: 1px solid var(--border); padding: 48px 0 24px; margin-top: 64px; }
.footer-disclaimer { background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.16); color: var(--text-mute); border-radius: var(--radius-card); padding: 16px 20px; font-size: .84rem; margin-bottom: 32px; }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 30px; }
/* DX-07: footer column headers move to the body UI face; mono stays for the
   numeric/status footer bits. */
.footer-cols .footer-h { margin: 0 0 .9em; color: var(--text-100); font-family: var(--font-ui); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.footer-cols a { display: block; color: var(--text-dot); text-decoration: none; margin-bottom: .55em; font-size: .9rem; }
.footer-cols a:hover { color: var(--text-100); }
/* IA-06: same one-line differentiator treatment as the nav dropdown, scaled
   down for the footer's smaller column width. */
.footer-hint { display: block; font-size: .74rem; color: var(--text-fnt); margin-top: 1px; }
.footer-cols .muted { color: var(--text-dim); }
.footer-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--emerald); border: 1px solid rgba(52,211,153,.3); background: rgba(52,211,153,.08); border-radius: 20px; padding: 5px 12px; margin-top: 10px; text-decoration: none; }
.footer-intro { border: 1px solid rgba(96,165,250,.25); background: rgba(37,99,235,.05); border-radius: var(--radius-card); padding: 14px 18px; font-size: .84rem; color: var(--text-mute); margin-bottom: 24px; }
.footer-intro strong { color: var(--text-200); }
.footer-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 18px; font-size: .82rem; color: var(--text-fnt); }
.footer-base a { color: var(--text-dot); }
.footer-tagline { font-family: var(--font-mono); font-size: .78rem; }

/* Blog topic-tag chips (link variant) and jurisdiction "From the blog" block */
.mr-badges .vpill-link { text-decoration: none; transition: all .15s; }
.mr-badges .vpill-link:hover { background: rgba(52,211,153,.22); color: var(--emerald); }
.related-posts { margin: 30px 0 6px; padding: 18px 20px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); }
.related-posts-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.related-posts-list li { display: flex; flex-direction: column; gap: 2px; }
.related-posts-list a { color: var(--blue-300); text-decoration: none; font-weight: 600; }
.related-posts-list a:hover { color: var(--blue-050); text-decoration: underline; }
.related-posts-ex { color: var(--text-mute); font-size: .85rem; }

/* Counsel introductions cross-link band: deliberately quiet, not a banner */
.counsel-band { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 26px 0; padding: 16px 20px; background: var(--surface-card); border: 1px solid var(--border-strong); border-left: 3px solid var(--blue-600); border-radius: 10px; }
.counsel-band-text { margin: 0; color: var(--text-300); font-size: .95rem; max-width: 640px; }
.counsel-band-links { display: inline-flex; gap: 16px; flex-wrap: wrap; }
/* No nowrap: the longest band label ("See the white-glove counsel introduction
   service") is wider than a 320px viewport and escaped the band; wrapping onto
   a second line is the graceful failure. */
.counsel-band-link { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .03em; color: var(--blue-300); text-decoration: none; }
.counsel-band-link:hover { color: var(--blue-050); text-decoration: underline; }
.counsel-band-link-alt { color: var(--text-mute); }
/* Coarse cost tier on a locked cost band (shape, never the number): filled £
   symbols show relative expense; the unfilled remainder is dimmed. */
.cost-tier { font-family: var(--font-mono); letter-spacing: .04em; }
.cost-tier-on { color: var(--blue-300); font-weight: 600; }
.cost-tier-off { color: var(--text-mute); opacity: .55; }

/* Cookie banner */
.cookie-banner { position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 520px; margin: 0 auto; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-card); box-shadow: 0 8px 30px rgba(0,0,0,.55); padding: 18px 20px; z-index: 90; font-size: .87rem; color: var(--text-300); }
.cookie-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Admin */
.admin-body { background: var(--bg-page); }
.admin-header { background: rgba(11,17,32,.9); }
.admin-main { min-height: 80vh; }
/* AD-05: grouped admin nav. Each cluster is a labelled column (tiny caps label
   over a row of links) so the 17 links read as four scannable groups. */
.admin-nav { gap: 18px; align-items: flex-start; }
.admin-nav .admin-nav-group { display: flex; flex-direction: column; gap: 3px; padding-left: 14px; border-left: 1px solid var(--border); }
.admin-nav .admin-nav-group:first-child { border-left: 0; padding-left: 0; }
.admin-nav .admin-nav-label { font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.admin-nav .admin-nav-links { display: flex; gap: 12px; flex-wrap: wrap; }
.admin-nav .admin-nav-links a.active { color: var(--text-050); border-bottom: 2px solid var(--amber); padding-bottom: 1px; }
.admin-nav .admin-nav-meta { flex-direction: row; align-items: center; gap: 12px; }
@media (max-width: 820px) {
  .admin-nav .admin-nav-group { width: 100%; border-left: 0; padding-left: 0; }
  .admin-nav .admin-nav-links { padding-left: 10px; border-left: 1px solid var(--border-strong); }
}
/* AD-03: read-only feature-switch status board on /admin/settings. */
.flag-state { display: inline-block; min-width: 38px; text-align: center; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .08em; border-radius: 4px; padding: 2px 7px; }
.flag-on { color: var(--emerald); border: 1px solid rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.flag-off { color: var(--text-mute); border: 1px solid var(--border); background: rgba(148,163,184,.06); }
/* AD-04: amber attention alert (the alert family only had red/green/blue). */
.alert-warn { background: rgba(251,191,36,.08); color: var(--amber); border: 1px solid rgba(251,191,36,.35); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; font-size: .89rem; }
/* overflow-wrap:anywhere: admin cells hold emails, Stripe IDs and URLs that
   have no natural break points; without it a long value forces the whole
   table past its card edge on narrow windows. */
.admin-table th, .admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; color: var(--text-300); overflow-wrap: anywhere; }
.admin-table thead th { background: rgba(37,99,235,.09); color: var(--text-100); font-family: var(--font); }
.row-actions { white-space: nowrap; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 20px 0 30px; }
.stat { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px; text-align: center; color: var(--text-mute); }
.stat-n { font-size: clamp(1.25rem, 2.4vw, 1.9rem); font-weight: 650; font-family: var(--font); color: var(--text-050); overflow-wrap: anywhere; }
.stat-warn { border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.06); }
/* Stat tiles as links (admin dashboard + users page): same rendering as the
   plain tile, with the j-card hover affordance (subtle lift + border shift). */
a.stat { display: block; text-decoration: none; color: var(--text-mute); cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
a.stat:hover, a.stat:focus-visible { transform: translateY(-2px); border-color: rgba(96,165,250,.4); color: var(--text-mute); }
a.stat.stat-warn:hover, a.stat.stat-warn:focus-visible { border-color: rgba(251,191,36,.7); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.cell-editor { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-card); padding: 16px 18px 20px; margin: 0; }
.cell-editor legend { font-weight: 700; color: var(--text-100); padding: 0 6px; font-family: var(--font); }
.cell-ph { border-left: 4px solid var(--amber); }
.check-row { display: flex; gap: 24px; flex-wrap: wrap; color: var(--text-200); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.danger-zone { margin-top: 34px; padding-top: 20px; border-top: 1px dashed rgba(248,113,113,.5); }
.digest-panel { margin: 18px 0 26px; border-color: rgba(96,165,250,.32); }
.digest-panel h2 { margin: 0 0 .4em; }
.digest-stat { margin: 10px 0 14px; color: var(--text-300); }
.digest-stat strong { color: var(--text-050); font-family: var(--font); }
.digest-preview { margin: 0 0 16px; border: 1px solid var(--border, rgba(148,163,184,.25)); border-radius: 8px; padding: 10px 14px; background: rgba(15,23,42,.4); }
.digest-preview summary { cursor: pointer; font-weight: 600; color: var(--text-100, #e2e8f0); }
.digest-preview-body { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(148,163,184,.25); font-size: .92rem; color: var(--text-300); max-height: 360px; overflow: auto; }
.digest-preview-body h3 { font-size: 1rem; color: var(--text-050); }
.digest-audience { margin: 6px 0 14px; border: 1px solid rgba(148,163,184,.25); border-radius: 8px; padding: 10px 14px; }
.digest-audience legend { padding: 0 6px; font-weight: 600; color: var(--text-100, #e2e8f0); }
.digest-audience .radio-row { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; cursor: pointer; }
.digest-audience .radio-row input { margin-top: 4px; }
.digest-note { width: 100%; font-family: var(--font); line-height: 1.5; }
.legal-page h2 { margin-top: 1.6em; font-size: 1.3rem; }

/* Blog post prose */
.post-body { color: var(--text-300); line-height: 1.7; }
.post-body h2 { margin-top: 1.5em; font-size: 1.4rem; color: var(--text-050); }
.post-body h3 { margin-top: 1.3em; font-size: 1.12rem; color: var(--text-100); }
.post-body p { margin: 0 0 1.1em; }
.post-body ul, .post-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.post-body li { margin-bottom: .5em; }
.post-body a { color: var(--blue-400); word-break: break-word; }
.post-body blockquote { margin: 0 0 1.1em; padding: 4px 0 4px 18px; border-left: 3px solid var(--border-strong); color: var(--text-mute); }
.post-body hr { border: none; border-top: 1px solid var(--border); margin: 1.8em 0; }
.post-body code { color: var(--text-100); }

/* Blog-to-matrix CTA (item 8): a data-terminal call-to-action after the post. */
/* DX-05 extended (spec 4.3): neutral container + left accent; the blue wash is
   reserved for the paywall band. */
.blog-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 32px 0; padding: 20px 24px; background: var(--surface-card); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--radius-card); }
.blog-cta-kicker { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 6px; }
.blog-cta-lead { margin: 0; color: var(--text-200); max-width: 560px; font-size: .96rem; }
.blog-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Unlock box */
.unlock-box { margin-top: 18px; }
.unlock-box .inline-capture { justify-content: flex-start; }

/* Verification freshness & live monitoring (dark-adapted) */
.fresh-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; border-radius: 20px; padding: 2px 10px; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.fresh-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.fresh-current { background: rgba(52,211,153,.12); color: var(--emerald); border-color: rgba(52,211,153,.32); }
.fresh-due { background: rgba(251,191,36,.1); color: var(--amber); border-color: rgba(251,191,36,.3); }
.fresh-stale { background: rgba(248,113,113,.1); color: var(--red); border-color: rgba(248,113,113,.3); }
.fresh-pending { background: rgba(255,255,255,.05); color: var(--text-mute); border-color: var(--border); }
a.fresh-pill:hover { filter: brightness(1.15); }
.matrix .verified-tag.fresh-pill { margin-top: 6px; }
.matrix thead .verified-tag.fresh-pill { color: var(--emerald); }
/* Per-cell freshness caption (item 2). Present in the DOM for assistive tech,
   quiet by default, and revealed more prominently on hover/focus of the cell.
   Overrides the pill background so it reads as a plain mono caption. */
.cell-fresh { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; opacity: .55; background: none !important; border: 0 !important; padding: 0; transition: opacity .12s ease; }
td.cell:hover .cell-fresh, td.cell:focus-within .cell-fresh, td.cell.open .cell-fresh { opacity: 1; }
/* Aggregate "oldest cell Xd ago" line on jurisdiction pages: colour the delta
   only, no pill chrome. */
.aggregate-fresh { margin-top: -2px; margin-bottom: 14px; }
.aggregate-fresh .fresh-current, .aggregate-fresh .fresh-due, .aggregate-fresh .fresh-stale, .aggregate-fresh .fresh-pending,
.cell-fresh.fresh-current, .cell-fresh.fresh-due, .cell-fresh.fresh-stale, .cell-fresh.fresh-pending { background: none; border: 0; padding: 0; font-weight: 700; }
/* DX-06: the nav "Changes" dot sits site-wide, so on pages that also carry a
   live map or the status monitor it created a second concurrent pulse. It is now
   a static emerald dot; the page's own live indicator (map .live-dot / status
   .monitor-dot) is the single pulsing status signal. */
.nav-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); margin-right: 6px; vertical-align: middle; }
.monitor-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--emerald); display: inline-block; animation: lm-pulse 2s infinite; }
@keyframes lm-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); } 70% { box-shadow: 0 0 0 6px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.status-head .monitor-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: .9rem; color: var(--text-mute); }
.monitor-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(52,211,153,.1); color: var(--emerald); border: 1px solid rgba(52,211,153,.3); border-radius: 20px; padding: 4px 12px; font-weight: 700; font-size: .8rem; font-family: var(--font-mono); }
.monitor-meta strong { color: var(--text-100); }
.status-legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 22px; }
.jur-status-list { display: flex; flex-direction: column; gap: 10px; }
.jur-status-row { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.jur-status-row summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.jur-status-row summary::-webkit-details-marker { display: none; }
.jsr-name { font-weight: 700; color: var(--text-100); }
.jsr-meta { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jsr-verified { font-family: var(--font-mono); font-size: .74rem; color: var(--text-dim); }
.dim-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 18px 16px; }
.dim-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .72rem; border-radius: 6px; padding: 4px 8px; border: 1px solid var(--border); color: var(--text-300); }
.dim-chip-label { font-weight: 600; }
.dim-chip-date { opacity: .8; font-variant-numeric: tabular-nums; }
.jsr-foot { padding: 0 18px 14px; font-size: .85rem; color: var(--text-mute); }
.status-feeds { margin-top: 26px; }
.updates-list { list-style: none; padding: 0; margin: 0; }
.updates-list li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .9rem; color: var(--text-300); }
.updates-list li:last-child { border-bottom: none; }
.upd-date { color: var(--text-dim); font-variant-numeric: tabular-nums; margin-right: 6px; font-family: var(--font-mono); font-size: .8rem; }

/* Report page: form + branded sample mock-ups */
.report-grid { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: start; }
.report-examples { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; }
.mock-report { position: relative; background: linear-gradient(175deg, #101B31, var(--surface-deep)); border: 1px solid var(--border-strong); border-radius: 12px; padding: 20px 22px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; }
.mock-report::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--blue-600), var(--blue-400)); }
.mr-sample { position: absolute; top: 38%; right: -34px; transform: rotate(-24deg); font-family: var(--font-mono); font-size: 34px; font-weight: 700; letter-spacing: .3em; color: rgba(255,255,255,.05); pointer-events: none; }
.mr-head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.mr-head .logo-mark { margin-right: 0; transform: scale(.8); }
.mr-brand { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--text-100); letter-spacing: -.4px; }
.mr-brand b { color: var(--blue-400); font-weight: 700; }
.mr-type { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; color: var(--blue-400); border: 1px solid rgba(96,165,250,.35); border-radius: 4px; padding: 2px 7px; }
.mock-report h3, .mock-report h4 { font-family: var(--font); font-size: 1.05rem; font-weight: 600; color: var(--text-050); margin: 0 0 2px; letter-spacing: 0; }
.mr-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); margin: 0 0 12px; }
.mr-toc { display: flex; flex-direction: column; }
.mr-line { display: flex; gap: 10px; align-items: baseline; font-family: var(--font-ui); font-size: 12.5px; color: var(--text-300); padding: 5.5px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.mr-line:last-child { border-bottom: none; }
.mr-line span { font-family: var(--font-mono); font-size: 10px; color: var(--blue-400); font-weight: 700; }
.mr-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.mr-badges .vpill { background: rgba(52,211,153,.12); color: var(--emerald); border-radius: 12px; padding: 2px 9px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
@media (max-width: 980px) { .report-grid { grid-template-columns: 1fr; } .report-examples { position: static; } }

/* Export / print */
.export-table { min-width: 0; }
.print-head { font-family: var(--font-mono); font-size: .8rem; color: var(--text-dim); margin-bottom: 12px; }
@media print {
  body { background: #fff !important; color: #111 !important; font-size: 11px; }
  .site-header, .topbar-disclaimer, .site-footer, .cookie-banner, .no-print, .nav-toggle { display: none !important; }
  .section { padding: 0; border: none; }
  h1, h2, h3, .price, .dimcell, .jlink { color: #0B1120 !important; }
  .matrix-scroll, table.matrix, .matrix th, .matrix td { background: #fff !important; color: #111 !important; border-color: #ddd !important; box-shadow: none !important; }
  .matrix thead th { background: #fff !important; color: #0B1120 !important; border-bottom: 2px solid #0B1120 !important; }
  .detail-meta, .verified-tag, .print-head, .fineprint { color: #555 !important; }
  .matrix th, .matrix td { padding: 6px 8px; }
  a { text-decoration: none; color: inherit !important; }
}

/* ── Pathfinder results and chooser (UX pass, 6 July 2026) ──────────────────
   Result cards sit two abreast where the viewport allows and stack to one
   column on narrow screens; pure CSS, no JS. min(420px, 100%) keeps the grid
   track valid on ~380px phones (a bare 420px minimum would overflow). */
.pf-results { max-width: 1100px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 14px; align-items: stretch; }
.pf-card { display: flex; flex-direction: column; }
/* Compact next-step action row pinned to the bottom of each result card. */
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }
/* Warm-introduction tickboxes on the paid results page. */
.pf-intro-picks { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 14px; }
.pf-intro-pick { display: flex; align-items: baseline; gap: 8px; font-size: .95rem; color: var(--text-200); cursor: pointer; }
.pf-intro-pick input { accent-color: var(--blue-600); }
.pf-intro-pick-off { opacity: .55; cursor: default; }
/* Regime chooser: two equally weighted primary buttons. DX-06: the resting
   infinite box-shadow pulse was removed — two large CTAs breathing in unison
   read as a nag; the hover highlight stays as the only motion. */
.pf-regime-btn:hover { background: var(--blue-700); border-color: var(--blue-700); box-shadow: 0 12px 32px rgba(37,99,235,.6); }
/* IA-07: the wizard's stepper feel. A small "N of 5" progress badge on each
   question, and inline required-group messages written into the offending
   fieldset by the progressive-enhancement script in views/pathfinder.ejs. */
.pf-step { display: inline-block; font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-300); border: 1px solid rgba(96,165,250,.35); border-radius: 999px; padding: 2px 9px; margin-right: 10px; vertical-align: middle; }
.pf-error { margin: 8px 0 0; font-size: .87rem; color: #FCA5A5; }
fieldset.pf-invalid { border-color: rgba(248,113,113,.55); }
/* A11y-01: Pathfinder answer rows were bare `display:block` labels ~22px tall —
   below the 44px touch minimum used elsewhere. Make the whole row a tappable
   target with a visibly enlarged control; the input is no longer a lone 13px
   hit area at the start of the line. */
#pf-form .pf-opt { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; margin: 2px 0; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-size: .95rem; }
#pf-form .pf-opt:hover { background: rgba(37,99,235,.08); }
#pf-form .pf-opt:focus-within { border-color: var(--blue-400); background: rgba(37,99,235,.10); }
#pf-form .pf-opt input { width: 20px; height: 20px; flex: none; margin: 0; }
#pf-form .pf-opt-sub { margin-top: 8px; color: var(--text-300); }

/* ── Reduced motion: the single global neutraliser ─────────────────────────
   One block that near-instantly kills every animation and transition on the
   site, the existing pulses and the whole motion/visual-polish pass alike.
   Reveal targets are forced to their final state so no-motion users still see
   everything. Anything animation-driven added below must be covered here. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Force revealed/entrance targets to their resting (visible) state.
     NOT .regime-pill: its transform is the SELECTED SIDE (state, not an
     entrance), so forcing transform:none pinned the pill to the Crypto tab
     on every e-money page for reduced-motion users. Its slide is already
     neutralised by the global transition-duration rule above. */
  html.js [data-reveal],
  html.js .jp-head { opacity: 1 !important; transform: none !important; }
  /* Kill the decorative reading-progress and map shimmer entirely. */
  .read-progress { display: none !important; }
  /* Pathfinder regime buttons: no pulse, rest at the static primary shadow. */
  .pf-regime-btn { animation: none !important; }
  .map-loading::after, .map-loading::before, .map-failed::before { animation: none !important; background-image: none !important; }
}

/* ── Matrix tablet readability (item 11) ─────────────────────────────────────
   At ~1024px we tighten spacing so more columns, including the gated ones, fit
   before any scroll. At <=768px the table becomes a stacked card per
   jurisdiction so the gated columns and their Unlock CTAs are reachable without
   horizontal hunting. Native table semantics (the a724fab scopes) are preserved:
   the markup also carries explicit ARIA table/row/cell roles, so these display
   changes do not strip the semantics from assistive tech. The jurisdiction cell
   becomes each card's sticky header. No DOM elements or keyboard paths change. */
@media (max-width: 1024px) {
  table.matrix { min-width: 860px; font-size: .82rem; }
  .matrix th, .matrix td { padding: 9px 10px; }
  .sticky-col { min-width: 150px; }
  .cell { max-width: 220px; }
}
@media (max-width: 768px) {
  /* Stop being a scrolling grid; stack each jurisdiction as a card. */
  .matrix-scroll { overflow-x: visible; border: 0; box-shadow: none; background: transparent; }
  table.matrix { min-width: 0; width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
  .matrix thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* headers move into each cell via data-label */
  .matrix tbody { display: block; }
  .matrix tbody tr { display: block; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-card); box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
  .matrix tbody tr > th.sticky-col { display: block; position: static; box-shadow: none; min-width: 0; width: auto; background: var(--surface-raised); border-bottom: 1px solid var(--border-strong); padding: 14px var(--space-4); }
  .matrix tbody tr > td { display: block; max-width: none; border: 0; border-bottom: 1px solid var(--border); padding: 12px 16px; }
  .matrix tbody tr > td:last-child { border-bottom: 0; }
  /* Column name as an inline label on every stacked cell. */
  .matrix tbody tr > td { display: flex; flex-direction: column; }
  .matrix tbody tr > td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
  .cell { max-width: none; }
  /* Cards show the full cell text, so the click-to-expand affordance is dropped. */
  td.cell:not(.cell-locked) { cursor: default; }
  .clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }
  td.cell:not(.cell-locked):not(.open) .clamp::after { display: none; }
  /* Gated cells: mask and Unlock CTA are now always visible in the card flow. */
  .cell-locked .cell-mask { margin-bottom: 6px; }
  /* Compare/pair tables are TRANSPOSED: the card title is the dimension (row
     header) and each stacked cell belongs to a jurisdiction, so its data-label
     is a place name, not a column code. Render that label as a readable
     sub-heading (sentence case, sans) rather than the matrix's tiny mono
     column tag, and give the pinned column a left accent so it is still
     distinguishable once the header row is hidden. */
  .compare-table tbody tr > td[data-label]::before { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--text); margin-bottom: 4px; }
  .compare-table tbody tr > td.col-primary { border-left: 3px solid var(--accent); background: var(--surface-raised); }
  /* A11y: the row-expand and watch pills are the most-tapped controls on the
     default mobile matrix, and shipped ~20px tall. Lift them to the 44px touch
     minimum here (desktop keeps the compact inline size). */
  .row-expand, .watch-btn { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
}

/* Responsive */
@media (max-width: 980px) {
  .container, .container-wide { padding: 0 20px; }
  .ht-atlas, .ht-globe { grid-template-columns: 1fr; }
  .ht-globe .ht-text { order: 1; }
  .ht-globe .ht-map { order: 2; }
  .map-panel, .map-panel-globe, .map-panel-coverage { height: 360px; }
  /* Small screens: the readout flows below the map instead of covering it */
  .map-readout { position: static; width: 100%; margin-top: 12px; }
  .cov-grid, .method-grid { grid-template-columns: 1fr; }
  .legend-list { max-height: none; }
  .section { padding: var(--space-10) 0; }
  .decision-points { grid-template-columns: 1fr; }
  .counsel-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counsel-steps li:nth-child(3) { border-left: 0; }
}
@media (max-width: 820px) {
  .main-nav { display: none; position: absolute; top: 58px; left: 0; right: 0; max-height: calc(100dvh - 58px); overflow-y: auto; background: var(--bg-page); border-bottom: 1px solid var(--border); flex-direction: column; align-items: flex-start; padding: 16px 20px 20px; gap: 14px; box-shadow: 0 12px 20px rgba(0,0,0,.45); }
  body.nav-open .main-nav { display: flex; }
  .nav-toggle { display: block; }
  /* Disclosures become headed link sections in the mobile menu: the button is a
     static heading and the panel is always shown (regardless of the [hidden]
     attribute the desktop dropdown JS toggles), so everything is reachable. */
  .main-nav .nav-group { display: block; width: 100%; }
  .nav-group-btn { cursor: default; color: var(--text-dim); font-size: 11px; letter-spacing: .12em; min-height: auto; margin: 6px 0 4px; }
  .nav-group-btn .nav-caret { display: none; }
  .nav-group-panel, .nav-group-panel[hidden] { position: static; display: flex; min-width: 0; padding: 0 0 0 10px; margin: 0; background: none; border: 0; box-shadow: none; border-left: 1px solid var(--border-strong); }
  .nav-group-panel a { min-height: 44px; display: flex; align-items: center; padding: 8px 10px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .paywall-banner { flex-direction: column; align-items: flex-start; }
  .principles { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr; }
  .strip-row { flex-direction: column; gap: 6px; }
  .ht-ctas .ht-btn, .hero-ctas .btn { width: 100%; text-align: center; }
  .mxp-label { flex-basis: 130px; }
  .hero-proof { padding: 20px 16px; }
  .hero-proof-head { flex-direction: column; gap: 10px; }
  .hero-proof-fresh { white-space: normal; }
  .counsel-service-head { padding-top: 32px; }
  .counsel-service-head h1 { font-size: clamp(2.1rem, 11vw, 3rem); }
  .counsel-steps { grid-template-columns: 1fr; }
  .counsel-steps li, .counsel-steps li:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .counsel-steps li:first-child { border-top: 0; }
  .counsel-directory-head { align-items: stretch; flex-direction: column; }
  .intro-search-wrap { flex-basis: auto; }
  .intro-directory-item { align-items: flex-start; flex-direction: column; }
  .intro-directory-action { justify-content: space-between; width: 100%; }
}

/* ── Accessibility utilities (Week 1 a11y sprint) ───────────────────────── */
/* Visually hidden but exposed to screen readers (form labels, table header text) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Subsection look for h2s promoted from h3 to keep the heading hierarchy
   correct (one h1, no skipped levels) without changing the visual design. */
.h-sub { font-size: 1.18rem; font-weight: 600; color: var(--text-100); letter-spacing: 0; line-height: 1.3; margin: 0 0 .5em; }

/* ══════════════════════════════════════════════════════════════════════════
   MOTION & VISUAL-POLISH PASS
   Compositor-friendly only (transform + opacity). Small distances (6-14px),
   150-400ms, easing var(--ease). Reveal styles are scoped under html.js so
   no-JS renders everything visible with no layout shift. Every animation here
   is neutralised by the single reduced-motion block above.
   ══════════════════════════════════════════════════════════════════════════ */
/* --ease now lives in the single :root token block at the top of this file. */

/* ── Item 9/10: scroll-reveal ─────────────────────────────────────────────
   Hidden state applies ONLY under html.js, so no-JS sees the final state.
   Content still occupies its final space (no height animation), so revealing
   never shifts layout. */
html.js [data-reveal] {
  opacity: 0; transform: translateY(10px);
  transition: opacity .38s var(--ease), transform .38s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal].revealed { opacity: 1; transform: none; }

/* ── Item 1: matrix filter/sort transitions ───────────────────────────────
   Rows animate transform+opacity only; display:none is applied by JS after the
   transition (or a timeout guard). Newly shown rows get a capped-stagger fade.
   The tbody gets a brief opacity pulse on sort re-append. */
.matrix tbody tr { transition: opacity .18s var(--ease), transform .18s var(--ease); }
.matrix tbody tr.row-hide { opacity: 0; transform: translateX(-6px); }
.matrix tbody tr.row-in { animation: rowIn .22s var(--ease) both; animation-delay: var(--row-delay, 0ms); }
@keyframes rowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.matrix tbody.tbody-sorting { animation: tbodyPulse .15s var(--ease); }
@keyframes tbodyPulse { 0% { opacity: .55; } 100% { opacity: 1; } }

/* ── Item 2: jurisdiction detail entrance + flag + compare CTA arrow ───────*/
html.js .jp-head { animation: headRise .34s var(--ease) both; }
@keyframes headRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.j-flag-lg { display: inline-block; transition: transform .2s var(--ease), filter .2s var(--ease); }
h1:hover .j-flag-lg { transform: translateY(-3px); filter: drop-shadow(0 4px 10px rgba(96,165,250,.55)); }
.cta-arrow .cta-arrow-i { display: inline-block; transition: transform .2s var(--ease); }
.cta-arrow:hover .cta-arrow-i { transform: translateX(5px); }

/* ── Item 4: card hover border glow (why-pay, pricing, price-card, steps) ──*/
.step-card, .price-card, .why-col, .trace-card {
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.step-card:hover, .price-card:hover, .why-col:hover, .trace-card:hover {
  border-color: rgba(96,165,250,.42);
  box-shadow: 0 10px 34px rgba(37,99,235,.16);
}
/* Checkmark markers nudge on card hover (CSS-only, no icons). */
.price-card li::before { transition: transform .2s var(--ease); }
.price-card:hover li::before { transform: translateX(2px) scale(1.12); }

/* ── Item 10: step-card accent line grows on reveal + brightens on hover ──*/
.step-card::before { transform-origin: left center; transition: filter .2s var(--ease); }
html.js .step-card[data-reveal]::before { transform: scaleX(0); transition: transform .4s var(--ease) .1s; }
html.js .step-card[data-reveal].revealed::before { transform: scaleX(1); }
.step-card:hover::before { filter: brightness(1.35); }

/* ── Item 5: nav dropdown fade + drop-in, staggered links ─────────────────
   The [hidden] attribute flips first (JS), then .np-open is added next frame to
   trigger the transition. Links stagger via nth-child, capped by count. */
.nav-group-panel:not([hidden]) {
  opacity: 0; transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.nav-group-panel.np-open { opacity: 1; transform: none; }
.nav-group-panel.np-open a { animation: navLink .2s var(--ease) both; }
.nav-group-panel.np-open a:nth-child(1) { animation-delay: .04s; }
.nav-group-panel.np-open a:nth-child(2) { animation-delay: .08s; }
.nav-group-panel.np-open a:nth-child(3) { animation-delay: .12s; }
.nav-group-panel.np-open a:nth-child(n+4) { animation-delay: .16s; }
@keyframes navLink { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ── Item 6: breadcrumb fade-in + reading-progress bar ────────────────────*/
html.js .breadcrumb { animation: crumbIn .3s var(--ease) both; }
@keyframes crumbIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.read-progress {
  position: sticky; top: 0; z-index: 40; height: 2px; width: 100%;
  background: transparent; pointer-events: none;
}
.read-progress-fill {
  display: block; height: 100%; width: 100%;
  background: var(--blue-600); transform: scaleX(0); transform-origin: left center;
}

/* ── Item 7: regime-toggle sliding pill ───────────────────────────────────
   A shared indicator sits absolutely behind the tabs. Its resting side is set
   by [data-state]; app.js can start it on the previous side and transition it
   across (a slide, not a swap). The active <a> loses its own background so the
   pill reads as the selection. */
.regime-toggle { position: relative; }
.regime-toggle a.active { background: transparent; box-shadow: none; color: #fff; }
.regime-pill {
  /* Geometry: padding-box width W holds 3px pad + tab + 3px gap + tab + 3px
     pad, so each equal-flex tab is (W - 9px) / 2 = calc(50% - 4.5px). The
     e-money resting position is one tab width PLUS the 3px gap across, or the
     pill sits 3px into the left tab and reads as a bleed. */
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 4.5px);
  border-radius: 6px; background: var(--blue-600); box-shadow: 0 4px 14px rgba(37,99,235,.35);
  transform: translateX(0); transition: transform .28s var(--ease); z-index: 0;
}
.regime-toggle[data-state="emoney"] .regime-pill { transform: translateX(calc(100% + 3px)); }
.regime-toggle a { position: relative; z-index: 1; }

/* ── Item 8: map load shimmer + calm failed placeholder ───────────────────
   Shimmer sweeps a gradient across the panel while loading; removed on first
   paint. The failed state swaps to a calm pulsing placeholder. Both respect
   reduced motion (neutralised above). */
.map-loading::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(96,165,250,.10) 50%, transparent 70%);
  background-size: 220% 100%; animation: mapShimmer 1.4s var(--ease) infinite;
}
@keyframes mapShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.map-ready canvas { animation: mapFade .5s var(--ease) both; }
@keyframes mapFade { from { opacity: 0; } to { opacity: 1; } }
.map-failed::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(420px 260px at 50% 45%, rgba(96,165,250,.10), transparent 70%);
  animation: failGlow 3s ease-in-out infinite;
}
@keyframes failGlow { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }

/* ── Cost calculator (spec 03) ─────────────────────────────────────────────
   Confidence chips, the headline card, breakdown table, pure-CSS stacked
   bars and the masked/locked treatment. Colours reuse the design tokens:
   verified = emerald, estimate = amber, inferred = slate; pair-level chips
   mirror the same scale. */
.conf-chip { display: inline-block; font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.conf-verified, .conf-pair-high { background: rgba(52,211,153,.14); color: var(--emerald); border: 1px solid rgba(52,211,153,.35); }
.conf-estimate, .conf-pair-medium { background: rgba(251,191,36,.12); color: var(--amber); border: 1px solid rgba(251,191,36,.3); }
.conf-inferred, .conf-pair-low { background: rgba(148,163,184,.14); color: var(--text-mute); border: 1px solid rgba(148,163,184,.35); }
.conf-decayed { border-style: dashed; }

.cost-headline { background: var(--surface-card); border: 1px solid var(--border-strong); border-left: 3px solid var(--blue-600); border-radius: var(--radius-card); padding: 22px 26px; margin: 18px 0 14px; }
.cost-mid { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; color: var(--text-050); margin: 0 0 4px; }
.cost-mid-sub { font-size: .85rem; font-weight: 500; color: var(--text-mute); font-family: var(--font-ui); } /* --font-body was never defined */
.cost-range { margin: 0 0 8px; color: var(--text-300); }
.cost-conf { margin: 0 0 10px; }
.cost-scenario { margin: 0; color: var(--text-mute); font-size: .92rem; border-top: 1px solid var(--border); padding-top: 10px; }

.cost-disclaimer { background: var(--surface-deep); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin: 14px 0 18px; }
.cost-disclaimer p { margin: 0 0 6px; color: var(--text-300); font-size: .9rem; }
.cost-disclaimer p:last-child { margin-bottom: 0; }

.table-scroll { overflow-x: auto; }
.cost-table { width: 100%; border-collapse: collapse; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; font-size: .88rem; }
.cost-table th, .cost-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cost-table thead th { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.cost-table tbody th[scope="row"] { font-weight: 600; color: var(--text-050); }
.cost-group-row td { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); background: var(--surface-deep); }
.cost-total-row th, .cost-total-row td { border-top: 2px solid var(--border-strong); }
.cost-orig { color: var(--text-050); }
.cost-eur { color: var(--text-mute); font-size: .82rem; }
.cost-masked { color: var(--text-dim); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
/* Paywall parity with the matrix (which made every locked cell a real link to
   pricing): the cost tables' "Locked" figures are now clickable, not dead text. */
a.cost-lock-link { display: inline-flex; align-items: center; min-height: 24px; text-decoration: none; color: var(--blue-300); cursor: pointer; }
a.cost-lock-link:hover { color: var(--blue-050); text-decoration: underline; } /* was undefined --blue-200, which left hover inert */
a.cost-lock-link:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
/* A11y/mobile: the cost COMPARISON table is a wide transposed grid (components ×
   up to five jurisdictions) and shipped with no responsive treatment — a tiny
   horizontally-scrolling grid on a phone. Stack it like the matrix: each
   component row becomes a card titled by the component, each figure labelled by
   its jurisdiction. Scoped to .cost-compare-table so the index/jurisdiction
   cost tables are untouched. */
@media (max-width: 768px) {
  .cost-compare-table { min-width: 0; width: 100%; border: 0; }
  .cost-compare-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
  .cost-compare-table, .cost-compare-table tbody, .cost-compare-table tr, .cost-compare-table th, .cost-compare-table td { display: block; }
  .cost-compare-table tbody tr { background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-card); box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; }
  .cost-compare-table tbody tr > th[scope="row"] { background: var(--surface-raised); border-bottom: 1px solid var(--border-strong); padding: 12px 14px; color: var(--text-050); }
  .cost-compare-table tbody tr > td { border-bottom: 1px solid var(--border); padding: 10px 14px; }
  .cost-compare-table tbody tr > td:last-child { border-bottom: 0; }
  .cost-compare-table tbody tr > td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
  /* Group headers (full-width colspan rows) read as section subheadings. */
  .cost-compare-table tbody tr.cost-group-row { background: none; border: 0; box-shadow: none; margin: 18px 0 6px; }
  .cost-compare-table tbody tr.cost-group-row > td { border: 0; padding: 0; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
  .cost-compare-table tbody tr.cost-group-row > td::before { content: none; }
  .cost-compare-table tbody tr.cost-total-row { border-color: var(--accent); }
}

.cost-bars { margin: 22px 0 6px; }
.cost-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cost-bar-label { font-family: var(--font-mono); font-size: .72rem; color: var(--text-mute); min-width: 52px; }
.cost-bar { flex: 1; display: flex; height: 18px; background: var(--surface-deep); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.cost-seg { display: block; height: 100%; }
.cost-seg-application { background: var(--blue-600); }
.cost-seg-professional { background: rgba(96,165,250,.65); }
.cost-seg-substance { background: rgba(52,211,153,.55); }
.cost-seg-ongoing { background: rgba(251,191,36,.5); }
.cost-bar-total { min-width: 90px; text-align: right; }
.cost-bar-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cost-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

.cost-capital { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px 22px; margin: 20px 0; }
.cost-capital-line { color: var(--text-300); }
.cost-opportunity { color: var(--text-mute); font-size: .9rem; }
.cost-compiling { background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-card); padding: 22px 26px; margin: 14px 0; }
.cost-compiling p { color: var(--text-300); }
.cost-compare-picker { margin: 14px 0 20px; }
.cost-compare-picker fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.check-inline { display: inline-flex; margin-right: 14px; white-space: nowrap; }

/* Checkboxes must never inherit the text-input chrome (background, border,
   11px padding): inside a column-flex .stack-form label that combination
   stretches the box full-width and looks like an empty text field. Render
   them native-sized with the brand accent instead. */
input[type="checkbox"], input[type="radio"] { width: auto; align-self: flex-start; padding: 0; border: none; background: none; accent-color: var(--blue-600); }

/* Long consent sentences next to a checkbox (intro brief form). Unlike
   .check-inline (short filter labels, nowrap by design), this row wraps:
   checkbox top-left, sentence flowing beside it, never off the page. */
.check-consent { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; white-space: normal; font-weight: 400; font-size: .9rem; color: var(--text-300); line-height: 1.5; }
.check-consent input[type="checkbox"] { flex: 0 0 auto; margin-top: 3px; }

/* ── Checkbox / radio OPTION rows (owner report + request, 9 Jul 2026) ───────
   Two related fixes for the jurisdiction / option pickers:

   1) Stacking bug. Inside a .stack-form / .field-grid / .cell-editor the
      default label is a COLUMN (label sitting above its input — correct for a
      TEXT field like "Name" over a text box). For a checkbox/radio label that
      stacked the BOX above its own text, so each box read as belonging to the
      option ABOVE it: ticking "South Korea" actually toggled Spain. Force these
      option labels back to a horizontal row, and drop the 600 field-label
      weight so they read as options, not headings.

   2) Box on the RIGHT (requested layout). The <input> is first in the DOM
      because the <label> wraps it (keeps the control and its text associated
      for screen readers and click targets). We therefore reorder it visually
      with `order` and pin it to the right edge with margin-left:auto rather
      than moving it in the markup. This works for the single-column lists
      (intro / counsel, costs) and for the multi-column grids (compare, export,
      matrix filter), where the box lands at each cell's right edge. */
.stack-form label.check, .stack-form label.check-inline, .stack-form label.radio-row,
.field-grid label.check, .field-grid label.check-inline, .field-grid label.radio-row,
.cell-editor label.check, .cell-editor label.check-inline, .cell-editor label.radio-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}

/* Country / jurisdiction (and sibling option) pickers: label left, box right. */
.bm-peer-opt, .exp-opt, .jfilter-opt, .check-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  white-space: normal;
}
.bm-peer-opt > input, .exp-opt > input, .jfilter-opt > input, .check-inline > input {
  order: 2;
  margin-left: auto;
  align-self: center;
}

/* ── Matrix diet: summary matrix + per-row expansion (6 July 2026) ──────────
   The default hub view shows the headline columns; each row carries a
   "+N more" control that is a real link to ?full=1 (no-JS path), upgraded by
   app.js into an in-place expansion row holding the deferred dimensions. */
.matrix .th-more { min-width: 84px; }
td.cell-more { vertical-align: middle; }
.row-expand { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; color: var(--blue-300); border: 1px solid var(--border); background: rgba(255,255,255,.03); border-radius: 6px; padding: 3px 9px; white-space: nowrap; }
.row-expand:hover { color: var(--text-050); border-color: var(--blue-400); background: rgba(37,99,235,.16); }
.row-expand:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
/* DX-03: visible loading state on the row-expand trigger while its fetch is in
   flight (data-loading="1", set/cleared by app.js), and an inline error row on
   failure (replacing the old silent location.href teleport). The spinner is a
   plain CSS animation, automatically neutralised by the global reduced-motion
   block above (animation-duration forced to ~0). */
.row-expand[data-loading="1"] { color: var(--text-mute); cursor: progress; }
.row-expand .row-expand-spinner { display: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; }
.row-expand[data-loading="1"] .row-expand-spinner { display: inline-block; animation: lm-spin .7s linear infinite; }
@keyframes lm-spin { to { transform: rotate(360deg); } }
.row-expand-error { font-size: .82rem; color: #FCA5A5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0 2px; }
.row-expand-error .row-expand-retry { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; text-decoration: underline; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.row-expand-error .row-expand-retry:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.matrix-detail-row > td { background: var(--surface-deep); border-top: 0; padding: 14px 18px 16px; }
.matrix-error-row > td { background: var(--surface-deep); border-top: 0; padding: 8px 18px; }
.mxd { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 22px; }
.mxd-item { min-width: 0; }
.mxd-label { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 4px; }
.mxd-value { margin: 0; font-size: .88rem; color: var(--text-300); white-space: pre-line; }
.mxd-meta { margin: 4px 0 0; font-size: .78rem; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mxd-meta .cell-fresh { display: inline; margin-top: 0; }
.mxd-source { word-break: break-word; overflow-wrap: anywhere; }
.mxd-locked .cell-mask { margin-bottom: 6px; }
.mxd-foot { grid-column: 1 / -1; margin: 4px 0 0; font-size: .85rem; }
@media (max-width: 767px) {
  /* The stacked-card layout hides table structure below 768px; the detail row
     simply flows as another card section under its jurisdiction. */
  .matrix-detail-row { display: block; }
  .matrix-detail-row > td { display: block; }
  .matrix-error-row { display: block; }
  .matrix-error-row > td { display: block; }
}

/* ── Watch control (spec 02 v1.1 entry points) ──────────────────────────────
   A single quiet control near the page title on jurisdiction and compare
   pages: pill-sized, mono, no banner. .watch-on marks the watching state. */
.watch-ctl { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.watch-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; border-radius: 20px; padding: 2px 10px; cursor: pointer; background: rgba(255,255,255,.03); color: var(--text-300); border: 1px solid var(--border); white-space: nowrap; }
.watch-btn:hover { color: var(--text-050); border-color: var(--blue-400); background: rgba(37,99,235,.16); }
.watch-btn:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.watch-btn.watch-on { color: var(--emerald); border-color: rgba(52,211,153,.32); background: rgba(52,211,153,.08); }
.watch-signin a { color: var(--blue-300); }

/* ── Homepage rebuild (owner brief, 6 July 2026): one job, one click ────────
   Additive only; nothing here restyles hero-terminal, strip, pricing-grid,
   price-card, cta-band or any other component reused elsewhere on the site. */

/* "What moved" ticker: one line under the hero CTAs, no section chrome. */
.ht-ticker { margin: 0 0 1.2em; font-family: var(--font-mono); font-size: 13px; }
.ht-ticker a { color: var(--blue-300); }
.ht-ticker a:hover { color: var(--blue-400); }

/* Proof strip methodology one-liner: shares the strip-row flex row, just the
   widest item so it wraps onto its own line on narrow viewports. */
.strip-verify { font-family: var(--font-ui); font-size: .82rem; letter-spacing: normal; text-transform: none; color: var(--text-mute); flex-basis: 100%; }
.strip-verify a { color: var(--blue-300); }

/* Two-card pricing variant: caps pricing-grid at two columns on wider
   viewports so the pair reads as a deliberate choice, not a stretched grid. */
.pricing-grid-2 { grid-template-columns: repeat(2, minmax(250px, 340px)); justify-content: center; }
@media (max-width: 640px) {
  .pricing-grid-2 { grid-template-columns: 1fr; }
}

/* Link line under the matrix preview, pointing at the coverage map on /about. */
.mxp-map-link { margin: 14px 2px 0; font-size: .85rem; }

/* Three FAQ links in the close section: plain links, no accordion. */
.faq-links { display: flex; gap: 10px 22px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.faq-link { font-family: var(--font-ui); font-size: .85rem; color: var(--text-200); border: 1px solid var(--border); border-radius: 20px; padding: 8px 16px; text-decoration: none; }
.faq-link:hover { color: var(--text-050); border-color: var(--blue-400); background: rgba(37,99,235,.1); }

/* ── Report print stylesheet (spec 06 strand C1) ────────────────────────────
   Save-as-PDF is the v1 export (a real PDF is a later enhancement), so a
   printed report page must read as a clean document: white page, dark type,
   no site chrome, visible link destinations. Every rule is scoped to the
   .report-page hook (views/report_view.ejs) via :has() on the page-level
   selectors, so printing any OTHER page is completely unaffected. */
@media print {
  body:has(.report-page) { background: #fff; color: #111; }
  body:has(.report-page) .site-header,
  body:has(.report-page) .topbar-disclaimer,
  body:has(.report-page) .site-footer,
  body:has(.report-page) .skip-link,
  .report-page .breadcrumb,
  .report-page .report-actions { display: none !important; }
  .report-page { padding: 0; }
  .report-page .container { max-width: 100%; padding: 0; }
  .report-page h1, .report-page h2, .report-page h3 { color: #111; page-break-after: avoid; }
  .report-page .eyebrow, .report-page .detail-meta, .report-page .fineprint { color: #555; }
  .report-page .post-body { color: #111; font-size: 11pt; line-height: 1.55; }
  .report-page .post-body a { color: #111; text-decoration: underline; }
  /* Print the destination after external links; internal site links keep just
     the underline (their path is meaningless on paper without the domain). */
  .report-page .post-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  .report-page .post-body blockquote, .report-page .post-body ul, .report-page .post-body ol { page-break-inside: avoid; }
}

/* ── Flagship report rail (spec 07 A4) ────────────────────────────────── */
.report-rail { display: flex; align-items: center; justify-content: space-between; gap: 40px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--surface-card); box-shadow: var(--elev-1); padding: 44px 48px; text-decoration: none; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.report-rail:hover { border-color: rgba(96,165,250,.55); transform: translateY(-2px); }
.report-rail-body { max-width: 640px; }
.report-rail-title { color: var(--text-050); margin: 0 0 .45em; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.15; }
.report-rail-lead { color: var(--text-mute); margin: 0 0 1.1em; font-size: 15.5px; }
.report-rail-meta { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12.5px; color: var(--blue-400); }
.report-rail-meta span + span { border-left: 1px solid rgba(96,165,250,.3); padding-left: 18px; }
.report-rail-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.report-rail-all { color: var(--text-mute); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.report-rail:hover .report-rail-all { color: var(--text-050); }
@media (max-width: 760px) { .report-rail { flex-direction: column; align-items: flex-start; padding: 32px 24px; } .report-rail-cta { flex-direction: row; align-items: center; } }

/* ── Credibility strip on /pricing (spec 07 A3) ───────────────────────── */
.cred-strip { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; color: var(--text-mute); margin-top: 18px; }
.cred-strip strong { color: var(--blue-400); font-weight: 600; }
.cred-strip span + span::before { content: "·"; margin-right: 26px; color: rgba(255,255,255,.25); }

/* ── Per-jurisdiction email unlock (spec 07 B1-B3) ────────────────────── */
.unlock-offer { margin-top: .8em; color: var(--text-050); font-size: 15px; }
.unlock-used { margin-top: .6em; color: var(--blue-400); font-size: 13.5px; border-left: 2px solid rgba(96,165,250,.5); padding-left: 10px; }
.paywall-actions-stack { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.paywall-actions-stack .inline-capture { display: flex; gap: 8px; }
.paywall-actions-stack .btn-outline { text-align: center; }

/* ── Pricing extras (spec 07 C1/C3/C4) ────────────────────────────────── */
.price-eur { font-family: var(--font-mono); font-size: 13px; color: var(--text-mute); margin: -4px 0 8px; }
.invoice-link { margin-top: 10px; font-size: 13px; text-align: center; }
.invoice-link a { color: var(--text-mute); text-decoration: underline; text-underline-offset: 3px; }
.invoice-link a:hover { color: var(--text-050); }
.pricing-faq { max-width: 720px; margin: 40px auto 8px; }
.stacked-form { display: flex; flex-direction: column; gap: 8px; max-width: 480px; margin: 0 auto; }
.stacked-form label { margin-top: 10px; font-size: 14px; color: var(--text-mute); }
.stacked-form input, .stacked-form select { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-card); color: var(--text-050); }
.stacked-form .btn { margin-top: 18px; }
.row-muted td { opacity: .45; }

/* ── Closing-windows strip (spec 07 strand D) ─────────────────────────── */
.deadlines-strip { border-top: 1px solid rgba(96,165,250,.25); border-bottom: 1px solid rgba(96,165,250,.25); background: rgba(37,99,235,.05); }
.deadlines-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-400); }
/* The label is now the strip's link into /calendar (9 Jul 2026 de-clutter):
   keep the label look, underline only on hover. */
.deadlines-label a { color: inherit; text-decoration: none; }
.deadlines-label a:hover, .deadlines-label a:focus-visible { text-decoration: underline; }
.deadline-item { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.deadline-item a { color: var(--text-050); text-decoration: none; }
.deadline-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.deadline-date { font-size: 12px; color: var(--text-mute); }

/* ══════════════════════════════════════════════════════════════════════════
   OVERHAUL COMPONENT LAYER (DESIGN-OVERHAUL-2026-07-09.md, sections 4.6-4.9)
   New primitives added by the 9 July overhaul. Everything animated here is
   neutralised by the global reduced-motion block above.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The Figure primitive (spec 4.6): the atom of the product ─────────────── */
.figure { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.figure-value { color: var(--text-primary); font-weight: 500; overflow-wrap: anywhere; }
.figure-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; font-size: var(--text-xs); font-weight: 500; letter-spacing: .02em; color: var(--text-faint); min-width: 0; }
.figure-meta > span { min-width: 0; overflow-wrap: anywhere; }
.figure-source a { color: var(--text-tertiary); }
.figure-source a:hover { color: var(--blue-300); }

/* ── Key numbers (spec 5.3): the briefing room's first five seconds ───────── */
.kn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 var(--space-7); }
.kn-tile { display: block; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--elev-1); padding: 18px 20px; text-decoration: none; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
a.kn-tile:hover { border-color: rgba(96,165,250,.4); transform: translateY(-2px); }
a.kn-tile:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.kn-label { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.kn-value { display: block; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); line-height: 1.25; overflow-wrap: anywhere; }
.kn-meta { display: block; margin-top: 6px; font-size: var(--text-xs); color: var(--text-faint); }
.kn-locked .kn-value { color: var(--locked-mask); letter-spacing: .18em; font-weight: 600; }
.kn-locked .kn-affix { display: none; margin-top: 6px; font-size: var(--text-xs); font-weight: 500; color: var(--blue-300); }
a.kn-locked:hover .kn-affix, a.kn-locked:focus .kn-affix, a.kn-locked:focus-visible .kn-affix { display: block; }

/* ── Showcase row (spec 5.2): proof first, then the market ────────────────── */
.matrix tbody tr.row-showcase { background: rgba(52,211,153,.03); }
.matrix tbody tr.row-showcase > th.sticky-col { background: var(--surface-raised); }
.matrix tbody tr.row-showcase > td, .matrix tbody tr.row-showcase > th { border-bottom: 2px solid var(--border-strong); }

/* ── Column-header lock glyph (spec 4.7): where the lock is said, once ────── */
.th-lock { display: inline-block; width: .78em; height: .78em; margin-left: 5px; vertical-align: -1px; background: currentColor; opacity: .55; -webkit-mask: var(--lm-lock) center / contain no-repeat; mask: var(--lm-lock) center / contain no-repeat; }

/* ── Mobile consolidated locked line (spec 4.7): one line, not seven masks ── */
.row-locked-summary { display: none; }
@media (max-width: 768px) {
  .row-locked-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; text-decoration: none; color: var(--text-tertiary); font-size: var(--text-sm); border-top: 1px solid var(--border); }
  .row-locked-summary .rls-action { color: var(--blue-300); font-weight: 500; white-space: nowrap; }
  .row-locked-summary:focus-visible { outline: 2px solid var(--blue-400); outline-offset: -2px; }
  /* When a row renders the summary line, its individual locked cells are
     server-hidden behind it (template emits them with hidden). */
  .matrix tbody tr > td.cell-locked[data-mobile-folded] { display: none; }
}

/* ── Toolbar (spec 5.2): one row, controls left, actions right ────────────── */
.toolbar-row { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin: 0 0 16px; }
.toolbar-spacer { flex: 1 1 auto; }
.toolbar-row .btn-xs, .toolbar-row .btn-sm { white-space: nowrap; }

/* ── View density toggle (spec 5.2): Decision view / All columns ──────────── */
.view-toggle { display: inline-flex; background: var(--surface-sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-ctl); padding: 3px; gap: 3px; }
.view-toggle a, .view-toggle button { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500; color: var(--text-mute); text-decoration: none; padding: 5px 12px; border-radius: 6px; min-height: 30px; }
.view-toggle a:hover, .view-toggle button:hover { color: var(--text-200); }
.view-toggle a.active, .view-toggle button.active { background: var(--surface-raised); color: var(--text-050); box-shadow: var(--elev-1); }
.view-toggle a:focus-visible, .view-toggle button:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }

/* ── Tools rail (spec 5.3): next actions as one quiet row ─────────────────── */
.tools-rail { display: flex; gap: 10px 12px; flex-wrap: wrap; margin-top: var(--space-6); }
@media (max-width: 640px) { .tools-rail { display: grid; grid-template-columns: 1fr 1fr; } .tools-rail .btn { text-align: center; } }

/* ── Dismiss affordance for inline alerts (welcome strip) ─────────────────── */
.alert .alert-dismiss { float: right; margin-left: 12px; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 2px; opacity: .75; }
.alert .alert-dismiss:hover { opacity: 1; }
.alert .alert-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }

/* ── Pathfinder score bar (token fix for the old inline #2563EB) ──────────── */
.pf-bar { height: 4px; border-radius: 2px; background: var(--surface-sunken); overflow: hidden; margin: 6px 0 2px; }
.pf-bar-fill { display: block; height: 100%; background: var(--accent); }

/* ── Toast (spec 4.6): exactly three uses (view saved, watch added, export
   queued). role="status"; auto-dismiss handled by app.js. ────────────────── */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(8px); opacity: 0; z-index: 95; background: var(--surface-raised); color: var(--text-100); border: 1px solid var(--border-strong); border-radius: var(--radius-ctl); box-shadow: var(--elev-2); padding: 11px 18px; font-size: var(--text-sm); font-weight: 500; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); max-width: min(92vw, 480px); text-align: center; }
.toast.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Inline two-step confirm (spec 4.6): replaces confirm() dialogs ───────── */
.confirm-swap { display: inline-flex; align-items: center; gap: 8px; }
.confirm-swap .confirm-q { font-size: var(--text-sm); color: var(--caution); }

/* ── Compare updating indicator (spec 5.5) ────────────────────────────────── */
.bm-updating { display: none; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary); }
.benchmark-picker[data-pending="1"] .bm-updating { display: inline-flex; }
.bm-updating::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: lm-spin .7s linear infinite; }

/* ── Skeleton loading (spec 8.4): where layout would otherwise jump ───────── */
.skeleton-line { display: block; height: .85em; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.05) 75%); background-size: 200% 100%; animation: skeletonSweep 1.2s var(--ease) infinite; margin: 6px 0; }
@keyframes skeletonSweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* ── Pathfinder stepper (spec 5.4): progressive enhancement over one form ─── */
.pf-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.pf-progress-track { flex: 1; height: 3px; border-radius: 2px; background: var(--surface-raised); overflow: hidden; }
.pf-progress-fill { display: block; height: 100%; background: var(--accent); transform-origin: left center; transition: transform var(--dur-slow) var(--ease); }
.pf-progress-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
html.js .pf-stepper fieldset[data-step] { display: none; }
html.js .pf-stepper fieldset[data-step].pf-active { display: block; animation: pfStepIn var(--dur) var(--ease) both; }
@keyframes pfStepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.pf-stepnav { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.pf-back { background: none; border: 0; padding: 8px 4px; color: var(--text-mute); font-size: var(--text-sm); cursor: pointer; }
.pf-back:hover { color: var(--text-100); }
.pf-back:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; border-radius: 4px; }
/* Results as a briefing document (spec 5.4): dateline + document card. */
.pf-doc { background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-card); box-shadow: var(--elev-1); padding: 26px 30px; }
.pf-dateline { font-size: var(--text-xs); font-weight: 500; letter-spacing: .03em; color: var(--text-faint); border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 18px; display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Post-wave polish: pathfinder doc + confirm state + appearance card ───── */
.pf-card .pf-bar { flex: 1; }
html.js .pf-stepper .pf-step { display: none; }
.pf-doc .card { background: var(--surface-deep); box-shadow: none; }
.pf-free-brief .eyebrow { margin-bottom: 10px; }
.pf-free-signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.pf-free-signals span { display: block; padding: 10px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text-mute); font-size: var(--text-xs); }
.pf-free-signals strong { display: block; color: var(--text-200); font-size: var(--text-xs); margin-bottom: 3px; }
.pf-unlock-card { border-color: rgba(96,165,250,.38); }
@media (max-width: 640px) { .pf-free-signals { grid-template-columns: 1fr; } }
.confirm-armed { color: var(--caution); border-color: rgba(251,191,36,.45); }
.appearance-card { margin-top: 18px; }

/* ── Free-layer band on the showcase jurisdiction (spec 5.3) ──────────────── */
.showcase-band { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 26px 0; padding: 16px 20px; background: var(--surface-card); border: 1px solid var(--border-strong); border-left: 3px solid var(--positive); border-radius: var(--radius-card); color: var(--text-300); }
.showcase-band p { margin: 0; }

/* ── Paper theme (spec 4.1/7 Phase 4): a token remap, shipped dark.
   Nothing sets data-theme yet; the owner-gated toggle arrives with the
   paper_theme_enabled setting. Print/export styles remain the authority for
   paper output until this is switched on. ─────────────────────────────────── */
[data-theme="paper"] {
  --bg-page: #F7F8FA;
  --surface-card: #FFFFFF;
  --surface-deep: #F1F3F6;
  --surface-sunken: #EEF0F4;
  --surface-raised: #FFFFFF;
  --surface-footer: #EEF0F4;
  --text-050: #10151F;
  --text-100: #1A2130;
  --text-200: #242D3F;
  --text-300: #333D4F;
  --text-mute: #5A6474;
  /* WCAG floor (adversarial review 9 Jul): the two faintest paper tiers were
     #7A8494 (3.56:1 on #F7F8FA) and #8A94A4 (2.69:1 on the #EEF0F4 footer).
     Darkened to clear 4.5:1 on their real backgrounds; fnt deliberately
     collapses into the dot tier because paper has no room for a fifth step. */
  --text-dot: #626B7A;
  --text-dim: #687181;
  --text-fnt: #626B7A;
  --text-primary: #10151F;
  --text-secondary: #242D3F;
  --text-tertiary: #5A6474;
  --text-faint: #687181;
  --text: #242D3F;
  --border: rgba(16,21,31,.1);
  --border-strong: rgba(16,21,31,.18);
  --locked-mask: rgba(16,21,31,.3);
  --shadow: 0 16px 40px rgba(16,21,31,.08);
  --elev-1: inset 0 1px 0 rgba(255,255,255,.7);
  --elev-2: 0 8px 24px rgba(16,21,31,.1);
  --elev-3: 0 24px 60px rgba(16,21,31,.14);
}
[data-theme="paper"] body, body[data-theme="paper"] { background-image: none; }
[data-theme="paper"] .site-header { background: rgba(247,248,250,.85); }
[data-theme="paper"] .cta-band .btn-white { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Atlas Paper (approved redesign, 10 July 2026) ───────────────────────
   This is the product's single default visual system. The older optional
   pale-blue "Paper" treatment above remains harmless for a stale preference,
   but this later layer deliberately resolves both normal and data-theme pages
   to the approved cartographic palette. */
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-latin-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-latin-600.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-latin-400-italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-latin-600-italic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-latin-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-latin-600.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-latin-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root, [data-theme="paper"] {
  /* A slightly deeper parchment keeps the Atlas feel without the glare of a
     near-white page on a large monitor. */
  --paper-page: #EEE6D8;
  --paper-panel: #F3ECDD;
  --paper-card: #F8F2E6;
  --paper-band: #E4DAC8;
  --sphere-fill: #EEE4D2;
  --ink: #26313A;
  --ink-body: #4E575D;
  --ink-nav: #3F4A53;
  /* Ink-muted is deliberately slightly darker than the handoff's #7A7264 so
     real UI metadata, not just decorative plot captions, meets AA. */
  --ink-muted: #685F50;
  --ink-faint: #756D5F;
  --map-red: #B1382A;
  --map-red-hover: #9F2F22;
  --cart-blue: #33608C;
  --map-green: #2E7D5B;
  --hairline: #E2D9C4;
  --panel-border: #D8CDB4;
  --inner-frame: rgba(51,96,140,.30);
  --shadow-panel: 0 18px 44px rgba(66,55,30,.14);
  --shadow-card: 0 12px 28px rgba(66,55,30,.16);
  --bg-page: var(--paper-page);
  --bg-band-alt: var(--paper-band);
  --surface-card: var(--paper-card);
  --surface-deep: var(--paper-panel);
  --surface-sunken: var(--paper-band);
  --surface-raised: var(--paper-band);
  --surface-footer: var(--ink);
  --bg-panel: var(--paper-panel);
  --bg-panel-globe: var(--paper-panel);
  --bg-card-dark: var(--paper-card);
  --grid-line: transparent;
  --text-050: var(--ink);
  --text-100: var(--ink);
  --text-200: #35414A;
  --text-300: var(--ink-body);
  --text-mute: var(--ink-body);
  --text-dot: var(--ink-muted);
  --text-dim: var(--ink-muted);
  --text-fnt: var(--ink-faint);
  --text-primary: var(--ink);
  --text-secondary: #35414A;
  --text-tertiary: var(--ink-body);
  --text-faint: var(--ink-muted);
  --text: var(--ink-body);
  --blue-700: #17232B;
  --blue-600: var(--ink);
  --blue-500: #3A4750;
  --blue-400: var(--map-red);
  --blue-300: var(--map-red);
  --blue-050: #F3D7D0;
  --accent: var(--ink);
  --accent-hover: #17232B;
  /* Keep the cartographic green on marks and dots, but use a darker green
     wherever the inherited product UI treats it as text. This preserves the
     map palette while making success/status copy meet AA on paper. */
  --emerald: #1F684B;
  --amber: #8B5E24;
  --red: #B13C32;
  --positive: var(--emerald);
  --caution: #8B5E24;
  --negative: #B13C32;
  --locked-mask: rgba(38,49,58,.30);
  --border: var(--hairline);
  --border-strong: var(--panel-border);
  --navy: var(--ink);
  --slate: var(--ink-body);
  --line: var(--hairline);
  --green: var(--emerald);
  --gold: var(--map-red);
  --gold-dark: var(--map-red-hover);
  --radius: 6px;
  --radius-ctl: 6px;
  --radius-card: 8px;
  --radius-lg: 6px;
  --shadow: var(--shadow-card);
  --elev-1: 0 2px 8px rgba(66,55,30,.06);
  --elev-2: var(--shadow-card);
  --elev-3: var(--shadow-panel);
  --font: 'Source Serif 4', Georgia, serif;
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-sans: var(--font-ui);
  --font-code: 'JetBrains Mono', ui-monospace, monospace;
}

/* `only light` is deliberate: it prevents browser-level automatic darkening
   from repainting the cartographic paper palette brown on mobile. Visitors can
   still use OS accessibility controls; we are only declining a synthetic dark
   theme that this product does not provide. */
html { color-scheme: only light; background: var(--paper-page); }
body {
  color: var(--ink-body);
  background: var(--paper-page);
  background-image: none;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
}
body::before { display: none; }
::selection { background: rgba(192,58,43,.18); color: var(--ink); }
h1, h2, h3, h4, .price, .h-sub { color: var(--ink); font-family: var(--font); font-weight: 600; }
h1 { letter-spacing: -.045em; }
h2 { letter-spacing: -.035em; }
a { color: var(--map-red); }
a:hover { color: var(--map-red-hover); }
code { background: var(--paper-band); color: var(--ink); }
.meta-text { color: var(--ink-muted); }
.eyebrow, .ht-eyebrow, .breadcrumb, .strip-row, .step-num { color: var(--map-red); font-family: var(--font-mono); font-weight: 700; }
.eyebrow, .ht-eyebrow { font-size: 11.5px; letter-spacing: .18em; }
.container { max-width: 1180px; }

/* Shared chrome — paper, hairlines, no glass. */
.site-header { position: relative; background: var(--paper-page); border-bottom: 1px solid var(--hairline); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-row { min-height: 72px; gap: 24px; padding-top: 13px; padding-bottom: 13px; }
.brand, .brand:hover { color: var(--ink); }
.atlas-brand { display: inline-flex; align-items: flex-start; flex: 0 0 auto; }
.atlas-brand-lockup { display: flex; flex-direction: column; min-width: 0; }
.atlas-brand-row { display: flex; align-items: center; gap: 10px; line-height: 1; }
.atlas-brand-mark { display: grid; grid-template-columns: repeat(2,9px); grid-template-rows: repeat(2,9px); gap: 3px; flex: 0 0 auto; }
.atlas-brand-mark i { width: 9px; height: 9px; border-radius: 2px; background: var(--ink); }
.atlas-brand-mark i:first-child, .atlas-brand-mark i:last-child { background: var(--map-red); }
.atlas-brand-word { color: var(--ink); font: 600 21px/1.1 var(--font); letter-spacing: -.3px; }
.atlas-brand-tagline { color: var(--ink-muted); font: italic 400 12px/1.2 var(--font); margin-top: 3px; white-space: nowrap; }
.main-nav { gap: 22px; }
.main-nav a, .nav-group-btn { color: var(--ink-nav); font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; letter-spacing: 0; }
.main-nav a:hover, .main-nav a.active, .nav-group-btn:hover, .nav-group-btn.active, .nav-group-btn[aria-expanded="true"] { color: var(--ink); }
.main-nav a.btn-primary, .main-nav a.btn-primary:hover { color: var(--paper-page) !important; }
.main-nav a.btn-outline, .main-nav a.btn-outline:hover { color: var(--ink); }
.nav-live-dot { background: var(--map-green); box-shadow: none; }
.nav-group-panel { background: var(--paper-card); border-color: var(--panel-border); border-radius: 6px; box-shadow: var(--shadow-card); }
.nav-group-panel a { color: var(--ink-body); }
.nav-group-panel a:hover, .nav-group-panel a:focus-visible { background: var(--paper-band); color: var(--ink); }
.nav-group-panel a.active, .nav-item-hint { color: var(--map-red); }
.topbar-disclaimer { background: var(--paper-band); border-bottom-color: var(--hairline); color: var(--ink-muted); font-family: var(--font-ui); font-size: 12.5px; letter-spacing: 0; padding: 9px 16px; }
.topbar-disclaimer a { color: var(--map-red); }
.nav-toggle { color: var(--ink); }

/* Buttons, form controls and focus work as printed controls rather than neon UI. */
.btn, .ht-btn { border-radius: 6px; font-family: var(--font-ui); font-weight: 600; box-shadow: none; }
.btn-primary, .ht-btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper-page); }
.btn-primary:hover, .ht-btn-primary:hover { background: #17232B; border-color: #17232B; color: var(--paper-page); }
.btn-outline, .ht-btn-ghost { background: transparent; color: var(--ink); border-color: #C6BBA0; }
.btn-outline:hover, .ht-btn-ghost:hover { background: var(--paper-band); border-color: var(--ink); color: var(--ink); }
.btn-ghost { color: var(--ink-body); }
.btn-ghost:hover { color: var(--ink); }
.btn:focus-visible, .ht-btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--map-red); outline-offset: 2px; }
input, textarea, select, .matrix-toolbar select, .compare-picker select { background: var(--paper-card); color: var(--ink); border-color: var(--panel-border); border-radius: 6px; font-family: var(--font-ui); }
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 1; }

/* General product surfaces. */
.section { border-top-color: var(--hairline); }
.section-alt, .strip { background: var(--paper-band); border-color: var(--hairline); }
.card, .step-card, .detail-item, .notify-box, .jfilter, .matrix-scroll, .price-card, .intro-directory-item, .pf-doc { background: var(--paper-card); border-color: var(--panel-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card p, .decision-points span, .section-lead, .price-alt, .price-card ul, .intro-directory-meta { color: var(--ink-body); }
.decision-points > div { background: var(--paper-card); border-color: var(--panel-border); border-radius: 6px; }
.decision-points strong, .price-sub, .intro-directory-jurisdiction, .jlink { color: var(--ink); }
.j-card:hover, .intro-directory-item:hover { background: var(--paper-card); border-color: var(--map-red); }
.step-card::before { background: var(--map-red); }
.why-old, .why-new { background: var(--paper-card); border-color: var(--panel-border); }
.why-new { border-left-color: var(--map-red); }
.why-new h3 { color: var(--ink); }

/* Status, pricing and paywall retain meaning but use the Atlas accents. */
.badge { border-radius: 4px; }
.badge-free, .verified-pill, .monitor-badge, .footer-status { background: rgba(46,125,91,.08); color: #1F684B; border-color: rgba(46,125,91,.52); }
.badge-showcase { background: #1F684B; border-color: #1F684B; color: var(--paper-page); box-shadow: none; }
.badge-locked, .locked-pill { background: rgba(192,58,43,.07); color: var(--map-red); border-color: rgba(192,58,43,.42); }
.badge-featured { background: var(--map-red); color: var(--paper-page); }
.price-featured { border: 1.5px solid var(--map-red); box-shadow: var(--shadow-panel); }
.price-featured li::before, .pricing-note, .best-for { color: var(--map-red); }
.paywall-banner { background: var(--paper-band); border-color: var(--panel-border); color: var(--ink-body); }
.paywall-banner h2, .paywall-banner h3 { color: var(--ink); }
.paywall-banner p { color: var(--ink-body); }
.cell-lock-link:hover { background: rgba(192,58,43,.05); }
.cell-affix, .cell-unlock, .detail-lock-line, .ro-cta, .linklike, .resume-apply, .myviews-open, .cell-cite:hover { color: var(--map-red); }
.detail-lock-line { border-color: rgba(192,58,43,.38); }
.detail-lock-link:hover .detail-lock-line, .detail-lock-link:focus-visible .detail-lock-line { color: var(--paper-page); background: var(--map-red); border-color: var(--map-red); }

/* Matrix and data surfaces become a printed ledger. */
.matrix-scroll { box-shadow: var(--shadow-card); }
.matrix th, .matrix td { border-bottom-color: var(--hairline); }
.matrix thead th, .matrix thead .sticky-col { background: var(--paper-band); color: var(--ink-muted); font-family: var(--font-mono); }
.matrix tbody td { color: var(--ink-body); }
.sticky-col { background: var(--paper-card); box-shadow: 2px 0 4px rgba(66,55,30,.10); }
.dimcell, .cell-context strong { color: var(--ink); }
.verified-tag, .detail-meta, .cell-fresh { color: var(--ink-muted); }
.cell-locked { background: rgba(38,49,58,.018); }
.code-badge, .ro-code { background: var(--paper-band); color: var(--ink); }
.tier-core { color: var(--cart-blue); background: rgba(51,96,140,.10); }
.tier-pro { color: var(--map-red); background: rgba(192,58,43,.09); }
.tier-free { color: #1F684B; background: rgba(46,125,91,.09); }
.benchmark-table .col-primary { background: rgba(192,58,43,.055); border-left-color: var(--map-red); border-right-color: var(--map-red); }
.benchmark-table thead .col-primary { background: rgba(192,58,43,.10); }
.pin-tag, .cell-context { color: var(--map-red); background: rgba(192,58,43,.07); border-color: rgba(192,58,43,.34); }
.delta-better { color: #1F684B; background: rgba(46,125,91,.08); border-color: rgba(46,125,91,.42); }
.delta-worse { color: var(--map-red); background: rgba(192,58,43,.08); border-color: rgba(192,58,43,.40); }

/* FAQ, trace and calls-to-action. */
.faq-item, .faq-detail { border-color: var(--hairline); }
.faq-q, .faq-detail > summary { color: var(--ink); font-family: var(--font); }
.faq-q .pm, .faq-detail > summary::after { color: var(--map-red); }
.trace-card, .trace-window { background: var(--paper-card); border-color: var(--panel-border); border-radius: 6px; box-shadow: var(--shadow-card); }
.trace-head, .trace-window-head { background: var(--paper-band); border-color: var(--hairline); }
.trace-lights, .trace-dot { display: none; }
.trace-body { color: var(--ink); }
.cta-band { background: var(--ink); border-color: var(--ink); border-radius: 8px; box-shadow: none; }
.cta-band h2 { color: var(--paper-page); }
.cta-band p, .cta-band .muted { color: #D9D2C4; }
.cta-band .btn-white { background: var(--paper-page); color: var(--ink); border-color: var(--paper-page); }
.cta-band .btn-outline { color: var(--paper-page); border-color: rgba(238,230,216,.45); }
.site-footer { background: var(--ink); border-top-color: var(--ink); }
.site-footer, .site-footer .muted, .site-footer .small, .site-footer a { color: #D9D2C4; }
.site-footer a:hover { color: var(--paper-page); }
.site-footer .footer-h, .site-footer .footer-base { color: var(--paper-page); }
.site-footer .footer-cols, .site-footer .footer-base, .site-footer .footer-intro { border-color: rgba(238,230,216,.14); }
.site-footer .atlas-brand-word { color: var(--paper-page); }
.site-footer .atlas-brand-tagline, .footer-tagline { color: #C9C2B2; font-family: var(--font); font-style: italic; }
.site-footer input { background: rgba(238,230,216,.96); color: var(--ink); border-color: transparent; }
.site-footer .btn-primary { background: var(--paper-page); color: var(--ink); border-color: var(--paper-page); }
.site-footer .footer-status { color: #7DB394; border-color: rgba(95,168,134,.42); background: rgba(95,168,134,.10); }
/* The original footer intro inherited a dark paper-body colour from the old
   theme, making it unreadable on the ink footer. Keep every part legible. */
.site-footer .footer-intro { color: #E6DECF; background: rgba(238,230,216,.06); border-color: rgba(238,230,216,.22); }
.site-footer .footer-intro strong { color: var(--paper-page); }
.site-footer .footer-intro a { color: #F1E8D9; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.site-footer .footer-intro a:hover { color: #FFFDF7; }

/* Local amounts are a quiet secondary aid, never a replacement for the
   statutory/source currency or the price that checkout ultimately confirms. */
.currency-original { font-variant-numeric: tabular-nums; }
.local-currency { display: inline-block; margin-inline-start: .34em; color: var(--ink-muted); font-family: var(--font-ui); font-size: .8em; font-weight: 600; letter-spacing: 0; line-height: 1.25; white-space: nowrap; }
.local-currency::before { content: none !important; }
.price .currency-original { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; }
.price.has-local-currency { display: flex; align-items: baseline; justify-content: center; column-gap: .22em; flex-wrap: wrap; }
.price.has-local-currency > .currency-original { order: 1; }
.price.has-local-currency > span:not(.currency-original):not(.local-currency) { order: 2; }
.price.has-local-currency > .local-currency { display: block; flex: 0 0 100%; order: 3; margin: .08em 0 0; color: var(--ink-muted); font-size: .35em; font-weight: 600; }
.cost-table .local-currency, .map-readout .local-currency { display: block; margin: .22em 0 0; font-size: .76em; }
.footer-currency:not([hidden]) { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0 0 20px; padding: 13px 0 0; border-top: 1px solid rgba(238,230,216,.14); color: #E6DECF; font-size: .82rem; }
.site-footer .footer-currency select { min-height: 34px; max-width: min(100%, 250px); padding: 5px 8px; background: rgba(238,230,216,.96); color: var(--ink); border-color: transparent; }
.footer-currency-note { flex: 1 0 100%; margin: 0; color: #D9D2C4; font-size: .78rem; line-height: 1.45; }

/* Atlas Paper hero and maps. The reference is exact on desktop; the stack
   below is intentionally responsive where the supplied preview was not. */
.hero-terminal { background: var(--paper-page); border-bottom: 1px solid var(--hairline); overflow: visible; }
.ht-grid.atlas-hero-grid { grid-template-columns: minmax(0,1fr) 524px; gap: 48px; padding: 52px 0 58px; align-items: center; }
.ht-h1 { max-width: 550px; color: var(--ink); font-family: var(--font); font-size: 56px; font-weight: 600; letter-spacing: -1.2px; line-height: 1.06; }
.ht-h1 em { color: var(--map-red); font-style: italic; }
.ht-sub { max-width: 470px; color: var(--ink-body); font-family: var(--font-ui); font-size: 17px; line-height: 1.6; margin: 20px 0 0; }
.atlas-hero-grid .regime-toggle { margin: 20px 0 0; background: var(--paper-band); border-color: var(--panel-border); border-radius: 6px; }
.atlas-hero-grid .regime-toggle a { color: var(--ink-body); font-family: var(--font-ui); }
.atlas-hero-grid .regime-toggle a.active { background: var(--ink); color: var(--paper-page); box-shadow: none; }
.atlas-hero-grid .ht-ctas { margin: 22px 0 14px; }
.atlas-hero-grid .ht-caption { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .025em; }
.atlas-chart-panel, .map-panel, .map-panel-globe, .map-panel-coverage { border: 1px solid var(--panel-border); border-radius: 6px; background: var(--paper-panel); box-shadow: var(--shadow-panel); }
.atlas-chart-panel { height: 492px; }
.map-panel-globe { height: 492px; }
.map-panel-coverage { background: var(--paper-panel); }
.atlas-chart-frame { position: absolute; inset: 12px; border: 1px solid var(--inner-frame); border-radius: 3px; pointer-events: none; }
.atlas-chart-caption { position: absolute; z-index: 2; top: 22px; margin: 0; color: var(--ink-faint); font: 700 9.5px/1.2 var(--font-mono); letter-spacing: .10em; text-transform: uppercase; pointer-events: none; }
.atlas-chart-caption-left { left: 24px; }
.atlas-chart-caption-right { right: 24px; font-weight: 700; }
.atlas-map-legend { position: absolute; z-index: 2; right: 24px; bottom: 20px; display: flex; gap: 14px; color: var(--ink-muted); font: 700 9.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.atlas-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tier-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tier-dot-free { background: var(--map-green); }.tier-dot-core { background: var(--cart-blue); }.tier-dot-pro { background: var(--map-red); }
.map-tag { background: var(--paper-card); border-color: var(--panel-border); color: var(--ink-muted); border-radius: 4px; font-family: var(--font-mono); }
.map-hint { background: var(--ink); border-color: var(--ink); color: var(--paper-page); border-radius: 4px; font-family: var(--font-mono); }
.map-readout { z-index: 3; bottom: 20px; left: 20px; width: 250px; background: rgba(255,253,247,.95); border-color: var(--panel-border); border-radius: 8px; box-shadow: var(--shadow-card); backdrop-filter: none; color: var(--ink); }
.map-readout.ro-min { padding: 12px 14px; }
.map-readout:not(.ro-min) { padding: 12px 14px; }
.ro-code, .code-badge { font-family: var(--font-mono); background: var(--paper-band); color: var(--ink); }
.ro-name { color: var(--ink); font-family: var(--font); font-size: 15px; }
.ro-name:hover { color: var(--map-red); }
.ro-tier { font-family: var(--font-mono); }
.ro-row { border-top-color: var(--hairline); }
.ro-row span { color: var(--ink-muted); font-family: var(--font-ui); }
.ro-row b { color: var(--ink); font-family: var(--font-mono); }
.ro-toggle .chev { border-color: var(--map-red); }
.ro-cta { font-family: var(--font-mono); }
.ro-hint { margin-top: 8px; color: var(--ink-muted); font: 700 9.5px/1.35 var(--font-mono); letter-spacing: .055em; }
.map-failed::after { color: var(--ink-muted); font-family: var(--font-mono); }
.map-failed .atlas-chart-frame, .map-failed .atlas-chart-caption, .map-failed .atlas-map-legend { display: none; }

.atlas-matrix-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(390px,1.1fr); align-items: start; gap: 48px; }
.atlas-matrix-proof { padding: 24px; border-radius: 6px; background: var(--paper-card); border-color: var(--panel-border); box-shadow: var(--shadow-card); }
.hero-proof-head h2 { color: var(--ink); font-family: var(--font); }
.hero-proof-fresh { color: var(--ink-muted); border-color: var(--panel-border); background: var(--paper-band); border-radius: 4px; font-family: var(--font-mono); }
.hero-proof-lead { color: var(--ink-body); }
.hero-proof-link { color: var(--map-red); font-family: var(--font-ui); }
.hero-proof-link:hover { color: var(--map-red-hover); }
.chip { background: transparent; border-color: var(--panel-border); border-radius: 4px; color: var(--ink-body); font-family: var(--font-mono); opacity: 1; }
.chip.active, .chip:hover { background: var(--paper-band); border-color: var(--ink); color: var(--ink); }
.mxp { border: 1px solid var(--panel-border); border-radius: 6px; background: var(--paper-card); }
.mxp-row { border-bottom-color: var(--hairline); }
.mxp-cell { color: var(--ink); border-right-color: var(--hairline); font-family: var(--font-mono); }
.mxp-label { color: var(--ink-muted); font-family: var(--font-ui); }
.mxp-head { background: var(--paper-band); }
.mxp-head .mxp-cell { color: var(--ink); font-family: var(--font-ui); }
.mxp-foot { background: var(--paper-panel); color: var(--ink-muted); border-top-color: var(--hairline); }

.coverage-atlas-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.35fr); gap: 24px; align-items: start; }
.atlas-coverage-panel { height: 460px; }
.coverage-legend-wrap { min-height: 460px; padding: 16px; background: var(--paper-card); border: 1px solid var(--panel-border); border-radius: 6px; box-shadow: var(--shadow-card); }
.cov-legend { display: grid; gap: 8px; max-height: 390px; overflow: auto; padding-right: 3px; }
.legend-row { background: var(--paper-card); border-color: var(--hairline); border-radius: 6px; color: var(--ink); font-family: var(--font-ui); }
.legend-row:hover, .legend-row:focus-visible, .legend-row.active { background: var(--paper-band); border-color: var(--map-red); }
.legend-name { color: var(--ink); }.legend-meta, .cov-foot { color: var(--ink-muted); font-family: var(--font-mono); }

/* The rest of the map can appear on the About page without inheriting the
   old dark treatment. */
.coverage-explorer .map-panel { height: 420px; }

/* Small screens preserve the text-first reading order and keep controls above
   the map overlays. */
@media (max-width: 980px) {
  .ht-grid.atlas-hero-grid, .atlas-matrix-grid { grid-template-columns: 1fr; gap: 34px; }
  .ht-grid.atlas-hero-grid { padding: 48px 0; }
  .atlas-chart-panel, .map-panel-globe { width: 100%; max-width: 620px; }
  .atlas-matrix-proof { max-width: 720px; }
  .coverage-atlas-grid { grid-template-columns: 1fr; }
  .coverage-legend-wrap { min-height: 0; }
  .cov-legend { max-height: 310px; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .nav-row { min-height: 66px; padding-top: 10px; padding-bottom: 10px; }
  .atlas-brand-tagline { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
  .ht-h1 { font-size: clamp(39px,11vw,50px); letter-spacing: -.9px; }
  .ht-sub { font-size: 16px; }
  .atlas-hero-grid .ht-ctas { display: grid; grid-template-columns: 1fr; }
  .atlas-hero-grid .btn { width: 100%; text-align: center; }
  .atlas-chart-panel, .map-panel-globe { height: 365px; }
  .atlas-chart-caption { top: 17px; font-size: 8.5px; letter-spacing: .05em; }
  .atlas-chart-caption-left { left: 18px; }.atlas-chart-caption-right { display: none; }
  .atlas-chart-frame { inset: 9px; }
  .map-readout { bottom: 14px; left: 14px; width: min(250px,calc(100% - 28px)); }
  .atlas-map-legend { bottom: 14px; right: 14px; gap: 8px; font-size: 8.5px; }
  .atlas-map-legend span { gap: 4px; }.tier-dot { width: 7px; height: 7px; }
  .atlas-coverage-panel { height: 350px; }
  .cov-legend { grid-template-columns: 1fr; }
  .hero-matrix .mxp-row { min-width: 510px; }
}

/* The general responsive rules deliberately turn ordinary map readouts into
   flow content. Atlas keeps the hero readout as a compact in-map instrument,
   so restore its anchored position after those general rules have run. The
   mobile menu likewise starts after the actual Atlas masthead height. */
@media (max-width: 980px) {
  .atlas-hero-grid .map-readout { position: absolute; margin-top: 0; }
}
@media (max-width: 820px) {
  .main-nav { top: 72px; max-height: calc(100dvh - 72px); box-shadow: var(--shadow-panel); }
}
@media (max-width: 640px) {
  .main-nav { top: 66px; max-height: calc(100dvh - 66px); }
}

/* Pathfinder front door — a compact field-note that appears once the visitor
   has begun exploring. The miniature diagram is code-native, so it stays crisp
   and shares the atlas's cartographic ink, red and blue palette. */
.pf-frontdoor {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  gap: 20px;
  width: min(560px,calc(100vw - 48px));
  padding: 18px;
  background: rgba(255,253,247,.98);
  color: var(--ink-body);
  border: 1px solid var(--panel-border);
  border-top: 3px solid var(--map-red);
  border-radius: 8px;
  box-shadow: 0 20px 54px rgba(66,55,30,.22);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.pf-frontdoor[hidden] { display: none; }
.pf-frontdoor-visible { opacity: 1; transform: none; pointer-events: auto; }
.pf-frontdoor-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
  font: 400 24px/30px var(--font-ui);
  cursor: pointer;
}
.pf-frontdoor-close:hover { background: var(--paper-band); color: var(--ink); }
.pf-frontdoor-graphic {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  padding: 12px 10px 10px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--paper-panel);
}
.pf-frontdoor-graphic svg { display: block; width: 100%; height: auto; }
.pf-frontdoor-graphic span {
  display: block;
  margin-top: 4px;
  color: var(--ink-muted);
  font: 700 9px/1.3 var(--font-mono);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.pf-map-contour { fill: none; stroke: var(--inner-frame); stroke-width: 1; stroke-dasharray: 2 4; }
.pf-route-muted { fill: none; stroke: #B8AF9B; stroke-width: 2; }
.pf-route-found { fill: none; stroke: var(--map-red); stroke-width: 3; }
.pf-route-start { fill: var(--ink); stroke: var(--paper-card); stroke-width: 3; }
.pf-route-option { fill: var(--paper-card); stroke: var(--cart-blue); stroke-width: 2; }
.pf-route-found-dot { fill: var(--map-red); stroke: var(--paper-card); stroke-width: 3; }
.pf-route-tick { fill: none; stroke: var(--paper-card); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-frontdoor-copy { min-width: 0; padding-right: 20px; }
.pf-frontdoor-kicker {
  margin: 0 0 5px;
  color: var(--map-red);
  font: 700 10px/1.3 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pf-frontdoor h2 { margin: 0 0 8px; color: var(--ink); font-size: 23px; letter-spacing: -.01em; }
.pf-frontdoor-copy > p:not(.pf-frontdoor-kicker):not(.pf-frontdoor-note) { margin: 0; color: var(--ink-body); font-size: 13.5px; line-height: 1.5; }
.pf-frontdoor-actions { display: flex; gap: 8px; margin-top: 14px; }
.pf-frontdoor-actions .btn { padding: 9px 11px; font-size: 12.5px; white-space: nowrap; }
.pf-frontdoor-note { margin: 10px 0 0; color: var(--ink-muted); font: 600 9.5px/1.35 var(--font-mono); letter-spacing: .025em; }

@media (max-width: 640px) {
  .pf-frontdoor {
    right: 12px;
    bottom: 12px;
    grid-template-columns: 84px minmax(0,1fr);
    gap: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 14px;
  }
  .pf-frontdoor-graphic { min-height: 116px; padding: 8px 5px; }
  .pf-frontdoor-graphic span { font-size: 7.5px; }
  .pf-frontdoor-copy { padding-right: 13px; }
  .pf-frontdoor h2 { font-size: 19px; padding-right: 10px; }
  .pf-frontdoor-copy > p:not(.pf-frontdoor-kicker):not(.pf-frontdoor-note) { font-size: 12.5px; }
  .pf-frontdoor-actions { display: grid; grid-template-columns: 1fr; }
  .pf-frontdoor-actions .btn { width: 100%; white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-frontdoor { transition: none; transform: none; }
}

/* Dense internal tools keep their information hierarchy, but are part of the
   same paper system rather than a stranded dark shell. */
.admin-body { background: var(--paper-page); }
.admin-header { background: var(--paper-page); border-bottom-color: var(--hairline); }
.admin-header .atlas-brand-tagline { color: var(--ink-muted); }
.admin-tag { color: var(--map-red); border-color: var(--map-red); font-family: var(--font-mono); background: transparent; }
.admin-nav .admin-nav-label { color: var(--ink-muted); }
.admin-table, .admin-card, .admin-metric, .admin-summary, .admin-log, .admin-empty { background: var(--paper-card); border-color: var(--panel-border); }
.admin-table thead th { background: var(--paper-band); color: var(--ink); }
.admin-table th, .admin-table td { border-color: var(--hairline); }

/* Remaining reusable surfaces and exception states. These rules deliberately
   cover special workflows which use compact component classes rather than the
   common card/table primitives above. */
.alert-error, .pf-error, .row-expand-error { color: #8E3027; background: rgba(192,58,43,.08); border-color: rgba(192,58,43,.35); }
.alert-success { color: #1F684B; background: rgba(46,125,91,.08); border-color: rgba(46,125,91,.42); }
.alert-info { color: var(--cart-blue); background: rgba(51,96,140,.08); border-color: rgba(51,96,140,.35); }
.alert-warning, .form-error { color: #7B501F; background: rgba(163,99,41,.09); border-color: rgba(163,99,41,.38); }
.cookie-banner { background: var(--paper-card); border-color: var(--panel-border); box-shadow: var(--shadow-panel); color: var(--ink-body); }
.cookie-banner p { color: var(--ink-body); }
.deadlines-strip { background: var(--paper-band); border-color: var(--hairline); }
.deadlines-label { color: var(--map-red); }
.deadline-item, .deadline-date, .deadline-meta { color: var(--ink-body); }
.report-rail { background: var(--paper-card); border-color: var(--panel-border); border-radius: 6px; box-shadow: var(--shadow-card); }
.report-rail:hover { border-color: var(--map-red); }
.report-rail-meta { color: var(--map-red); }
.report-rail-meta span + span { border-left-color: rgba(192,58,43,.35); }
.faq-link { color: var(--ink-body); background: var(--paper-card); border-color: var(--panel-border); }
.faq-link:hover { color: var(--ink); border-color: var(--map-red); background: var(--paper-band); }
.kn-tile, .pf-free-signals span, .myviews-item, .cost-capital, .cost-compiling, .cost-disclaimer { background: var(--paper-card); border-color: var(--panel-border); color: var(--ink-body); }
.kn-tile:hover { border-color: var(--map-red); box-shadow: var(--shadow-card); }
.row-expand, .watch-btn { background: var(--paper-card); border-color: var(--panel-border); color: var(--ink-body); }
.row-expand:hover, .watch-btn:hover { color: var(--ink); border-color: var(--map-red); background: var(--paper-band); }
.watch-btn.watch-on { color: #1F684B; border-color: rgba(46,125,91,.45); background: rgba(46,125,91,.08); }
.cost-headline { background: var(--paper-card); border-color: var(--panel-border); border-left-color: var(--map-red); }
.cost-disclaimer, .cost-group-row td { background: var(--paper-band); }
.cost-table { background: var(--paper-card); border-color: var(--panel-border); }
.cost-table th, .cost-table td { border-color: var(--hairline); }
.cost-table thead th, .cost-group-row td { color: var(--ink-muted); font-family: var(--font-mono); }
.cost-seg-application { background: var(--ink); }.cost-seg-professional { background: var(--cart-blue); }.cost-seg-substance { background: var(--map-green); }.cost-seg-ongoing { background: var(--map-red); }
.cost-bar { background: var(--paper-band); border-color: var(--panel-border); }
.mock-report { background: var(--paper-card); border-color: var(--panel-border); border-radius: 6px; box-shadow: var(--shadow-card); }
.mock-report h3, .mock-report h4, .mr-brand { color: var(--ink); }
.mr-brand b, .mr-type, .mr-line span { color: var(--map-red); }
/* The mock report carries the Atlas lockup: serif wordmark, red diagonal. */
.mr-brand { font-family: var(--font); font-weight: 600; }
.mock-report .logo-mark i { background: var(--ink); }
.mock-report .logo-mark i:first-child, .mock-report .logo-mark i:last-child { background: var(--map-red); }
.mr-type { border-color: rgba(192,58,43,.38); }
.mr-line { color: var(--ink-body); border-bottom-color: var(--hairline); }
.mr-sample { color: rgba(38,49,58,.055); }
.digest-preview, .digest-audience { background: var(--paper-card); border-color: var(--panel-border); }
.digest-preview summary, .digest-audience legend { color: var(--ink); }
.digest-preview-body { border-top-color: var(--hairline); color: var(--ink-body); }
.fresh-current { background: rgba(46,125,91,.08); color: #1F684B; border-color: rgba(46,125,91,.42); }
.fresh-due { background: rgba(163,99,41,.09); color: #7B501F; border-color: rgba(163,99,41,.38); }
.fresh-pending { background: var(--paper-band); color: var(--ink-muted); border-color: var(--panel-border); }
.status-disputed { background: rgba(192,58,43,.08); color: var(--map-red); border-color: rgba(192,58,43,.42); }
.status-review { background: var(--paper-band); color: var(--ink-muted); border-color: var(--panel-border); }
.trace-kv { border-bottom-color: var(--hairline); }
.trace-src .vpill { background: rgba(46,125,91,.08); color: #1F684B; border: 1.5px solid rgba(46,125,91,.62); border-radius: 4px; }
.pf-step, .pf-step .pf-step-label { color: var(--map-red); border-color: rgba(192,58,43,.38); }
.pf-regime-btn:hover { background: var(--ink); border-color: var(--ink); box-shadow: none; }
#pf-form .pf-opt:hover, #pf-form .pf-opt:focus-within { background: rgba(192,58,43,.06); border-color: var(--map-red); }
.skeleton-line { background: linear-gradient(90deg, rgba(226,217,196,.28) 25%, rgba(216,205,180,.55) 50%, rgba(226,217,196,.28) 75%); }

/* Canvas is progressive enhancement. These compact paper tables are the real
   DOM alternative for no-JS users and for a failed map/data request. */
.map-access-fallback { margin-top: 14px; padding: 16px; background: var(--paper-card); border: 1px solid var(--panel-border); border-radius: 6px; box-shadow: var(--shadow-card); }
.map-fallback-status { margin: 0 0 12px; color: var(--ink-body); font-family: var(--font-ui); font-size: 14px; }
.map-fallback-scroll { max-height: 330px; overflow: auto; border: 1px solid var(--hairline); }
.map-access-fallback table { width: 100%; border-collapse: collapse; background: var(--paper-card); color: var(--ink-body); font-size: 13px; }
.map-access-fallback th, .map-access-fallback td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--hairline); }
.map-access-fallback th { color: var(--ink); font-weight: 600; }
.map-access-fallback thead th { position: sticky; top: 0; background: var(--paper-band); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.map-access-fallback tr:last-child th, .map-access-fallback tr:last-child td { border-bottom: 0; }
.map-access-fallback > .link-arrow { display: inline-block; margin-top: 12px; }
html.js .map-access-fallback { display: none; }
html.js .map-panel.map-failed + .map-access-fallback { display: block; }
html:not(.js) .hero-terminal .map-panel.map-loading,
html:not(.js) .coverage-explorer .map-panel.map-loading,
html:not(.js) #coverage .map-panel.map-loading { display: none; }
html:not(.js) .coverage-explorer .coverage-legend-wrap,
html.js .map-panel.map-failed ~ .coverage-legend-wrap { display: none; }
.coverage-atlas-grid .map-access-fallback { grid-column: 1 / -1; }
.cov-grid .map-access-fallback { grid-column: 1 / -1; }
html:not(.js) .coverage-map-legend,
html.js .map-panel.map-failed ~ .coverage-map-legend { display: none; }

/* The summary uses a wide native button rather than giving an enclosing card
   a faux button role around destination links. It is touch-sized and has the
   exact same Enter/Space behaviour as a pointer click. */
.map-readout.ro-min { cursor: default; }
.map-readout .ro-head { display: block; padding-bottom: 0; }
.map-readout .ro-name { display: inline-block; margin-bottom: 5px; }
.map-readout .ro-toggle { width: 100%; min-height: 42px; margin: 0; padding: 6px 0; display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--ink); text-align: left; }
.map-readout .ro-toggle .ro-code { flex: 0 0 auto; }
.map-readout .ro-toggle .ro-tier { flex: 0 0 auto; }
.ro-toggle-label { margin-left: auto; color: var(--ink-muted); font-family: var(--font-ui); font-size: 11px; font-weight: 600; }
.ro-toggle-chevrons { display: flex; flex: 0 0 auto; flex-direction: column; gap: 1px; }
.map-readout .ro-toggle .chev { width: 7px; height: 7px; border-left: 2px solid var(--map-red); border-top: 2px solid var(--map-red); transform: rotate(45deg); }
.map-readout:not(.ro-min) .ro-toggle .chev { transform: rotate(225deg); }

/* Mobile Services stays a true disclosure: its visible state and ARIA state
   are now driven by the same native button rather than a CSS-only heading. */
@media (max-width: 820px) {
  .nav-group-btn { cursor: pointer; min-height: 44px; }
  .nav-group-panel, .nav-group-panel[hidden] { position: static; min-width: 0; padding: 0 0 0 10px; margin: 0; background: none; border: 0; box-shadow: none; border-left: 1px solid var(--border-strong); }
  .nav-group-panel[hidden] { display: none; }
  .nav-group-panel:not([hidden]) { display: flex; }
}