/* =========================================================================
   Veris Financials — main.css
   Tokens documented in docs/design-tokens.md. All 33 color pairs verified
   against WCAG AA / 3:1 non-text via tools/contrast.mjs.
   ========================================================================= */

/* --- GENERATED by tools/fetch_fonts.py — do not edit by hand --- */
/* Self-hosted so no visitor request reaches Google. Regenerate with:
     python tools/fetch_fonts.py
   Filenames carry a content hash, which is what makes the one-year
   immutable cache in .htaccess safe. Both families are variable fonts:
   one file per family covers every weight the site uses.
   Licensed under the SIL Open Font License 1.1 — see *-OFL.txt. */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.34b9c504.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.3100e775.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.34b9c504.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.3100e775.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.34b9c504.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.3100e775.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext.38e3b8fd.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.153fc85b.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext.38e3b8fd.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.153fc85b.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --- END GENERATED --- */

:root {
  /* brand */
  --brand-teal: #0f4c5c;
  --brand-teal-hover: #0a3846;
  --brand-navy: #1e3a6b;
  --brand-navy-hover: #152b50;
  --brand-cyan: #5cc2d9;
  --brand-gradient: linear-gradient(135deg, #0f4c5c 0%, #1e3a6b 100%);

  /* WhatsApp. Not #25d366: the official green puts the white glyph at 1.98:1 and
     fails the 3:1 WCAG non-text minimum. This reads as the same brand color and
     clears 3:1 against both the glyph and the page behind it. */
  --whatsapp: #1da851;
  --whatsapp-hover: #17853f;

  /* surfaces */
  --bg-surface: #ffffff;
  --bg-surface-alt: #f4f8f9;
  --bg-tint: #e7f0f2;
  --bg-hero: #082730;
  /* Light, so the client's logo can sit on it unmodified. */
  --bg-footer: #f4f8f9;

  /* text */
  --ink-900: #0b1e25;
  --ink-700: #2e464f;
  --ink-600: #445c65;
  --ink-500: #5a7079;
  --on-dark: #ffffff;
  --on-dark-muted: #b9ced4;

  /* semantic */
  --success: #12695a;
  --error: #b3261e;
  --error-text: #8c1d18;
  --error-tint: #fdecea;

  /* borders */
  --border: #dce7ea;
  --border-strong: #6e888f;
  --focus: #0f4c5c;
  --focus-dark: #5cc2d9;

  /* spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* layout */
  --page-max: 1200px;
  --page-pad: 20px;
  --section-py: 56px;
  --section-py-sm: 36px;
  --card-pad: 20px;
  --grid-gap: 20px;
  --header-h: 68px;

  /* type */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-display: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  --t-h1: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --t-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --t-h3: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
  --t-h4: 1.0625rem;
  --t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  --t-body: 1rem;
  --t-small: 0.9375rem;
  --t-eyebrow: 0.8125rem;

  /* radius + elevation */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 30, 37, 0.06);
  --shadow-md: 0 6px 20px rgba(11, 30, 37, 0.08);
  --shadow-lg: 0 18px 44px rgba(11, 30, 37, 0.12);
}

@media (min-width: 768px) {
  :root { --page-pad: 24px; --section-py: 72px; --section-py-sm: 44px; --card-pad: 24px; --grid-gap: 24px; }
}
@media (min-width: 1024px) {
  :root { --page-pad: 32px; --section-py: 80px; --section-py-sm: 48px; --card-pad: 28px; --header-h: 76px; }
}

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--bg-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: var(--t-h4); font-weight: 700; line-height: 1.4; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-teal); text-underline-offset: 3px; }
a:hover { color: var(--brand-teal-hover); }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }
img, svg { max-width: 100%; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible, .hero :focus-visible,
.band :focus-visible { outline-color: var(--focus-dark); }

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

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 200;
  background: var(--brand-teal); color: #fff; padding: var(--space-3) var(--space-5);
  border-radius: var(--r-md); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); color: #fff; }

.wrap {
  width: 100%; max-width: var(--page-max); margin-inline: auto;
  padding-inline: var(--page-pad);
}

.section { padding-block: var(--section-py); }
.section-sm { padding-block: var(--section-py-sm); }
.section-alt { background: var(--bg-surface-alt); }

.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--ink-600); }
.small { font-size: var(--t-small); }
.muted { color: var(--ink-600); }

.eyebrow {
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand-teal); margin: 0 0 var(--space-3);
}
.on-dark .eyebrow, .hero .eyebrow, .band .eyebrow { color: var(--brand-cyan); }

