/* ============================================================
   MY SPANISH FRAMEWORK — DESIGN TOKENS v1.0
   Single source of truth. Never hard-code these values elsewhere.
   Shared across every My Spanish ecosystem site.
   ============================================================ */
:root {
  /* Colour */
  --ms-red: #C8102E;
  --ms-red-dark: #A30D25;
  --ms-red-tint: #FBEAED;
  --ms-navy: #16233F;
  --ms-navy-800: #1F3054;
  --ms-navy-100: #E8EBF2;
  --ms-white: #FFFFFF;
  --ms-grey-50: #F6F7F9;
  --ms-grey-600: #4A5265;
  --ms-grey-800: #262D3D;
  --ms-success: #1E7B4D;
  --ms-success-tint: #E7F3EC;
  --ms-warning: #B7791F;
  --ms-warning-tint: #FBF3E4;
  --ms-error: var(--ms-red-dark);
  --ms-whatsapp: #25D366; /* WhatsApp CTA only */

  /* Semantic aliases */
  --color-text: var(--ms-grey-800);
  --color-text-secondary: var(--ms-grey-600);
  --color-surface: var(--ms-white);
  --color-surface-alt: var(--ms-grey-50);
  --color-surface-dark: var(--ms-navy);
  --color-border: var(--ms-navy-100);
  --color-link: var(--ms-red);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-h1: clamp(2rem, 4.5vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 3vw, 1.875rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.375rem);
  --fs-body: 1.0625rem;   /* 17px */
  --fs-small: 0.875rem;
  --fs-xs: 0.8rem;
  --lh-body: 1.6;
  --lh-heading: 1.2;
  --content-width: 68ch;
  --container-width: 1080px;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --section-pad: clamp(var(--space-16), 8vw, var(--space-20));

  /* Radius & elevation */
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 20px rgba(22, 35, 63, 0.08);
  --shadow-lift: 0 14px 34px rgba(22, 35, 63, 0.18);

  /* Accessibility */
  --focus-ring: 0 0 0 3px rgba(200, 16, 46, 0.25);
  --tap-target: 48px;

  /* Motion */
  --transition-fast: 0.15s ease;
}

/* ============================================================
   BASE — reset, fonts, typography, accessibility foundations
   ============================================================ */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: swap; src: url('../fonts/inter-800.woff2') format('woff2'); }

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: var(--lh-heading); color: var(--ms-navy); }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p, ul, ol { max-width: var(--content-width); }
ul, ol { padding-left: 1.25em; }
i[lang="es"], em[lang="es"] { font-style: italic; }

a { color: var(--ms-navy); text-decoration-color: var(--ms-navy-100); text-underline-offset: 3px; }
a:hover { color: var(--ms-red); }

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

fieldset { border: none; padding: 0; margin: 0; }

:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ms-navy); color: #fff; padding: var(--space-3) var(--space-6);
  border-radius: 0 0 var(--radius-btn) 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Screen-reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Layout primitives */
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: var(--section-pad) 0; }
.section--alt { background: var(--color-surface-alt); }
.section--navy { background: var(--ms-navy); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }

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

/* ============================================================
   COMPONENTS — My Spanish Framework component library v1.0
   Every component uses tokens only. No page-specific CSS.
   ============================================================ */

