/* pacote design-system: design-system.final10.css — gerado por scripts/pages/css_bundles.py; não editar */
/* ── design-system.final10.css ── */
/* BUG-031 (2026-07-13) — self-hosted, replaces the Google Fonts @import.
   Was: an @import of the Google Fonts CDN (Fraunces + Inter + JetBrains Mono).
   Why: (1) that request was render-blocking; (2) it sent the visitor's IP to
   a US host (the Google Fonts CDN) before any consent banner ran — a
   GDPR problem for an EU-facing, MAGOP Lda-operated site (cf. LG München I,
   3 O 17493/20 on self-hosting Google Fonts). Same 3 families/weights as
   before (Fraunces 400/500/600/700, Inter 400/500/600/700, JetBrains Mono
   400/500/600 — the only weights actually referenced via var(--font-display)
   /var(--font-body)/var(--font-data) in this file and blog.css/country.css/
   assess.css/partners.v2.css/pw-v2.css/redesign-enhance.css).
   No italic faces: italic was never requested from Google either, so
   font-style:italic on these families was already browser-synthesized —
   unchanged behaviour. Files are Google's own variable woff2 (opsz+wght
   axis for Fraunces, wght axis for the other two) at /assets/fonts/, so
   font-weight is a RANGE and interpolates, and the opsz axis (used a few
   lines below via font-variation-settings) still works.
   License: SIL Open Font License 1.1 for all three — full text at
   /assets/fonts/OFL-Fraunces.txt, OFL-Inter.txt, OFL-JetBrainsMono.txt.
   NOTE: the <link rel="preload"> Google Fonts tags in deploy/*.html were
   ALSO removed site-wide (except deploy/blog/, deploy/countries/,
   deploy/about/, deploy/quiz/ — pending founder coordination with the
   agent that owns those folders) since they were the actual
   render-blocking + GDPR-triggering element; this @font-face block alone
   would not have fixed either problem while those tags remained. */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/assets/fonts/fraunces-latin-ext.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;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/assets/fonts/inter-latin-ext.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;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(/assets/fonts/jetbrainsmono-latin-ext.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;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(/assets/fonts/jetbrainsmono-latin.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;
}

/* ============================================================================
   BREAKPOINTS CANÓNICOS (BP-F4, 2026-07-21): 480 / 768 / 900
   ----------------------------------------------------------------------------
   CSS custom properties não funcionam dentro da CONDIÇÃO de uma @media query
   (só como valor — `@media(max-width:var(--x))` não é CSS válido) — por isso
   isto é um CONTRATO DE COMENTÁRIO, não um token. Qualquer `@media(max-width:
   ...)` novo, neste ficheiro ou nas folhas de família, deve usar UM destes 3
   números; qualquer outro valor é drift.
   Escolha com base em dados (medidos 2026-07-21): distribuição real de todos
   os `(max|min)-width` em deploy/assets/*.css — 768px é o mais comum (33
   ocorrências), 480px o segundo (13), e um terceiro grupo disperso entre
   700-900 (700/720/760/820/840/860/880/900). DENTRO deste ficheiro central —
   a folha mais autoritativa, carregada em ~8.800 páginas — a contagem é
   768px×20, 480px×8, 900px×3, 700px×1: 900 vence 700 por 3-a-1 como o
   terceiro breakpoint estrutural real (colapso do nav do header, ~L830, e do
   grid do footer, ~L876 — ambos já em 900). 380px sobrevive como EXCEÇÃO
   documentada (rede de segurança iPhone-SE-class, ~L976), não um 4º canónico.
   Ver docs/design-system/08-comportamentos.md. Migrar os @media site-wide
   para estes 3 valores é trabalho do F6 — este bloco é só o contrato; nenhum
   @media existente foi tocado aqui.
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--white:#FFFFFF;
  /* Colors */
  --ink:#0C2E2B;
  --primary:#1A5C50;
  --primary-60:#267A6B;
  --primary-30:#D0E8E3;
  --primary-10:#EDF5F3;
  --accent:#A84A20;
  --accent-hover:#9C4720;
  --accent-light:#FDF0EA;
  --accent-10:rgba(168,74,32,0.10);
  --accent-20:rgba(168,74,32,0.20);
  --move:#0F6B3A;
  --move-bg:#E7F5ED;
  --move-border:#B7E1C7;
  --delay:#9A6700;
  --delay-bg:#FEF6E0;
  --delay-border:#F5D982;
  --avoid:#B42318;
  --avoid-bg:#FEF0EF;
  --avoid-border:#F5B8B4;
  /* Semantic */
  --pass:#10B981;
  --pass-bg:#ECFDF5;
  --warning:#F59E0B;
  --warning-bg:#FFFBEB;
  --fail:#EF4444;
  --fail-bg:#FEF2F2;
  --grey-900:#1A1F2B;
  --grey-700:#3D4451;
  --grey-500:#5A6470;
  --grey-300:#C8CCD2;
  --grey-100:#F2F3F5;
  --surface:#FAFAF8;
  --paper:#FFFFFF;
  --paper-warm:#F5F1E8;
  --paper-deep:oklch(97% 0.008 80);
  --cream:#F5F1E8;

  /* Typography */
  --font-display:'Fraunces','Fraunces-fb',Georgia,serif;
  --font-body:'Inter','Inter-fb',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-data:'JetBrains Mono',ui-monospace,monospace;

  /* Spacing */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;
  --sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;
  --sp-24:96px;--sp-32:128px;

  /* Layout */
  --max-width:1120px;
  --max-width-narrow:720px;
  --gutter:24px;
  --radius:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-pill:999px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl:0 16px 48px rgba(0,0,0,0.1);

  /* Motion */
  --ease-out:cubic-bezier(0.4,0,0.2,1);
  --ease:cubic-bezier(0.4,0,0.2,1);
  --duration-fast:150ms;
  --duration-normal:200ms;
  --duration-slow:300ms;
  --duration-reveal:500ms;

  /* Brand Spec compliance — added 2026-05-14 (additive only) */
  --primary-dark:#0F3B36;
  --text-body:#374151;
  --border:rgba(12,46,43,0.10);
  --radius-sm:6px;
  --space-xs:var(--sp-1);
  --space-sm:var(--sp-2);
  --space-md:var(--sp-4);
  --space-lg:var(--sp-6);
  --space-xl:var(--sp-8);
  --space-2xl:var(--sp-12);
  --space-3xl:80px;

  /* Design-system canonization (2026-05-15) — accent on dark surfaces.
   * The wordmark "TO" + the partners nav-link render on the dark
   * primary-green header where var(--accent) #C45D2C lacks contrast.
   * #FFB37A is the calibrated lighter accent for that case. Was
   * hardcoded inline on lines ~656 + ~659 before this token existed.
   * See docs/design-system.html §03 (Wordmark) for the canonical rule. */
  --accent-on-dark:#FFB37A;
}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--grey-900);background:var(--surface);font-size:16px;font-weight:400;line-height:1.65;font-feature-settings:"ss01","ss02"}
/* D022 — Lead paragraph utility */
.lead,p.lead{font-size:18px;line-height:1.5;font-weight:400;max-width:680px;margin-left:auto;margin-right:auto;color:var(--grey-700)}
@media(max-width:768px){.lead,p.lead{font-size:17px}}
/* D031 — CTA microcopy utility (mono, low contrast, one-line) */
.cta-meta{display:block;margin-top:10px;font:500 12px/1.4 var(--font-data,'JetBrains Mono',monospace);color:var(--grey-500);letter-spacing:0.02em;text-align:center}
/* D052 — Sitewide consistent hover for cards + tier CTAs */
.tier__cta:not(.is-disabled),.card,.feature-card{transition:transform var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out),border-color var(--duration-normal) var(--ease-out)}
.card:hover,.feature-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(12,46,43,0.08);border-color:var(--accent-20)}
.site-footer__col a{transition:color .15s ease}
.site-footer__col a:hover{color:var(--accent) !important} /* must beat the 6×:not() link-hover block (~L441) — footer col links are not in its exclusion list */
:where(a){color:var(--primary);text-decoration:none;transition:color var(--duration-normal) var(--ease-out)}
:where(a:hover){color:var(--primary-60)}
h1{font-family:var(--font-display);font-weight:500;color:var(--grey-900);line-height:1.08;letter-spacing:-0.022em;font-variation-settings:"opsz" 96}
h2,h3{font-family:var(--font-body);font-weight:700;color:var(--grey-900);line-height:1.15;letter-spacing:-0.015em}
h1{font-size:48px}
h2{font-size:28px;line-height:1.3}
h3{font-size:22px;line-height:1.3}
h4{font-family:var(--font-body);font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-0.01em}
p{margin-bottom:1em;line-height:1.65}p:last-child{margin-bottom:0}
@media(max-width:768px){h1{font-size:32px}h2{font-size:24px}}
@media(max-width:480px){h1{font-size:28px;line-height:1.2}h2{font-size:20px;line-height:1.3}h3{font-size:18px}}

.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(250,250,248,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,0.06);transition:transform var(--duration-slow) var(--ease-out)}
.site-header.nav-hidden{transform:translateY(-100%)}
.nav,.site-nav{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.nav__logo{display:flex;align-items:center;gap:0;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-0.01em}
.nav__logo .word-where{color:var(--ink)}
.nav__logo .word-to{background:var(--primary);color:var(--paper);padding:2px 6px;border-radius:4px;margin:0 1px;font-size:17px;letter-spacing:0.02em}
.nav__logo .word-emigrate{color:var(--ink)}
.nav__logo .io{font-family:var(--font-body);font-weight:500;color:var(--grey-500);font-size:16px;margin-left:1px}
.nav__links{display:flex;align-items:center;gap:18px;list-style:none}
.nav__links a{font:500 14px/1 var(--font-body);color:var(--grey-700);letter-spacing:0.01em;transition:color var(--duration-normal) var(--ease-out);min-height:44px;display:inline-flex;align-items:center}
.nav__links a:hover,.nav__links a.active{color:var(--ink)}
.nav__cta{display:inline-flex;align-items:center;padding:14px 22px;background:var(--accent);color:var(--paper) !important;border-radius:var(--radius);font:600 14px/1 var(--font-body) !important;transition:background var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out);min-height:52px}
.nav__cta:hover{background:var(--accent-hover);color:var(--paper) !important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(168,74,32,0.25)}
.nav__toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav__toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:all var(--duration-normal) var(--ease-out)}
@media(max-width:768px){
  .nav__toggle{display:block}
  .nav__links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--surface);flex-direction:column;padding:24px;gap:16px;border-bottom:1px solid rgba(0,0,0,0.06);box-shadow:var(--shadow-lg);z-index:999}
  .nav__links.open{display:flex}
  .nav__links a{min-height:48px}
}

/* CTA Buttons */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 32px;min-height:52px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font:600 16px/1 var(--font-body);letter-spacing:0.01em;cursor:pointer;transition:background var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out);text-decoration:none}
.cta:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 16px rgba(168,74,32,0.25);color:#fff}
.cta:active{transform:translateY(0)}
.cta--secondary{background:var(--primary)}
.cta--secondary:hover{background:var(--primary-60);box-shadow:0 4px 16px rgba(26,92,80,0.2)}
.cta--ghost{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.cta--ghost:hover{background:var(--primary-10);color:var(--primary);transform:translateY(-2px);box-shadow:none}
.cta--lg{padding:18px 36px;font-size:16px;border-radius:var(--radius-lg);min-height:56px}

/* Legacy btn classes mapped to cta system */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 32px;border:none;border-radius:var(--radius);font:600 16px/1 var(--font-body);letter-spacing:0.01em;cursor:pointer;transition:all var(--duration-normal) var(--ease-out);text-decoration:none;min-height:52px}
.btn--primary{background:var(--accent);color:#fff;border:2px solid transparent}
.btn--primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 16px rgba(168,74,32,0.25);color:#fff}
.btn--outline{border:2px solid var(--primary);background:transparent;color:var(--primary)}
.btn--outline:hover{background:var(--primary-10);transform:translateY(-2px)}
.btn--large{padding:18px 36px;font-size:16px;border-radius:var(--radius-lg);min-height:56px}
.btn:active,.option:active,.chip:active{transform:scale(0.97);transition:transform 0.1s}

/* Sections */
.section{padding:var(--sp-24) 0}
.section--mist{background:var(--primary-10)}
.section--dark{background:var(--ink);color:#fff}
.section--dark h2{color:#fff}
.section__header{text-align:center;max-width:640px;margin:0 auto var(--sp-16)}
.section__header p{margin-top:var(--sp-4);color:var(--grey-700);font-size:16px;line-height:1.65}

/* Grid */
.grid{display:grid;gap:var(--sp-6)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){.grid--2,.grid--3{grid-template-columns:1fr}}

/* Cards */
.card{background:var(--paper);border:1px solid rgba(0,0,0,0.06);border-radius:var(--radius-lg);padding:var(--sp-8);transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out)}
@media(max-width:480px){.card{padding:var(--sp-4)}}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card__icon{width:48px;height:48px;background:var(--primary-10);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);color:var(--primary)}
.card__title{font:700 18px/1.3 var(--font-display);margin-bottom:var(--sp-2);color:var(--grey-900)}
.card__text{font-size:15px;color:var(--grey-700);line-height:1.65}

/* Verdict Badges */
.verdict{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:6px;font:700 13px/1 var(--font-body);letter-spacing:0.04em;text-transform:uppercase}
.verdict--move{background:var(--move-bg);color:var(--move);border:1px solid var(--move-border)}
.verdict--delay{background:var(--delay-bg);color:var(--delay);border:1px solid var(--delay-border)}
.verdict--avoid{background:var(--avoid-bg);color:var(--avoid);border:1px solid var(--avoid-border)}

/* Trust badges */
.trust-badges{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px 0 8px;flex-wrap:wrap}
.trust-badges__item{display:flex;align-items:center;gap:6px;font:500 12px/1 var(--font-body);color:rgba(255,255,255,0.85)}
.trust-badges__item svg{width:16px;height:16px;color:var(--primary-30);flex-shrink:0}

/* Hero */
.hero{min-height:calc(100vh - 64px);display:flex;align-items:center;padding:var(--sp-24) 0 var(--sp-16);text-align:center;position:relative;overflow:hidden;background:linear-gradient(160deg,var(--ink) 0%,var(--primary-dark) 40%,var(--primary) 100%)}
.hero::before{content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(26,92,80,0.2) 0%,rgba(26,92,80,0.08) 40%,transparent 70%);pointer-events:none;animation:heroPulse 6s ease-in-out infinite}
@media(max-width:768px){.hero::before{display:none}}
.hero::after{content:'';position:absolute;top:20px;left:50%;transform:translateX(-50%);width:500px;height:500px;border-radius:50%;border:1px solid rgba(208,232,227,0.1);pointer-events:none;animation:heroRotate 30s linear infinite}
@keyframes heroPulse{0%,100%{opacity:0.6;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
@keyframes heroRotate{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}
.hero__globe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:520px;height:520px;opacity:0.15;pointer-events:none;z-index:0}
.hero .container{position:relative;z-index:1}
.hero h1{max-width:740px;margin:0 auto var(--sp-6);color:#fff}
.hero__subtitle{max-width:680px;margin:0 auto var(--sp-8);font-size:18px;line-height:1.7;color:rgba(255,255,255,0.75)}
.hero__subtitle strong{color:#fff;font-weight:600}
.hero__ctas{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:var(--sp-6)}
@media(max-width:768px){.hero::after{display:none}.hero__globe{width:320px;height:320px}.hero{min-height:auto;padding:var(--sp-16) 0 var(--sp-12)}}

/* Verdict cards in hero */
.verdict-cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;max-width:1000px;margin:var(--sp-8) auto 0}
.verdict-card{flex:1;min-width:280px;max-width:320px;background:var(--paper);border:1px solid rgba(0,0,0,0.08);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow-lg);text-align:left;transition:transform var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}
.verdict-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-xl)}
.verdict-card:nth-child(1){animation:fadeUp var(--duration-reveal) var(--ease-out) both}
.verdict-card:nth-child(2){animation:fadeUp var(--duration-reveal) var(--ease-out) 80ms both}
.verdict-card:nth-child(3){animation:fadeUp var(--duration-reveal) var(--ease-out) 160ms both}
.verdict-card__label{font:500 var(--text-label,12px)/1 var(--font-body);color:var(--grey-500);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px}
.verdict-card__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.verdict-card__country{font:700 20px/1.2 var(--font-display);color:var(--grey-900)}
.verdict-card__meta{font:400 13px/1 var(--font-body);color:var(--grey-500);margin-bottom:12px}
.verdict-card__detail{display:flex;align-items:center;gap:8px;font:400 13px/1.4 var(--font-body);color:var(--grey-900);padding:3px 0}
.verdict-card__detail--warn{color:var(--delay)}
.verdict-card__detail--danger{color:var(--avoid)}