.section-head { max-width: 62ch; margin-bottom: var(--space-10); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head > :last-child { margin-bottom: 0; }

.icon { width: 22px; height: 22px; flex: none; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-6);
  font-family: var(--font-body); font-size: var(--t-body); font-weight: 600;
  border-radius: var(--r-md); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  /* Not `nowrap`. A long label such as "Explore tech companies and startups" measured
     337px, which does not fit a 320px phone, and nowrap pushed it off the screen rather
     than wrapping it. The text wraps only when the button is genuinely too narrow for
     it; max-width stops the button itself exceeding its container either way. */
  white-space: normal; max-width: 100%; text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-icon { width: 17px; height: 17px; transition: transform .18s ease; }
.btn:hover .btn-icon { transform: translateX(3px); }

.btn-primary { background: var(--brand-gradient); color: #fff; }
.btn-primary:hover { background: var(--brand-teal-hover); color: #fff; }

.btn-secondary { border-color: var(--brand-teal); color: var(--brand-teal); background: transparent; }
.btn-secondary:hover { background: var(--brand-teal); color: #fff; }

.btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn-sm { min-height: 44px; padding: var(--space-2) var(--space-5); font-size: var(--t-small); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.header-inner {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand picture { display: block; }
.brand .logo { width: 150px; height: auto; display: block; }

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: transparent; cursor: pointer; color: var(--ink-900);
}
.nav-toggle-bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.primary-nav { display: none; }
.primary-nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg-surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg); padding: var(--space-4) var(--page-pad) var(--space-6);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list > li { border-bottom: 1px solid var(--border); }
.nav-list > li:last-child { border-bottom: 0; }

.nav-link, .submenu a {
  display: flex; align-items: center; min-height: 48px;
  padding: var(--space-2) 0; color: var(--ink-900); font-weight: 500; text-decoration: none;
}
.nav-link.is-active, .submenu a[aria-current="page"] { color: var(--brand-teal); font-weight: 600; }

.sub-trigger-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sub-trigger-row .nav-link { flex: 1; }
.sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; color: var(--ink-700);
}
.sub-chevron { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .2s ease; }
.sub-toggle[aria-expanded="true"] .sub-chevron { transform: rotate(-90deg); }

.submenu { list-style: none; margin: 0 0 var(--space-3); padding: 0 0 0 var(--space-4); display: none; }
.submenu.is-open { display: block; }
.submenu a { min-height: 44px; font-size: var(--t-small); color: var(--ink-700); }
.submenu-all a { color: var(--brand-teal); font-weight: 600; }

.nav-cta-item { padding-block: var(--space-4); }
.nav-cta-item .btn { width: 100%; }

.nav-phone {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4); color: var(--ink-700); font-weight: 600;
  font-size: var(--t-small); text-decoration: none;
}
.nav-phone .icon { width: 18px; height: 18px; color: var(--brand-teal); }
/* Desktop nav breakpoint: 1200px. Keep in sync with DESKTOP in public/assets/js/site.js.

   It was 1080px, where the desktop nav did not fit: the row needs ~1090px of content
   width (150px logo + 16px gap + ~920px of links, CTA and phone), and a 1080px window
   with a 15px scrollbar and 32px page padding each side has 1001px. The nav ran 123px
   off the right edge at 1080 and still 3px at 1200, so every page scrolled sideways
   anywhere in that range. Measured 16 Sep 2026 in same-origin iframes, 1060–1300px.

   The link padding and gaps below were also tightened, because even at the full
   1200px page width the old spacing needed 1174px against 1136px of content: the nav
   overhung the content edge into the page padding at every desktop width. Now it fits
   with ~30px to spare at the breakpoint and above. tools/overflow-scan.mjs measures
   1199, 1200, 1240 and 1280, so a longer nav label will fail the scan, not ship. */
@media (min-width: 1200px) { .nav-phone { white-space: nowrap; } }

@media (min-width: 1200px) {
  .nav-toggle { display: none; }
  .primary-nav {
    display: flex; align-items: center; gap: var(--space-4);
    margin-left: auto; position: static; padding: 0; box-shadow: none; border: 0; overflow: visible;
  }
  .nav-list { display: flex; align-items: center; gap: var(--space-1); }
  .nav-list > li { border: 0; position: relative; }
  .nav-link {
    min-height: 40px; padding: var(--space-2) var(--space-2);
    border-radius: var(--r-md); font-size: var(--t-small); white-space: nowrap;
  }
  .nav-link:hover { background: var(--bg-tint); }
  .sub-toggle { width: 26px; height: 40px; margin-left: -6px; }
  .sub-trigger-row .nav-link { padding-right: var(--space-1); }
  .submenu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
    min-width: 262px; padding: var(--space-2); margin: 0;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  }
  .submenu a { padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); min-height: 42px; }
  .submenu a:hover { background: var(--bg-tint); }
  .submenu-all { border-top: 1px solid var(--border); margin-top: var(--space-2); padding-top: var(--space-2); }
  .has-sub:hover .submenu, .has-sub:focus-within .submenu { display: block; }
  /* Escape dismisses the menu; this holds it shut while focus returns to the
     trigger, which sits inside .has-sub and would otherwise re-trigger :focus-within.
     Declared after the rule above so the equal-specificity tie resolves here. */
  .has-sub.is-dismissed .submenu { display: none; }
  .nav-cta-item { padding: 0; margin-left: var(--space-2); }
  /* The header CTA sits in a flex row that will squeeze it. `.btn` now allows text to
     wrap (so a long label cannot run off a phone screen), but this one is short, has
     room, and was being shrunk to 84px and wrapped onto three lines. It is only ever
     visible on desktop — mobile collapses it behind the nav toggle — so pinning it is
     safe. */
  .nav-cta-item .btn { width: auto; white-space: nowrap; flex-shrink: 0; }
  .nav-phone { margin: 0; }
}
@media (min-width: 1240px) { .brand .logo { width: 168px; } }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative; background: var(--bg-hero); color: var(--on-dark);
  padding-block: clamp(40px, 4.5vw, 64px) clamp(36px, 4vw, 56px);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 90% at 88% 10%, rgba(92,194,217,.20), transparent 60%),
    radial-gradient(50% 80% at 8% 92%, rgba(30,58,107,.55), transparent 62%);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: var(--on-dark); font-size: var(--t-display); }