/* ---------- Header & navigation ---------- */
.site-header { background: var(--ms-white); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; }
.site-header__inner { display: flex; align-items: stretch; justify-content: space-between; height: 84px; }
.site-header__logo { display: flex; align-items: center; }
.nav-toggle { align-self: center; }
.site-header__logo img { height: 64px; width: auto; }
@media (min-width: 900px) {
  .site-header__inner { height: 108px; }
  .site-header__logo img { height: 88px; }
}
.nav-desktop { display: none; align-items: center; gap: var(--space-6); }
.nav-desktop a { color: var(--ms-navy); text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: var(--space-2); }
.nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--ms-red); }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-target); min-height: var(--tap-target); background: none; border: none; cursor: pointer; color: var(--ms-navy); }
.nav-mobile { display: none; background: var(--ms-navy); padding: var(--space-6); }
.nav-mobile.is-open { display: block; }
.nav-mobile a { display: block; color: #fff; text-decoration: none; font-weight: 600; padding: var(--space-3) 0; min-height: var(--tap-target); border-bottom: 1px solid var(--ms-navy-800); }
@media (min-width: 900px) { .nav-desktop { display: flex; } .nav-toggle { display: none; } }

/* Mega menu v2 (Neil, 2 Aug 2026, modelled on the 247expatinsurance.com panel):
   one full-width panel under a single Insurance item — left rail of quote
   buttons, uppercase section kickers, bold lead links. Pure CSS open state
   (:hover + :focus-within) so it works without JavaScript. Tokens only; the
   shadow is --ms-navy at low opacity. Unbuilt links are stripped at build time
   by the existing D-8 suppression. */
.nav-desktop { align-items: stretch; flex: 1; justify-content: flex-end; }
.nav-desktop > a { align-self: center; }
.nav-item { display: flex; align-items: center; }
.nav-item > a::after { content: " \25BE"; font-size: 0.7em; color: var(--ms-grey-600); }
.nav-cta { align-self: center; margin-left: var(--space-4); min-height: 42px; padding: var(--space-2) var(--space-6); }
.nav-desktop a.nav-cta { color: #fff; }
.nav-desktop a.nav-cta:hover { color: #fff; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 200;
  background: var(--ms-white); border-top: 1px solid var(--color-border);
  box-shadow: 0 28px 56px rgba(22, 35, 63, 0.16);
  padding: var(--space-8) 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  /* the visibility delay is hover forgiveness: the pointer can drift for ~150ms
     on its way down to the panel without the menu snapping shut */
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.15s;
}
.nav-item:hover .mega, .nav-item:focus-within .mega {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) { .mega { transition: none; } }
.mega__grid { display: grid; grid-template-columns: 230px 1fr 1fr 1fr 1fr; gap: var(--space-8); align-items: start; }
.mega__rail { border-right: 1px solid var(--color-border); padding-right: var(--space-6); }
.mega__kicker { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-grey-600); margin-bottom: var(--space-3); }
.mega a { display: block; padding: var(--space-1) 0; font-size: 0.92rem; font-weight: 500; color: var(--ms-grey-800); }
.mega a::after { content: none; }
.mega a:hover { color: var(--ms-red); background: none; }
.mega__lead { font-weight: 700; color: var(--ms-navy); margin-top: var(--space-2); }
.mega__quote { display: block; text-align: center; margin-bottom: var(--space-2); padding: var(--space-2) var(--space-4); }
.mega a.mega__quote { color: #fff; font-weight: 600; }
.mega a.mega__quote:hover { color: #fff; }
.mega__all { font-weight: 700; color: var(--ms-red); margin-top: var(--space-2); }
.mega__note { font-size: 0.8rem; color: var(--ms-grey-600); margin-top: var(--space-3); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding: var(--space-3) 0; font-size: var(--fs-small); color: var(--color-text-secondary); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: var(--space-2); color: var(--color-text-secondary); }
.breadcrumbs a { color: var(--color-text-secondary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-target); padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-btn); font-family: inherit; font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background var(--transition-fast), color var(--transition-fast);
}
.btn--primary { background: var(--ms-red); color: #fff; }
.btn--primary:hover { background: var(--ms-red-dark); color: #fff; }
.btn--secondary { background: var(--ms-white); color: var(--ms-navy); border-color: var(--ms-navy); }
.btn--secondary:hover { background: var(--ms-grey-50); }
.btn--outline { background: transparent; color: var(--ms-red); border-color: var(--ms-red); }
.btn--outline:hover { background: var(--ms-red-tint); }
.btn--outline-inverse { background: transparent; color: #fff; border-color: #fff; }
.btn--ghost { background: none; border: none; color: var(--ms-navy); padding: var(--space-3) var(--space-1); }
.btn--ghost .arrow { color: var(--ms-red); }
/* MODULAR CHANNEL — WhatsApp components ship disabled; enable only once the service is operational (Bible §8) */
.btn--whatsapp { background: var(--ms-whatsapp); color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn--block { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  background-color: var(--ms-navy);
  background-image:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 140px, transparent 141px),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 260px, transparent 261px),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 400px, transparent 401px),
    radial-gradient(circle at -5% 110%, rgba(200,16,46,0.12) 0, transparent 420px),
    linear-gradient(135deg, var(--ms-navy) 0%, var(--ms-navy-800) 100%);
  color: #fff; padding: var(--section-pad) 0;
}
.hero h1 { color: #fff; }
.hero__kicker { display: inline-block; color: #F1B7C1; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs); margin-bottom: var(--space-3); }
.hero__lead { color: #C6CDDD; max-width: 56ch; margin: var(--space-4) 0 var(--space-8); }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero--minimal { padding: var(--space-12) 0; }

/* ---------- Quick answer ---------- */
.quick-answer {
  border-left: 4px solid var(--ms-red); background: var(--color-surface-alt);
  padding: var(--space-6); border-radius: 0 var(--radius-card) var(--radius-card) 0;
  max-width: 72ch; margin: var(--space-8) 0;
}
.quick-answer strong { color: var(--ms-navy); }

/* ---------- Cards ---------- */
.card { background: var(--ms-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 1px solid var(--color-border); padding: var(--space-8); }
.card__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--ms-red-tint); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); color: var(--ms-red); }
.card p { color: var(--color-text-secondary); font-size: 0.95rem; margin: var(--space-2) 0 var(--space-4); }
.card__link { font-weight: 600; text-decoration: none; color: var(--ms-navy); }
.card__link .arrow { color: var(--ms-red); }
a.card { display: block; text-decoration: none; color: inherit; position: relative; overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
a.card:hover { border-color: var(--ms-red); transform: translateY(-6px); box-shadow: var(--shadow-lift); }
a.card:hover .card__link .arrow { transform: translateX(4px); }
.card__link .arrow { display: inline-block; transition: transform 0.25s ease; }

/* ---------- Feature cards (homepage product grid) ---------- */
.card--feature { background: linear-gradient(160deg, var(--ms-navy) 0%, var(--ms-navy-800) 100%); border-color: var(--ms-navy-800); }
.card--feature h3 { color: #fff; background-image: linear-gradient(90deg, var(--ms-red) 0%, var(--ms-red) 50%, #fff 50%, #fff 100%);
  background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; transition: background-position 0.7s ease; }
.card--feature:hover h3 { background-position: 0 0; }
.card--feature p { color: #C6CDDD; }
.card--feature .card__icon { background: var(--ms-red); color: #fff; }
.card--feature .card__link { color: #fff; }
.card--feature:hover { border-color: var(--ms-red); box-shadow: 0 16px 40px rgba(22,35,63,0.35); }
.card--feature:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ms-red); border-radius: var(--radius-card); }

/* ---------- Scroll-reveal (enhancement only — content visible without JS) ---------- */
body.anim-ready .will-reveal { opacity: 0; transform: translateY(18px); }
body.anim-ready .will-reveal.in-view { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s ease; }
@media (prefers-reduced-motion: reduce) {
  body.anim-ready .will-reveal { opacity: 1; transform: none; }
  a.card, .card--feature h3 { transition: none !important; }
}

/* ---------- Callouts ---------- */
.callout { border-radius: var(--radius-card); padding: var(--space-4) var(--space-6); margin: var(--space-6) 0; font-size: 0.95rem; max-width: 72ch; }
.callout--info { background: var(--ms-navy-100); color: var(--ms-navy); }
.callout--tip { background: var(--ms-success-tint); color: var(--ms-success); }
.callout--warning { background: var(--ms-warning-tint); color: var(--ms-warning); }
.callout--important { background: var(--ms-red-tint); color: var(--ms-red-dark); }

/* ---------- Checklist & timeline ---------- */
.checklist { list-style: none; padding: 0; }
.checklist li { padding-left: var(--space-8); position: relative; margin-bottom: var(--space-3); }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--ms-success); font-weight: 800; }
.timeline { list-style: none; padding: 0; counter-reset: step; }
.timeline li { counter-increment: step; padding-left: var(--space-12); position: relative; margin-bottom: var(--space-6); }
.timeline li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; background: var(--ms-red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-small);
}

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; background: var(--ms-white); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); font-size: 0.95rem; }
.compare-table th { background: var(--ms-navy); color: #fff; text-align: left; padding: var(--space-4) var(--space-6); font-weight: 600; }
.compare-table td { padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border); }
.compare-table tr:nth-child(even) td { background: var(--color-surface-alt); }
.compare-table .yes { color: var(--ms-success); font-weight: 600; }
.compare-table .no { color: var(--color-text-secondary); }

/* ---------- FAQ accordion ---------- */
.faq { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--color-border); background: var(--ms-white); }
.faq details:last-child { border-bottom: none; }
.faq summary { padding: var(--space-4) var(--space-6); font-weight: 600; color: var(--ms-navy); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: var(--tap-target); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ms-red); font-size: 1.3rem; font-weight: 400; flex-shrink: 0; }
.faq details[open] summary::after { content: "–"; }
.faq .faq__answer { padding: 0 var(--space-6) var(--space-4); color: var(--color-text-secondary); font-size: 0.95rem; }