/* Stats bar */
.stats-bar{padding:var(--sp-6) 0;background:var(--ink);border-bottom:1px solid rgba(255,255,255,0.06)}
.stats-bar__inner{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);flex-wrap:wrap}
.stat{text-align:center}
.stat__number{font:700 28px/1 var(--font-data);color:var(--primary-30);letter-spacing:-0.02em}
.stat__label{font:500 12px/1.3 var(--font-body);color:rgba(255,255,255,0.75);margin-top:6px;text-transform:uppercase;letter-spacing:0.04em}
.stat__divider{width:1px;height:40px;background:rgba(255,255,255,0.1)}

/* How it works */
.step-number{font:700 48px/1 var(--font-data);color:var(--primary-30);letter-spacing:-0.02em;margin-bottom:var(--sp-4)}
.steps-connector{position:relative}
.steps-connector::before{content:'';position:absolute;top:40px;left:50%;transform:translateX(-50%);width:calc(100% - 200px);height:2px;background:linear-gradient(90deg,var(--primary-30),var(--primary),var(--primary-30));z-index:0;opacity:0.4}
@media(max-width:768px){.steps-connector::before{display:none}}

/* Checklist */
.checklist{list-style:none;padding:0}
.checklist li{position:relative;padding:10px 0 10px 32px;font:400 15px/1.65 var(--font-body);color:var(--grey-900);border-bottom:1px solid rgba(0,0,0,0.04)}
.checklist li::before{content:'';position:absolute;left:0;top:14px;width:20px;height:20px;background:var(--primary-10);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231A5C50'%3E%3Cpath d='M8.5 13.3 5.2 10l1.1-1.1 2.2 2.2 4.8-4.8 1.1 1.1z'/%3E%3C/svg%3E")}
.checklist li:last-child{border-bottom:none}
.checklist li em{font-style:normal;color:var(--grey-500);font-size:13px}

/* Trust cards */
.trust-card{background:var(--paper);border:1px solid rgba(0,0,0,0.06);border-radius:var(--radius-lg);padding:var(--sp-8);transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out)}
.trust-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.trust-card__title{font:700 20px/1.3 var(--font-display);color:var(--grey-900);margin-bottom:var(--sp-2)}
.trust-card__text{font:400 15px/1.65 var(--font-body);color:var(--grey-700)}