.hero .lead { color: var(--on-dark-muted); max-width: 60ch; }
.hero-grid { display: grid; gap: var(--space-10); }
.hero-copy { max-width: 68ch; }

.hero-locales {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  color: var(--on-dark-muted); font-size: var(--t-small);
}
.hero-locales li { display: flex; align-items: center; gap: var(--space-2); }
.hero-locales .icon { width: 17px; height: 17px; color: var(--brand-cyan); }

/* ----------------------------------------------------------------- stats */

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-4); list-style: none; margin: 0; padding: 0;
}
.stats li { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 800; line-height: 1.05; }
.stat-label { font-size: var(--t-small); line-height: 1.35; }
.stats-dark { color: var(--on-dark); }
.stats-dark .stat-value { color: var(--brand-cyan); }
.stats-dark .stat-label { color: var(--on-dark-muted); }
.stats-light .stat-value { color: var(--brand-teal); }
.stats-light .stat-label { color: var(--ink-600); }
.stats-strip {
  margin-top: var(--space-10); padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,.18);
}
@media (min-width: 700px) { .stats { grid-template-columns: repeat(5, 1fr); } }

/* -------------------------------------------------------------- platform */

.platform-bar { background: var(--bg-surface-alt); border-bottom: 1px solid var(--border); padding-block: var(--space-6); }
.platform-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.platform-label { font-size: var(--t-small); font-weight: 600; color: var(--ink-600); margin: 0; }
.platform-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.platform-list li {
  padding: var(--space-2) var(--space-4); border: 1px solid var(--border);
  border-radius: var(--r-full); background: var(--bg-surface);
  font-size: var(--t-small); font-weight: 500; color: var(--ink-700);
}

/* ----------------------------------------------------------------- cards */

.grid { display: grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  position: relative; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--card-pad); box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.section-alt .card { background: var(--bg-surface); }
.card > :last-child { margin-bottom: 0; }

.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--bg-tint); color: var(--brand-teal); margin-bottom: var(--space-4);
}
.card h3 { margin-bottom: var(--space-2); }
.card h3 a { color: inherit; text-decoration: none; }
.card p { color: var(--ink-600); font-size: var(--t-small); }

.service-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }
.service-card .card-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4); color: var(--brand-teal);
  font-size: var(--t-small); font-weight: 600;
}
.stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service-card:focus-within { box-shadow: var(--shadow-md); }

/* ------------------------------------------------------------ check list */

.checklist, .checklist-2 { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.checklist li, .checklist-2 li { display: flex; gap: var(--space-3); align-items: flex-start; }
.tick { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--success); stroke-width: 2.2; }
@media (min-width: 760px) { .checklist-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-8); } }

.scope-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.scope-list li { padding-left: var(--space-6); border-left: 3px solid var(--bg-tint); }
.scope-list strong { display: block; color: var(--ink-900); font-family: var(--font-display); font-size: var(--t-h4); margin-bottom: var(--space-1); }
.scope-list span { color: var(--ink-600); font-size: var(--t-small); }
@media (min-width: 860px) { .scope-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-10); } }