/* ---------- Forms ---------- */
.form-card { background: var(--ms-white); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-8); max-width: 560px; }
.form-progress { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
.form-progress span { height: 6px; flex: 1; border-radius: var(--radius-pill); background: var(--color-border); }
.form-progress span.is-active { background: var(--ms-red); }
.field { margin-bottom: var(--space-4); }
/* Conditional groups (2 Aug 2026): applicant rows and product-revealed blocks are nested
   fieldsets — reset the browser fieldset chrome; a light rule separates each person. */
.reveal-group, .applicant-row { border: 0; padding: 0; margin: 0; min-width: 0; }
.applicant-row { border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-bottom: var(--space-4); }
.applicant-row__legend { font-weight: 600; font-size: 0.9rem; color: var(--ms-navy); padding: 0 0 var(--space-2); }
.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-2); color: var(--ms-navy); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap-target); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn); padding: var(--space-3) var(--space-4);
  font-size: 1rem; font-family: inherit; background: var(--ms-white); color: var(--color-text);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--ms-red); box-shadow: var(--focus-ring); }
.field--error input, .field--error select { border-color: var(--ms-error); }
.field__error { color: var(--ms-error); font-size: var(--fs-small); margin-top: var(--space-1); }
.field__hint { color: var(--color-text-secondary); font-size: var(--fs-xs); margin-top: var(--space-1); }
.field--checkbox { display: flex; gap: var(--space-3); align-items: flex-start; }
.field--checkbox input { width: 20px; min-height: 20px; height: 20px; margin-top: 3px; accent-color: var(--ms-red); }
.field--checkbox label { font-weight: 400; font-size: var(--fs-small); color: var(--color-text-secondary); margin: 0; }
.form-success { background: var(--ms-success-tint); color: var(--ms-success); border-radius: var(--radius-card); padding: var(--space-6); font-weight: 600; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ms-navy); border-radius: var(--radius-card); padding: var(--space-8); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.cta-band h2, .cta-band h3 { color: #fff; margin: 0; }
.cta-band p { color: #C6CDDD; margin: var(--space-2) 0 0; }

/* ---------- Trust / benefits row (no unverified statistics) ---------- */
.trust-row { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; background: var(--ms-navy); color: #fff; border-radius: var(--radius-card); padding: var(--space-6) var(--space-8); }
.trust-row__item { display: flex; gap: var(--space-3); align-items: center; font-size: 0.92rem; font-weight: 600; }
.trust-row__item svg { flex-shrink: 0; }

/* ---------- Reviewer / E-E-A-T block ---------- */
.reviewer { display: flex; gap: var(--space-4); align-items: center; border-top: 1px solid var(--color-border); padding-top: var(--space-6); margin-top: var(--space-8); max-width: 720px; font-size: 0.9rem; color: var(--color-text-secondary); }
.reviewer__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ms-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.reviewer strong { color: var(--ms-navy); }

/* ---------- Sources ---------- */
.sources { font-size: var(--fs-small); color: var(--color-text-secondary); border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: var(--space-8); }
.sources ul { list-style: none; padding: 0; }
.sources li { margin-bottom: var(--space-1); }

/* ---------- Related pages ---------- */
.related { margin-top: var(--space-8); }
.related__list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 700px) { .related__list { grid-template-columns: repeat(2, 1fr); } }
.related__list a { display: block; padding: var(--space-4) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-btn); text-decoration: none; font-weight: 600; color: var(--ms-navy); }
.related__list a:hover { border-color: var(--ms-red); color: var(--ms-red); }

/* ---------- Contents nav (guides) ---------- */
.toc { background: var(--color-surface-alt); border-radius: var(--radius-card); padding: var(--space-6); max-width: 480px; margin: var(--space-6) 0; }
.toc h2 { font-size: 1rem; margin-bottom: var(--space-3); }
.toc ol { padding-left: 1.25em; font-size: 0.95rem; }
.toc a { text-decoration: none; }

/* ---------- Sticky mobile CTA + WhatsApp float ---------- */
.sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; display: flex; z-index: 90; box-shadow: 0 -2px 12px rgba(22,35,63,0.15); }
.sticky-cta a { flex: 1; text-align: center; padding: var(--space-4); font-weight: 600; text-decoration: none; min-height: var(--tap-target); }
.sticky-cta__quote { background: var(--ms-red); color: #fff; }
.sticky-cta__whatsapp { background: var(--ms-whatsapp); color: #fff; }
@media (min-width: 900px) { .sticky-cta { display: none; } }
body.has-sticky-cta { padding-bottom: 64px; }
@media (min-width: 900px) { body.has-sticky-cta { padding-bottom: 0; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ms-navy); color: #C6CDDD; padding: var(--space-16) 0 var(--space-8); font-size: 0.92rem; margin-top: var(--space-16); }
.site-footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer h2 { color: #fff; font-size: 0.95rem; margin-bottom: var(--space-3); }
.site-footer a { color: #C6CDDD; text-decoration: none; display: inline-block; padding: var(--space-1) 0; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer__logo img { height: 52px; width: auto; margin-bottom: var(--space-4); }
.site-footer__legal { border-top: 1px solid var(--ms-navy-800); margin-top: var(--space-8); padding-top: var(--space-4); font-size: var(--fs-xs); }
/* Cookie-settings control. Styled as a link because that is what it behaves like, but it stays a
   real <button> — it performs an action rather than navigating, and a link with no href is not
   reachable by keyboard. Tokens only, no hard-coded values. */
.site-footer__cookies { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.site-footer__cookies:hover { color: var(--ms-white); }
.site-footer__cookies:focus-visible { outline: 2px solid var(--ms-red); outline-offset: 2px; }

/* ---------- Cookie banner ---------- */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--ms-white); border-top: 1px solid var(--color-border); box-shadow: 0 -2px 12px rgba(22,35,63,0.15); padding: var(--space-4) 0; z-index: 110; display: none; }
.cookie-banner.is-visible { display: block; }
.cookie-banner__inner { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.cookie-banner p { font-size: var(--fs-small); color: var(--color-text-secondary); margin: 0; }

/* Explanatory sections — substantive factual/legal content with real headings.
   Added after the Stage B.1 certification run (D-1/D-2). Not numbered. */
.expl { max-width: var(--content-width, 68ch); margin: 0 0 var(--space-10, 2.5rem); }
.expl + .expl { padding-top: var(--space-8, 2rem); border-top: 1px solid var(--ms-grey-200, #e5e7eb); }
.expl__heading { margin: 0 0 var(--space-3, 0.75rem); scroll-margin-top: var(--space-16, 4rem); }
.expl__intro { font-weight: 600; margin: 0 0 var(--space-3, 0.75rem); }
.expl p { margin: 0 0 var(--space-3, 0.75rem); }
.expl__list { margin: 0 0 var(--space-4, 1rem); padding-left: 1.25rem; }
.expl__list li { margin-bottom: var(--space-2, 0.5rem); }
.expl__note { font-size: 0.9375rem; color: var(--ms-navy, #16233F); background: var(--ms-grey-50, #f7f8fa);
  border-left: 3px solid var(--ms-red, #C8102E); padding: var(--space-3, 0.75rem) var(--space-4, 1rem); }
.expl__cta { margin-top: var(--space-4, 1rem); }

/* Tap targets (D-10) — shared navigation and controls meet the 48px token.
   Inline prose links are deliberately excluded. */
.nav a, .footer-nav a, .sticky-cta a, .faq summary,
.form-card button, .form-card input[type="submit"], .form-card select {
  min-height: var(--tap-target, 48px);
  display: flex; align-items: center;
}
.faq summary { padding-block: var(--space-3, 0.75rem); }
.footer-nav a { padding-block: var(--space-2, 0.5rem); }

/* Per-category consent choices. Tokens only. */
.cookie-banner__choices { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; font-size: var(--fs-sm); }
.cookie-banner__choices label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }

/* UTILITIES — small helpers only; prefer components */
.text-center { text-align: center; }
.text-secondary { color: var(--color-text-secondary); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); }
.flow > * + * { margin-top: var(--space-4); }
.kicker { display: inline-block; color: var(--ms-red); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs); margin-bottom: var(--space-3); }
.section-head { margin-bottom: var(--space-8); }