/* =========================================================================
   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); }
@media (min-width: 1080px) { .nav-phone { white-space: nowrap; } }

@media (min-width: 1080px) {
  .nav-toggle { display: none; }
  .primary-nav {
    display: flex; align-items: center; gap: var(--space-6);
    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-3);
    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 0 0 var(--space-2); }
}
@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);
}

/* ------------------------------------------------------------- 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; }

/* ------------------------------------------------------------ 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); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.25fr 1fr 1fr 1fr 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 1fr; gap: var(--space-3); align-items: start; font-size: var(--t-small); }
.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; } }