/* ------------------------------------------------------------- numbered */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-6); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); align-items: start; }
.steps li::before {
  content: counter(step); display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-full);
  background: var(--brand-gradient); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem;
}
.steps strong { display: block; color: var(--ink-900); font-family: var(--font-display); font-size: var(--t-h4); margin-bottom: var(--space-1); }
.steps span { color: var(--ink-600); font-size: var(--t-small); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-10); } }
.steps-3 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .steps-3 { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------ two-column */

.split { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }
@media (min-width: 940px) { .split-aside { grid-template-columns: 1.15fr 0.85fr; } }
.sticky-aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }

/* ------------------------------------------------------------- audience */

.audience-card { border-top: 4px solid var(--brand-teal); }
.audience-card.alt { border-top-color: var(--brand-navy); }
.audience-card h3 { margin-bottom: var(--space-3); }
.audience-card .checklist li { font-size: var(--t-small); }

/* ----------------------------------------------------------- quote cards */

.quote-card { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; }
.quote-card blockquote { margin: 0; }
.quote-card blockquote p { color: var(--ink-700); font-size: var(--t-body); }
.quote-card blockquote p::before { content: "\201C"; }
.quote-card blockquote p::after { content: "\201D"; }
.quote-card figcaption { display: flex; flex-direction: column; margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.quote-name { font-weight: 600; color: var(--ink-900); }
.quote-role { font-size: var(--t-small); color: var(--ink-600); }

.quote-feature {
  background: var(--bg-hero); color: var(--on-dark);
  border-radius: var(--r-xl); padding: clamp(24px, 4vw, 44px); margin: 0;
}
.quote-feature blockquote p { color: var(--on-dark); font-size: var(--t-lead); }
.quote-feature figcaption { border-top-color: rgba(255,255,255,.2); }
.quote-feature .quote-name { color: var(--on-dark); }
.quote-feature .quote-role { color: var(--on-dark-muted); }

/* ------------------------------------------------------------------ FAQ */

.faq { max-width: 78ch; }
.faq-title { margin-bottom: var(--space-6); }
.faq-items { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-h4);
  color: var(--ink-900); min-height: 48px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand-teal); }
.faq-chevron { width: 18px; height: 18px; flex: none; transform: rotate(90deg); transition: transform .2s ease; color: var(--brand-teal); }
.faq-item[open] .faq-chevron { transform: rotate(-90deg); }
.faq-answer { padding-bottom: var(--space-5); }
.faq-answer p { color: var(--ink-600); max-width: 72ch; }

/* ------------------------------------------------------------------ band */

.band { background: var(--bg-hero); color: var(--on-dark); padding-block: var(--section-py); }
.band h2 { color: var(--on-dark); }
.band .lead { color: var(--on-dark-muted); max-width: 56ch; }
.band-alt { background: var(--bg-tint); color: var(--ink-700); }
.band-alt h2 { color: var(--ink-900); }
.band-alt .lead { color: var(--ink-600); }

.cta-band-inner { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 940px) { .cta-band-inner { grid-template-columns: 1.35fr 0.65fr; gap: var(--space-16); } }
.cta-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.cta-contacts li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--t-small); color: var(--on-dark-muted); }
.cta-contacts .icon { color: var(--brand-cyan); }
.cta-contacts a { color: var(--on-dark); font-weight: 600; text-decoration: none; }
.cta-contacts a:hover { color: var(--brand-cyan); text-decoration: underline; }

/* ----------------------------------------------------------- breadcrumbs */

.breadcrumbs { background: var(--bg-surface-alt); border-bottom: 1px solid var(--border); font-size: var(--t-small); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: var(--space-3) 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--ink-500); }
.breadcrumbs a { color: var(--ink-600); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand-teal); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink-900); font-weight: 500; }

/* ----------------------------------------------------------------- table */

/* ---------------------------------------------------------------------------
   Grid and flex items must be allowed to shrink.

   A grid or flex item defaults to `min-width: auto`, which means it refuses to
   become narrower than its own min-content width. One table with `min-width: 620px`
   inside such an item is therefore enough to force its whole column to 620px — and
   because that column sizes the grid, and the grid sizes the section, the entire
   page ends up wider than a phone screen. The symptom is content sitting off the
   right edge that can only be read by zooming out.

   `body { overflow-x: hidden }` does NOT save you here: it suppresses the scrollbar
   while the content stays off-screen and unreachable, which is worse than the
   scrollbar would have been.

   Measured at 390px and 320px by tools/overflow-scan.mjs, which fails on any element
   crossing the right edge. Re-run it after touching any layout container.
   --------------------------------------------------------------------------- */