/* Pricing */
.pricing-card{padding:var(--sp-6);background:var(--paper);border-radius:var(--radius-lg);border:1px solid rgba(0,0,0,0.08);text-align:center;transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out)}
.pricing-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pricing-card--featured{border:2px solid var(--primary);background:var(--primary-10);position:relative}
.pricing-card--featured::before{content:'Recommended';position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:4px 14px;background:var(--primary);color:#fff;border-radius:var(--radius-pill);font:600 var(--text-label,12px)/1.4 var(--font-body);letter-spacing:0.02em;white-space:nowrap}
.pricing-card__tier{font:600 12px/1 var(--font-body);text-transform:uppercase;letter-spacing:0.06em;color:var(--grey-500);margin:0 0 var(--sp-2)}
.pricing-card__price{font:700 28px/1 var(--font-data);color:var(--grey-900);margin:0 0 var(--sp-4)}
.pricing-card__list{list-style:none;text-align:left;font:400 14px/1.6 var(--font-body);color:var(--grey-700);margin:0 0 20px;padding:0}
.pricing-card__list li{padding:6px 0;border-bottom:1px solid rgba(0,0,0,0.04)}
.pricing-card__list li:last-child{border-bottom:none}
.pricing-card--featured .pricing-card__tier{color:var(--primary)}
.pricing-card--featured .pricing-card__list li{border-color:rgba(26,92,80,0.1)}

/* FAQ */
.faq-item{border-bottom:1px solid rgba(0,0,0,0.06);padding:var(--sp-6) 0}
.faq-item:last-child{border-bottom:none}
.faq-question{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;text-align:left;font:700 16px/1.4 var(--font-display);color:var(--grey-900);padding:0;gap:var(--sp-4);min-height:48px}
.faq-question svg{flex-shrink:0;width:20px;height:20px;color:var(--grey-500);transition:transform var(--duration-normal) var(--ease-out)}
.faq-item.open .faq-question svg{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.3s ease}
.faq-item.open .faq-answer{max-height:600px;padding-top:var(--sp-4)}
.faq-answer p{font-size:15px;line-height:1.65;color:var(--grey-700)}

/* Footer */
.nav__search{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 8px;color:var(--ink);opacity:0.7}
.nav__search:hover{opacity:1}
.site-footer{background:var(--ink);color:rgba(255,255,255,0.78);padding:var(--sp-16) 0 var(--sp-8)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:var(--sp-16)}
@media(max-width:768px){.footer__grid{grid-template-columns:1fr 1fr;gap:var(--sp-6)}}
@media(max-width:480px){.footer__grid{grid-template-columns:1fr}}
.footer__brand{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;margin-bottom:var(--sp-4)}
.footer__desc{font-size:14px;line-height:1.65;max-width:300px}
.footer__heading{font:600 13px/1 var(--font-body);color:#fff;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--sp-4)}
.footer__links{list-style:none}
.footer__links li{margin-bottom:var(--sp-2)}
.footer__links a{font-size:14px;color:rgba(255,255,255,0.85);transition:color var(--duration-normal) var(--ease-out)}
.footer__links a:hover{color:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:var(--sp-8);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-4)}
.footer__copy,.footer__legal{font-size:13px}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.reveal{animation:fadeUp var(--duration-reveal) var(--ease-out) both}
.reveal:nth-child(2){animation-delay:80ms}
.reveal:nth-child(3){animation-delay:160ms}
.reveal:nth-child(4){animation-delay:240ms}
.animate{animation:fadeUp 0.6s var(--ease-out) forwards}
.animate:nth-child(2){animation-delay:0.1s}
.animate:nth-child(3){animation-delay:0.2s}
.animate:nth-child(4){animation-delay:0.3s}
.text-center{text-align:center}

:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.skip-link{position:absolute;top:-40px;left:0;background:var(--primary);color:#fff;padding:8px 16px;z-index:1000;font:600 14px/1 var(--font-body);border-radius:0 0 var(--radius) 0;transition:top 0.2s}
.skip-link:focus{top:0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}
.nav__mode{display:flex;background:var(--grey-100);border-radius:20px;padding:2px;gap:0;margin-left:16px}
.nav__mode-opt{display:inline-flex;align-items:center;padding:8px 14px;min-height:44px;border-radius:18px;font:500 12px/1 var(--font-body);color:var(--grey-700);text-decoration:none;transition:all var(--duration-normal) var(--ease-out)}
.nav__mode-opt--active{background:var(--primary);color:#fff}
.nav__mode-opt:hover:not(.nav__mode-opt--active){color:var(--ink)}
@media(max-width:768px){.nav__mode{margin-left:auto;margin-right:12px}}


/* Problem section */
.problem-section{background:var(--ink);padding:var(--sp-12) 0}
.problem-card{padding:var(--sp-4) var(--sp-6);text-align:center}
.problem-card__title{font:600 15px/1.3 var(--font-body);color:var(--accent-light);margin-bottom:var(--sp-1)}
.problem-card__text{font:400 13px/1.5 var(--font-body);color:rgba(255,255,255,0.78)}

/* Popular destinations */
.dest-card{display:block;padding:20px 24px;background:var(--paper);border:1px solid rgba(0,0,0,0.06);border-radius:var(--radius-lg);text-decoration:none;transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out)}
.dest-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.dest-card__flag{font-size:24px;margin-right:8px}
.dest-card__name{font:600 15px/1.3 var(--font-body);color:var(--grey-900)}
.dest-card__sub{display:block;margin-top:6px;font:400 13px/1.4 var(--font-body);color:var(--grey-500)}

/* Newsletter */
.nl-section{padding:var(--sp-12) 0;background:var(--surface)}

/* === GLOBAL BODY === */
/* !important required on this enforcement block (body/h1-h3/p below): thousands of pages still
   embed legacy <style> copies of older design systems AFTER this stylesheet's <link> (e.g.
   index.html carries 4 such copies) — later-in-cascade page styles would win otherwise.
   Removable only after task 64 (page <style>/inline-style cleanup). */
body{font-family:var(--font-body) !important;color:var(--grey-900) !important;background:var(--surface) !important;line-height:1.65 !important}
/* Regra de escala (2026-06-10): Fraunces e uma fonte OTICA — abaixo de ~40px
   deixa de parecer ela propria (queixa do founder: /reports "fonte diferente").
   h1 (escala hero) mantem o display; h2-h5 usam Inter bold. */
h1{font-family:var(--font-display) !important;color:var(--grey-900)}
h2,h3,h4,h5{font-family:var(--font-body) !important;font-weight:700;color:var(--grey-900)}
h1{font-size:clamp(40px,3.8vw,54px) !important;line-height:1.12 !important;letter-spacing:-0.022em !important}
h2{font-size:28px !important;line-height:1.3 !important;letter-spacing:-0.01em !important}
h3{font-size:22px !important;line-height:1.3 !important}
p{line-height:1.65 !important}
.nav__links .nav__cta,.nav__links .nav__cta:hover,a.nav__cta,a.nav__cta:hover{color:#fff !important;background:var(--accent) !important}
@media(max-width:768px){h1{font-size:28px !important}h2{font-size:22px !important}}
@media(max-width:480px){h1{font-size:24px !important;line-height:1.2 !important}h2{font-size:19px !important;line-height:1.3 !important}}

/* === ARTICLE/CONTENT === */
/* !important on this group fights per-page opponents that load after this file:
   inline styles on .article-cta/.article-header elements, and embedded <style> blocks
   redefining .card (reports.html), .breadcrumb (lawyers, for-journalists, ai-sources…),
   .section--mist (where-can-i-move). */
.article-cta{background:linear-gradient(135deg,var(--ink),var(--primary)) !important}
.article-cta h3{color:#fff !important}
.article-cta p{color:rgba(255,255,255,0.85) !important}
.article-cta .btn{background:var(--accent) !important;color:#fff !important}
.article-cta .btn:hover{background:var(--accent-hover) !important;color:#fff !important}

/* ============================================================================
   DARK CTA CARDS — contrast fix + button-legibility contract (DSR-014 / DSR-016)
   ----------------------------------------------------------------------------
   .pack-cta and .report-cta render on a DARK green gradient (#1A5C50 → #145244)
   and carry inline color:#fff on their <h2> title and <p> subtitle. But
   country-redesign.css (which loads AFTER this file) declares:
       main h2 , .article-body h2 { color: var(--ink) !important }   (0,0,1,1)
       p       , .article-body p  { color: var(--grey-700) !important }
   Those !important rules beat the cards' inline color:#fff (inline does NOT
   override !important) and paint the title/subtitle dark-on-dark = ILLEGIBLE.
   country-redesign.css already ships this exact override for .article-cta at
   the end of the file — but never for .pack-cta / .report-cta. This supplies it.
   The class is DOUBLED (.pack-cta.pack-cta) on purpose: it raises specificity to
   (0,0,2,1) so this rule wins from THIS earlier-loading sheet over
   country-redesign's (0,0,1,1) .article-body rules. A plain .pack-cta h2 would
   tie and LOSE by source order. Light CTAs (pricing €10 card, .article-cta's
   white button, any light-bg CTA) are NOT in scope here and stay dark-on-light.

   ── BUTTON STYLE TABLE (canonical — DSR-016) ────────────────────────────────
   PRIMARY  (main action, e.g. "Get Your Free Verdict")
            .cta / .btn--primary  →  fill var(--accent) (orange), text #fff
   SECONDARY (lower-emphasis)
            .cta--ghost / .btn--outline  →  transparent, border+text var(--primary)
   DARK-GREEN FILL  .cta--secondary  →  fill var(--primary), text #fff
            USE ON LIGHT BACKGROUNDS ONLY — never as the primary action.
   INSIDE A DARK CTA CARD  the internal button must stay visible:
            white fill + dark-green text, OR orange fill + white text —
            never dark text on the dark card. (Current markup does this inline;
            the L462 "BUTTON TEXT FIX" block also forces #fff on dark-green
            buttons. Contrast for colored buttons: see that block.)
   GOLDEN RULE: a CTA's text colour FOLLOWS its background — dark bg ⇒ light
   text, light bg ⇒ dark text. Never invisible.
   ============================================================================ */
.pack-cta.pack-cta h2,.report-cta.report-cta h2{color:#fff !important}
.pack-cta.pack-cta p,.report-cta.report-cta p{color:rgba(255,255,255,0.9) !important}

/* dead rule — .authority-strip absent from all pages (2026-07-02 audit); !important dropped */
.authority-strip{background:var(--primary-10)}

/* Article headers (country pages, blog) */
.article-header{padding:48px 0 40px !important}

/* General page backgrounds */
.section--mist{background:var(--primary-10) !important}

/* Cards everywhere */
.card{background:var(--paper) !important;border:1px solid rgba(0,0,0,0.06) !important;border-radius:var(--radius-lg) !important}

/* ============================================================================
   BREADCRUMBS — THE single source of the breadcrumb design (DSC-034, 2026-08-02)
   ----------------------------------------------------------------------------
   DSC-034 says breadcrumbs have "um só desenho e um só markup". They did not:
   an audit on 2026-08-02 found TEN different <nav> opening tags across 3.016
   pages — three class-based and seven inline-styled (13px/12.5px/14px, four
   different vertical paddings, four different separator glyphs). Inline style
   on 1.073 pages IS the reason it diverged: there was nowhere central to change.
   So the design now lives HERE, in the one stylesheet all 3.016 breadcrumb
   pages load, and the markup carries no style at all:

       <nav class="breadcrumb" aria-label="Breadcrumb">
         <a href="/">Home</a>
         <span class="breadcrumb__sep" aria-hidden="true">›</span>
         <span aria-current="page">Title</span>
       </nav>

   `!important` is deliberate and matches the rest of this file: 1.046 pages
   carry an embedded <style> that loads AFTER this sheet, and the family sheets
   (country-redesign.css, blog.css…) load after it too. Without !important the
   page-local leftovers would keep winning and the divergence would come back.

   SIZE: 12px, was 13px — the founder's complaint was that the line reads too
   loud for what it is (a back-path, not content). Vertical space is 8px/0,
   down from 16px/0. It is a whisper, not a headline.

   CONTRAST (measured, not assumed — WCAG 2.1 AA needs 4.5:1 for this size):
     grey-500 #5A6470 on paper  #FFFFFF = 6.01  PASS   (the old inline
     grey-500 #5A6470 on surface #FAFAF8 = 5.76  PASS    #6B7280 scored 4.35
     grey-500 #5A6470 on grey-100 #F2F3F5 = 5.42 PASS    on grey-100 = FAIL)
     grey-700 #3D4451 (current page)     on #FFFFFF = 9.79 PASS
   The separator keeps the SAME colour as the text on purpose: --grey-300
   (#C8CCD2) is 1.61:1 and would be a decorative glyph nobody can see. The
   crumb reads quiet because it is small, not because it is washed out.

   --on-dark is the SAME design on an inverted surface (country/pathway hero
   photos, the /*-index/ dark heroes): same size, same spacing, same glyph,
   only the colour flips because the surface flips. It is one design on two
   backgrounds, not a second design — and it is declared HERE, next to the
   default, so it cannot drift on its own.
   ============================================================================ */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:0;padding:8px 0;font:400 12px/1.5 var(--font-body) !important;color:var(--grey-500) !important}
.breadcrumb a{color:var(--grey-500) !important;text-decoration:none}
.breadcrumb a:hover,.breadcrumb a:focus-visible{color:var(--primary) !important;text-decoration:underline}
.breadcrumb .breadcrumb__sep{color:var(--grey-500) !important;user-select:none}
.breadcrumb [aria-current="page"]{color:var(--grey-700) !important}
/* inverted surface — white@0.88 over the hero scrim (rgba(12,46,43,.62→.82))
   measures 11.6:1 at its darkest and 4.4:1 over the brightest photo region the
   scrim still lets through; the previous rgba(255,255,255,.55–.62) sat at 3.0. */
.breadcrumb--on-dark,.breadcrumb--on-dark .breadcrumb__sep{color:rgba(255,255,255,.88) !important}
.breadcrumb--on-dark a{color:rgba(255,255,255,.88) !important}
.breadcrumb--on-dark a:hover,.breadcrumb--on-dark a:focus-visible{color:#fff !important}
.breadcrumb--on-dark [aria-current="page"]{color:#fff !important}

/* Founder decision, 2026-09-27: no visible breadcrumb navigation on any page.
   Shared presentation rule also covers retained legacy and future templates. */
.breadcrumb,.breadcrumbs,.px-breadcrumb,.crumb,.art__crumb,.bc,
nav[aria-label="Breadcrumb" i],nav[aria-label="Breadcrumbs" i]{display:none!important}

/* Blog hero */

/* Generic page headers without hero class */

/* Key takeaway on dark backgrounds */

/* Article header (emigrate-to, blog posts) */


/* === BUTTON TEXT FIX — force white text on ALL colored buttons === */
.btn--primary,.btn--accent,.cta,.cta--secondary,
.guide-ctas .btn,.guide-ctas a,
a[style*="background:var(--primary)"],
a[style*="background:#1B6B5A"],
a[style*="background:#1A5C50"],
button[style*="background:var(--primary)"],
button[style*="background:#1B6B5A"],
button[style*="background:#1A5C50"] {
  color: #fff !important;
}
.btn--primary:hover,.cta:hover,.cta--secondary:hover {
  color: #fff !important;
}

/* Help button fix — #helpBtn is injected by help-btn.js with style.cssText (inline styles);
   only !important can override those */
#helpBtn,button[id="helpBtn"] {
  background: var(--accent, #B5521F) !important;
  color: #fff !important;
}

/* === SEARCH BOX — consistent size across all pages ===
   The input is created by search.v2.js with style.cssText (inline width/padding/border/font/
   background/color…); every declaration here needs !important to beat those inline styles. */
.nav__links input[type="search"],
.nav__links input[type="text"],
.nav__links li input {
  width: 140px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: 8px !important;
  font: 400 13px/1 'Inter', system-ui, sans-serif !important;
  background: var(--grey-100) !important;
  /* outline:none removed — was blocking the global :focus-visible rule
     (line ~266) so keyboard users had no focus indicator on nav search.
     The browser default ring only shows on keyboard focus anyway, and
     :focus-visible overrides it with our brand green outline. */
  min-height: 40px !important;
  box-sizing: border-box !important;
  color: var(--grey-900) !important;
  transition: width 0.3s, border-color 0.3s !important;
}
.nav__links input[type="search"]:focus,
.nav__links input[type="text"]:focus,
.nav__links li input:focus {
  width: 200px !important;
  border-color: var(--primary) !important;
}
.nav__links input::placeholder {
  color: #6B7280 !important;
}

/* Low-specificity text links: components own their foreground and hover state. */
:where(a){color:var(--primary)}
:where(a:hover){color:var(--primary-60)}
.skip-link{position:absolute;top:-40px;left:0;padding:8px 16px;background:var(--primary);color:#fff;z-index:1000;font:600 14px/1 'Inter',sans-serif;text-decoration:none;border-radius:0 0 8px 0}.skip-link:focus{top:0}
.faq-item summary{cursor:pointer}

/* iPhone-with-notch safe area for sticky bottom CTAs.
 * The .mobile-sticky-cta sits at bottom:0 and was missing safe-area-inset
 * padding — content was clipped behind the home indicator on iPhone X+.
 * Use max() so devices without an inset (Android, desktop emulators) still
 * get the original 12px padding. */
.mobile-sticky-cta{padding-bottom:max(12px,env(safe-area-inset-bottom,12px))}


/* === ABOUT — Story section (B-054) === */
.about-story{padding:var(--sp-16) 0 var(--sp-24);background:var(--paper)}
.about-story__inner{max-width:var(--max-width-narrow);margin:0 auto;padding:0 var(--gutter)}
.about-story__lede{font:400 22px/1.55 var(--font-display);color:var(--ink);margin:0 0 var(--sp-12);letter-spacing:-0.01em}
.about-story__dropcap{float:left;font:700 64px/0.9 var(--font-display);color:var(--primary);margin:6px 12px 0 0}
.about-story__h{font:700 22px/1.3 var(--font-display);color:var(--grey-900);margin:var(--sp-12) 0 var(--sp-3);letter-spacing:-0.01em}
.about-story p{font:400 17px/1.75 var(--font-body);color:var(--grey-700);margin:0 0 var(--sp-3)}
.about-story__quote{margin:var(--sp-8) 0;padding:var(--sp-4) 0 var(--sp-4) var(--sp-6);border-left:3px solid var(--primary);position:relative}
.about-story__quote p{font:400 24px/1.4 var(--font-display);color:var(--ink);font-style:italic;margin:0}
.about-story__quote::before{content:'"';position:absolute;top:-12px;left:8px;font:700 56px/1 var(--font-display);color:var(--primary-30);pointer-events:none}

/* Boards — credential strip */
.about-boards{list-style:none;padding:0;margin:var(--sp-6) 0 var(--sp-8);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.about-boards__card{background:var(--surface);border:1px solid rgba(0,0,0,0.06);border-radius:var(--radius-lg);padding:var(--sp-6);transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out)}
.about-boards__card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.about-boards__org{font:700 18px/1.25 var(--font-display);color:var(--ink);margin:0 0 var(--sp-1);letter-spacing:-0.01em}
.about-boards__role{font:400 14px/1.5 var(--font-body);color:var(--grey-700);margin:0 0 var(--sp-3)}
.about-boards__tag{font:500 var(--text-label,12px)/1 var(--font-data);color:var(--primary);text-transform:uppercase;letter-spacing:0.08em;margin:0}
@media(max-width:768px){
  .about-boards{grid-template-columns:1fr;gap:var(--sp-3)}
  .about-story__lede{font-size:19px}
  .about-story__quote p{font-size:20px}
  .about-story__dropcap{font-size:52px}
}
@media(max-width:480px){
  .about-story{padding:var(--sp-12) 0 var(--sp-16)}
  .about-story__lede{font-size:18px}
}

/* === ABOUT — Section rhythm system (B-054) === */
.about-section{padding:var(--sp-24) 0}
.about-section--tight{padding:var(--sp-16) 0}
.about-section--mist{background:var(--primary-10)}
.about-section--paper{background:var(--paper)}
.about-section--ink{background:var(--ink);color:#fff}
.about-section--ink h2,.about-section--ink .about-section__title{color:#fff}
.about-section--ink p,.about-section--ink .about-section__sub{color:rgba(255,255,255,0.85)}
.about-section--narrow .container{max-width:var(--max-width-narrow)}

.about-section__head{text-align:center;max-width:640px;margin:0 auto var(--sp-12)}
.about-section__title{font:700 32px/1.2 var(--font-display);color:var(--grey-900);letter-spacing:-0.02em;margin:0 0 var(--sp-3)}
.about-section__sub{font:400 17px/1.65 var(--font-body);color:var(--grey-700);margin:0}

@media(max-width:768px){
  .about-section{padding:var(--sp-16) 0}
  .about-section--tight{padding:var(--sp-12) 0}
  .about-section__title{font-size:26px}
  .about-section__sub{font-size:16px}
}
@media(max-width:480px){
  .about-section{padding:var(--sp-12) 0}
  .about-section--tight{padding:var(--sp-8) 0}
  .about-section__title{font-size:22px}
}

/* About hero — quiet upgrade (paired with story fix) */
.about-hero{padding:var(--sp-24) 0 var(--sp-16);text-align:center;background:var(--surface)}
.about-hero h1{font:700 48px/1.15 var(--font-display);color:var(--ink);letter-spacing:-0.02em;max-width:680px;margin:0 auto var(--sp-3)}
.about-hero__sub{font:400 18px/1.5 var(--font-body);color:var(--grey-500);margin:0 auto var(--sp-4);max-width:520px}
.about-hero__credential{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--font-data);color:var(--primary);text-transform:uppercase;letter-spacing:0.08em;padding:8px 16px;background:var(--primary-10);border-radius:var(--radius-pill)}
@media(max-width:768px){
  .about-hero{padding:var(--sp-16) 0 var(--sp-12)}
  .about-hero h1{font-size:34px}
  .about-hero__sub{font-size:16px}
}
@media(max-width:480px){.about-hero h1{font-size:28px}}

/* === ABOUT — Compare table (B-054) === */
/* NOTE: --ink-10 not in canonical tokens; using literal rgba(12,46,43,0.1) */
.about-compare__scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -8px;padding:0 8px}
.about-compare{width:100%;min-width:720px;border-collapse:collapse;font:400 14px/1.5 var(--font-body);color:var(--grey-700)}
.about-compare thead th{text-align:left;font:600 12px/1.3 var(--font-data);color:var(--grey-700);text-transform:uppercase;letter-spacing:0.06em;padding:var(--sp-3) var(--sp-4);background:var(--paper);border-bottom:2px solid rgba(12,46,43,0.1)}
/* dead rule — .about-compare__us absent from all pages (about rebuilt); !important dropped */
.about-compare__us{color:var(--primary);background:var(--primary-10)}
.about-compare tbody th{text-align:left;font:600 14px/1.4 var(--font-body);color:var(--ink);padding:var(--sp-4);background:var(--surface);border-bottom:1px solid rgba(12,46,43,0.1);white-space:nowrap;vertical-align:top}
.about-compare__cell{padding:var(--sp-4);vertical-align:top;border-bottom:1px solid rgba(12,46,43,0.1);border-left:3px solid transparent}
.about-compare__cell--move{border-left-color:var(--move);background:rgba(15,122,93,0.04)}
.about-compare__cell--delay{border-left-color:var(--delay);background:rgba(212,165,40,0.04)}
.about-compare__cell--avoid{border-left-color:var(--avoid);background:rgba(193,90,75,0.04)}
.about-compare__mark{display:inline-block;margin-right:6px;font-size:12px;line-height:1}
.about-compare__cell--move .about-compare__mark{color:var(--move)}
.about-compare__cell--delay .about-compare__mark{color:var(--delay)}
.about-compare__cell--avoid .about-compare__mark{color:var(--avoid)}
.about-compare__num{font:600 15px/1 var(--font-data);color:var(--ink);letter-spacing:-0.01em;display:inline-block;margin-right:4px}
.about-compare__cell--move .about-compare__num{color:var(--move)}
.about-compare__cell--avoid .about-compare__num{color:var(--avoid)}
.about-compare__hint{display:none;position:absolute;right:12px;top:8px;font:500 var(--text-label,12px)/1 var(--font-data);color:var(--grey-500);text-transform:uppercase;letter-spacing:0.08em;background:var(--surface);padding:6px 10px;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);pointer-events:none}
@media(max-width:768px){
  .about-compare__scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:32px;background:linear-gradient(to right,transparent,var(--surface));pointer-events:none}
  .about-compare__hint{display:inline-block}
}

/* === ABOUT — Color drift cleanup (B-054) === */
.linkedin-link{display:inline-flex;align-items:center;gap:8px;color:#0A66C2;text-decoration:none;font:500 14px/1 var(--font-body);transition:opacity var(--duration-fast) var(--ease-out)}
.linkedin-link:hover{opacity:0.75}
.linkedin-link svg{width:18px;height:18px;flex-shrink:0}

.text-link{color:var(--primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--duration-fast) var(--ease-out)}
.text-link:hover{color:var(--ink)}

/* === ABOUT — Hero signature row (B-054) === */
.about-hero__sig{margin:var(--sp-6) 0 0;font:400 14px/1 var(--font-body)}
.about-hero__credential svg{width:14px;height:14px;flex-shrink:0}
@media(max-width:480px){
  .about-hero__credential{font-size:var(--text-label,12px);padding:6px 12px}
  .about-hero__sig{margin-top:var(--sp-4)}
}

/* === ABOUT — Sweep cleanup (B-054 P2/P3) === */
/* NOTE: --radius-md/--radius-sm not in canonical tokens; mapped to --radius and literal 4px */

/* B6 — body line-height normalization */
.about-section p,.about-story p,.about-hero p{line-height:1.65}
.about-story p,.about-section--narrow p{line-height:1.7}

/* C8 — legacy alias bridge (REMOVE after migration of 5,070 sitewide uses) */
:root{--primary-light:var(--primary-10)}

/* 2026-05-14 — legacy CSS variable aliases for inline styles in ~6,000 HTMLs.
   The blog/lane/city/compare generators reference vars authored against an
   older design system (Tailwind-like token names). Map them to v10 palette
   so green-on-green / blue-on-green / undefined-cascade bugs disappear in
   one file instead of editing 50,000+ inline styles.
   Audit: 36,392 var(--font-sans) + 4,660 var(--secondary) + thousands more.
   Remove these aliases ONLY after the generators are rewritten to use v10
   tokens directly. */
:root{
  --font-sans: var(--font-body);
  --secondary: var(--ink);
  --neutral-dark: var(--ink);
  --neutral-medium: var(--graphite, var(--text-light));
  --neutral-light: var(--bg-warm);
}

/* Key Takeaway fix (2026-05-14) — the inline-styled <strong>Key Takeaway</strong>
   was using color:var(--primary) over background:var(--primary-light), producing
   dark-green-on-light-green. Force a higher-contrast ink color globally. */
.key-takeaway strong{color:var(--ink) !important}
.key-takeaway p{color:var(--ink) !important}

/* D3 — grid gap normalization */
.values__grid,.reach__grid{gap:var(--sp-6)}
@media(max-width:768px){.values__grid,.reach__grid{gap:var(--sp-4)}}

/* D4 — container variants (base .container already in canonical) */
.container--narrow{max-width:720px}
.container--reading{max-width:640px}

/* E4 — newsletter consent */
.newsletter__consent{font:400 12px/1.5 var(--font-body);color:var(--grey-500);margin:var(--sp-2) 0 0}

/* E5 — citation block */
.about-cite{background:var(--paper);border-left:3px solid var(--primary);padding:var(--sp-6);margin:var(--sp-12) auto;max-width:var(--max-width-narrow);border-radius:0 var(--radius) var(--radius) 0}
.about-cite__label{font:600 var(--text-label,12px)/1 var(--font-data);color:var(--primary);text-transform:uppercase;letter-spacing:0.1em;margin:0 0 var(--sp-3)}
.about-cite__code{font:400 13px/1.6 var(--font-data);color:var(--ink);background:var(--surface);padding:var(--sp-4);border-radius:4px;overflow-x:auto;white-space:pre-wrap;margin:0 0 var(--sp-3)}
.about-cite__copy{font:500 12px/1 var(--font-data);color:var(--primary);background:transparent;border:1px solid var(--primary);padding:8px 14px;border-radius:var(--radius-pill);cursor:pointer;text-transform:uppercase;letter-spacing:0.06em;transition:background var(--duration-fast) var(--ease-out)}
.about-cite__copy:hover{background:var(--primary-10)}

/* F3 — sr-only utility (canonical has no equivalent) */
.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}

/* F8 — focus visibility (augments existing :focus-visible rules) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.btn:focus-visible{outline-offset:3px}

/* G4 — hero subtitle balance on small screens */
@media(max-width:480px){.about-hero__sub{max-width:300px;text-wrap:balance}}

/* G5 — denser tap targets on touch devices */
@media(hover:none){
  .about-story a,.about-section a:not(.btn):not(.linkedin-link):not(.text-link){padding:2px 0;display:inline-block}
}

/* G6 — iOS auto-zoom prevention */
.newsletter__form input[type="email"]{font-size:16px}

/* I1 — icon utility (anticipates future <use href> sprite refactor) */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;fill:currentColor}


/* === Strike 1 additions: editorial kicker + warm surfaces === */
.kick{
  font-family:var(--font-data);
  font-size:var(--text-label,12px);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--grey-500);
  font-weight:500;
}
.kick--primary{color:var(--primary)}
.kick--rust{color:var(--accent)}
.kick--rust::before{content:"● ";color:var(--accent)}

.surface--warm{background:var(--paper-warm)}
.surface--deep{background:var(--paper-deep)}


/* === Strike 2: site header === */
/* Full-bleed escape: some pages (legacy /blog/, /countries/) constrain
   body to 720px. Header + footer must break out to full viewport width
   regardless of parent constraint, otherwise the dark bar looks visually
   compressed and inconsistent across pages. */
.site-header,.site-footer{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw;box-sizing:border-box}
/* 2026-07-21 BUG fix: 100vw above includes the scrollbar's own width, so on
   any page tall enough to scroll this created an ~8px site-wide horizontal
   overflow (the breakout math didn't know the scrollbar existed). `clip`
   (not `hidden`) on the root: kills the resulting horizontal scrollbar
   without creating a new scroll container on <html>, so it doesn't break
   .site-header's position:sticky. Additive — does not touch the breakout
   math above. */
html{overflow-x:clip}
.site-header{background:#081E1B;border-bottom:1px solid rgba(255,255,255,0.10);color:#fff;position:sticky;top:0;z-index:100}
.site-header__top{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 24px;font-family:var(--font-data);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.6)}
.site-header__live::before{content:"● ";color:#5BD394;animation:siteHeaderPulse 2s infinite}
@keyframes siteHeaderPulse{0%,100%{opacity:1}50%{opacity:0.4}}
.site-header__util{display:flex;gap:16px}
.site-header__util a{color:rgba(255,255,255,0.7);text-decoration:none}
.site-header__util a:hover{color:#fff}
.site-header__main{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;gap:32px;padding:14px 24px}
/* DSR-020 (2026-07-21): !important on the bare anchor — newer templates wrap
   the logo text in .brand-w/.brand-em spans (unaffected, always white already);
   older blog-post markup has "where"/"emigrate" as bare text nodes directly
   inside .site-header__brand with no span to target, so they inherited the
   ANCHOR's own colour — which the sitewide `a:not(...)` prose-link rule
   (~L553, specificity (0,14,1) vs this rule's (0,1,0)) was winning even
   without !important, forcing green-on-#081E1B (2.22:1, needs 4.5). */
.site-header__brand,
.site-header__brand .brand-w,
.site-header__brand .brand-em{color:#fff!important}
.site-header__brand{display:flex;align-items:baseline;gap:0;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-0.025em;font-variation-settings:"opsz" 144}
.site-header__brand .brand-to{font-style:italic;color:var(--accent-on-dark);font-weight:500;margin:0;font-variation-settings:"opsz" 144}
.site-header__nav{display:flex;gap:24px;margin-left:24px;flex-wrap:nowrap;align-items:center}
/* Partners gets a subtle accent so it's visually distinct from primary nav links */
/* M55 (2026-06-10): Partners demoted — the lowest-value nav item had the
   strongest visual weight; Countries (the product) gets it instead. */
.site-header__nav a[data-nav="countries"]{font-weight:600}
/* !important required: link override block at line ~400 has 6×:not() specificity
   that beats .site-header__nav a otherwise. Same defensive pattern as footer CTA. */
.site-header__nav a{font:500 14px/1 var(--font-body);color:rgba(255,255,255,0.85) !important;text-decoration:none}
.site-header__nav a:hover{color:#fff !important}
.site-header__nav a.is-active{color:#fff !important;font-weight:600}
.site-header__util a,.site-header__lang{color:rgba(255,255,255,0.7) !important}
.site-header__util a:hover{color:#fff !important}
/* 2026-06-30 SEO-S09: hide the dead "EN ▾" language selector (no handler, no
   other languages → href="#" was a no-op on ~2,220 pages = top dead-click
   source after the homepage). Reversible: delete this rule. */
.site-header__lang{display:none} /* no competing display rule anywhere — flag not needed */
.site-header__seg-opt{color:rgba(255,255,255,0.85) !important}
.site-header__seg-opt.is-active{color:var(--ink) !important}
.site-header__right{display:flex;align-items:center;gap:14px;margin-left:auto}
.site-header__seg{display:inline-flex;background:rgba(255,255,255,0.08);border-radius:6px;padding:2px}
.site-header__seg-opt{padding:5px 12px;font:500 12px/1 var(--font-body);color:rgba(255,255,255,0.85);text-decoration:none;border-radius:4px}
.site-header__seg-opt.is-active{background:#fff;color:var(--ink);font-weight:600}
.site-header__cta{display:inline-flex;align-items:center;padding:16px 24px;background:var(--accent);color:#fff;border-radius:8px;font:600 14px/1 var(--font-body);text-decoration:none;transition:background var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out);min-height:52px}
.site-header__cta:hover{background:var(--accent-hover);color:#fff}

/* Burger button — kill switch (was leaving an empty white square at certain
   viewport widths even with display:none). The visual artifact was reported
   2026-05-06; removing the burger entirely resolves it. Mobile UX restored
   to pre-existing "nav hidden on ≤900px" state — to be replaced with a
   non-burger pattern in a future iteration. */
.site-header__burger{display:none} /* burger markup removed sitewide — no opponent left */

@media(max-width:768px){
  /* M54: 1 CTA por viewport — o burger menu contém o CTA */
  .site-header__cta{display:none}
}
@media(max-width:900px){
  .site-header__nav{display:none}
  .site-header__main{gap:16px;padding:12px 20px}
  .site-header__seg{display:none}
}


/* === Strike 2: site footer === */
.site-footer{background:var(--paper-deep);color:var(--ink);padding:0;margin-top:0}
.site-footer__hero{max-width:var(--max-width);margin:0 auto;padding:48px 24px 32px;border-bottom:1px solid rgba(0,0,0,0.08);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.site-footer__h{font-family:var(--font-display);font-weight:500;font-size:36px;line-height:1.05;letter-spacing:-0.022em;font-variation-settings:"opsz" 96;max-width:480px;color:var(--ink)}
.site-footer__h em{font-style:italic;color:var(--accent)}
.site-footer__hero-r{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.site-footer .site-footer__cta,
.site-footer .site-footer__cta:link,
.site-footer .site-footer__cta:visited{padding:14px 28px;background:var(--ink);color:#fff;border:none;border-radius:6px;font:600 14px/1 var(--font-body);text-decoration:none}
/* ^ unlike header links, .site-footer__cta IS excluded from the 6×:not() link block (~L439), so no !important needed */
.site-footer .site-footer__cta:hover{background:#000;color:#fff}
.site-footer__hero-p{font-size:13px;color:var(--grey-700);margin:0}
.site-footer__cols{max-width:var(--max-width);margin:0 auto;padding:36px 24px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px}
/* DSR-002 (founder 2026-07-21): wordmark canónico ÚNICO = desenho A (o do header):
   romano, weight 600, «TO» em itálico na cor de acento. O antigo desenho B do
   footer (itálico integral + «TO» romano + sufixo «.io») morre aqui; o span
   .io continua no markup de todas as páginas mas deixa de se mostrar. */
.site-footer__brand{font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:-0.025em;font-style:normal;font-variation-settings:"opsz" 144;margin-bottom:8px;color:var(--ink)}
.site-footer__brand .to{font-size:inherit;font-style:italic;color:var(--accent);font-weight:500;margin:0 2px}
.site-footer__brand .io{display:none}
.site-footer__tag{font-size:13px;color:var(--grey-700);line-height:1.5;max-width:240px;margin-bottom:0}
.site-footer__col h4{font-family:var(--font-data);font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:0.14em;margin-bottom:14px}
.site-footer__col h4::before{content:"● ";color:var(--accent)}
.site-footer__col ul{list-style:none;padding:0;margin:0}
.site-footer__col li{margin-bottom:8px}
.site-footer__col a{font-size:13px;color:var(--ink);text-decoration:none}
.site-footer__col a:hover{color:var(--accent)}
/* DES-030 (2026-07-16): trust signals get their own line, ABOVE the legal
   micro-links, so they read as a distinct claim rather than boilerplate.
   Owns the divider from .site-footer__cols; .site-footer__bottom below no
   longer needs its own border-top (was creating a doubled rule). */
.site-footer__trust{max-width:var(--max-width);margin:0 auto;padding:16px 24px 14px;border-top:1px solid rgba(0,0,0,0.08);display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.site-footer__trust-item{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1.3 var(--font-body);color:var(--ink);text-decoration:none}
.site-footer__trust-item:hover{color:var(--accent)}
.site-footer__trust-item svg{color:var(--accent);flex-shrink:0}
.site-footer__bottom{max-width:var(--max-width);margin:0 auto;padding:8px 24px 32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-family:var(--font-data);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey-500)}
.site-footer__bottom a{color:var(--grey-500);text-decoration:underline;text-underline-offset:2px}
.site-footer__bottom a:hover{color:var(--ink)}

@media(max-width:900px){
  .site-footer__hero{grid-template-columns:1fr;gap:24px;padding:48px 20px 32px}
  .site-footer__h{font-size:32px}
  .site-footer__cols{grid-template-columns:1fr 1fr;gap:24px;padding:32px 20px}
  .site-footer__brand-col{grid-column:1/-1}
  .site-footer__trust{padding:14px 20px 10px;gap:8px 16px}
  .site-footer__bottom{padding:8px 20px 24px;flex-direction:column;align-items:flex-start}
}
/* Hide Workers/Students segmented control (2026-05-06 — Students lane temporarily hidden).
   Wins over the base .site-header__seg{display:inline-flex} (~L690) by order — no flag needed. */
.site-header__seg{display:none}

/* NUCLEAR: hide anything inside .site-header except explicit children — kills any stray element rendering as a white square */
.site-header > *:not(.site-header__main):not(script):not(.wte-mobile-menu){display:none !important}
.site-header__main > *:not(.site-header__brand):not(.site-header__nav):not(.site-header__right):not(.wte-burger){display:none !important}
.site-header__nav > *:not(a):not(.site-explore){display:none !important}
.site-header__main::before,.site-header__main::after,.site-header__nav::before,.site-header__nav::after,.site-header__brand::before,.site-header__brand::after{display:none !important;content:none !important}

/* === BUTTON CONTRAST AUDIT 2026-05-06 === */
/* Force white text on all primary/accent buttons sitewide. Defeats any
   inherited color or specificity conflict that was producing dark text on
   orange/dark backgrounds (reported by user: orange CTA showing teal text). */
.cta,.cta-lg,.cta-lg:hover,.cta-lg:visited,
.btn--primary,.btn--primary:hover,.btn--primary:visited,
.site-header__cta,.site-header__cta:hover,.site-header__cta:visited,
a.site-header__cta,a.site-header__cta:hover,a.site-header__cta:visited,
.nav__cta,.nav__cta:hover,a.nav__cta,a.nav__cta:hover,
.h-stage-cta,.h-stage-cta:hover,a.h-stage-cta,
.cta--secondary,.cta--secondary:hover,
.btn-primary,.btn-primary:hover,
.faq__cta,.faq__cta:hover,
.hero__cta-row a,.hero__cta-row a:hover,.hero__cta-row a:visited
{color:#fff !important}

/* Outline / ghost variants explicitly stay dark text */
.cta--ghost,.cta--ghost:hover,.cta--ghost:visited,
.btn--outline,.btn--outline:hover,.btn--outline:visited
{color:var(--primary) !important}

/* Anchor tag inside any orange-bg element — universal contrast safety net */
[style*="background:#A84A20"] a,[style*="background:#B5521F"] a,
[style*="background:var(--accent)"] a
{color:#fff !important}

/* === SITEWIDE BUTTON CONTRAST — comprehensive coverage 2026-05-06 === */
/* All known solid/accent button variants get forced white text. */
.cta,.cta-lg,.cta--secondary,.cta--lg,
.btn--primary,.btn-primary,
.site-header__cta,a.site-header__cta,
.nav__cta,a.nav__cta,
.h-stage-cta,a.h-stage-cta,
.faq__cta,
.compare__cta,.compare__cta--solid,
.fvp__cta,.fvp__cta--solid,
.sample__cta,.sample__cta--solid,.sample__cta-final,
.report-cta,
.article-cta .btn,.article-cta a.btn,
.guide-ctas .btn,.guide-ctas a,
.p-btn,.p-btn--lg,a.p-btn,
.p-card__cta,a.p-card__cta,
.p-models__cta,a.p-models__cta,
.p-viz__doc-cta,
.mobile-sticky-cta,
.cookie-banner__btn--accept,
.hero__cta-row > a,.hero__ctas > a,.p-hero__cta-row > a,
[class*="cta"]:not([class*="ghost"]):not([class*="outline"]):not([class*="link"]):not(.cta--ghost),
[class*="cta-row"] > a:first-child
{color:#fff !important}

/* Ghost/outline variants — always dark text */
.cta--ghost,a.cta--ghost,
.btn--outline,a.btn--outline,
.compare__cta--ghost,a.compare__cta--ghost,
.fvp__cta--ghost,a.fvp__cta--ghost,
.sample__cta--ghost,a.sample__cta--ghost,
.p-btn--ghost,a.p-btn--ghost
{color:var(--primary) !important;background:transparent !important}

/* === Filter pills active state — force white text on dark bg 2026-05-06 === */
.ctb__chip.is-active,
a.ctb__chip.is-active,
.ctb__chip.is-active:hover,
.ctb__chip.is-active:visited,
.filter-pill.is-active,
[class*="chip"].is-active
{color:#fff !important;background:var(--ink) !important;border-color:var(--ink) !important}

/* 2026-05-07 a11y fixes.
   .skip-link needs !important throughout: many pages ship an inline-styled skip-link
   (style="position:…;top:…;background:…") plus embedded .skip-link blocks after this
   file's <link> (e.g. refund-policy.html) with different values. */
/* col-h is an <h3>: font-size keeps !important against the global h3{font-size:22px !important}
   enforcement (~L350). The other props either match the enforcement value or outrank it by class specificity. */
.site-footer__col-h{font-family:var(--font-body);font-weight:600;font-size:14px !important;line-height:1.3;letter-spacing:0;color:var(--ink);margin:0 0 12px 0;text-transform:none}
.site-header__cta{font-weight:700}  /* contrast: bold qualifies as large text WCAG threshold; wins over the base font:600 shorthand (~L692) by order */
.skip-link{position:absolute !important;top:-40px !important;left:8px !important;background:var(--ink) !important;color:#fff !important;padding:10px 18px !important;z-index:10000 !important;font:600 14px/1 var(--font-body) !important;border-radius:0 0 8px 8px !important;text-decoration:none !important;transition:top .15s ease !important;outline:0}
.skip-link:focus,.skip-link:focus-visible{top:0 !important;outline:2px solid var(--accent) !important;outline-offset:2px}

/* Narrow screens preserve content; wide data belongs in an explicit scroll region. */
@media(max-width:380px){
  img,svg,iframe,video{max-width:100%;height:auto}
  pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
}
.table-scroll{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.table-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.table-scroll > table{width:100%;max-width:none}

/* 2026-05-07 BATCH 7 — color-contrast push to WCAG AA across all sampled pages.
   !important needed: opponents load after this file — inline color on .kick/em elements,
   embedded page styles (.tier__tag/.tier__price-unit on pricing+reports, .aff-disc on 29 blog
   pages, .cta-lg font on index/founder, .sample__badge background on index). */
:root{
  /* Darker accent for SMALL TEXT (kick labels, eyebrows, em emphasis) — passes AA on cream */
  --accent-text:#9C4720;
  /* Darker grey for muted text — passes 4.5+ AA on white */
  --grey-500-aa:#525964;
}
/* Apply darker accent to small-text elements that previously failed AA */
.kick, .bh__kick, .cw__kick, .p-card__eyebrow, .p-models__kicker, .p-final__kicker,
.sample__head h2 em, .hero h1 em, .p-hero__h1 em, .p-final__h em,
.p-problem__lede em, .h-stage__title em, .h-stage__kick{color:var(--accent-text) !important}
/* Fix grey-500 text on white — bump to grey-500-aa */
.tier__tag, .tier__price-unit, .tier__list .is-mute span, .bh__meta-row span,
.data-disclaimer, .site-footer__bottom span, .quiz__nav .btn--ghost,
.aff-disc {color:var(--grey-500-aa) !important}
/* Fix .aff-disc + quiz > p that had #c8ccd2 (very low contrast) */
.aff-disc{color:var(--grey-500-aa) !important;font-size:var(--text-label,12px);line-height:1.5}
.quiz > p[style*="color:#c8ccd2"], .quiz > p:not([class]){color:var(--grey-500-aa) !important}
/* Site-header CTA: darken bg so white passes AA */
.site-header__cta{background:var(--accent-hover)}
.site-header__cta:hover{background:#7E3815}
/* Sample badge "Most pick this" — darken bg */
.sample__badge{background:var(--accent-hover) !important}
/* Hero CTA on cream bg — keep terracotta but ensure text is heavier */
.cta-lg, .cw__teaser-cta, .p-btn{font-weight:700 !important}

/* Cookie consent banner positioning (sitewide) — fix 2026-05-09
   Container had no positioning rules so banner rendered inline at bottom of <body>
   below the footer. Banner toggles via .visible (JS adds/removes the class). */
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:9999;
  visibility:hidden;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  background:var(--grey-900);
  border-top:1px solid rgba(255,255,255,0.12);
  box-shadow:0 -4px 20px rgba(0,0,0,0.08);
  padding:16px 24px;
  font-family:var(--font-body, 'Inter', sans-serif);
}
.cookie-banner.visible{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .cookie-banner{transition:none}
}

/* Utility: 6px margin-bottom — extracted from 48k+ inline styles 2026-05-10 */
.mb-6{margin-bottom:6px}

/* Utility classes — extracted from inline styles 2026-05-10 (batch 2) */
.text-right{text-align:right}
.body-link{font:500 14px/1.5 var(--font-body),system-ui,sans-serif;color:var(--primary);text-decoration:none}
.tag{display:inline-block;padding:2px 8px;background:var(--primary-light);color:var(--primary);border-radius:12px;font-size:13px;margin:2px}
.p-cell-sm{padding:10px 12px}

/* === /about page sections — added 2026-05-10 (was in deleted country-redesign.css) === */
.about-section{padding:80px 0;background:var(--surface)}
.about-section--mist{background:var(--primary-10)}
.about-section--ink{background:var(--ink);color:#fff}
.about-section--narrow .container{max-width:880px}
.about-section--tight{padding:64px 0}
.about-section__head{text-align:center;margin-bottom:48px}
.about-section__title{font:600 32px/1.2 var(--font-display);color:var(--ink);margin:0 0 12px;letter-spacing:-0.02em}
.about-section--ink .about-section__title{color:#fff}
.about-section__sub{font:400 17px/1.65 var(--font-body);color:var(--neutral-medium);max-width:560px;margin:0 auto}
.about-section--ink .about-section__sub{color:rgba(255,255,255,0.85)}

/* Values grid */
.values__header{text-align:center;margin-bottom:48px}
.values__header h2{font:600 32px/1.2 var(--font-display);color:var(--ink);margin:0 0 12px;letter-spacing:-0.02em}
.values__header p{font:400 17px/1.65 var(--font-body);color:var(--neutral-medium);max-width:520px;margin:0 auto}
.values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value-card{background:#fff;border-radius:16px;padding:32px 28px;border:1px solid rgba(0,0,0,0.05);box-shadow:0 1px 3px rgba(0,0,0,0.04);transition:transform 0.2s ease,box-shadow 0.2s ease}
.value-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.06)}
.value-card__icon{width:48px;height:48px;border-radius:12px;background:var(--primary-10);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--primary)}
.value-card__icon svg{width:24px;height:24px;color:var(--primary)}
.value-card h3{font:600 19px/1.3 var(--font-display);color:var(--ink);margin:0 0 10px;letter-spacing:-0.01em}
.value-card p{font:400 15px/1.65 var(--font-body);color:var(--neutral-medium);margin:0}
@media(max-width:768px){.values__grid{grid-template-columns:1fr;gap:16px}.values__header h2{font-size:26px}}

/* Reach stats */
.reach{padding:80px 0;text-align:center}
.reach h2{font:600 32px/1.2 var(--font-display);color:var(--ink);margin:0 0 40px;letter-spacing:-0.02em}
.reach__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:880px;margin:0 auto 40px}
.reach__stat{padding:28px 16px;background:#fff;border-radius:14px;border:1px solid rgba(0,0,0,0.05)}
.reach__num{font:700 40px/1 var(--font-display);color:var(--primary);margin-bottom:8px;letter-spacing:-0.02em}
.reach__label{font:500 13px/1.4 var(--font-body);color:var(--neutral-medium)}
.reach p{font:400 16px/1.65 var(--font-body);color:var(--neutral-medium);max-width:560px;margin:0 auto}
@media(max-width:768px){.reach__stats{grid-template-columns:1fr 1fr;gap:14px}.reach__num{font-size:30px}.reach h2{font-size:26px}}

/* About CTA dark band */
.about-cta{background:var(--ink);padding:80px 0;text-align:center;color:#fff}
.about-cta h2{font:600 32px/1.2 var(--font-display);color:#fff;margin:0 0 16px;letter-spacing:-0.02em}
.about-cta p{font:400 17px/1.65 var(--font-body);color:rgba(255,255,255,0.85);max-width:520px;margin:0 auto 32px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border-radius:10px;font:600 15px/1 var(--font-body);text-decoration:none;border:none;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease}
.btn--primary{background:var(--accent,#B5521F);color:#fff}
.btn--primary:hover{background:#9A4519;color:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(181,82,31,0.25)}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:rgba(255,255,255,0.92);color:var(--ink);transform:translateY(-1px)}

/* About story enhancements (already had partial rules in design-system) */
.about-story__quote{border-left:3px solid var(--accent,#B5521F);padding:8px 24px;margin:24px 0;background:transparent}
.about-story__quote p{font:600 22px/1.4 var(--font-display);color:var(--ink);margin:0;font-style:italic}
.about-cite{max-width:880px;margin:0 auto;padding:48px 24px;background:var(--neutral-light)}
.about-cite__label{font:600 12px/1 var(--font-body);color:var(--neutral-medium);text-transform:uppercase;letter-spacing:0.08em;margin:0 0 12px}
.about-cite__code{font:14px/1.6 var(--font-data,'JetBrains Mono',monospace);color:var(--ink);background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:8px;padding:16px;overflow-x:auto;margin:0}

/* Compare table */
.about-compare{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,0.05);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.about-compare th,.about-compare td{padding:14px 16px;text-align:left;font:400 14px/1.5 var(--font-body);border-bottom:1px solid rgba(0,0,0,0.05)}
.about-compare th[scope="col"]{background:var(--primary-10);font:600 12px/1.3 var(--font-body);color:var(--primary-dark);text-transform:uppercase;letter-spacing:0.05em}
.about-compare th[scope="col"].about-compare__us{background:var(--primary);color:#fff}
.about-compare th[scope="row"]{background:var(--surface);font-weight:600;color:var(--ink)}
.about-compare__cell--move{border-left:3px solid #16a34a}
.about-compare__cell--delay{border-left:3px solid #d97706}
.about-compare__cell--avoid{border-left:3px solid #dc2626}
.about-compare__mark{display:inline-block;margin-right:6px;font-weight:700}
.about-compare__num{font:700 16px/1 var(--font-display);color:var(--primary);display:inline-block}
.about-compare__hint{display:none;font:400 12px/1 var(--font-body);color:var(--neutral-medium);text-align:right;margin-top:8px}
@media(max-width:768px){.about-compare__hint{display:block}}
.about-compare__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* About story dropcap */
.about-story__lede{font:400 19px/1.7 var(--font-body);color:var(--ink);margin:0 0 32px}
.about-story__dropcap{float:left;font:700 56px/0.85 var(--font-display);color:var(--primary);padding:6px 12px 0 0;margin-top:4px}
.about-story__h{font:600 24px/1.3 var(--font-display);color:var(--ink);margin:48px 0 14px;letter-spacing:-0.01em}
.about-story__inner{max-width:720px;margin:0 auto;padding:80px 24px}
.about-story p{font:400 17px/1.7 var(--font-body);color:var(--ink);margin:0 0 16px}

/* === Semantic classes used inline-styled in HTML — added 2026-05-10 === */
/* These exist primarily as semantic markers / JS hooks. Visual styling is */
/* applied via inline style="..." attributes; the class declarations here are */
/* the canonical anchor (used by E2E tests, JS selectors, axe-core). */

/* Newsletter form (used on /about, /faq, /privacy, /terms etc.) */
.nl-form{display:flex;gap:8px;max-width:440px;margin:0 auto}
.nl-form input[type=email]{flex:1;padding:14px 16px;border:1px solid rgba(0,0,0,0.12);border-radius:8px;font:400 15px/1 var(--font-body);outline:none}
.nl-form input[type=email]:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,92,80,0.1)}
.nl-form button[type=submit]{padding:14px 24px;background:var(--primary);color:#fff;border:none;border-radius:8px;font:600 15px/1 var(--font-body);cursor:pointer;white-space:nowrap;transition:background 0.2s ease}
.nl-form button[type=submit]:hover{background:#145244}
.nl-form button[type=submit]:disabled{opacity:0.6;cursor:not-allowed}
.nl-msg{display:none;margin-top:12px;font:500 14px/1 var(--font-body);color:#16a34a}
.nl-msg.error{color:#dc2626}

/* Last-updated footer line (used on /404, /cookies, /privacy etc.) */
.last-updated{font-size:13px;color:var(--neutral-medium,#6B7280);margin:24px 0 0}

/* Tool CTA box (used in /tools/*) — appears below calculators */
.tool-cta-box{max-width:600px;margin:40px auto;padding:32px 24px;background:var(--primary-10);border-radius:12px;text-align:center}
.tool-cta-box h3{font:700 20px/1.3 var(--font-display);margin-bottom:8px;color:var(--ink)}
.tool-cta-box p{font:400 15px/1.6 var(--font-body);color:var(--neutral-medium);margin-bottom:16px}

/* Footer CTA section (used on /affiliate-disclosure, /testimonial-submit etc.) */
.footer-cta{padding:40px 24px;text-align:center;background:linear-gradient(135deg,var(--primary) 0%,#145244 100%)}
.footer-cta h2{color:#fff}
.footer-cta p{color:rgba(255,255,255,0.85)}

/* Article FAQ block (used on /ai-sources, /press) */
.article-faq{margin:48px 0 24px;padding-top:32px;border-top:1px solid rgba(0,0,0,0.08)}
.article-faq h2{font:600 24px/1.3 var(--font-display);color:var(--ink);margin-bottom:16px}
.article-faq .faq-item{margin-bottom:8px;padding:14px 16px;background:var(--surface);border-radius:8px;border:1px solid rgba(0,0,0,0.05)}
.article-faq .faq-item summary{cursor:pointer;font:600 15px/1.4 var(--font-body);color:var(--ink)}
.article-faq .faq-item p{margin:12px 0 0;font:400 14px/1.65 var(--font-body);color:var(--neutral-medium)}

/* Key takeaway callout (used on /ai-sources) */
.key-takeaway{background:var(--primary-10);border-left:4px solid var(--primary);padding:16px 20px;margin:16px 0 24px;border-radius:0 8px 8px 0}
.key-takeaway strong{font:600 13px/1 var(--font-body);color:var(--primary);text-transform:uppercase;display:block;margin-bottom:6px}
.key-takeaway p{font:400 15px/1.6 var(--font-body);color:var(--ink);margin:0}

/* Glossary term entry (used on /glossary) */
.glossary-term{padding:20px 0;border-bottom:1px solid rgba(0,0,0,0.08)}
.glossary-term:last-child{border-bottom:none}
.glossary-term h2{font:600 17px/1.3 var(--font-body);color:var(--ink);margin:0 0 6px}
.glossary-term p{font:400 14px/1.6 var(--font-body);color:var(--neutral-medium);margin:0}

/* Checkout spinner (used on /assess.html during quiz processing) */
.checkout-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:checkout-spin 0.8s linear infinite}
@keyframes checkout-spin{to{transform:rotate(360deg)}}

/* === Page-specific semantic classes (added 2026-05-10) === */
/* Bare aliases for sections that have child styling but no parent rule */
.values,.reach{display:block}
.reports,.guide{display:block}

/* Homepage visualization wrapper (.h-viz styling lives inline) */
.h-viz{position:relative}

/* Assess.html quiz affiliate cards (UI inline-styled) */
.q-aff-card{display:block}
.q-aff-title{font:600 16px/1.3 var(--font-body);color:var(--ink)}
.q-aff-sub{font:400 14px/1.5 var(--font-body);color:var(--neutral-medium)}
.q-meta-pill{display:inline-block;padding:2px 8px;background:var(--primary-10);color:var(--primary);border-radius:12px;font-size:12px}
.q-pdot{display:inline-block}

/* Rankings.html cards (page-specific layout) */
.rank-grid{display:grid;gap:16px}
.rank-grid--origins{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rank-card{display:block;padding:16px;background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:10px}
.rank-card--origin{border-left:3px solid var(--primary)}
.rank-card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.rank-card__name{font:600 16px/1.3 var(--font-body);color:var(--ink)}
.rank-card__sub{font:400 13px/1.4 var(--font-body);color:var(--neutral-medium)}
.rank-category{margin:24px 0}

/* Partners page card variant */
.p-card--a{display:block}

/* === Bulk-page semantic classes (added 2026-05-10 backward sweep) === */

/* Cross-links block (1,796 pages — bottom of country/blog/pathway pages) */
.cross-links{margin:32px auto;max-width:800px;padding:24px;background:var(--neutral-light,#F4F5F7);border-radius:8px}
.cross-links h3{font:600 18px/1.3 var(--font-display);color:var(--ink);margin-bottom:16px}
.cross-links ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.cross-links li{font:400 14px/1.4 var(--font-body)}
.cross-links a{color:var(--primary);text-decoration:none}
.cross-links a:hover{text-decoration:underline}

/* Timeline content (599 pages — pathways application timelines) */
.timeline{margin:24px 0}
.timeline__phase{display:flex;gap:16px;margin-bottom:16px}
.timeline__order{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font:600 14px/1 var(--font-body)}
.timeline__content{flex:1}
.timeline__name{font:600 15px/1.3 var(--font-body);color:var(--ink);margin-bottom:4px}
.timeline__notes{font:400 14px/1.5 var(--font-body);color:var(--neutral-medium)}

/* Cookie banner inner structure (152 pages with static markup; wte-proxy injects on rest) */
.cookie-banner__inner{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* DSR-020 (2026-07-21): !important on both — country-redesign.css's blanket
   `p{color:grey-700!important}` (loaded on countries/compare/for/lanes) and
   the sitewide `a:not(...){color:var(--primary)}` prose-link rule (~L553,
   specificity (0,14,1) — beats this 2-class rule even without !important)
   were clobbering white/accent-on-dark text on this DARK banner —
   grey-700-on-navy text at 1.74:1, green-on-navy link at 2.18:1 (needs 4.5).
   Same "dark surface loses to a sitewide light-surface sledgehammer" bug as
   .hero p and .cta h2/p above. Cookie consent is legally load-bearing text —
   it must be legible on every page (152 static + wte-proxy-injected rest). */
.cookie-banner__text{flex:1;min-width:200px;margin:0;font:400 14px/1.5 var(--font-body);color:#fff!important}
.cookie-banner__text a{color:var(--accent-on-dark,#FFB37A)!important;text-decoration:underline}
.cookie-banner__actions{display:flex;gap:8px;flex-shrink:0}
.cookie-banner__btn{padding:10px 20px;border:none;border-radius:6px;font:600 13px/1 var(--font-body);cursor:pointer;transition:opacity 0.2s}
/* accept sem regra desde a consolidação -> ButtonFace branco-sobre-cinza 1.15:1 (fix 2026-07-02) */
.cookie-banner__btn--accept{background:var(--accent);color:#fff}
.cookie-banner__btn--accept:hover{background:var(--accent-hover)}
.cookie-banner__btn--decline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.45)}
.cookie-banner__btn--decline:hover{background:rgba(0,0,0,0.04)}

/* Blog email CTA (104 pages — newsletter inline in blog posts) */
.blog-email-cta{margin:40px auto;max-width:680px;padding:32px 28px;background:linear-gradient(135deg,var(--primary-10) 0%,var(--surface) 100%);border-radius:14px;border:1px solid rgba(26,92,80,0.1);text-align:center}
.blog-email-cta h3{font:700 22px/1.3 var(--font-display);color:var(--ink);margin-bottom:10px}
.blog-email-cta p{font:400 15px/1.6 var(--font-body);color:var(--neutral-medium);margin-bottom:20px}
.email-row{display:flex;gap:8px;max-width:420px;margin:0 auto}
.email-row input{flex:1;padding:12px 16px;border:1px solid rgba(0,0,0,0.12);border-radius:8px;font:400 14px/1 var(--font-body)}
.email-row button{padding:12px 22px;background:var(--primary);color:#fff;border:none;border-radius:8px;font:600 14px/1 var(--font-body);cursor:pointer}

/* Pack CTA (75 pages — bundle/pack offer card) */
.pack-cta{padding:24px;background:var(--primary-10);border-radius:12px;text-align:center;margin:24px 0}

/* Comparison table (47 pages — generic compare table on blogs) */
.comparison-table{width:100%;border-collapse:collapse;margin:24px 0}
.comparison-table th,.comparison-table td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(0,0,0,0.08);font:400 14px/1.5 var(--font-body)}
.comparison-table th{background:var(--surface);font-weight:600;color:var(--ink)}
/* DSR-020 (2026-07-21): generator bakes caption color:#6B7280 inline (compare
   + lane pages) — 4.28:1 on the --paper-warm/#F5F1E8 page background, just
   under the 4.5 AA floor. grey-700 clears it (8.69:1) without touching the
   inline generator output (single !important override, same pattern used
   elsewhere in this file for baked inline colors). */
.comparison-table caption{color:var(--grey-700,#3D4451)!important}

/* SEO internal links (40 pages — bottom-of-page link footer) */
.seo-internal-links{margin:32px auto;max-width:800px;padding:20px;background:var(--surface);border:1px solid rgba(0,0,0,0.06);border-radius:8px}
.seo-internal-links h3{font:600 14px/1.3 var(--font-body);color:var(--ink);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.05em}

/* Brand spans inside header brand link (sometimes used standalone) */
.brand-w,.brand-em{font-family:var(--font-display);font-weight:500}
.brand-to{color:var(--accent,#B5521F);font-style:italic}

/* Tiny generic class — used as a JS hook in best-countries-* pages */
.t{display:inline}
.io{font-weight:400;opacity:0.7}

/* Misc bulk-page classes that were undefined */
.cta-inline,.cta-button{display:inline-block}
.toc{margin:24px 0;padding:16px;background:var(--surface);border-radius:8px}
.toc h2{font:600 14px/1.3 var(--font-body);text-transform:uppercase;letter-spacing:0.05em;color:var(--neutral-medium);margin-bottom:8px}
.key-facts{margin:16px 0;padding:16px;background:var(--primary-10);border-radius:8px}
.blog-post{display:block}
.table-wrap{overflow-x:auto;margin:16px 0}

/* Phase 3.6 — Loading / Empty / Error states */
.state-loading,.state-empty,.state-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-xl);min-height:160px;border-radius:var(--radius-lg);background:var(--paper);border:1px solid var(--border);text-align:center}
.state-loading{color:var(--grey-500)}
.state-loading__spinner{width:32px;height:32px;border:3px solid var(--grey-100);border-top-color:var(--primary);border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:var(--space-md)}
.state-empty__icon,.state-error__icon{width:48px;height:48px;color:var(--grey-500);margin-bottom:var(--space-md)}
.state-error{border-color:rgba(180,35,24,0.2);background:var(--avoid-bg)}
.state-error__icon{color:var(--avoid)}
.state-empty__title,.state-error__title{font:600 16px/1.4 var(--font-body);color:var(--ink);margin-bottom:var(--space-sm)}
.state-empty__body,.state-error__body{font:400 14px/1.5 var(--font-body);color:var(--grey-500);max-width:380px;margin-bottom:var(--space-md)}
.state-error__retry,.state-empty__action{padding:10px 20px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);font:600 14px/1 var(--font-body);cursor:pointer;text-decoration:none;display:inline-block}
.state-error__retry:hover,.state-empty__action:hover{background:var(--primary-dark)}

/* === D-T01 (2026-06-10): mobile hamburger menu — injected by tracking.js === */
.wte-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:none;border:none;cursor:pointer;color:#fff}
.wte-burger span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.wte-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.wte-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.wte-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.wte-mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:99;background:var(--ink);padding:84px 24px 24px;overflow-y:auto}
.wte-mobile-menu.open{display:block}
.wte-mobile-menu a{display:block;padding:16px 8px;min-height:44px;font:600 18px/1.4 var(--font-body,Inter,sans-serif);color:#fff !important;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.12)} /* color !important: menu links are not excluded from the 6×:not() link block (~L439) */
.wte-mobile-menu a:last-child{border-bottom:none;margin-top:16px;background:var(--accent,#A84A20);border-radius:10px;text-align:center;padding:16px}
body.wte-menu-open{overflow:hidden}
body.wte-menu-open .site-header{background:var(--ink)}
body.wte-menu-open .site-header__brand span{color:#fff}
@media(max-width:1050px){.wte-burger{display:flex}}

/* Shared navigation: the approved wordmark and compass belong together on
   every surface.  Keep the existing DOM hooks used by tracking.js. */
.site-header{background:#09241f;border-bottom:1px solid rgba(234,242,238,.16)}
.site-header__main{min-height:76px;gap:28px}
.site-header__brand{flex:none;align-items:center;min-height:40px;padding-left:40px;background:url('/assets/brand/compass-dark.svg') left center / 30px 30px no-repeat;font-size:24px;white-space:nowrap}
.site-header__nav{gap:28px;margin-left:auto}
.site-header__nav a{position:relative;display:inline-flex;align-items:center;min-height:44px}
.site-header__nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--accent-on-dark);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.site-header__nav a:hover::after,.site-header__nav a.is-active::after{transform:scaleX(1)}
.site-header__right{margin-left:8px}
.site-header__cta{min-height:44px;padding:13px 18px;border-radius:6px}
@media(max-width:1050px){
  .site-header__nav{display:none}
  .site-header__main{min-height:64px;gap:10px;padding:10px 20px}
  .site-header__brand{font-size:21px;padding-left:34px;background-size:26px 26px}
  .site-header__right{display:none}
  .wte-burger{margin-left:auto;width:44px;height:44px}
}
@media(max-width:390px){
  .site-header__brand{font-size:18px;padding-left:30px;background-size:23px 23px}
}
@media(prefers-reduced-motion:reduce){.site-header__nav a::after{transition:none}}

/* === D-T02 (2026-06-10): responsive visa tables === */
/* Desktop: sticky first column + right-edge scroll hint */
.visa-table th:first-child,.visa-table td:first-child{position:sticky;left:0;background:#fff;z-index:1;box-shadow:2px 0 4px rgba(0,0,0,0.06)}
.visa-table thead th:first-child{background:var(--paper-deep,#F4F2EC);z-index:2}
/* Mobile: each row becomes a stacked card; labels from data-label */
@media(max-width:700px){
  .visa-table{display:block;border:none}
  .visa-table thead{display:none}
  .visa-table tbody{display:block}
  .visa-table tr{display:block;margin:0 0 14px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;padding:6px 12px;background:#fff}
  .visa-table td{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border:none;border-bottom:1px solid rgba(0,0,0,0.06);text-align:right;position:static;box-shadow:none}
  .visa-table td:last-child{border-bottom:none}
  .visa-table td::before{content:attr(data-label);font:600 12px/1.4 var(--font-body,Inter,sans-serif);color:var(--neutral-medium,#5B6B68);text-align:left;flex:0 0 42%}
  .visa-table td.prog-name{display:block;text-align:left;font-weight:700;padding-top:12px}
  .visa-table td.prog-name::before{display:none}
}

/* DES-040 — comparison tables keep their column relationships on mobile.
   Legacy cells have no data-label: generic flex cards hide their values.
   Scoped to this family; desktop and canonical catalogue tables are unchanged. */
@media(max-width:700px){
  .wte-family--compare .visa-table{display:table!important;min-width:0!important;max-width:100%;table-layout:fixed!important}
  .wte-family--compare .visa-table thead{display:table-header-group}
  .wte-family--compare .visa-table tbody{display:table-row-group}
  .wte-family--compare .visa-table tr{display:table-row;border:0;border-radius:0;padding:0;margin:0}
  .wte-family--compare .visa-table th,.wte-family--compare .visa-table td{display:table-cell;min-width:0;white-space:normal!important;overflow-wrap:anywhere;text-align:left;padding:10px 8px!important;position:static;box-shadow:none}
  .wte-family--compare .visa-table td::before{display:none}
}

/* === D-T14 (2026-06-10): motion safety — content must never sit at opacity 0 === */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .fade-in,.fade-up,[data-animate],.reveal,.scroll-fade{opacity:1 !important;transform:none !important}
}
/* no-JS fallback: scroll-fade classes start visible unless JS arms them */
html:not(.js) .fade-in,html:not(.js) .fade-up,html:not(.js) [data-animate],html:not(.js) .reveal,html:not(.js) .scroll-fade{opacity:1 !important;transform:none !important}

/* === CLS fix (2026-06-10): metric-tuned fallbacks — the async font swap
   (L1-6) was shifting long articles (CLS 0.342 on blog desktop). These
   local fallbacks approximate Fraunces/Inter metrics so the swap is
   near-zero-shift. === */
@font-face{font-family:'Fraunces-fb';src:local('Georgia');size-adjust:98%;ascent-override:96%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Inter-fb';src:local('Arial');size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

/* 2026-07-02 — cookie banner buttons had NO background rule anywhere
   (UA ButtonFace) while the sitewide button-contrast block above forces
   color:#fff !important -> "Accept All" was white-on-light-grey 1.15:1.
   Proper button styling, tokens only (Task 59 V2.1 sweep finding). */
.cookie-banner__btn{font:600 13px/1 var(--font-body) !important;border:0;border-radius:var(--radius);padding:10px 18px;cursor:pointer}
.cookie-banner__btn--accept{background:var(--accent) !important;color:#fff !important}
.cookie-banner__btn--accept:hover{background:var(--accent-hover) !important}
.cookie-banner__btn--decline{background:transparent !important;color:rgba(255,255,255,0.85) !important;border:1px solid rgba(255,255,255,0.35) !important}

/* ============================================================================
   CARD SYSTEM — unification (Task 61, 2026-07-02)
   Base block: `.card` (defined above, ~line 187: paper bg, hairline border,
   radius-lg, sp-8 padding, lift hover) + hardened invariants (~line 380,
   `.card{background/border/border-radius !important}` — those three props are
   brand invariants on ANY element carrying `.card`; modifiers cannot and
   should not override them).

   HTML NOVO usa `.card` + um modifier `.card--*` abaixo.
   `.card--row` usa-se STANDALONE (class="card--row") — é uma variante sem
   "skin" (transparente, só border-top), incompatível por design com os
   invariantes endurecidos do `.card`.

   LEGACY ALIAS MAP (audit 2026-07-02 — ver scripts/outputs/tasks_61_63_report.json):
     .blog-card    → alias de .card--blog (agrupado abaixo). DEAD: definida só
                     no <style> de blog/index.html, 0 elementos no corpus.
     .bl__row      → alias de .card--row (agrupado abaixo). Definida+usada só
                     em blog/index.html (10 rows); o agrupamento é no-op
                     provado: o <style> da página redeclara os mesmos valores
                     DEPOIS deste ficheiro na cascata.
     .related-card → NÃO aliasável. Duas definições divergentes no corpus:
                     assets/blog.css:475 (1.190 posts, branca c/ border) vs
                     <style> embebido em move-to/* (25 págs, bg neutral-light
                     sem border). Agrupá-la aqui vazava border/gap para as 25
                     páginas move-to. HTML novo usa .card--related (look
                     canónico = o de blog.css).
     .bcat-li      → excluída: não é card (é espaçamento de <li>,
                     assets/blog.css:949). Fica como está.
     .partner-card / .tier-card → NÃO EXISTEM no deploy (só no HTML interno do
                     wte-dashboard worker). Equivalentes reais: .pv-rcard
                     (partners.v2.css, showcase demasiado bespoke — não
                     unificado) e .tier (<style> de pricing.html:211; .tier é
                     nome genérico usado com outros sentidos em reports.html e
                     tools/best-country-quiz → alias inseguro). HTML novo usa
                     .card--tier (espelho canónico do look do pricing).
   ============================================================================ */

/* --- .card--blog — grid card (bloco, thumb full-bleed via overflow:hidden).
       .blog-card agrupada como alias legacy (0 elementos → agrupamento inócuo). */
.card--blog,.blog-card{display:block;background:var(--paper);border:1px solid rgba(0,0,0,0.06);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out);text-decoration:none;color:inherit}
.card--blog:hover,.blog-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);color:inherit}

/* --- .card--related — link-row card (flex, título + seta). Espelho exato de
       assets/blog.css:475 (sem os !important: eram anti-página-embebida). */
.card--related{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--paper);border:1px solid rgba(12,46,43,0.08);border-radius:10px;text-decoration:none;transition:border-color 0.15s,background 0.15s,transform 0.15s}
.card--related:hover{border-color:var(--accent);background:rgba(168,74,32,0.02);transform:translateY(-1px)}

/* --- .card--row — list-row skinless (grid num | corpo | thumb). STANDALONE.
       .bl__row agrupada como alias legacy — cópia valor-a-valor do <style> de
       blog/index.html:280-282, que redeclara tudo depois → no-op provado. */
.card--row,.bl__row{display:grid;grid-template-columns:80px 1fr 110px;gap:20px;padding:24px 0;border-top:1px solid rgba(12,46,43,0.1);align-items:start;text-decoration:none;color:inherit;transition:background .2s}
.card--row:first-child,.bl__row:first-child{border-top:0}
.card--row:hover,.bl__row:hover{background:rgba(168,74,32,0.03)}
/* colapso responsivo SÓ para HTML novo (canon 768); o .bl__row legacy mantém
   o seu colapso a 640 no <style> da página — NÃO agrupar aqui. */
@media(max-width:768px){.card--row{grid-template-columns:1fr;gap:8px}}

/* --- .card--tier — pricing tier card (coluna flex, hover lift). Espelho
       canónico do .tier do <style> de pricing.html:211 (não aliasável). */
.card--tier{background:var(--paper);border:1px solid rgba(12,46,43,0.08);border-radius:var(--radius-xl);padding:var(--sp-8) var(--sp-6);display:flex;flex-direction:column;position:relative;transition:all .2s var(--ease)}
.card--tier:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}

.wte-nd{cursor:help;border-bottom:1px dotted currentColor;opacity:.72}
.wte-nd:hover,.wte-nd:focus{opacity:1}

/* ═══════════════════════════════════════════════════════════════════════════
   F1 · DESIGN-SYSTEM RECONCILIATION (add-only) — branch design/foundations-uniformization
   Alinha os tokens centrais do site com o whereTOemigrate Design System
   (claude.ai/design · dossier DSR-005/007/019 · DES-026). ADD-ONLY: todos os
   nomes abaixo são NOVOS — nada existente é renomeado nem sobreposto, por isso
   nenhuma página no ar muda de aspeto. A paleta em si já batia ao hex exato
   (move/delay/avoid == verdict-eligible/almost/not). Reversível: apagar o bloco.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Aliases honestos de veredicto — código novo usa os nomes que o cliente vê,
     nunca os códigos-motor antigos MOVE/DELAY/AVOID. Mesmas cores. */
  --verdict-eligible:var(--move);   /* #0F6B3A */
  --verdict-almost:var(--delay);    /* #9A6700 */
  --verdict-not:var(--avoid);       /* #B42318 */

  /* DSR-005 · estados de VERIFICAÇÃO de dados (distintos dos veredictos). */
  --data-verified-ink:var(--primary);  --data-verified-bg:var(--primary-10);
  --data-partial-ink:var(--delay);     --data-partial-bg:var(--delay-bg);
  --data-closed-ink:var(--grey-500);   --data-closed-bg:var(--grey-100);
  --data-unknown-ink:var(--grey-500);  --data-unknown-bg:transparent;

  /* Etiqueta mono MAIÚSCULAS (mínimo 12px desde 17-jul · DES-026). */
  --text-label:12px;
  --tracking-label:.10em;
  --tracking-eyebrow:.14em;

  /* Passo de canto de 8px (botões/inputs) — faltava entre 6 e 12 (DSR-019). */
  --radius-md:8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DSR-005 · data-verification state tokens — public alias layer (add-only)
   worktree design/docs-tokens, docs/design-system/03-data-states.md
   ---------------------------------------------------------------------------
   The four ink/bg pairs already exist as --data-{verified,partial,closed,unknown}
   -{ink,bg} (see the DSR-005 block above, F1 reconciliation). This block adds
   the --state-* names components should reference, aliased to that existing
   pair — the same pattern already used two blocks up for the verdict tokens
   (--verdict-eligible:var(--move), etc). Aliasing instead of a second colour
   decision keeps one source of truth: change a hex once, both names update.
   Nothing existing is renamed or overridden — purely additive.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --state-verified:var(--data-verified-ink);       /* → var(--primary) #1A5C50 */
  --state-verified-bg:var(--data-verified-bg);     /* → var(--primary-10) #EDF5F3 */
  --state-partial:var(--data-partial-ink);         /* → var(--delay) #9A6700 */
  --state-partial-bg:var(--data-partial-bg);       /* → var(--delay-bg) #FEF6E0 */
  --state-closed:var(--data-closed-ink);           /* → var(--grey-500) #5A6470 */
  --state-closed-bg:var(--data-closed-bg);         /* → var(--grey-100) #F2F3F5 */
  --state-unknown:var(--data-unknown-ink);         /* → var(--grey-500) #5A6470 */
  --state-unknown-bg:var(--data-unknown-bg);       /* → transparent */
}

/* /tools/ hub (2026-07-21): os títulos dos cartões são h2 semânticos mas NÃO são
   headings de artigo — a regra global h2{font-size:28px!important} atropelava o
   desenho compacto inline (Fraunces 17px) e rebentava a grelha. Reposição com a
   mesma arma (!important) e âmbito estreito. */
.tools-grid h2{font:600 17px/1.35 var(--font-display),Georgia,serif !important;letter-spacing:0 !important}
.tools-grid p{font-size:13px !important;line-height:1.55 !important}

/* ============================================================
   DSR-006 (2026-07-21) — HIERARQUIA DE BOTÕES (ADD-ONLY)
   Regra: LARANJA (--accent) = UMA única ação primária por ecrã;
   todo o resto verde ou contorno. Canónicas (já existentes — ver
   tabela DSR-016, «BUTTON STYLE TABLE» acima):
     primária   → .cta / .btn--primary            (laranja sólido)
     secundária → .cta--secondary                 (verde --primary sólido)
     terciária  → .cta--ghost / .btn--outline     (contorno verde)
   NOVO .btn--ghost-dark: secundário DENTRO de secções/cartões
   ESCUROS (.article-cta, .integrate-cta, .final-cta) onde o contorno
   verde desaparece — contorno branco, texto branco. O par com
   .article-cta é intencional e a classe vem DOBRADA (.btn.btn--ghost-dark)
   de propósito: tem de vencer em ESPECIFICIDADE (não só em ordem) as regras
   `.article-cta .btn{background:var(--accent) !important}` daqui (L434) E de
   country-redesign.css L575 — que carrega DEPOIS deste ficheiro, portanto
   uma (0,2,0) igual perderia lá. (0,3,0) ganha em qualquer ordem.
   Guarda ligado ao deploy: multi_primary_cta (RATCHET) em
   scripts/ci/design_system_guard.py — nº de páginas com >1 <a> laranja
   só pode DESCER. */
.btn.btn--ghost-dark,.article-cta .btn.btn--ghost-dark{background:transparent !important;border:2px solid rgba(255,255,255,0.65) !important;color:#fff !important}
.btn.btn--ghost-dark:hover,.article-cta .btn.btn--ghost-dark:hover{background:rgba(255,255,255,0.14) !important;border-color:#fff !important;color:#fff !important}

/* ============================================================
   DSR-023 (2026-07-21) — BANDEIRAS (ADD-ONLY)
   SVG próprio self-hosted: /assets/flags/{iso2}.svg (ISO 3166-1
   alpha-2 minúsculo, 257 códigos, 4×3, fonte lipis/flag-icons MIT —
   ver /assets/flags/LICENSE.txt). Emoji como UI e CDN externo
   (flagcdn) são PROIBIDOS (guarda: flagcdn RATCHET em
   scripts/ci/design_system_guard.py, teto 0).
   Uso canónico (alt vazio quando decorativa junto ao nome do país;
   width/height explícitos evitam CLS):
     <img class="flag" src="/assets/flags/pt.svg" alt="" width="20" height="15" loading="lazy">
   Desenho: retangular 4×3, cantos 2px, anel subtil (bandeiras
   claras — JP/PL — não se dissolvem em fundo branco). Alternativas
   de desenho = 1 regra (decisão founder pendente, default retangular):
     .flag--square{aspect-ratio:1;object-fit:cover;width:auto}
     .flag--circle{aspect-ratio:1;object-fit:cover;width:auto;border-radius:50%} */
.flag{display:inline-block;border-radius:2px;object-fit:cover;vertical-align:-0.14em;box-shadow:0 0 0 .5px rgba(12,46,43,.22)}
.flag--inline{height:1em;width:auto;aspect-ratio:4/3}   /* corre com o texto */
.flag--list{width:20px;height:15px}                     /* listas/dropdowns   */
/* ============================================================================
   BP-F4 (2026-07-21) — TYPOGRAPHIC SCALE TOKENS: --fs-h1..h6 / --lh-h1..h6
   (blueprint §9 DES-012 "typography scale"). ADD-ONLY, read-only aliases —
   nothing existing is renamed and no selector below uses them yet (wiring
   components to reference these instead of bare pixel values is separate,
   future work). Nothing here changes what renders today.

   h1-h4 are NOT invented — they're a literal copy of the EFFECTIVE (cascade-
   resolved, !important-final) scale already documented as production
   behaviour in docs/design-system/02-typography.md §5. Verified against real
   practice in the 3 families named in the brief: country-d59.css,
   pathway-6a.css, blog-elevated.css (2026-07-21) — none of the three
   overrides the bare h1/h2/h3 tag selectors; they only style SCOPED hero/
   component variants (.d59-hero__copy h1, .p6a-hero h1, .blog-elevated
   .blog-hero h1 — bespoke hero treatments, a different concern from the
   generic heading scale). Every plain <h1>-<h4> in all three families
   renders exactly this scale. Suffixes -768/-480 name the effective size at
   that canonical breakpoint (see the BREAKPOINTS CANÓNICOS contract, ~L74) —
   not a new naming scheme, the number IS the breakpoint it applies at.

   h5/h6 have NO live rendered practice to formalize: h5 is used on 2 of
   ~8,848 pages with font-weight:700 forced (~L417) but no font-size ANYWHERE
   → renders at the UA default (~13px); h6 is used on 0 pages. --fs-h5/--fs-h6
   below are DERIVED by continuing the h2→h3→h4 step-down ratio (~1.2-1.27×),
   NOT measured — flagged here so nobody mistakes them for observed
   production behaviour the way h1-h4 are. */
:root{
  --fs-h1:clamp(40px,3.8vw,54px); --lh-h1:1.12;   /* effective, ~L418 */
  --fs-h1-768:28px;                                /* ~L423 — line-height unchanged */
  --fs-h1-480:24px;   --lh-h1-480:1.2;             /* ~L424 */

  --fs-h2:28px;   --lh-h2:1.3;                      /* effective, ~L419 */
  --fs-h2-768:22px;                                 /* ~L423 — !important wins over the non-important 24px base rule (~L191) */
  --fs-h2-480:19px;                                 /* ~L424 — line-height stays 1.3 */

  --fs-h3:22px;   --lh-h3:1.3;                      /* effective, ~L420 */
  --fs-h3-768:22px;                                 /* no override at 768 — same as desktop */
  --fs-h3-480:18px;                                 /* ~L192 — line-height stays 1.3 (no override) */

  --fs-h4:18px;   --lh-h4:1.3;                      /* ~L189; no responsive override exists anywhere */

  --fs-h5:15px;   --lh-h5:1.3;   /* DERIVED — no live h5 practice to measure, see comment above */
  --fs-h6:13px;   --lh-h6:1.3;   /* DERIVED — h6 unused site-wide (0 pages), see comment above */
}

/* ============================================================================
   BP-F4 (2026-07-21) — SURFACE LEVELS: --surface-0..3
   (blueprint §9 "surface levels": fundo de página → cartão → elevado →
   overlay). ADD-ONLY aliases mapped to colours that ALREADY exist in the
   palette (~L75-112) — no new hex invented for levels 0-2:
     --surface-0 = var(--surface)    — page background (body{background:
                    var(--surface)}, ~L171/L412 — literally "fundo de página").
     --surface-1 = var(--paper)      — card (.card{background:var(--paper)},
                    ~L253/L483 — literally "cartão").
     --surface-2 = var(--paper-deep) — elevated. The one existing case of a
                    surface deliberately raised above a card: the STICKY
                    table header (.visa-table thead th:first-child{background:
                    var(--paper-deep);z-index:2}, ~L1298) and .site-footer
                    (~L838) — both already use paper-deep as the "one step
                    deeper/z-index-raised" tone.
     --surface-3 = overlay/scrim. NO live modal/backdrop pattern exists
                    site-wide to measure (the one full-screen panel,
                    .wte-mobile-menu ~L1286, is a SOLID var(--ink) panel, not
                    a translucent scrim over page content) — this is the
                    first formalized value, not an extraction of observed
                    behaviour. Derived from --ink (#0C2E2B → rgb(12,46,43))
                    at 65% alpha rather than a new hex, so it still reads as
                    "the site's dark colour, translucent" rather than an
                    invented fifth colour. */
:root{
  --surface-0:var(--surface);
  --surface-1:var(--paper);
  --surface-2:var(--paper-deep);
  --surface-3:rgba(12,46,43,0.65);
}

/* ============================================================================
   BP-F4 (2026-07-21) — FAQ ACCORDION, formalized into the central sheet
   (ADD-ONLY). These rules used to live ONLY in deploy/assets/country-base.css
   (loaded by /countries/ + /blog/, 2,363 pages) — a page-family file was the
   sole source of truth for a component the DOMINANT markup pattern site-wide
   actually uses: 4,675 of ~8,848 pages carry <details class="faq-item">
   (this exact structure), vs. 2 pages still on the older button+JS pattern
   defined above (~L342, .faq-item/.faq-question/.faq-answer — kept
   untouched, ADD-ONLY forbids altering it; affiliate-disclosure.html +
   glossary.html only). Moved here so the canonical accordion is a first-class
   citizen of the design system instead of hiding in a template-specific file.
   country-base.css now carries only a pointer comment to this block.

   ADD-ONLY means this block coexists with, rather than replaces, the older
   .faq-item rule above (~L342) and the .article-faq .faq-item rule already
   in this file (~L1153-1157, for /ai-sources /press). Same specificity in
   all three cases — THIS block, being later in the file, wins on the
   overlapping properties, exactly as country-base.css already won today by
   loading AFTER this file on the 2,363 pages that link it. Net effect on
   those pages: none — behaviour is unchanged.
   Known, accepted, low-risk side effect (outside tests/visual/manifest.json's
   17-shot gate): the handful of pages that share this SAME <details
   class="faq-item"> markup but load NEITHER country-base.css NOR
   country-redesign.css/style.css/pathway-6a.css (rankings.html, ai-sources.html,
   faq.html, lawyers/index.html — 4 of 8,848, verified 2026-07-21) currently
   render a bare native <summary> triangle from the ~L342 rule alone; they now
   pick up the same "+/−" accordion look as every country/blog page instead.
   Not a regression — convergence toward the pattern 4,675 pages already use —
   but flagged here rather than left silent. */
.article-faq{margin:48px 0}
.article-faq h2{font-size:24px;margin-bottom:20px}
.faq-item{border:1px solid rgba(0,0,0,0.08);border-radius:var(--radius);margin-bottom:8px;overflow:hidden}
.faq-item summary{padding:16px 20px;font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;transition:background var(--duration-normal) var(--ease-out)}
.faq-item summary:hover{background:var(--grey-100)}
.faq-item summary::after{content:'+';font-size:20px;font-weight:400;color:var(--primary);flex-shrink:0;transition:transform var(--duration-normal) var(--ease-out)}
.faq-item[open] summary::after{content:'\2212'}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{padding:0 20px 16px;color:var(--grey-500);line-height:1.7;font-size:15px}

/* ============================================================================
   BP-F4 / DES-032 (2026-07-21) — .sticky-rail utility
   Formalizes the desktop sticky-sidebar BEHAVIOUR only — NOT applied to any
   page in this pass (that's F6's job). position:sticky is scoped ≥1024px:
   below that width most templates stack the rail under the main content, so
   sticky there would just pin an element that's already fully in view for a
   moment before scrolling past it — no benefit, occasional jank.
   `top` is a MEASURED value (Playwright, 2026-07-21), not a guess: real
   .site-header height on live pages is 81px at both 1024px and 1440px
   viewport widths (checked on /countries/portugal.html and
   /blog/americans-moving-abroad.html — the same .site-header__main markup
   loads on 5,103 of ~8,848 pages, so this is not template-specific) + one
   var(--sp-4) breathing gap = 97px. */
@media(min-width:1024px){
  .sticky-rail{position:sticky;top:calc(81px + var(--sp-4))}
}
/* ═══════════════════════════════════════════════════════════════════════════
   DSR-020 (2026-07-21) — WCAG passagem formal de contraste. axe-core
   (link-in-text-block, WCAG 1.4.1): prose links styled ONLY by colour
   (var(--primary) on body-text grey, ~1.1–2.1:1) aren't distinguishable from
   surrounding text for anyone who can't perceive that colour difference.
   Scoped to two CONTENT-ONLY citation/meta containers (never nav/button/CTA —
   verified: no .btn/.cta ever nests inside either, sampled sitewide) instead
   of the sitewide `a:not(...)` rule (~L553), which many components rely on
   for a plain (no-underline) look without their own !important — widening
   that selector risked underlining nav/chip/card links site-wide. */
.ymyl-sources a:not(.btn):not([style*="background"]),
.post-aside a:not(.btn):not([style*="background"]) {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.p6a-read .p6a-lv a { text-decoration: underline; text-underline-offset: 2px; }

/* DSR-020 (2026-07-21): image captions (109 pages: 102 blog posts + 7
   research/index pages) baked inline at #6B7280 / var(--neutral-medium,#6B7280)
   — 4.28:1 on the surrounding cream/white background, just under the 4.5 AA
   floor. grey-700 clears it comfortably; sitewide tag rule since every
   sampled <figcaption> uses this same muted-caption convention. */
figcaption{color:var(--grey-700,#3D4451)!important}

/* DSR-020 (2026-07-21): affiliate-disclosure box (3 pages) — "full
   disclosure" link is the same colour as its surrounding text (link-in-text-
   block), no non-colour distinction. */
.affiliate-disclosure a{text-decoration:underline!important}

/* DSR-020 (2026-07-21): CSS-level belt-and-suspenders for the footer
   opacity:.7 fix applied literally to 2.809 pages' inline style (this PR).
   deploy/index.html and deploy/blog/index.html are owned by other in-flight
   agents and excluded from that literal edit — this override closes the gap
   for those two without touching either file (external !important beats a
   plain inline opacity:.7 with no !important). Redundant no-op everywhere
   else the inline fix already applies. */
.site-footer__compliance{opacity:1!important}

/* Approved public chrome, September 2026: one producer, compact navigation. */
.site-header--approved{position:relative;z-index:60;background:var(--paper,#fffef8);border-bottom:1px solid #dce2d9}
.site-header--approved .site-header__main{width:min(1180px,calc(100% - 48px));max-width:1180px;padding:0;margin:auto;min-height:78px;gap:26px;display:flex;align-items:center}
.site-header--approved .site-header__brand{display:inline-flex;align-items:baseline;gap:0;white-space:nowrap;font-size:25px;min-height:44px;line-height:44px}
.site-header--approved .site-header__nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.site-header--approved .site-header__nav>a,.site-explore>summary{font:600 14px/1.4 var(--font-body);color:#173e35;padding:14px 0;min-height:44px;text-decoration:none}
.site-explore{position:relative}.site-explore>summary{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer}.site-explore>summary::-webkit-details-marker{display:none}.site-explore[open]>summary svg{transform:rotate(180deg)}
.site-explore__panel{position:absolute;top:calc(100% + 8px);right:-130px;width:440px;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#fffef8;padding:20px;border:1px solid #d7e0d6;border-radius:8px;box-shadow:0 18px 42px #173e3524;z-index:70}
.site-header--approved .site-explore__panel a{display:block;padding:14px 12px;line-height:1.4;text-decoration:none;color:#173e35;font-size:14px;font-weight:600;border-radius:4px;min-height:68px;white-space:normal}.site-explore__panel a:first-child,.site-explore__panel a:nth-child(2){border-bottom:1px solid #d7e0d6;padding-bottom:20px}.site-explore__panel a small{display:block;color:#51685b;font-size:12px;font-weight:400;margin-top:5px}.site-explore__panel a:hover{background:#eaf1e9}
.site-header--approved .site-header__right{margin-left:0}.site-header--approved .site-header__cta{display:inline-flex;justify-content:center;align-items:center;background:#a84a20;color:#fff;padding:13px 20px;min-height:46px;border-radius:4px;white-space:nowrap;font-size:14px;font-weight:600}
.site-header--approved :is(a,button,summary):focus-visible,.site-footer--compact a:focus-visible{outline:3px solid #a84a20;outline-offset:4px}
.site-footer--compact{background:#0e302a;color:#dbe8e2;padding:52px max(24px,calc((100% - 1180px)/2)) 24px;margin:0}
.site-footer--compact .site-footer__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:0;margin:0;max-width:none;width:auto;border:0}
.site-footer--compact .site-footer__brand{font-size:26px;color:#fff;text-decoration:none;line-height:1.2}.site-footer--compact .site-footer__brand .to{color:#efb388;font-style:italic}
.site-footer--compact .site-footer__tag{font:400 14px/1.7 var(--font-body);color:#bbd0c7;max-width:270px;margin-top:18px}
.site-footer--compact .site-footer__col-h{font:600 13px/1.5 var(--font-body)!important;color:#efb388!important;letter-spacing:0!important;text-transform:none;margin:0 0 14px!important}
.site-footer--compact .site-footer__col ul{list-style:none;padding:0;margin:0}.site-footer--compact .site-footer__col li{margin:0}.site-footer--compact .site-footer__col a{display:inline-block;color:#dbe8e2;font-size:13px;line-height:1.5;padding:8px 0;text-decoration:none}.site-footer--compact a:hover{text-decoration:underline;text-underline-offset:4px;color:#fff}
.site-footer--compact .site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding:20px 0 0;margin-top:32px;border-top:1px solid #486359;color:#bfd2c8;max-width:none;font-size:12px;line-height:1.8}
.site-footer--compact .site-footer__compliance{opacity:1!important;font-size:12px!important}.site-footer--compact .site-footer__compliance a{color:inherit;display:inline-block;padding:6px 0}
@media(max-width:1050px){.site-header--approved .site-header__main{gap:12px;min-height:70px}.site-header--approved .site-header__nav{display:none}.site-header--approved .site-header__right{margin-left:auto}.site-header--approved .wte-burger{margin-left:auto;order:3;flex-shrink:0}.site-header--approved .site-header__cta{font-size:13px;padding:12px 14px}.wte-mobile-menu a small{display:none}body:has(.site-header--approved) .wte-mobile-menu{overflow:auto;max-height:calc(100dvh - 70px)}.wte-mobile-menu>a{min-height:44px}}
@media(max-width:700px){.site-footer--compact{padding:38px 20px 24px}.site-footer--compact .site-footer__cols{grid-template-columns:1fr 1fr;gap:26px 20px}.site-footer--compact .site-footer__brand-col{grid-column:1/-1}.site-footer--compact .site-footer__tag{max-width:390px}.site-footer--compact .site-footer__col a{padding:11px 0}.site-footer--compact .site-footer__bottom{margin-top:24px}.site-header--approved .site-header__main{width:calc(100% - 28px);gap:8px}.site-header--approved .site-header__brand{font-size:21px}.site-header--approved .site-header__cta{font-size:12px;padding:10px 11px}.site-header--approved .wte-burger{width:44px;min-width:44px}}
@media(max-width:380px){.site-header--approved .site-header__right{display:none}.site-header--approved .site-header__brand{font-size:22px}.site-footer--compact .site-footer__cols{gap:20px 14px}}

/* Approved public pages use in-flow calls to action. Funnel remains independent. */
body:has(.site-header--approved) #mobileCta{display:none!important}

.site-header--approved .site-header__brand,.site-header--approved .site-header__brand .brand-w,.site-header--approved .site-header__brand .brand-em{color:#173e35!important}
.site-header--approved .site-header__brand .brand-to{color:#a84a20}
.site-header--approved .site-header__nav a,.site-header--approved .site-header__nav a:hover,.site-header--approved .site-header__nav a.is-active{color:#173e35!important}
.site-header--approved .wte-burger{color:#173e35}
body.wte-menu-open .site-header--approved{background:#fffef8}
@media(min-width:700px) and (max-width:1050px){.site-header--approved .site-header__right{display:block}}
.site-header--approved .site-header__brand{background-image:url('/assets/brand/compass.svg')}
@media(max-width:1050px){
 body.wte-menu-open .site-header--approved{z-index:120}
 body:has(.site-header--approved) .wte-mobile-menu{top:70px;padding-top:12px;max-height:calc(100dvh - 70px)}
}

/* DES/TRU batch: compact footer is a dark surface, unlike legacy footers. */
.site-footer--compact .site-footer__bottom :is(span,a){color:#d2e3d9!important}
/* Keyboard-readable comparison regions preserve the table semantics. */
.wte-table-region{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.wte-table-region:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.wte-table-hint{font-size:12px;line-height:1.5;color:#435e53;margin:8px 0}
.compare-grid>.compare-card{min-width:0;max-width:100%}
.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.compare-grid{grid-template-columns:minmax(0,1fr)}}
/* Final source notes follow their actual surface, including the dark programme CTA. */
.cx #ymyl-legal{color:#435f52!important}
.px-editorial-sheet #ymyl-legal{color:#d3e0d5!important}

/* SEO26-039: legacy form and card consumers; approved header and hero selectors unchanged. */
@media screen and (max-width:389px){.nl-form{flex-wrap:wrap}.nl-form input[type=email]{min-width:0!important;width:100%}}
@media screen{.verdict-grid>.verdict{display:block;min-width:0}}

@media screen and (max-width:700px){.sources-list li{display:block!important;overflow-wrap:anywhere}}