.hero-grid > *,
.grid > *,
.split > *,
.deep-sections > *,
.cta-band-inner > *,
.form-grid > *,
.form-row-2 > *,
.footer-grid > *,
.reading-grid > *,
.field > * {
  min-width: 0;
}

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); }
/* The wrapper is a tab stop (see dataTable in src/lib/ui.mjs: a scrollable region with
   no focusable content cannot be reached by keyboard). The global :focus-visible ring
   uses the small radius, which would cut the corners of this larger box. */
.table-wrap:focus-visible { border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
caption { text-align: left; padding: var(--space-5) var(--space-6) 0; color: var(--ink-600); font-size: var(--t-small); }
th, td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--bg-tint); color: var(--ink-900); font-family: var(--font-display); font-size: var(--t-small); font-weight: 700; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-family: var(--font-display); font-size: var(--t-body); color: var(--ink-900); font-weight: 700; }
.price-cell { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; color: var(--brand-teal); white-space: nowrap; }
.table-includes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.table-includes li { display: flex; gap: var(--space-2); font-size: var(--t-small); color: var(--ink-600); }
.table-includes .tick { width: 17px; height: 17px; margin-top: 2px; }

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border-radius: var(--r-full);
  background: var(--bg-tint); color: var(--brand-teal);
  font-size: var(--t-eyebrow); font-weight: 600;
}
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.pill-row li {
  padding: var(--space-2) var(--space-4); border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--bg-surface);
  font-size: var(--t-small); color: var(--ink-700);
}

/* Topic filter on /resources/. Deliberately not .pill-row: those are static labels
   (platform lists), and a button has to look pressable where a label must not. */
.guide-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.guide-filter[hidden], .article-card[hidden] { display: none; }
.filter-pill {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px;
  padding: var(--space-2) var(--space-4); border-radius: var(--r-full);
  border: 1.5px solid var(--border-strong); background: var(--bg-surface);
  font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; color: var(--ink-700);
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.filter-pill:hover { border-color: var(--brand-teal); color: var(--brand-teal); }
.filter-pill[aria-pressed="true"] { background: var(--brand-teal); border-color: var(--brand-teal); color: #fff; }
.filter-pill .filter-count { font-weight: 400; }

/* The calculator, surfaced above the guide list. */
.tool-card { display: grid; gap: var(--space-5); align-items: center; margin-top: var(--space-10); border-color: var(--brand-teal); background: var(--bg-surface-alt); }
.tool-card .badge { margin-bottom: var(--space-3); }
.tool-card h2 { font-size: var(--t-h3); margin-bottom: var(--space-2); }
.tool-card p { margin-bottom: 0; }
.tool-card .btn { justify-self: start; }
@media (min-width: 860px) { .tool-card { grid-template-columns: 1fr auto; gap: var(--space-8); } }

/* ------------------------------------------------------------- highlight */

.note {
  border-left: 4px solid var(--brand-teal); background: var(--bg-surface-alt);
  padding: var(--space-5) var(--space-6); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.note p { color: var(--ink-700); }
.note > :last-child { margin-bottom: 0; }

.security-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.security-list li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); align-items: start; }
.security-list .icon { width: 26px; height: 26px; color: var(--brand-cyan); margin-top: 2px; }
.security-list strong { display: block; color: var(--on-dark); font-family: var(--font-display); margin-bottom: 2px; }
.security-list span { color: var(--on-dark-muted); font-size: var(--t-small); }
@media (min-width: 860px) { .security-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-10); } }

/* ------------------------------------------------------------------ form */

.form-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-md);
}
.form-grid { display: grid; gap: var(--space-5); }
@media (min-width: 620px) { .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-weight: 600; font-size: var(--t-small); color: var(--ink-900); }
.field .optional { font-weight: 400; color: var(--ink-500); }
.field .hint { font-size: var(--t-eyebrow); color: var(--ink-600); }

.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  font-family: var(--font-body); font-size: 1rem; color: var(--ink-900);
  background: var(--bg-surface); border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md); transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e464f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--brand-teal); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }

.field-error { display: none; align-items: center; gap: var(--space-2); font-size: var(--t-eyebrow); font-weight: 600; color: var(--error-text); background: var(--error-tint); padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); }
.field-error.is-shown { display: flex; }

.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; flex-direction: column; gap: var(--space-3); }
.form-foot .btn { width: 100%; }
@media (min-width: 620px) { .form-foot { flex-direction: row; align-items: center; justify-content: space-between; } .form-foot .btn { width: auto;
    /* The reassurance text beside it is the flexible half. Without this the button was
       shrunk to 213px against a 215px label and wrapped onto two lines — two pixels. */
    flex-shrink: 0; } }

.form-status { border-radius: var(--r-md); padding: var(--space-4) var(--space-5); font-size: var(--t-small); }
.form-status:empty { display: none; }
.form-status.is-error { background: var(--error-tint); color: var(--error-text); border: 1px solid var(--error); }
.form-status.is-success { background: var(--bg-tint); color: var(--brand-teal); border: 1px solid var(--brand-teal); }
.form-status strong { display: block; margin-bottom: 2px; }

/* ------------------------------------------------------------- estimator */

/* The catch-up cost calculator (src/pages/catchup-estimator.mjs). Radios stay native and
   visible: a styled tile around a real input keeps keyboard and screen-reader behavior
   free, and the whole label is the click target. */
.estimator { margin-top: var(--space-10); }
@media (min-width: 940px) {
  .estimator { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); }
  .estimator-result { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.choice-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-group legend { padding: 0; margin-bottom: var(--space-2); font-weight: 600; font-size: var(--t-small); color: var(--ink-900); }
.choice-list { display: grid; gap: var(--space-2); }
.choice {
  display: flex; align-items: center; gap: var(--space-3); min-height: 48px;
  padding: 0 var(--space-4); background: var(--bg-surface);
  border: 1.5px solid var(--border-strong); border-radius: var(--r-md);
  transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover { border-color: var(--brand-teal); }
.choice:has(input:checked) { border-color: var(--brand-teal); background: var(--bg-tint); }
.choice input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--brand-teal); }
.choice label { flex: 1; min-width: 0; padding-block: var(--space-3); font-size: var(--t-small); color: var(--ink-700); cursor: pointer; }

.estimator-result .estimator-figure {
  margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--brand-teal);
}
.estimator-result .estimator-context { font-size: var(--t-body); color: var(--ink-700); }
.estimator-facts { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--border); }
@media (min-width: 480px) { .estimator-facts { grid-template-columns: 1fr 1fr; } }
.estimator-facts dt { font-size: var(--t-eyebrow); font-weight: 600; color: var(--ink-600); }
.estimator-facts dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.estimator-result .estimator-disclaimer { margin: var(--space-5) 0 0; color: var(--ink-600); }

/* ------------------------------------------------------------ empty state */

.empty-state {
  border: 1px dashed var(--border-strong); border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 56px); text-align: center; background: var(--bg-surface-alt);
}
.empty-state h3 { margin-bottom: var(--space-3); }
.empty-state p { color: var(--ink-600); max-width: 56ch; margin-inline: auto; }

/* ------------------------------------------------------------------ prose */

.prose { max-width: 74ch; }
.prose h2 { margin-top: var(--space-12); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-8); }
.prose ul { padding-left: 1.15em; }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--brand-teal); }

/* ----------------------------------------------------------------- 404 */

.page-404 { text-align: center; padding-block: clamp(56px, 10vw, 120px); }
/* Decorative, but still held to the 3:1 large-text threshold: 3.05:1 verified. */
.page-404 .code { font-family: var(--font-display); font-size: clamp(3.5rem, 10vw, 6rem); font-weight: 800; color: #7a96a0; line-height: 1; margin-bottom: var(--space-4); }
.page-404 .btn-row { justify-content: center; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--bg-footer); color: var(--ink-700);
  border-top: 1px solid var(--border);
  padding-block: var(--space-16) var(--space-6); margin-top: 0;
}
.footer-grid { display: grid; gap: var(--space-10); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
/* The contact column has a floor. Each row is a 22px icon, a 12px gap and the email
   address, which cannot wrap: 212px. As a plain 1.1fr the column was 163–201px, so the
   rows hung 11–49px past it at every width from 1024px, and scrolled the page sideways
   between 1024 and 1079px, where it is the last thing before the right edge. */
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.25fr 1fr 1fr 1fr minmax(13.5rem, 1.1fr); gap: var(--space-10); } }

.footer-brand picture { display: block; margin-bottom: var(--space-5); }
.footer-brand .logo { width: 168px; height: auto; display: block; }
.footer-brand p { font-size: var(--t-small); max-width: 34ch; }
.footer-legal-name { color: var(--ink-500); margin-top: var(--space-3); }

.footer-col h2 { font-size: var(--t-h4); color: var(--ink-900); margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.footer-col a { color: var(--ink-700); font-size: var(--t-small); text-decoration: none; }
.footer-col a:hover { color: var(--brand-teal); text-decoration: underline; }
.footer-contact li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--t-small); }
.footer-contact a { overflow-wrap: anywhere; }
.footer-contact .icon { width: 19px; height: 19px; color: var(--brand-teal); margin-top: 3px; }

/* Official company profiles. The glyph reuses --brand-teal, already verified at 8.89:1 on
   the footer ground by tools/contrast.mjs, so brand-colored circles are deliberately not
   used here: two more colors would mean two more contrast pairs to hold. 44px targets
   match the site's minimum, set by .btn-sm.

   The row lives in the left-hand brand column, under the logo and legal name, which is
   where a footer social row is normally looked for.

   Every selector here is qualified with .footer-brand on purpose. A bare `.footer-social`
   is 0,1,0 and loses to `.footer-col ul { display: grid }` and to
   `.footer-col a { display: inline-block; padding-block: 3px }`, both 0,1,1 — if this row
   is ever moved back into a .footer-col, unqualified selectors make the icons stack
   vertically and lose their padding reset. Keep a parent class on every line. */
.footer-brand .footer-social {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
}
/* The <li>, not the <a>, is the flex child. Without this it shrinks to just under the
   anchor's 44px and the targets overlap by a couple of pixels. */
.footer-brand .footer-social li { display: flex; flex: 0 0 auto; }
.footer-brand .footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  color: var(--brand-teal);
  padding: 0;
  transition: background-color .18s ease, color .18s ease;
}
.footer-brand .footer-social a:hover { background: var(--bg-tint); color: var(--brand-teal-hover); text-decoration: none; }
.footer-brand .footer-social .brand-icon { width: 21px; height: 21px; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  justify-content: space-between; align-items: center;
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid var(--border); font-size: var(--t-small);
}
.footer-bottom p { margin: 0; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.footer-bottom a { color: var(--ink-700); text-decoration: none; }
.footer-bottom a:hover { color: var(--brand-teal); text-decoration: underline; }

/* -------------------------------------------------------------- utilities */
/* Declared last so they win over the responsive rules above without !important. */

.stack-6  { margin-top: var(--space-6); }
.stack-10 { margin-top: var(--space-10); }
.stack-12 { margin-top: var(--space-12); }
.tight-6  { margin-bottom: var(--space-6); }
.center-row { justify-content: center; }
.gap-6 { gap: var(--space-6); }
.steps.steps-stack { grid-template-columns: 1fr; }

/* --------------------------------------------------------- answer + deep */

.answer-block {
  border-left: 4px solid var(--brand-cyan);
  background: rgba(255, 255, 255, .07);
  padding: var(--space-5) var(--space-6);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-top: var(--space-6);
  max-width: 74ch;
}
.answer-block p { color: var(--on-dark); font-size: var(--t-lead); line-height: 1.55; margin: 0; }

.deep-sections { display: grid; gap: var(--space-12); }
.deep-section { max-width: 78ch; }
.deep-section h2 { margin-bottom: var(--space-4); }
.deep-section p { color: var(--ink-700); margin-bottom: var(--space-4); }
.deep-section .table-wrap { margin-top: var(--space-6); }
.deep-section strong { color: var(--ink-900); }

.signal-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-3); }
/* Normal block flow, NOT flex. These items hold prose with inline <a> and <strong>;
   flex would promote each inline child to its own flex item and tear the sentence
   into columns. */
.signal-list li {
  padding-left: var(--space-4);
  border-left: 3px solid var(--bg-tint);
  color: var(--ink-700);
}

.answer-block-light {
  border-left-color: var(--brand-teal);
  background: var(--bg-tint);
}
.answer-block-light p { color: var(--ink-700); }

/* ----------------------------------------------------------- resources UI */

.article-card .badge { margin-bottom: var(--space-3); }
.article-card h3 { font-size: var(--t-h4); line-height: 1.4; }
.article-meta { margin-top: var(--space-4); font-size: var(--t-eyebrow); color: var(--ink-500); }

.related-reading {
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-teal);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--bg-surface);
  padding: var(--card-pad);
}
.related-reading h2 { font-size: var(--t-h4); margin-bottom: var(--space-4); }
.related-reading ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.related-reading li { display: flex; gap: var(--space-3); align-items: flex-start; }
.reading-icon { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--brand-teal); }
.related-reading a { font-weight: 600; text-decoration: none; }
.related-reading a:hover { text-decoration: underline; }
.reading-context { display: block; font-size: var(--t-small); color: var(--ink-600); margin-top: 2px; }

.source-list { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.source-list h3 { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-600); margin-bottom: var(--space-3); }
.source-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.source-list a { font-size: var(--t-small); }

.reading-grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 900px) { .reading-grid { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------- hero, desktop */
/* Two columns from 1100px so the trust strip sits above the fold at 1280x800
   alongside the headline, CTA and direct answer. Composition dimension 2. */

@media (min-width: 1100px) {
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
    gap: var(--space-16);
    align-items: start;
  }
  .hero-copy { max-width: none; }
  .hero .answer-block { max-width: none; }

  .stats-strip {
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--space-8);
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, .18);
  }
  .stats-strip .stats { grid-template-columns: 1fr; gap: var(--space-6); }
  .stats-strip .stat-value { font-size: 2rem; }
}

/* Standalone controls meet the 44px minimum. Inline links inside a sentence are
   exempt under WCAG 2.5.8, but navigation-like link lists get real padding. */
.brand { min-height: 44px; }
.related-reading li a { display: inline-block; padding-block: var(--space-1); }
.signal-list a { display: inline-block; padding-block: var(--space-1); }
.footer-col a, .footer-bottom a { display: inline-block; padding-block: 3px; }

/* -------------------------------------------------------------- guide page */

.guide-head { max-width: 74ch; margin-bottom: var(--space-10); }
.guide-head h1 { margin-bottom: var(--space-4); }
.guide-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  align-items: center; margin-top: var(--space-5);
  font-size: var(--t-small); color: var(--ink-600);
}
.guide-meta strong { color: var(--ink-900); font-weight: 600; }

.guide-body { align-items: start; }
.guide .prose h2 { margin-top: var(--space-12); }
.guide .prose h3 { margin-top: var(--space-8); }
.guide .prose figure { margin: var(--space-8) 0; }
.guide .prose table { min-width: 520px; }
.guide .prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-12) 0; }
.guide .prose > :first-child { margin-top: 0; }

.author-card {
  display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4);
  align-items: start; padding: var(--card-pad);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-surface-alt);
}
.author-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--r-full);
  background: var(--bg-tint); color: var(--brand-teal);
}
.author-name { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); margin-bottom: var(--space-1); }
.author-bio { font-size: var(--t-small); color: var(--ink-600); margin: 0; }

.guide-aside .signal-list a { font-weight: 600; text-decoration: none; }
.guide-aside .signal-list a:hover { text-decoration: underline; }

.author-links {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
}
.author-links a { font-size: var(--t-small); font-weight: 600; }

/* ----------------------------------------------------------------- whatsapp -- */

/* Floating chat link, on every page. Fixed, so it never participates in page
   layout and cannot widen a phone viewport. */
.wa-fab {
  position: fixed;
  right: var(--page-pad);
  bottom: calc(var(--page-pad) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: var(--whatsapp);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transition: background-color .18s ease, transform .18s ease;
}
.wa-fab svg { width: 28px; height: 28px; }
.wa-fab:hover { background: var(--whatsapp-hover); transform: translateY(-2px); }
/* The global ring is rounded to --r-sm, which would square off a circular target. */
.wa-fab:focus-visible { border-radius: var(--r-full); }

/* The consent banner is fixed to the bottom edge across the full width, so the
   button would sit behind it. site.js carries this class for exactly as long as the
   banner is open, and drops it the moment the visitor answers. Hiding beats shifting
   the button up: the banner's height varies with viewport and text wrapping, so any
   fixed offset would be wrong at some width. */
body.consent-open .wa-fab { display: none; }

@media print { .wa-fab { display: none; } }

/* ------------------------------------------------------------------ consent -- */

/* Analytics consent banner. Rendered hidden and revealed by site.js only when the
   visitor has not answered yet — see the analytics section of that file.

   `[hidden]` needs the explicit rule because `display: flex` below out-specifies the
   user-agent `[hidden] { display: none }`, which is the classic way a "hidden" element
   ends up on screen for everyone. */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--page-pad);
  /* Keeps the buttons clear of the iPhone home indicator. */
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}
.consent[hidden] { display: none; }

.consent-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-6);
  max-width: var(--page-max); margin: 0 auto;
}
/* Without this the text refuses to shrink below its longest line and pushes the
   buttons off the right edge of a phone. */
.consent-text {
  flex: 1 1 320px; min-width: 0; margin: 0;
  font-size: var(--t-small); color: var(--ink-700);
}
.consent-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  flex-shrink: 0; margin-left: auto;
}
.consent-actions .btn { width: auto; }

@media (max-width: 560px) {
  /* Full-width targets on a phone, and the accepting action last so it sits nearest
     the thumb. */
  .consent-actions { width: 100%; margin-left: 0; }
  .consent-actions .btn { flex: 1 1 140px; }
}

@media print { .consent { display: none; } }