/* pacote blog: country-base.css, country-redesign.css, blog.css, blog-elevated.css, editorial-families.css — gerado por scripts/pages/css_bundles.py; não editar */
/* ── country-base.css ── */
/* ============================================================
   country-base.css — styles for /countries/{slug}.html (sub-variant A)
   Loaded by templates/countries/base.html (consolidation refactor 2026-05-03).
   Replaces what was previously duplicated in each page's inline <style> block.
   ============================================================ */

/* Article Header */
.article-header{padding:48px 0 40px;border-bottom:1px solid rgba(0,0,0,0.06);margin-bottom:40px}
.article-header__tag{display:inline-block;padding:4px 12px;background:var(--primary-light,var(--primary-10));color:var(--primary);font:600 12px/1 var(--font-body);border-radius:20px;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:20px}
.article-header h1{font-size:36px;line-height:1.2;margin-bottom:16px;max-width:720px}
.article-header__meta{font-size:14px;color:var(--grey-500)}
@media(max-width:768px){.article-header h1{font-size:28px}}

/* Article Body */
.article-body{max-width:720px;padding-bottom:64px}
.article-body h2{font-size:24px;margin:40px 0 16px}
.article-body h3{font-size:18px;margin:32px 0 12px}
.article-body p{font-size:16px;line-height:1.7}
.article-body strong{font-weight:600}

/* Info Box */
.info-box{background:var(--grey-100);border-radius:var(--radius-lg);padding:24px 28px;margin:28px 0}
.info-box__title{font:600 15px/1 var(--font-body);margin-bottom:12px}
.info-box p{font-size:15px;margin-bottom:8px}

/* Article CTA (legacy block — present in OLD pages, replaced by .report-cta in NEW) */
.article-cta{background:var(--primary);color:var(--paper);border-radius:var(--radius-lg);padding:40px;margin:48px 0;text-align:center}
.article-cta h3{color:var(--paper);font-size:22px;margin-bottom:12px}
.article-cta p{color:rgba(255,255,255,0.85);margin-bottom:20px}
.article-cta .btn{display:inline-flex;padding:12px 28px;background:var(--surface);color:var(--primary);border-radius:var(--radius);font:600 15px/1 var(--font-body)}
.article-cta .btn:hover{transform:translateY(-2px)}

/* FAQ accordion — MOVED to the central stylesheet (BP-F4, 2026-07-21):
   deploy/assets/design-system.final10.css, section "FAQ ACCORDION,
   formalized into the central sheet". Classes are unchanged (.article-faq,
   .faq-item, <details>/<summary>) — no page markup needs to change, and the
   central sheet loads on every page that used to load this file, so the
   rendered result here is identical. See that file's comment for the full
   rationale (dominant site-wide markup pattern, ADD-ONLY coexistence with
   the older .faq-item block, and the 4-page incidental side effect). */

/* Snapshot grid */
.snapshot{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:32px 0}
.snapshot__item{background:var(--grey-100);padding:16px;border-radius:var(--radius)}
.snapshot__label{font:500 12px/1 var(--font-body);text-transform:uppercase;letter-spacing:.04em;color:var(--grey-500);margin-bottom:6px}
.snapshot__value{font:700 16px/1.3 var(--font-body);color:var(--ink)}

/* Visa table */
.visa-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
.visa-table th{background:var(--grey-100);padding:12px 16px;text-align:left;font:600 13px/1 var(--font-body);text-transform:uppercase;letter-spacing:.03em;color:var(--grey-500);border-bottom:2px solid rgba(0,0,0,.1)}
.visa-table td{padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.06);vertical-align:top}
.visa-table tr:hover{background:var(--primary-10)}
.visa-table .prog-name{font-weight:600;color:var(--ink)}
@media(max-width:768px){.visa-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* Cost of living cards */
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:24px 0}
.col-card{background:var(--grey-100);border-radius:var(--radius-lg);padding:20px}
.col-card__city{font:700 18px/1.2 var(--font-display);margin-bottom:12px}
.col-card__row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:14px}
.col-card__row:last-child{border-bottom:none}

/* Download grid */
.download-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:24px 0}
.download-card{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);transition:all var(--duration-normal,200ms) var(--ease-out);text-decoration:none;color:inherit}
.download-card:hover{border-color:var(--primary);background:var(--primary-10)}
.download-card__icon{font-size:24px;flex-shrink:0}
.download-card__title{font:600 14px/1.3 var(--font-body);color:var(--ink)}
.download-card__format{font:400 12px/1 var(--font-body);color:var(--grey-500)}

/* Explore More */
.explore-more{margin:48px 0;padding:32px;background:var(--grey-100);border-radius:var(--radius-lg)}
.explore-more h2{font-size:22px;margin-bottom:16px}
.explore-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.explore-more li{margin:0}
.explore-more a{display:block;padding:10px 16px;background:var(--surface);border:1px solid rgba(0,0,0,0.08);border-radius:var(--radius);font:500 14px/1.4 var(--font-body);transition:all var(--duration-normal,200ms) var(--ease-out)}
.explore-more a:hover{border-color:var(--primary);background:var(--primary-10)}

/* AI summary (visually hidden, harvested by AI/bots) */


.wte-nd{cursor:help;border-bottom:1px dotted currentColor;opacity:.72}
.wte-nd:hover,.wte-nd:focus{opacity:1}
/* ── country-redesign.css ── */
/* ============================================================
   country-redesign.css — applies new design language (homepage/
   reports/guide style) to country + blog pages.

   Loaded AFTER country-base.css. Overrides via specificity + !important.

   What changes vs country-base.css:
     - Body bg: warm cream (var(--cream))
     - Body font: Inter
     - H1/H2: Fraunces with clamp() sizing + italic em accent
     - Article header: bigger spacing, no border, italic em emphasis
     - Article body h2/h3: Fraunces, bigger, lighter weight
     - Snapshot card: cream tint, larger numbers, accent italic detail
     - Visa table / Col grid / Download grid: rounder corners, softer borders
     - FAQ accordions: cleaner lines, accent + sign

   Touches NO JS. Class names preserved.
   ============================================================ */

/* ---------- BODY / TYPOGRAPHY ---------- */
body {
  background: var(--cream, #F5F1E8) !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  color: var(--ink, #0C2E2B);
  line-height: 1.65 !important;
}

main h1,
.article-header h1 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: clamp(34px, 4vw, 56px) !important;
  font-weight: 600 !important;
  color: var(--ink, #0C2E2B);
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-variation-settings: "opsz" 80 !important;
  font-optical-sizing: auto !important;
  text-wrap: balance;
  max-width: none !important;
}
main h1 em,
.article-header h1 em {
  font-style: italic !important;
  font-weight: 600 !important;
  color: var(--accent, #B5521F) !important;
}

main h2,
.article-body h2,
.article-faq h2,
.explore-more h2 {
  /* Regra de escala 2026-06-10: Fraunces só >=40px (h1); h2 = Inter bold */
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  font-weight: 700 !important;
  color: var(--ink, #0C2E2B);
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  margin: 56px 0 16px !important;
  text-align: left !important;
}
main h1,
.article-header h1 {
  text-align: left !important;
}
.article-header,
.article-body {
  text-align: left !important;
}
main h2 em,
.article-body h2 em {
  font-style: italic !important;
  color: var(--accent, #B5521F) !important;
}

main h3,
.article-body h3 {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink, #0C2E2B);
  margin: 32px 0 10px !important;
  letter-spacing: -0.01em !important;
}

p, .article-body p {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--grey-700, #3D4451);
}

/* ---------- ARTICLE HEADER ---------- */
.article-header {
  border-bottom: none !important;
  padding: 56px 0 24px !important;
  margin-bottom: 32px !important;
}
.article-header__tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: var(--paper, #FFFFFF) !important;
  color: var(--accent, #B5521F) !important;
  border: 1px solid rgba(12, 46, 43, 0.1) !important;
  font: 600 var(--text-label,12px)/1 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: 999px !important;
}
.article-header__meta {
  font-family: var(--font-body, 'Inter') !important;
  font-size: 13px !important;
  color: var(--grey-500, #6B7280) !important;
}

/* ---------- KEY-TAKEAWAY (intro callout) ---------- */
.key-takeaway {
  background: var(--paper, #FFFFFF) !important;
  border-left: 3px solid var(--accent, #B5521F) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 20px 24px !important;
  margin: 24px 0 32px !important;
  box-shadow: 0 1px 3px rgba(12, 46, 43, 0.04) !important;
}
.key-takeaway strong {
  color: var(--accent, #B5521F) !important;
  font: 600 var(--text-label,12px)/1 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}
.key-takeaway p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--ink, #0C2E2B) !important;
  margin-top: 8px !important;
}

/* ---------- COUNTRY SUB-NAV (chip row) ---------- */
.country-subnav {
  border-bottom: 1px solid rgba(12, 46, 43, 0.06) !important;
  padding-bottom: 16px !important;
  margin: 24px 0 32px !important;
}
.country-subnav a {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.1) !important;
  color: var(--ink, #0C2E2B) !important;
  padding: 8px 14px !important;
  font: 500 13px/1 var(--font-body, 'Inter') !important;
}
.country-subnav a:hover {
  border-color: var(--accent, #B5521F) !important;
  color: var(--accent, #B5521F) !important;
}

/* ---------- SNAPSHOT GRID ---------- */
.snapshot {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  margin: 32px 0 40px !important;
}
.snapshot__item {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  box-shadow: 0 1px 2px rgba(12, 46, 43, 0.03) !important;
}
.snapshot__label {
  color: var(--grey-500, #6B7280) !important;
  font: 500 var(--text-label,12px)/1.2 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 8px !important;
}
.snapshot__value {
  font: 600 22px/1.2 var(--font-display, 'Fraunces', Georgia, serif) !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.02em !important;
}

/* ---------- VISA / SALARY TABLES ---------- */
/* Wrap any visa-table/salary-table in a scrollable container so columns can
   breathe on narrow viewports without clipping. The table itself uses
   table-layout: auto so columns size to content, with a min-width that
   triggers horizontal scroll on small screens. */
.visa-table,
.salary-table {
  width: 100% !important;
  min-width: 720px !important;
  border-collapse: collapse !important;
  background: var(--paper, #FFFFFF) !important;
  font-size: 14px !important;
  border: 1px solid rgba(12, 46, 43, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(12, 46, 43, 0.05) !important;
  table-layout: auto !important;
  /* DO NOT add overflow:hidden here — clips horizontal scroll on the wrapping div */
}
/* Wrap with horizontal scroll container if not already wrapped */
.article-body > .visa-table,
.article-body > .salary-table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.visa-table th,
.salary-table th {
  background: var(--cream, #F5F1E8) !important;
  font: 600 var(--text-label,12px)/1.3 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--grey-700, #3D4451) !important;
  padding: 14px 14px !important;
  border-bottom: 2px solid rgba(12, 46, 43, 0.1) !important;
  text-align: left !important;
  white-space: nowrap !important;
  vertical-align: bottom !important;
}
.visa-table td,
.salary-table td {
  padding: 14px 14px !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.06) !important;
  color: var(--ink, #0C2E2B) !important;
  vertical-align: top !important;
  line-height: 1.5 !important;
}
.visa-table tr:last-child td,
.salary-table tr:last-child td {
  border-bottom: none !important;
}
.visa-table tr:hover td,
.salary-table tr:hover td {
  background: rgba(181, 82, 31, 0.03) !important;
}
/* De-emphasize placeholder/empty cells (—, N/A, 0) — classified by td-classifier.js */
.visa-table td.td--empty,
.salary-table td.td--empty {
  color: var(--grey-300, #C8CCD2) !important;
  font-style: italic !important;
}
.visa-table .prog-name {
  font-weight: 600 !important;
  min-width: 180px !important;
  max-width: 280px !important;
}
.visa-table .prog-name a {
  color: var(--accent, #B5521F) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(181, 82, 31, 0.3) !important;
  padding-bottom: 1px !important;
}
.visa-table .prog-name a:hover {
  border-bottom-color: var(--accent, #B5521F) !important;
}
/* The pre-existing wrapping div with overflow-x:auto inline — make sure it works */
div[style*="overflow-x:auto"] {
  margin: 24px 0 !important;
  border-radius: 12px !important;
}
div[style*="overflow-x:auto"] .visa-table,
div[style*="overflow-x:auto"] .salary-table {
  margin: 0 !important;
}

/* ---------- VISA TABLE HIERARCHY (DES-040, site-wide since 2026-07-21) ----------
   Applied by assets/visa-table-hierarchy.js at runtime — the DOM rows are
   the same server-rendered rows, just re-grouped. Pure presentation, no
   fact is added, changed, or removed. */
.visa-table__featured {
  margin: 20px 0 4px !important;
  padding: 16px 18px !important;
  background: var(--accent-light, #FDF0EA) !important;
  border: 1px solid var(--accent-20, rgba(168, 74, 32, .2)) !important;
  border-radius: var(--radius-lg, 12px) !important;
}
.visa-table__featured-head {
  font: 600 12px/1.3 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--accent, #A84A20) !important;
  margin-bottom: 10px !important;
}
.visa-table__featured-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.visa-table__featured-item {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(168, 74, 32, .25) !important;
  border-radius: var(--radius-pill, 999px) !important;
  padding: 6px 14px !important;
  font: 500 13px/1.3 var(--font-body, 'Inter') !important;
  color: var(--ink, #0C2E2B) !important;
}
/* DSR-009 (b), 2026-07-21: each pill is now a link to the route's own
   /pathways/ page — additive rule only, the pill's own box styling above
   is untouched. */
.visa-table__featured-item a {
  color: inherit !important;
  text-decoration: none !important;
  display: block !important;
}
.visa-table__featured-item a:hover,
.visa-table__featured-item a:focus-visible {
  text-decoration: underline !important;
}
/* Group header rows inserted between tbody sections */
.visa-table__group-row th {
  background: var(--primary-10, #EDF5F3) !important;
  color: var(--primary, #1A5C50) !important;
  font: 600 12px/1.3 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: 10px 14px !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(26, 92, 80, .15) !important;
  border-top: 1px solid rgba(26, 92, 80, .1) !important;
}
.visa-table__group:first-of-type .visa-table__group-row th {
  border-top: none !important;
}
.visa-table__group-row .visa-table__group-count {
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  /* DSR-020 (2026-07-21): opacity:.72 removed — it was dimming an already-AA
     color (--primary on --primary-10, 7.05:1) down to 3.67:1 (needs 4.5).
     De-emphasis is still achieved via font-weight/no-uppercase alone. */
}
/* De-emphasize rows where almost nothing is published yet — a macro-level
   companion to td-classifier.js's per-cell .td--empty treatment */
.visa-table tr[data-wte-score="0"] td,
.visa-table tr[data-wte-score="1"] td {
  color: var(--grey-500, #5A6470) !important;
}
.visa-table tr[data-wte-score="0"] .prog-name,
.visa-table tr[data-wte-score="1"] .prog-name {
  font-weight: 500 !important;
  color: var(--grey-700, #3D4451) !important;
}

/* ---------- DSR-009 SAMPLE (2026-07-21): in-table featured band + per-row
   «own page» chip. Rendered by visa-table-hierarchy.js ONLY on tables that
   carry data-wte-featured-band (sample: countries/portugal.html) — these
   selectors match nothing anywhere else. Tokens only; the accent family is
   used deliberately (same voice as the existing featured strip). The
   --state-* tokens exist but encode data-verification states, not an
   editorial highlight — semantically wrong here, so not used. */
.visa-table__band-row th {
  background: var(--accent-light, #FDF0EA) !important;
  color: var(--accent, #A84A20) !important;
  font: 600 12px/1.3 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: 10px 14px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--accent-20, rgba(168, 74, 32, .2)) !important;
}
.visa-table__band-row .visa-table__band-count {
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  /* DSR-020 (2026-07-21): opacity:.72 removed — same fix as .visa-table__group-count
     above (--accent on --accent-light is 5.14:1 unmuted, was 3.1:1 dimmed). */
}
.visa-table__band td {
  background: var(--accent-light, #FDF0EA) !important;
}
.visa-table__band tr td:first-child {
  border-left: 3px solid var(--accent, #A84A20) !important;
}
.visa-table__band tr:last-child td {
  border-bottom: 2px solid var(--accent-20, rgba(168, 74, 32, .2)) !important;
}
/* The «own page» chip-link inside the Program cell (band or grouped rows).
   Beats the generic .prog-name a rule on specificity — no !important war. */
.visa-table .prog-name a.visa-table__ownpage {
  display: inline-block !important;
  margin-top: 4px !important;
  padding: 2px 10px !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid var(--accent-20, rgba(168, 74, 32, .25)) !important;
  border-bottom: 1px solid var(--accent-20, rgba(168, 74, 32, .25)) !important;
  border-radius: var(--radius-pill, 999px) !important;
  font: 600 12px/1.5 var(--font-body, 'Inter') !important;
  color: var(--accent, #A84A20) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.visa-table .prog-name a.visa-table__ownpage:hover,
.visa-table .prog-name a.visa-table__ownpage:focus-visible {
  background: var(--accent-light, #FDF0EA) !important;
  border-color: var(--accent, #A84A20) !important;
}

/* ---------- COL GRID (cost-of-living cards) ---------- */
.col-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
  margin: 24px 0 32px !important;
}
.col-card {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 12px !important;
  padding: 22px 24px !important;
  box-shadow: 0 1px 2px rgba(12, 46, 43, 0.03) !important;
}
.col-card__city {
  font: 600 18px/1.2 var(--font-display, 'Fraunces', Georgia, serif) !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.06) !important;
}
.col-card__row {
  font-size: 13px !important;
  border-bottom: none !important;
  padding: 4px 0 !important;
  color: var(--grey-700, #3D4451) !important;
}
.col-card__row span:last-child {
  color: var(--ink, #0C2E2B) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ---------- INFO-BOX (financial requirements etc) ---------- */
.info-box {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.08) !important;
  border-radius: 12px !important;
  padding: 22px 26px !important;
  margin: 24px 0 !important;
}
.info-box__title {
  font: 600 14px/1 var(--font-body, 'Inter') !important;
  color: var(--accent, #B5521F) !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.info-box p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin-bottom: 6px !important;
}

/* ---------- DOWNLOAD GRID ---------- */
.download-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  margin: 24px 0 !important;
}
.download-card {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.08) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  transition: all 0.2s !important;
}
.download-card:hover {
  border-color: var(--accent, #B5521F) !important;
  background: rgba(181, 82, 31, 0.02) !important;
  transform: translateY(-1px) !important;
}
.download-card__title {
  font: 600 13px/1.3 var(--font-body, 'Inter') !important;
  color: var(--ink, #0C2E2B) !important;
}
.download-card__format {
  font-size: var(--text-label,12px) !important;
  color: var(--grey-500, #6B7280) !important;
}

/* ---------- EXPLORE MORE ---------- */
.explore-more {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 14px !important;
  padding: 36px 32px !important;
  margin: 56px 0 !important;
}
.explore-more h2 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
.explore-more ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.explore-more a {
  background: var(--cream, #F5F1E8) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font: 500 13px/1.4 var(--font-body, 'Inter') !important;
  color: var(--ink, #0C2E2B) !important;
}
.explore-more a:hover {
  border-color: var(--accent, #B5521F) !important;
  background: var(--paper, #FFFFFF) !important;
  color: var(--accent, #B5521F) !important;
}

/* ---------- FAQ ACCORDIONS ---------- */
.article-faq {
  margin: 56px 0 !important;
}
.faq-item {
  border: none !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.08) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
.faq-item:first-of-type {
  border-top: 1px solid rgba(12, 46, 43, 0.08) !important;
}
.faq-item summary {
  padding: 22px 0 !important;
  font: 500 17px/1.3 var(--font-display, 'Fraunces', Georgia, serif) !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.01em !important;
}
.faq-item summary:hover {
  background: transparent !important;
  color: var(--accent, #B5521F) !important;
}
.faq-item summary::after {
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--accent, #B5521F) !important;
}
.faq-item p {
  padding: 0 0 22px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--grey-700, #3D4451) !important;
  max-width: 720px !important;
}

/* ---------- ARTICLE-CTA (legacy green box) — soften ---------- */
.article-cta {
  background: var(--ink, #0C2E2B) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 40px 36px !important;
  margin: 48px 0 !important;
  text-align: center !important;
}
.article-cta h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  margin: 0 0 14px !important;
}
.article-cta p {
  color: rgba(255,255,255,0.92) !important;
  font: 400 16px/1.55 var(--font-body, Inter, system-ui, sans-serif) !important;
  margin: 0 auto 22px !important;
  max-width: 540px !important;
}
.article-cta .btn {
  background: var(--accent, #B5521F) !important;
  color: #fff !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
.article-cta .btn:hover {
  background: var(--accent-hover, #9A4519) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* ---------- AI SUMMARY (visually hidden) — preserve ---------- */


/* ---------- BREADCRUMB ----------
   REMOVED 2026-08-02 (DSC-034). This sheet used to redeclare the breadcrumb
   with !important, so the design lived in TWO places and only the ~1.960 pages
   that load this file got it — one of the reasons ten variants grew in silence.
   The single source is now the `.breadcrumb` block in design-system.final10.css,
   which every breadcrumb page loads. Do not re-add breadcrumb rules here. */

/* ---------- LINKS in body content ---------- */
.article-body a:not(.btn):not(.download-card):not(.tier__cta) {
  color: var(--accent, #B5521F) !important;
  border-bottom: 1px solid rgba(181, 82, 31, 0.25) !important;
  text-decoration: none !important;
  padding-bottom: 1px !important;
  transition: border-color 0.15s !important;
}
.article-body a:not(.btn):not(.download-card):not(.tier__cta):hover {
  border-bottom-color: var(--accent, #B5521F) !important;
}

/* ---------- Mobile tweaks ---------- */
@media(max-width: 768px) {
  .article-header {
    padding: 32px 0 16px !important;
  }
  main h1, .article-header h1 {
    font-size: 30px !important;
  }
  main h2, .article-body h2 {
    font-size: 22px !important;
    margin: 40px 0 12px !important;
  }
  .snapshot__item {
    padding: 14px 16px !important;
  }
  .snapshot__value {
    font-size: 18px !important;
  }
}

/* 2026-06-10: o sledgehammer p{--grey-700 !important} pintava de escuro o subtítulo dos heros escuros (savings-runway parecia vazia). Heros são sempre dark neste sistema. */
.hero p{color:rgba(255,255,255,0.85) !important}
.hero .kick{color:#E8A87C !important}

/* ============================================================
   2026-07-02 — UNIFORM LINK-OBJECT RULES, shared scope (Task 59 V2.1
   replication). This file is loaded by countries + blog + /for/ pages,
   and it is also where the article-link rule above (border-bottom +
   padding-bottom:1px !important on every .article-body <a>) crushes
   anything that is visually a button or a banner. Two uniform objects:

   object B — RESOURCE STRIP: div[data-xlink] cross-link banners.
   Constrained, left-aligned card chrome — never a centered text dump.
   (blog: 175 pages · /for/: 137 · countries: 1,652 — countries also
   carry a duplicate of these rules in country.css; identical, no
   conflict.) */
div[data-xlink]{max-width:min(1080px,calc(100vw - 40px)) !important;margin:14px auto !important;text-align:left !important;background:var(--paper,#FFFFFF) !important;border:1px solid rgba(12,46,43,0.08) !important;border-radius:var(--radius-lg,12px) !important;padding:16px 22px !important;box-shadow:var(--shadow-xs)}
div[data-xlink] a{display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 15px/1.45 var(--font-body,'Inter',sans-serif) !important;color:var(--primary,#1A5C50) !important;border-bottom:none !important;padding-bottom:0 !important}
div[data-xlink] a:hover{color:var(--primary-60,#267A6B) !important}

/* object C — BUTTON-ANCHOR: any inline-styled <a> with bg + radius is a
   button, not a text link: flex-centered label, real padding, no
   border-bottom hack, white text. Specificity (0,5,1) beats the
   (0,4,1) !important article-link rule regardless of file order. */
.article-body a[style*="background:var(--primary)"][style*="border-radius"]:not(.x-spec1):not(.x-spec2):not(.x-spec3),
.article-body a[style*="background: var(--primary)"][style*="border-radius"]:not(.x-spec1):not(.x-spec2):not(.x-spec3),
.article-body a[style*="background:var(--accent)"][style*="border-radius"]:not(.x-spec1):not(.x-spec2):not(.x-spec3),
.article-body a[style*="background: var(--accent)"][style*="border-radius"]:not(.x-spec1):not(.x-spec2):not(.x-spec3){
 display:inline-flex !important;align-items:center !important;justify-content:center !important;
 padding:12px 24px !important;border-bottom:none !important;line-height:1 !important;color:#fff !important}

/* object C2 — DSR-020 (2026-07-21): object C above uses `[style*="background:var(--primary)"]`,
   a literal substring that requires the var() to close immediately — it never matched the
   1.880-page `background:var(--primary,#1A5C50)` FALLBACK form (comma before the close-paren),
   so those buttons fell through to the (0,4,1) article-link rule and rendered
   accent-orange-on-primary-green (1.36:1, needs 4.5). Same gap for `--accent,`. */
.article-body a[style*="background:var(--primary,"][style*="border-radius"]:not(.x-spec1):not(.x-spec2):not(.x-spec3),
.article-body a[style*="background: var(--primary,"][style*="border-radius"]:not(.x-spec1):not(.x-spec2):not(.x-spec3),
.article-body a[style*="background:var(--accent,"][style*="border-radius"]:not(.x-spec1):not(.x-spec2):not(.x-spec3),
.article-body a[style*="background: var(--accent,"][style*="border-radius"]:not(.x-spec1):not(.x-spec2):not(.x-spec3){
 display:inline-flex !important;align-items:center !important;justify-content:center !important;
 padding:12px 24px !important;border-bottom:none !important;line-height:1 !important;color:#fff !important}
/* object C3 — same gap, WHITE-fill button variant (1.125 pages): needs dark
   text, not white (the button already carries its own color:var(--primary)
   inline — it just needs to not be overridden to accent). */
.article-body a[style*="background:var(--white)"][style*="border-radius"]:not(.x-spec1):not(.x-spec2):not(.x-spec3),
.article-body a[style*="background: var(--white)"][style*="border-radius"]:not(.x-spec1):not(.x-spec2):not(.x-spec3){
 display:inline-flex !important;align-items:center !important;justify-content:center !important;
 padding:12px 24px !important;border-bottom:none !important;line-height:1 !important;color:var(--primary,#1A5C50) !important}

/* object D — DSR-020 (2026-07-21): text links (no bg/radius) INSIDE a dark
   .article-cta / .report-cta box that were deliberately inline-styled
   color:rgba(255,255,255,0.85) (readable white on the box's dark-green fill)
   got clobbered by the article-link rule above into var(--accent) #A84A20 —
   orange-on-dark-green, contrast 2.54 (needs 4.5). 2.668 pages carry this
   "Get Your Free Verdict"/"Get Your Full Report" mid-CTA link. Specificity
   (0,5,1) (.article-cta/.report-cta + a + attr + 3 :not()) beats the (0,4,1)
   article-link rule, same technique as object C above. */
.article-cta a[style*="color:rgba(255,255,255"]:not(.btn):not(.download-card):not(.tier__cta),
.report-cta a[style*="color:rgba(255,255,255"]:not(.btn):not(.download-card):not(.tier__cta){
 color:rgba(255,255,255,0.85) !important;border-bottom:none !important;text-decoration:underline !important}
/* ── blog.css ── */
/* ============================================================
   blog.css — wheretoemigrate.io
   Editorial overlay for /blog/ posts.

   Loaded order in templates/blog/blog-passthrough.html:
     1. design-system.final8.css   (tokens)
     2. country-base.css           (article skeleton)
     3. country-redesign.css       (Fraunces + cream + accent)
     4. blog.css                   (THIS FILE — blog-only finishes)

   Why this file exists:
   country-redesign.css covers the article-* classes shared with
   /countries/. The blog-only patterns below are NOT in that file:
     - .hero-blog (short-post variant)
     - .article-author (inline-styled by builder)
     - .related-articles / .related-grid / .related-card
     - .affiliate-tools / .affiliate-grid / .aff-card / .aff-tag
     - .data-sources / .sources
     - .faq-section / .faq-list (long-post FAQ variant)
     - .cta / .cta-secondary / .btn-primary (long-post bottom CTA)
     - .flag-img / .hero-img / .data-table

   Plus a small set of structural unifiers so all 3 hero patterns
   and 3 body wrappers produce the same reading width + rhythm.

   Conventions:
   - Use !important where defeating an inline style; not otherwise.
   - All colors via tokens (var(--cream), var(--ink), var(--accent),
     var(--paper), var(--grey-700), var(--grey-500), var(--grey-100)).
   - max-width: 720px for body prose; 1100px for grids and CTAs.
   ============================================================ */


/* ============================================================
   1.  STRUCTURAL UNIFIERS
   Three hero patterns + three body wrappers all roll up to the
   same reading width and vertical rhythm.
   ============================================================ */

main#main {
  background: var(--cream, #F5F1E8);
  padding-bottom: 96px;
}

/* Hero variants — give each the same outer container behaviour */
.hero-blog,
.article-header,
main#main > header:not(.site-header) {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 32px;
  text-align: left;
}
@media(max-width:768px){
  .hero-blog,
  .article-header,
  main#main > header:not(.site-header) {
    padding: 32px 20px 16px;
  }
}

/* Bare H1 in long-post header (no .article-header class) */
main#main > header:not(.site-header) h1 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink, #0C2E2B);
  text-wrap: balance;
  margin: 0 0 16px;
}

/* Body wrapper unifier — the three patterns are:
     <article class="article-body">       (short)
     <article class="container article-body">  (medium)
     <article>                              (long, no class)
   All should sit in the same column. */
main#main > .container,
main#main > article,
main#main article.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  background: transparent;
}
main#main > .container > article.article-body,
main#main > .container > .article-body {
  max-width: none;
  padding: 0;
}
@media(max-width:768px){
  main#main > .container,
  main#main > article,
  main#main article.article-body {
    padding: 0 20px;
  }
}

/* Long-post bare <article> still needs the body type rules */
main#main > article > h2,
main#main > article > p,
main#main > article > ul,
main#main > article > ol {
  max-width: 720px;
}
main#main > article {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  color: var(--grey-700, #3D4451);
  line-height: 1.7;
}
main#main > article > p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 18px;
}
main#main > article > h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  color: var(--ink, #0C2E2B);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 56px 0 16px;
}
main#main > article > h2 em {
  font-style: italic;
  color: var(--accent, #B5521F);
}
main#main > article > h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink, #0C2E2B);
  letter-spacing: -0.01em;
  margin: 32px 0 10px;
}


/* ============================================================
   2.  HERO-BLOG VARIANT (short-post pattern)
   <section class="hero-blog">
     <div class="container">
       <span class="tag">…</span>
       <h1>…</h1>
       <div class="article-author">…</div>
       <div class="meta"><span>…</span><span>…</span></div>
     </div>
   </section>
   ============================================================ */
.hero-blog {
  background: transparent;
}
.hero-blog > .container {
  max-width: none;
  padding: 0;
}
.hero-blog .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--paper, #FFFFFF);
  color: var(--accent, #B5521F);
  border: 1px solid rgba(12, 46, 43, 0.1);
  font: 600 var(--text-label,12px)/1 var(--font-body, 'Inter');
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hero-blog h1 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink, #0C2E2B);
  text-wrap: balance;
  margin: 0 0 16px;
}
.hero-blog h1 em {
  font-style: italic;
  color: var(--accent, #B5521F);
}
.hero-blog .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-body, 'Inter');
  font-size: 13px;
  color: var(--grey-500, #6B7280);
  margin-top: 4px;
}
.hero-blog .meta span {
  position: relative;
}
.hero-blog .meta span + span::before {
  content: '·';
  position: absolute;
  left: -12px;
  color: var(--grey-300, #C8CCD2);
}


/* ============================================================
   3.  FLAG IMAGE IN H1 (medium-post pattern)
   <h1><img class="flag-img" …/>Banking in Kuwait …</h1>
   ============================================================ */
h1 .flag-img,
.article-header h1 .flag-img {
  display: inline-block;
  vertical-align: middle;
  width: 38px;
  height: 28px;
  margin-right: 14px;
  margin-bottom: 6px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(12, 46, 43, 0.15);
  object-fit: cover;
}


/* ============================================================
   4.  HERO IMAGE (long-post pattern)
   <img class="hero-img" …/>
   ============================================================ */
.hero-img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 8px auto 40px;
  border-radius: 14px;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  box-shadow: 0 2px 12px rgba(12, 46, 43, 0.06);
}
@media(max-width:768px){
  .hero-img {
    border-radius: 10px;
    margin: 4px auto 28px;
  }
}


/* ============================================================
   5.  ARTICLE AUTHOR BLOCK
   Builder emits inline-styled grey panel. Defeat with !important.
   <div class="article-author" style="background:#F9FAFB; …">
     <img …/>
     <div>
       <p>By <a>Antonio Mira</a></p>
       <p>Founder · Tracks visa policy …</p>
     </div>
   </div>
   ============================================================ */
.article-author {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 18px 0 28px !important;
  padding: 14px 18px !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(12, 46, 43, 0.02);
}
.article-author > img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  border: 2px solid var(--cream, #F5F1E8);
}
.article-author > div {
  flex: 1;
  min-width: 0;
}
.article-author p,
.article-author > div > p {
  margin: 0 !important;
  font-family: var(--font-body, 'Inter') !important;
}
.article-author > div > p:first-child {
  font: 600 14px/1.3 var(--font-body, 'Inter') !important;
  color: var(--ink, #0C2E2B) !important;
}
.article-author > div > p:first-child a {
  color: var(--ink, #0C2E2B) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.25) !important;
  padding-bottom: 1px;
}
.article-author > div > p:first-child a:hover {
  border-bottom-color: var(--accent, #B5521F) !important;
  color: var(--accent, #B5521F) !important;
}
.article-author > div > p:nth-child(2),
.article-author > div > p + p {
  font: 400 12px/1.5 var(--font-body, 'Inter') !important;
  color: var(--grey-500, #6B7280) !important;
  margin-top: 2px !important;
}
/* DES-032 (2026-07-16): 3rd line = revision date + editorial-standards link.
   Must beat the p+p rule above (equal specificity, wins on source order) so
   it stays visually secondary to the role line, not identical to it.
   DSR-020 (2026-07-21): --grey-400 was never a registered token (only ever
   used here, as a fallback-only var()) — its #9CA3AF fallback was 2.43:1 on
   this box's #F9FAFB bg (needs 4.5). #6B7280 (4.63:1) keeps this line lighter
   than the #5A6470 role line above it (visual hierarchy intact) while
   clearing AA. Affects 994 posts. */
.article-author > div > p:nth-child(3) {
  font: 400 var(--text-label,12px)/1.4 var(--font-body, 'Inter') !important;
  color: #6B7280 !important;
  margin-top: 4px !important;
}
.article-author > div > p:nth-child(3) a {
  color: inherit !important;
  text-decoration: underline !important;
}
.article-author > div > p:nth-child(3) a:hover {
  color: var(--ink, #0C2E2B) !important;
}


/* ============================================================
   6.  KEY-TAKEAWAY — defeat pre-redesign blue inline styles
   Long post emits:
     <div class="key-takeaway" style="background:var(--primary-light,#e8f5e9);
       border-left:4px solid var(--primary,#2563EB);…">
   The inline border-left:4px var(--primary,#2563EB) bypasses
   country-redesign.css. Force the brand orange.
   ============================================================ */
.key-takeaway[style] {
  background: var(--paper, #FFFFFF) !important;
  border: none !important;
  border-left: 3px solid var(--accent, #B5521F) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 20px 24px !important;
  margin: 24px 0 32px !important;
  box-shadow: 0 1px 3px rgba(12, 46, 43, 0.04) !important;
}
.key-takeaway[style] strong {
  color: var(--accent, #B5521F) !important;
  font: 600 var(--text-label,12px)/1 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}


/* ============================================================
   7.  DATA TABLE (medium-post variant)
   <table class="data-table">
     <thead><tr><th>Feature</th><th>Details</th></tr></thead>
     <tbody>…</tbody>
   </table>
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(12, 46, 43, 0.08);
  border-radius: 12px;
  overflow: hidden;
  margin: 24px 0;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(12, 46, 43, 0.04);
}
.data-table th {
  background: var(--cream, #F5F1E8);
  font: 600 var(--text-label,12px)/1.3 var(--font-body, 'Inter');
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-700, #3D4451);
  padding: 14px;
  text-align: left;
  border-bottom: 2px solid rgba(12, 46, 43, 0.1);
}
.data-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(12, 46, 43, 0.06);
  color: var(--ink, #0C2E2B);
  vertical-align: top;
  line-height: 1.5;
}
.data-table tr:last-child td {
  border-bottom: none;
}


/* ============================================================
   8.  FAQ — long-post variant (.faq-section + .faq-list)
   Long post emits <details> with hardcoded inline styles. Strip
   them and re-style to match the redesigned .faq-item pattern.
   ============================================================ */
.faq-section,
section.faq-section {
  margin: 56px auto !important;
  max-width: 720px;
  padding: 0 24px;
}
.faq-section > h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  color: var(--ink, #0C2E2B);
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}
.faq-list {
  border-top: 1px solid rgba(12, 46, 43, 0.08);
}
.faq-list > details[style] {
  border: none !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.08) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.faq-list > details[style] > summary[style] {
  padding: 22px 0 !important;
  font: 500 17px/1.3 var(--font-display, 'Fraunces', Georgia, serif) !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.01em !important;
  list-style: none !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}
.faq-list > details[style] > summary[style]::-webkit-details-marker {
  display: none;
}
.faq-list > details[style] > summary[style]::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--accent, #B5521F);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-list > details[open][style] > summary[style]::after {
  content: '\2212';
}
.faq-list > details[style] > summary[style]:hover {
  color: var(--accent, #B5521F) !important;
}
.faq-list > details[style] > p,
.faq-list > details[style] > div {
  font-family: var(--font-body, 'Inter') !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--grey-700, #3D4451) !important;
  padding: 0 0 22px !important;
  margin: 0 !important;
}


/* ============================================================
   9.  RELATED ARTICLES / RELATED PAGES
   <section class="related-articles"> or <div class="related-articles">
     <h3>…</h3>
     <div class="related-grid">
       <a class="related-card" href="…">
         <span class="related-card__title">…</span>
         <span class="related-card__arrow">→</span>
       </a>
     </div>
   </section>
   ============================================================ */
.related-articles,
.related-pages {
  max-width: 1100px;
  margin: 56px auto;
  padding: 0 24px;
}
.related-articles h3,
.related-pages h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink, #0C2E2B);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.related-card {
  display: flex !important;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(12, 46, 43, 0.08);
  border-radius: 10px;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.08) !important;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.related-card:hover {
  border-color: var(--accent, #B5521F) !important;
  background: rgba(181, 82, 31, 0.02);
  transform: translateY(-1px);
}
.related-card__title {
  font: 500 14px/1.4 var(--font-body, 'Inter');
  color: var(--ink, #0C2E2B);
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.related-card__arrow {
  font-size: 18px;
  color: var(--accent, #B5521F);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.related-card:hover .related-card__arrow {
  transform: translateX(2px);
}

/* Related-pages list variant */
.related-pages ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
}
.related-pages li {
  margin: 0;
}
.related-pages a {
  display: block;
  padding: 10px 14px;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(12, 46, 43, 0.06);
  border-radius: 8px;
  font: 500 13px/1.4 var(--font-body, 'Inter');
  color: var(--ink, #0C2E2B);
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 46, 43, 0.06);
}
.related-pages a:hover {
  border-color: var(--accent, #B5521F);
  color: var(--accent, #B5521F);
}


/* ============================================================
   10.  AFFILIATE TOOLS (long-post)
   <div class="affiliate-tools">
     <h3>Tools we recommend</h3>
     <p>…</p>
     <div class="affiliate-grid">
       <a class="aff-card" href="…">
         <strong>Wise</strong>
         <span>…</span>
         <div class="aff-tag">Money transfers</div>
       </a>
     </div>
     <p class="aff-disc">Affiliate disclosure: …</p>
   </div>
   ============================================================ */
.affiliate-tools {
  max-width: 720px;
  margin: 56px auto;
  padding: 28px 24px;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(12, 46, 43, 0.06);
  border-radius: 14px;
}
.affiliate-tools > h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink, #0C2E2B);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.affiliate-tools > p {
  font-size: 14px;
  color: var(--grey-500, #6B7280);
  margin: 0 0 20px;
}
.affiliate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.aff-card {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--cream, #F5F1E8);
  border: 1px solid rgba(12, 46, 43, 0.06);
  border-radius: 10px;
  text-decoration: none !important;
  transition: border-color 0.15s, transform 0.15s;
  border-bottom: 1px solid rgba(12, 46, 43, 0.06) !important;
}
.aff-card:hover {
  border-color: var(--accent, #B5521F) !important;
  transform: translateY(-1px);
}
.aff-card strong {
  font: 600 14px/1 var(--font-body, 'Inter');
  color: var(--ink, #0C2E2B);
}
.aff-card span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey-700, #3D4451);
}
.aff-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 10px;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(12, 46, 43, 0.08);
  border-radius: 999px;
  font: 500 var(--text-label,12px)/1.4 var(--font-body, 'Inter');
  color: var(--grey-500, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.aff-disc {
  font: 400 12px/1.5 var(--font-body, 'Inter');
  color: var(--grey-500, #6B7280);
  margin: 0;
  font-style: italic;
}


/* ============================================================
   11.  DATA SOURCES BLOCK
   Builder emits inline-styled grey #F2F3F5 box. Quiet it.
   <div class="data-sources" style="background:#F2F3F5">
   ============================================================ */
.data-sources[style] {
  margin: 32px auto !important;
  max-width: 720px;
  padding: 22px 24px !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 12px !important;
  font-family: var(--font-body, 'Inter') !important;
  font-size: 13px !important;
  color: var(--grey-700, #3D4451) !important;
}
.data-sources h3,
.data-sources[style] h3 {
  font: 600 var(--text-label,12px)/1 var(--font-body, 'Inter') !important;
  color: var(--accent, #B5521F) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 10px !important;
}
.data-sources ul,
.data-sources[style] ul {
  margin: 0 !important;
  padding-left: 18px !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}
.data-sources a,
.data-sources[style] a {
  color: var(--accent, #B5521F) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(181, 82, 31, 0.25);
}
.data-sources p,
.data-sources[style] p {
  font-size: 12px !important;
  color: var(--grey-500, #6B7280) !important;
  margin: 8px 0 0 !important;
}


/* ============================================================
   12.  OFFICIAL SOURCES (long-post)
   <section class="sources">
     <h2>Official Sources</h2>
     <ul>…</ul>
   </section>
   ============================================================ */
section.sources {
  max-width: 720px;
  margin: 48px auto;
  padding: 0 24px;
}
section.sources h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink, #0C2E2B);
  margin: 0 0 16px;
}
section.sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
section.sources li {
  padding: 10px 14px;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(12, 46, 43, 0.06);
  border-radius: 8px;
  font-size: 14px;
}
section.sources a {
  color: var(--accent, #B5521F);
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 82, 31, 0.25);
}


/* ============================================================
   13.  SECONDARY CTA (long-post)
   <section class="cta">
     <h2>Find Your Best Country to Emigrate</h2>
     <p>…</p>
     <a class="btn-primary" href="/assess">Get Your Free Verdict</a>
     <p class="cta-secondary">Already completed …</p>
   </section>
   ============================================================ */
section.cta {
  max-width: 1100px;
  margin: 56px auto;
  padding: 48px 36px;
  background: var(--ink, #0C2E2B);
  border-radius: 14px;
  text-align: center;
  color: var(--paper, #FFFFFF);
}
section.cta h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(24px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--paper, #FFFFFF) !important;
  margin: 0 0 12px !important;
  text-align: center !important;
}
section.cta > p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 22px;
}
section.cta .btn-primary,
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--accent, #B5521F);
  color: #fff !important;
  border-radius: 8px;
  text-decoration: none !important;
  font: 600 15px/1 var(--font-body, 'Inter');
  transition: background 0.15s, transform 0.15s;
  border-bottom: none !important;
}
section.cta .btn-primary:hover,
.btn-primary:hover {
  background: var(--accent-hover, #9A4519);
  transform: translateY(-1px);
}
.cta-secondary {
  margin: 18px 0 0 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
.cta-secondary a {
  color: var(--paper, #FFFFFF) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
  padding-bottom: 1px;
  text-decoration: none !important;
}
.cta-secondary a:hover {
  border-bottom-color: var(--paper, #FFFFFF) !important;
}


/* ============================================================
   14.  ARTICLE-CTA — defeat long-post inline override
   Long post forces:
     <div class="article-cta" style="background:var(--primary,#1A5C50);…">
       <a class="btn" style="background:#fff;color:var(--primary,#1A5C50)">
   country-redesign.css already sets .article-cta but inline wins.
   ============================================================ */
.article-cta[style] {
  background: var(--ink, #0C2E2B) !important;
  border-radius: 14px !important;
  padding: 44px 36px !important;
  margin: 48px auto !important;
  max-width: 1100px !important;
  text-align: center !important;
  color: var(--paper, #FFFFFF) !important;
}
.article-cta[style] h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--paper, #FFFFFF) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 12px !important;
}
.article-cta[style] p {
  color: rgba(255, 255, 255, 0.78) !important;
  margin: 0 0 22px !important;
  font-size: 15px !important;
}
.article-cta[style] .btn,
.article-cta[style] a.btn[style] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 28px !important;
  background: var(--accent, #B5521F) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font: 600 15px/1 var(--font-body, 'Inter') !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: background 0.15s, transform 0.15s !important;
}
.article-cta[style] .btn:hover,
.article-cta[style] a.btn[style]:hover {
  background: var(--accent-hover, #9A4519) !important;
  transform: translateY(-1px) !important;
}


/* ============================================================
   15.  INLINE "RELATED" FOOTER STRIP
   Short post emits <div style="background:#f9fafb"><strong>Related:</strong> …</div>
   Quiet the inline grey, reuse cream + accent.
   ============================================================ */
main#main article.article-body > div[style*="background:#f9fafb"],
main#main article.article-body > div[style*="background:#F9FAFB"] {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
  margin: 32px 0 0 !important;
}
main#main article.article-body > div[style*="background:#f9fafb"] a,
main#main article.article-body > div[style*="background:#F9FAFB"] a {
  color: var(--accent, #B5521F) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(181, 82, 31, 0.25);
}


/* ============================================================
   16.  SHARE ROW (long-post inline) — hide
   <div style="display:flex;gap:8px;margin-top:32px;padding-top:16px;border-top:1px solid rgba(0,0,0,0.1)"><span>Share:</span>…</div>
   We chose not to support share buttons in v1 (audit decision).
   Hide the row visually but keep DOM intact in case JS hooks
   exist somewhere.
   ============================================================ */
main#main > article > div[style*="border-top:1px solid rgba(0,0,0,0.1)"]:has(> span:first-child) {
  display: none !important;
}


/* ============================================================
   17.  PROSE POLISH — first paragraph emphasis + blockquote
   ============================================================ */
main#main article.article-body > p:first-of-type,
main#main > article > p:first-of-type {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink, #0C2E2B);
}
main#main article.article-body blockquote,
main#main > article blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--accent, #B5521F);
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink, #0C2E2B);
}
main#main article.article-body ul,
main#main article.article-body ol,
main#main > article > ul,
main#main > article > ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
main#main article.article-body li,
main#main > article > ul li,
main#main > article > ol li {
  margin-bottom: 6px;
  line-height: 1.65;
}


/* ============================================================
   18.  META LINE ("Last updated…")
   ============================================================ */
main#main > article p.meta,
.article-body p.meta {
  font: 400 13px/1.5 var(--font-body, 'Inter');
  color: var(--grey-500, #6B7280);
  margin: 0 0 24px;
  font-style: italic;
}


/* ============================================================
   19.  MOBILE FINISHES
   ============================================================ */
@media(max-width:768px) {
  .hero-blog h1,
  main#main > header:not(.site-header) h1 {
    font-size: 28px;
  }
  main#main > article > h2 {
    font-size: 22px;
    margin: 40px 0 12px;
  }
  .article-author {
    flex-direction: row !important;
    padding: 12px 14px !important;
  }
  .article-author > div > p:first-child {
    font-size: 13px !important;
  }
  .article-author > div > p:nth-child(2) {
    font-size: var(--text-label,12px) !important;
  }
  .related-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  section.cta,
  .article-cta[style] {
    padding: 32px 22px !important;
  }
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 2026-05-07 — extracted from /blog/index.html inline styles (was 1180+ inline duplicates) */
.bcat-group{margin-bottom:16px;border:1px solid rgba(12,46,43,0.08);border-radius:8px;padding:16px 20px;background:var(--cream,#F5F1E8)}
.bcat-summary{font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--ink);cursor:pointer;list-style:revert}
.bcat-count{color:var(--grey-500);font-weight:400;font-size:14px;font-family:var(--font-body)}
.bcat-grid{list-style:none;padding:16px 0 0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px}
.bcat-li{margin-bottom:6px}
.bcat-link{font:400 13px/1.4 var(--font-body);color:var(--ink);text-decoration:none;display:block;padding:4px 0;border-bottom:1px dotted rgba(12,46,43,0.08)}
.bcat-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.bcat-topic-link{font:500 14px/1.5 var(--font-body),system-ui,sans-serif;color:var(--primary);text-decoration:none}
.bcat-topic-link:hover{color:var(--accent)}

/* Phase 2.6 — Callout boxes for editorial annotations */
.callout-box{margin:24px 0;padding:18px 22px;border-left:4px solid var(--primary);background:var(--primary-10);border-radius:0 8px 8px 0}
.callout-box__title{font:700 12px/1 var(--font-body);letter-spacing:0.08em;text-transform:uppercase;color:var(--primary);margin-bottom:8px}
.callout-box__body{font:400 15px/1.55 var(--font-body);color:var(--ink)}
.callout-box--warn{border-left-color:#92400e;background:#FEF3C7}
.callout-box--warn .callout-box__title{color:#92400e}
.callout-box--success{border-left-color:#065F46;background:#D1FAE5}
.callout-box--success .callout-box__title{color:#065F46}
.callout-box--quote{border-left-color:var(--text-body);background:var(--grey-100);font-style:italic}
.callout-box--quote .callout-box__title{color:var(--text-body)}

/* 2026-07-02 (follow-up 59 V2.1): mesmo bug do country.css — regras de link
   com padding-bottom:1px esmagam âncoras-botão inline nos posts. Object C. */
.article-body a[style*="background:"][style*="border-radius"],
article a[style*="background:"][style*="border-radius"]{
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff !important;border-bottom:none !important;padding-bottom:12px !important}

/* ---- post-aside base (2026-07-21, reskin dos índices) ----------------------
   blog-elevated.css já estiliza .post-aside, mas só sob o ancestor
   `.blog-elevated` (body class dos POSTS individuais). Os hubs/índices do blog
   (blog/index.html) não levam essa body class — teriam o módulo sem qualquer
   estilo se só usassem a classe. Esta regra dá a MESMA forma (fundo/borda/raio,
   tipografia do título) SEM exigir `.blog-elevated`, para as duas ilhas
   inline que só existem no hub (fontes oficiais + "recently published").
   blog-elevated.css carrega DEPOIS e usa !important, por isso continua a
   vencer nos posts — esta é só a base para quem não tem essa classe. */
.post-aside{max-width:760px;margin:40px auto 0;padding:22px 26px;
  background:#fff;border:1px solid #E7E5DE;border-radius:12px;
  box-shadow:0 1px 2px rgba(12,46,43,.03);box-sizing:border-box}
.post-aside>*:first-child{margin-top:0}
.post-aside>*:last-child{margin-bottom:0}
.post-aside>h2:first-child,.post-aside>h3:first-child{
  display:block;font:600 12px/1 var(--font-data,'DM Mono',monospace);
  letter-spacing:.12em;text-transform:uppercase;color:var(--primary,#1A5C50);margin:0 0 14px}
@media(max-width:640px){.post-aside{margin-left:20px;margin-right:20px;max-width:none}}
/* DSR-020 (2026-07-21): the category tab bar (.btb__tab) is authored as
   <a class="btb__tab ...">, so the sitewide `a:not(...)` prose-link rule in
   design-system.final10.css (~L553, specificity (0,14,1) — .btb__tab alone is
   only (0,1,0)/(0,2,0)) was overriding these colours (embedded per-page in
   deploy/blog/index.html's own <style>, out of this PR's edit scope) even
   though that embedded block already has the CORRECT intended values.
   !important here restores them without touching the blog HTML:
   inactive tab was green-on-white via the override, its count span (color:
   inherit;opacity:.75) diluted that further to ~4.18:1; active tab (dark
   pill) was green-on-dark-ink at 1.86:1 (needs 4.5/3 respectively). */
.btb__tab{color:var(--grey-700,#3D4451) !important}
.btb__tab:hover{color:var(--ink,#0C2E2B) !important}
.btb__tab.is-active,.btb__tab.is-active:hover{color:#fff !important}
.btb__tab.is-active span{color:#fff !important;opacity:1 !important}

/* DSR-020 (2026-07-21): baked inline colour:#64748b (977 posts) / #6B7280
   (993 posts, newsletter capture widget subtitle) at 4.22:1 / 4.28:1 on the
   --paper-warm page/widget background, just under the 4.5 AA floor.
   grey-700 clears it (8.69:1) via override — no HTML edit needed. */
.article-header__meta{color:var(--grey-700,#3D4451) !important}
.nl-capture p{color:var(--grey-700,#3D4451) !important}

/* DSR-020 (2026-07-21): "Mid-article CTA" (75 posts) is an unclassed
   `<div style="background:var(--primary);color:var(--white)...">` — its own
   text colour is correctly white/rgba-white inline, but with no class to
   carry !important, country-redesign.css's blanket `p{color:grey-700
   !important}` clobbered both child <p>s to dark-on-dark-green (1.25:1).
   Matched by the exact literal inline-style signature already used
   consistently by object C/C2/C3 above, rather than editing the post HTML. */
div[style*="background:var(--primary);color:var(--white);border-radius:12px"] p{color:#fff !important}

/* DSR-020 (2026-07-21): byline box (994 posts), 2nd line's "Editorial
   standards" link — inline color:#9CA3AF (2.53:1 on #F9FAFB), and unlike the
   3rd line above it had no `a{color:...}` sub-rule at all to carry an
   override. inherit picks up the p:nth-child(2) rule's grey-500 (5.76:1),
   matching the same pattern already used for the 3rd line's link below. */
.article-author > div > p:nth-child(2) a{color:inherit !important;text-decoration:underline !important}

/* DSR-020 (2026-07-21): /blog/ index-only newsletter block (.bs__sub, embedded
   in deploy/blog/index.html's own <style> — that file is out of this PR's
   edit scope, fixed here via the class instead). Dark --ink card:
   h4 em was var(--accent) #A84A20 on #0C2E2B (2.54:1) — accent-on-dark
   token clears it (8.31:1). The GDPR disclaimer <p> has an INLINE
   color:#6B7280 (more specific than the class rule's rgba(255,255,255,.7),
   so it wins) at 3.01:1, and its "privacy" link inline color:#1A5C50 at
   1.86:1 + no non-colour distinction (link-in-text-block). */
.bs__sub h4 em{color:var(--accent-on-dark,#FFB37A) !important}
.bs__sub p[style*="color:#6B7280"]{color:rgba(255,255,255,0.7) !important}
.bs__sub p[style*="color:#6B7280"] a{color:#fff !important;text-decoration:underline !important}

/* DSR-060 (2026-07-21): last residual from DSR-020's axe pass (381→1),
   documented there as "1 achado por resolver" — the Pexels photo-credit link
   in /blog/index.html's own footer sat inside an unclassed <span>, sharing
   .site-footer__bottom's grey-500-on-both text+link with text-decoration:none
   (0 contrast delta from surrounding text = axe link-in-text-block, WCAG
   1.4.1). HTML now carries class="photo-credit" on the <a> (2 classes beats
   .site-footer__bottom a's 1 class + 1 type on specificity). Underline
   restores the non-colour distinction; color:var(--ink) on var(--paper-deep)
   (~oklch 97%) is ~13:1, comfortably past AA's 4.5:1 for this 10px caps text
   — chosen over leaving grey-500 (already ~5.4:1, technically AA) so the
   link is ALSO visually distinct in colour, not just contrast-legal. */
.site-footer__bottom .photo-credit{text-decoration:underline;color:var(--ink)}
.site-footer__bottom .photo-credit:hover{color:var(--accent)}

/* SEO26-072/074/078: source-reviewed conditions precede practical content. */
.blog-elevated .reader-conditions{margin:28px 0 36px;padding:22px 0;border-top:1px solid #bed3cd;border-bottom:1px solid #bed3cd}
.blog-elevated .reader-conditions h2{margin:0 0 8px;color:#103d34;font-size:clamp(23px,3vw,30px)}
.blog-elevated .reader-conditions p{margin:0 0 14px;color:#52645e;font-size:15px;line-height:1.65}
.blog-elevated .reader-conditions ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 30px;margin:0;padding-left:24px}
.blog-elevated .reader-conditions li{padding:3px 0 3px 4px;break-inside:avoid;line-height:1.5;font-size:15px}
.blog-elevated .reader-conditions li::marker{color:#a84a20;font-weight:700}
.blog-elevated .reader-conditions a{color:#174c40;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#91aaa1;overflow-wrap:anywhere}
.blog-elevated .reader-conditions a:hover{color:#a84a20;text-decoration-color:currentColor}
.blog-elevated .reader-conditions a:focus-visible,.blog-elevated .reader-example a:focus-visible{outline:3px solid #a84a20;outline-offset:4px;border-radius:2px}
.blog-elevated article section[id^="condition-"]{scroll-margin-top:110px}
.blog-elevated .reader-example{margin:32px 0;padding:24px 26px;border-left:3px solid #a84a20;background:#f4f0e7;color:#183a31}
.blog-elevated .reader-example h2{margin:0 0 14px;font-size:25px;color:#103d34}
.blog-elevated .reader-example p{font-size:16px;line-height:1.7}
.blog-elevated .reader-example ol{padding-left:23px;line-height:1.75}
.blog-elevated .reader-example a{color:#174c40;text-underline-offset:3px}
@media(max-width:640px){.blog-elevated .reader-conditions ol{grid-template-columns:minmax(0,1fr);gap:8px}.blog-elevated .reader-example{padding:20px 18px}.blog-elevated article section[id^="condition-"]{scroll-margin-top:96px}}
/* ── blog-elevated.css ── */
/* ═══════════════════════════════════════════════════════════════════════════
   blog-elevated.css — template de blog estilo revista (2026-07-19, founder:
   "não podemos ser standard"). Foto-hero grande com título sobreposto + chip de
   meta no canto. Depende dos tokens de design-system.final10.css.

   CASCATA: carrega POR ÚLTIMO (a seguir a print.css) e as regras de override
   são scoped em `.blog-elevated` (sobe a especificidade acima de `main h1` e
   `.article-header` do country-redesign.css, que usam !important). A foto vem de
   /assets/blog/hero/{slug}.jpg (fallback: gradiente verde quando ainda não há).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- HERO ---------------------------------------------------------------- */
/* Banner FULL-BLEED (largura 100%) com altura controlada — nada de aspect-ratio
   aqui: o <main> é flex-column e não estica os filhos, e aspect-ratio+max-height
   fazia a largura ser derivada da altura (hero a meio ecrã). width:100% garante
   full-bleed; a altura fica num intervalo editorial (não domina, não é fita). */
.blog-elevated .blog-hero{position:relative;width:100%;box-sizing:border-box;height:clamp(360px,38vw,480px);display:flex;align-items:flex-end;
  background:linear-gradient(180deg,rgba(12,46,43,.05) 0%,rgba(12,46,43,.24) 40%,rgba(12,46,43,.88) 100%),
    var(--blog-hero-photo,linear-gradient(135deg,var(--primary,#1A5C50),var(--ink,#0C2E2B)));
  background-size:cover;background-position:center 40%;margin:0}
.blog-elevated .blog-hero__in{max-width:860px;margin:0 auto;padding:0 28px 52px;width:100%}
.blog-elevated .blog-hero__eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 var(--text-label,12px)/1 var(--font-data);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-on-dark,#FFB37A);margin:0 0 16px}
.blog-elevated .blog-hero__eyebrow img{width:26px;height:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.blog-elevated .blog-hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(32px,5vw,54px);line-height:1.03;letter-spacing:-.02em;color:#fff!important;margin:0!important;text-wrap:balance;max-width:20ch;display:block;text-shadow:0 1px 30px rgba(0,0,0,.38)}
.blog-elevated .blog-hero h1 .flag-img{display:none}  /* a bandeira vive no eyebrow */
.blog-elevated .blog-hero__meta{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:12px;background:rgba(12,46,43,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:9px 16px;font:600 12px/1 var(--font-data);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.blog-elevated .blog-hero__meta .dot{width:4px;height:4px;border-radius:50%;background:var(--accent-on-dark,#FFB37A)}
.blog-elevated .blog-hero__credit{position:absolute;bottom:9px;right:13px;font:500 10px/1 var(--font-data);color:rgba(255,255,255,.5)}

/* ---- COLUNA ABAIXO DO HERO (autor + bridge + corpo) --------------------- */
/* O header (perde tag+h1 → foram para o hero) fica com autor + quiz-bridge.
   Dois formatos no site: .article-header (posts novos) e .hero-blog (listicles
   antigos) — tratam-se igual. */
.blog-elevated .article-header,
.blog-elevated .hero-blog{max-width:760px!important;margin:0 auto!important;padding:30px 28px 0!important;border:0!important;text-align:left!important}
.blog-elevated .hero-blog > .container{max-width:none!important;padding:0!important;margin:0!important}
.blog-elevated .article-body{max-width:760px!important;margin:0 auto!important;padding:6px 28px 72px!important}
.blog-elevated .article-author{margin:6px 0 20px!important}
.blog-elevated .article-header__meta{margin-top:4px}
/* CTA do quiz-bridge: fundo laranja → texto SEMPRE branco. Nos listicles o
   botão cai dentro de .article-body e o country-redesign.css
   `.article-body a:not(.btn):not(.download-card):not(.tier__cta)` (esp. 0,0,4,1
   !important) pintava-o de laranja → texto invisível sobre laranja (CTA pago
   morto). Preciso de esp. >4 classes: uso atributos que o pill sempre tem. */
.blog-elevated .quiz-bridge a[href][style*="background"][style*="border-radius"]{color:#fff!important}
@media(max-width:640px){
  .blog-elevated .blog-hero h1{font-size:30px}
  .blog-elevated .blog-hero__in{padding:0 20px 36px}
  .blog-elevated .article-header,.blog-elevated .hero-blog,.blog-elevated .article-body{padding-left:20px!important;padding-right:20px!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÓDULOS PÓS-ARTIGO — cartão ÚNICO (2026-07-20, founder: "nada casa com nada").
   Os 4 blocos que se empilhavam depois do artigo (fontes, recently-published,
   faixa de ferramentas, bridge de país) tinham 4 fundos e 3 larguras inline
   diferentes + emojis. Agora partilham .post-aside: MESMA largura (alinha com a
   coluna 760), MESMO fundo, MESMA borda/raio → tudo casa. Sem emojis.
   !important porque o markup original tinha estilo inline (esp. 1,0,0,0) e há
   regras antigas em blog.css/country-redesign p/ .ymyl-sources etc.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Largura dos módulos: MAIS larga que o texto (760) mas IGUAL entre todos, para
   emoldurar a coluna de leitura e a página não parecer só um corredor central.
   O texto do artigo mantém-se estreito (leitura); os cartões respiram a 900. */
.blog-elevated .post-aside{max-width:900px!important;margin:26px auto 0!important;padding:22px 26px!important;
  background:#fff!important;border:1px solid #E7E5DE!important;border-radius:12px!important;box-sizing:border-box!important;
  box-shadow:0 1px 2px rgba(12,46,43,.03)!important}
/* TODOS os módulos pós-artigo à MESMA largura 900, centrados no ecrã (breakout),
   quer estejam dentro do article-body (760) quer soltos no main. É isto que os faz
   "casar": mesma largura E mesmo eixo central. O texto do artigo fica nos 760. */
.blog-elevated .related-articles,
.blog-elevated .article-cta,
.blog-elevated .ymyl-disclaimer,
.blog-elevated .nl-capture,
.blog-elevated .article-faq,
.blog-elevated .data-sources,
.blog-elevated .affiliate-tools,
.blog-elevated .wte-related-guides,
.blog-elevated .blog-email-cta,
.blog-elevated .related-pages{max-width:none!important;width:min(900px,calc(100vw - 48px))!important;
  margin-left:0!important;margin-right:0!important;position:relative;left:50%;transform:translateX(-50%);box-sizing:border-box!important}
/* FAQ: caixa a 900 mas o texto das respostas fica legível (não a toda a largura) */
.blog-elevated .article-faq details,.blog-elevated .article-faq .faq-item{max-width:none}
.blog-elevated .related-articles{margin-top:40px!important}
.blog-elevated .related-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;gap:14px!important}
/* REGRA do CTA dos cartões (founder 20-jul): texto + seta CENTRADOS no cartão,
   como um botão. Simétrico e igual em todos os cartões. */
.blog-elevated .related-card{justify-content:center!important;text-align:center!important;gap:8px!important;min-height:64px!important}
.blog-elevated .related-card__title{flex:0 1 auto!important}
.blog-elevated .post-aside > *:first-child{margin-top:0!important}
.blog-elevated .post-aside > *:last-child{margin-bottom:0!important}
/* título interno uniforme (Fontes / Recently published) */
.blog-elevated .post-aside__h,
.blog-elevated .post-aside > h2:first-child,
.blog-elevated .post-aside > h3:first-child,
.blog-elevated .post-aside > strong:first-child{display:block;font:600 var(--text-label,12px)/1 var(--font-data,'DM Mono',monospace)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--primary,#1A5C50)!important;margin:0 0 14px!important}
/* faixa de ferramentas: era um <p> emoji; agora cartão com links a par */
.blog-elevated .post-aside--tools{font:500 14px/1.5 var(--font-body,Inter,system-ui,sans-serif)!important;color:var(--ink,#0C2E2B)!important}
.blog-elevated .post-aside--tools a{color:var(--primary,#1A5C50)!important;text-decoration:none;font-weight:600}
.blog-elevated .post-aside--tools a:hover{text-decoration:underline}
/* bridge de país: link centrado, sem emoji, mesma moldura */
.blog-elevated .post-aside--bridge{text-align:left!important;font:600 15px/1.45 var(--font-body,Inter,system-ui,sans-serif)!important}
.blog-elevated .post-aside--bridge a{color:var(--primary,#1A5C50)!important;text-decoration:none}
.blog-elevated .post-aside--bridge a:hover{text-decoration:underline}
/* a bridge de país fica FORA do <main>; o padding-bottom de 96px do main criava
   um vão morto de 122px antes dela. Zera-se p/ o gap ficar nos mesmos 26px que
   separam os outros cartões. A bridge ganha margem inferior p/ respirar do footer. */
.blog-elevated main#main{padding-bottom:0!important}
.blog-elevated .post-aside--bridge{margin-bottom:40px!important}
@media(max-width:640px){.blog-elevated .post-aside{margin-left:20px!important;margin-right:20px!important;max-width:none!important}}

/* ═══════════════════════════════════════════════════════════════════════════
   BARE-CLASS FOR .quiz-bridge / .ymyl-disclaimer / .wte-eeat (2026-08-06,
   MOVE-FROM-REBUILD). These 3 blocks never had a class-only rule anywhere —
   every page that uses them (blog + countries, ~1,000+) carries the box
   styling as a per-page style="" attribute baked in by the generator, not a
   shared rule. build_move_from_guide.py is the first generator to emit the
   class WITHOUT the inline style, so it needs a real home for the same
   values. Existing pages are UNCHANGED: their inline style="" (specificity
   1,0,0,0) still wins over a plain class selector here — this only "shows
   through" on markup that carries the class with no competing style=.
   Values below are copy-exact from the inline pattern blog.css/countries
   already ship (see blog.css §5/§6 and design-system.final10.css's
   .article-cta) — same tokens where a token exists (--primary-10/-30/--ink/
   --primary/--font-body), same literal hex where no token exists yet
   (ymyl-disclaimer's blue tint, wte-eeat's neutral card — sitewide as-is,
   not introduced here). */
.blog-elevated .quiz-bridge{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--primary-10);border:1px solid var(--primary-30);border-radius:10px;padding:12px 16px;margin:14px 0 18px;font:400 14px/1.5 var(--font-body);color:var(--ink)}
.blog-elevated .quiz-bridge__cta{background:var(--primary)!important;color:#fff!important;text-decoration:none!important;font-weight:600!important;padding:9px 16px!important;border-radius:8px!important;white-space:nowrap!important}

.blog-elevated .ymyl-disclaimer{background:#EEF4FF;border:1px solid #BBD0F5;border-radius:10px;padding:12px 16px;margin:16px 0 20px;font-size:14px;line-height:1.6;color:#1E3A66}

.blog-elevated .wte-eeat{margin:44px 0 8px;padding:20px 22px;border:1px solid #e3e8e6;border-radius:12px;background:#f7faf9;font:400 15px/1.6 var(--font-body);color:#25332f}
.blog-elevated .wte-eeat__label{margin:0 0 6px;font-weight:700;color:var(--primary)}
.blog-elevated .wte-eeat__bio{margin:0 0 12px}
.blog-elevated .wte-eeat__links{margin:0;font-size:13.5px;color:#4a5a55}
.blog-elevated .wte-eeat__links a{color:var(--primary)}

/* AUD-UX-05 (29-set): em ecrãs estreitos URLs compridos nas listas de fontes e o bloco de CTA faziam o
   documento ter scroll horizontal (medido a 320 px em 11 de 1009 artigos). Só quebra linhas; não muda o desenho. */
.blog-elevated article,
.blog-elevated .related-pages,
.blog-elevated section.cta{overflow-wrap:anywhere}
.blog-elevated section.cta{max-width:100%!important;box-sizing:border-box!important}
/* ── editorial-families.css ── */
/*
 * whereTOemigrate editorial families — 2026-09-01
 *
 * One brand, six distinct reading modes:
 *   visas   = route taxonomy
 *   blog    = research desk
 *   compare = decision instrument
 *   for     = profession dossiers
 *   cases   = case files
 *
 * The HTML stamp is applied by scripts/pages/apply_editorial_family_design.py.
 * Selectors are deliberately body-scoped so this sheet cannot restyle unrelated
 * site families. Orange remains an action/status colour, never body decoration.
 */

.wte-family{background:var(--surface)}
.wte-family :is(h1,h2,h3){text-wrap:balance}
.wte-family :is(a,button,select):focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.wte-family .site-header__cta:focus-visible{outline-color:var(--primary-30)}

/* Route taxonomy — /visas/ hub */
.wte-family--visas.wte-family-index main.container{overflow:clip}
.wte-family--visas.wte-family-index .article-header{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);grid-template-areas:"title meta" "title takeaway";gap:18px 64px;align-items:end;margin:0 0 64px;padding:64px 0 56px;background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);color:var(--paper)}
.wte-family--visas.wte-family-index .article-header::after{content:"";position:absolute;right:2px;top:54px;bottom:54px;width:1px;background:rgba(208,232,227,.22)}
.wte-family--visas.wte-family-index .article-header__tag{display:none}
.wte-family--visas.wte-family-index .article-header h1{grid-area:title;max-width:720px;margin:0;color:var(--paper)!important;font-size:clamp(48px,5.6vw,72px);line-height:1.01;letter-spacing:-.045em}
.wte-family--visas.wte-family-index .article-header .key-takeaway{grid-area:takeaway;margin:0!important;padding:20px 22px!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.2)!important;border-left:1px solid rgba(255,255,255,.2)!important;border-radius:0!important;color:var(--paper)}
.wte-family--visas.wte-family-index .article-header .key-takeaway strong{color:var(--primary-30)!important}
.wte-family--visas.wte-family-index .article-header .key-takeaway p{color:var(--paper)!important}
.wte-family--visas.wte-family-index .article-header__meta{grid-area:meta;align-self:start;margin:2px 0 0;color:rgba(255,255,255,.68)!important;font:600 12px/1.55 var(--font-data);letter-spacing:.055em;text-transform:uppercase}
.wte-family--visas.wte-family-index .article-body>p:first-child{max-width:780px;margin:0 0 54px;font-size:19px;line-height:1.72;color:var(--grey-700)}
.wte-family--visas.wte-family-index .article-body>h2{margin-bottom:24px;font-size:30px}
.wte-family--visas.wte-family-index .visa-grid{counter-reset:visa;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin:0 0 64px;border-top:1px solid rgba(12,46,43,.2)}
.wte-family--visas.wte-family-index .visa-card{counter-increment:visa;position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-areas:"number name" ". desc" ". action";column-gap:18px;align-content:start;min-height:190px;padding:24px 4px;border:0;border-bottom:1px solid rgba(12,46,43,.18);border-radius:0;background:transparent;box-shadow:none}
.wte-family--visas.wte-family-index .visa-card::before{content:counter(visa,decimal-leading-zero);grid-area:number;align-self:center;color:var(--primary);font:600 12px/1 var(--font-data);letter-spacing:.06em}
.wte-family--visas.wte-family-index .visa-card__icon{display:none}
.wte-family--visas.wte-family-index .visa-card__name{grid-area:name;align-self:center;font:600 21px/1.2 var(--font-display);color:var(--ink)}
.wte-family--visas.wte-family-index .visa-card__desc{grid-area:desc;margin-top:10px;font-size:14px;line-height:1.6;color:var(--grey-700)}
.wte-family--visas.wte-family-index .visa-card__link{grid-area:action;align-self:end;margin-top:14px;color:var(--primary);font:600 13px/1.4 var(--font-body)}
.wte-family--visas.wte-family-index .visa-card:hover{transform:none;background:rgba(208,232,227,.22);box-shadow:none}

/* Research desk — blog articles. The existing hub is intentionally preserved. */
.wte-family--blog.wte-family-detail .blog-hero{border-bottom:1px solid rgba(208,232,227,.28)}
.wte-family--blog.wte-family-detail .blog-hero__in{display:flex;flex-direction:column}
.wte-family--blog.wte-family-detail .blog-hero__eyebrow{margin:16px 0 0!important;color:rgba(255,255,255,.7)!important;text-transform:none!important;letter-spacing:.055em!important}
.wte-family--blog.wte-family-detail .article-body.container{max-width:760px;padding-top:48px}
.wte-family--blog.wte-family-detail .blog-review-note{max-width:760px;margin:38px auto 0;padding:18px 24px;background:var(--paper);border:1px solid rgba(12,46,43,.18);border-left:3px solid var(--primary);color:var(--ink)}
.wte-family--blog.wte-family-detail .blog-review-note strong{display:block;margin-bottom:6px;font:700 13px/1.4 var(--font-body)}
.wte-family--blog.wte-family-detail .blog-review-note p{margin:0;font:400 14px/1.6 var(--font-body)}
.wte-family--blog.wte-family-detail .article-body>h2{margin-top:64px;padding-top:22px;border-top:1px solid rgba(12,46,43,.16);font-size:clamp(28px,3.2vw,38px);line-height:1.14}
.wte-family--blog.wte-family-detail .article-body>h3{margin-top:38px;font-size:22px}
.wte-family--blog.wte-family-detail .article-body>p{font-size:17px;line-height:1.76}
.wte-family--blog.wte-family-detail main#main article :is(p,h3) a:not(.btn){text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:1px}
.wte-family--blog.wte-family-detail .cta>p{color:rgba(255,255,255,.84)!important}
.wte-family--blog.wte-family-detail .key-takeaway{border-radius:0!important;box-shadow:inset 0 -1px 0 rgba(12,46,43,.12)}
.wte-family--blog.wte-family-detail .data-sources{position:relative;margin-top:64px!important;padding:28px 30px!important;border:1px solid rgba(12,46,43,.16);border-radius:0!important;background:transparent!important}
.wte-family--blog.wte-family-detail .data-sources::before{content:"SOURCE LEDGER";display:block;margin-bottom:14px;color:var(--primary);font:600 12px/1 var(--font-data);letter-spacing:.09em}
.wte-family--blog.wte-family-detail .related-card{border-radius:0}

/* Decision instrument — /compare/ */
.wte-family--compare.wte-family-index main{overflow:clip}
.wte-family--compare.wte-family-index .page-header{position:relative;margin:0 0 0;padding:62px 0 92px;background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);color:var(--paper)}
.wte-family--compare.wte-family-index .page-header::after{content:"A  ↔  B";position:absolute;right:0;top:58px;color:rgba(208,232,227,.18);font:500 clamp(46px,8vw,108px)/1 var(--font-display);letter-spacing:-.06em}
.wte-family--compare.wte-family-index .page-header__tag{display:none}
.wte-family--compare.wte-family-index .page-header h1{position:relative;z-index:1;max-width:760px;margin:0 0 22px;color:var(--paper)!important;font-size:clamp(48px,5.7vw,74px);line-height:1.01;letter-spacing:-.045em}
.wte-family--compare.wte-family-index .page-header__subtitle{position:relative;z-index:1;max-width:700px;color:rgba(255,255,255,.74)!important;font-size:17px;line-height:1.7}
.wte-family--compare.wte-family-index .page-header .quiz-bridge{position:relative;z-index:2;max-width:760px;background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.2)!important;color:var(--paper)!important}
.wte-family--compare.wte-family-index .page-header .key-takeaway{display:none}
.wte-family--compare.wte-family-index #compareTool{position:relative;z-index:3;margin:-44px 0 64px!important;padding:28px 30px;border:1px solid rgba(12,46,43,.16);background:var(--paper);box-shadow:0 18px 48px rgba(12,46,43,.12)}
.wte-family--compare.wte-family-index #compareTool h2{margin-top:0;font-size:28px!important}
.wte-family--compare.wte-family-index #compareTool select{min-height:48px!important;border-color:rgba(12,46,43,.22)!important;border-radius:0!important}
.wte-family--compare.wte-family-index #compareTool button{min-height:48px;border-radius:0!important}
.wte-family--compare .cta-section h2,.wte-family--compare .cta-section p{color:var(--paper)!important}
.wte-family--compare.wte-family-detail .c-hero{position:relative;overflow:hidden}
.wte-family--compare.wte-family-detail .c-hero::after{content:"";position:absolute;left:50%;top:30px;bottom:30px;width:1px;background:rgba(208,232,227,.18)}
.wte-family--compare.wte-family-detail .c-hero__in{position:relative;z-index:1}
.wte-family--compare.wte-family-detail .c-hero__eyebrow,.wte-family--for.wte-family-detail .c-hero__eyebrow{display:block;margin:15px 0 0;color:rgba(255,255,255,.7);text-transform:none;letter-spacing:.055em}
.wte-family--compare.wte-family-detail .compare-country-links a{color:var(--primary)!important}
.wte-family--compare.wte-family-detail .compare-grid{gap:0;border:1px solid rgba(12,46,43,.16);background:var(--paper)}
.wte-family--compare.wte-family-detail .compare-card{border:0;border-radius:0;box-shadow:none}
.wte-family--compare .visa-table{border:1px solid rgba(12,46,43,.14);border-radius:0;box-shadow:none}
.wte-family--compare .visa-table th{background:var(--ink);color:var(--paper)}

/* Profession dossiers — /for/ */
.wte-family--for.wte-family-index main.container{overflow:clip}
.wte-family--for.wte-family-index .article-header{position:relative;margin:0 0 60px;padding:62px 0 54px;background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);color:var(--paper)}
.wte-family--for.wte-family-index .article-header__tag{display:none}
.wte-family--for.wte-family-index .article-header h1{max-width:860px;margin:0 0 22px;color:var(--paper)!important;font-size:clamp(50px,6vw,78px);line-height:1;letter-spacing:-.045em}
.wte-family--for.wte-family-index .article-header__meta{color:rgba(255,255,255,.66)!important;font:600 12px/1.5 var(--font-data);letter-spacing:.055em;text-transform:uppercase}
.wte-family--for.wte-family-index .article-header .ymyl-disclaimer{max-width:760px;background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.18)!important;color:var(--paper)!important}
.wte-family--for.wte-family-index .article-header .key-takeaway{max-width:760px;background:transparent!important;border:0!important;border-left:1px solid var(--primary-30)!important;border-radius:0!important;color:var(--paper)}
.wte-family--for.wte-family-index .article-header .key-takeaway strong{color:var(--primary-30)!important}
.wte-family--for.wte-family-index .article-header .key-takeaway p{color:var(--paper)!important}
.wte-family--for.wte-family-index .article-body>p:first-child{max-width:820px;margin-bottom:54px;font-size:19px;line-height:1.7}
.wte-family--for.wte-family-index .article-body>h2{margin:56px 0 18px;padding-bottom:12px;border-bottom:1px solid rgba(12,46,43,.2);font-size:30px}
.wte-family--for.wte-family-index .prof-grid{counter-reset:profession;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin:0}
.wte-family--for.wte-family-index .prof-card{counter-increment:profession;position:relative;min-height:90px;padding:20px 42px 18px 48px;border:0;border-bottom:1px solid rgba(12,46,43,.16);border-radius:0;background:transparent;box-shadow:none}
.wte-family--for.wte-family-index .prof-card::before{content:counter(profession,decimal-leading-zero);position:absolute;left:2px;top:25px;color:var(--primary);font:600 10px/1 var(--font-data);letter-spacing:.06em}
.wte-family--for.wte-family-index .prof-card::after{content:"→";position:absolute;right:4px;top:28px;color:var(--primary);font:500 18px/1 var(--font-data);transition:transform 180ms var(--ease-out)}
.wte-family--for.wte-family-index .prof-card:hover{transform:none;background:rgba(208,232,227,.22);box-shadow:none}
.wte-family--for.wte-family-index .prof-card:hover::after{transform:translateX(3px)}
.wte-family--for.wte-family-index .prof-card h3{margin:0 0 8px;font-size:18px}
.wte-family--for.wte-family-index .prof-card__link{font-size:12px}
.wte-family--for.wte-family-detail .c-hero{border-bottom:1px solid rgba(208,232,227,.24)}
.wte-family--for.wte-family-detail .c-hero__in{max-width:1120px}
.wte-family--for.wte-family-detail .article-body{max-width:900px}
.wte-family--for.wte-family-detail .article-author a[href*="editorial-standards"]{color:var(--primary)!important}
.wte-family--for.wte-family-detail .visa-table{border-radius:0;box-shadow:none}

/* Case files — /cases/ */
.wte-family--cases main{position:relative}
.wte-family--cases .case-index__head,.wte-family--cases .case-detail__head{position:relative;padding:58px 0 54px!important;background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);color:var(--paper)}
.wte-family--cases .case-index__head h1{max-width:760px;margin:0!important;color:var(--paper)!important;font-size:clamp(50px,6vw,78px)!important;line-height:1!important;letter-spacing:-.045em;text-align:left}
.wte-family--cases .case-index__head p{max-width:660px!important;margin:24px 0 0!important;color:rgba(255,255,255,.75)!important;text-align:left;font-size:18px!important}
.wte-family--cases .case-index__legend{justify-content:flex-start!important;margin:30px 0 38px!important;padding-bottom:24px;border-bottom:1px solid rgba(12,46,43,.18)}
.wte-family--cases .case-index__grid{counter-reset:casefile;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;border-top:1px solid rgba(12,46,43,.18);border-left:1px solid rgba(12,46,43,.18)}
.wte-family--cases .case-index__grid>a{counter-increment:casefile;position:relative;min-height:270px;padding:28px!important;border:0!important;border-right:1px solid rgba(12,46,43,.18)!important;border-bottom:1px solid rgba(12,46,43,.18)!important;border-radius:0!important;background:var(--paper)!important;box-shadow:none!important;transform:none!important}
.wte-family--cases .case-index__grid>a::before{content:"FILE " counter(casefile,decimal-leading-zero);position:absolute;right:28px;bottom:24px;color:var(--grey-500);font:600 10px/1 var(--font-data);letter-spacing:.08em}
.wte-family--cases .case-index__grid>a:hover{background:var(--primary-10)!important;box-shadow:none!important}
.wte-family--cases .case-flag-code{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:28px;padding:0 7px;border:1px solid rgba(12,46,43,.24);color:var(--ink);font:600 12px/1 var(--font-data);letter-spacing:.1em}
.wte-family--cases .case-detail__head .case-flag-code{border-color:rgba(208,232,227,.4);color:var(--primary-30)}
.wte-family--cases .case-index__grid h2,.wte-family--cases .case-index__grid h3{font-family:var(--font-display)!important;font-size:23px!important;line-height:1.16!important}
.wte-family--cases .case-index__grid p{font-size:14px!important}
.wte-family--cases .case-detail__head{margin-bottom:48px!important}
.wte-family--cases .case-detail__head h1{max-width:690px;margin:24px auto 18px!important;color:var(--paper)!important;font-size:clamp(42px,5vw,64px)!important;line-height:1.04!important;letter-spacing:-.04em}
.wte-family--cases .case-detail__head>p{color:rgba(255,255,255,.76)!important}
.wte-family--cases .case-detail__head .article-author{max-width:620px;margin:24px auto!important;background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.2)!important}
.wte-family--cases .case-detail__head .article-author p,.wte-family--cases .case-detail__head .article-author a{color:var(--paper)!important}
.wte-family--cases .case-detail__head .ymyl-disclaimer{max-width:660px;margin:18px auto!important;background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.2)!important;color:var(--paper)!important}
.wte-family--cases .case-detail>div:not(.case-detail__head){border-radius:0!important;box-shadow:none}
.wte-family--cases .case-detail h2{font-size:28px!important;letter-spacing:-.025em}
.wte-family--cases main div[style*="background:#0C2E2B"]>p{color:var(--paper)!important}

@media(max-width:900px){
  .wte-family--visas.wte-family-index .article-header{grid-template-columns:1fr;grid-template-areas:"title" "meta" "takeaway";gap:16px}
  .wte-family--visas.wte-family-index .article-header::after{display:none}
  .wte-family--compare.wte-family-index .page-header::after{opacity:.55}
  .wte-family--cases .case-index__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:768px){
  .wte-family .site-header__right{display:none}
  .wte-family .wte-burger{width:44px;height:44px}
  .wte-family--visas.wte-family-index .article-header,.wte-family--for.wte-family-index .article-header{padding:48px 0 44px}
  .wte-family--visas.wte-family-index .visa-grid,.wte-family--for.wte-family-index .prof-grid{grid-template-columns:1fr}
  .wte-family--compare.wte-family-index .page-header{padding:48px 0 76px}
  .wte-family--compare.wte-family-index #compareTool{padding:22px 20px}
  .wte-family--compare.wte-family-detail .c-hero::after{display:none}
  .wte-family--cases .case-index__head,.wte-family--cases .case-detail__head{padding:46px 0 42px!important}
  .wte-family--cases .case-index__grid{grid-template-columns:1fr!important}
}

@media(max-width:480px){
  .wte-family--blog.wte-family-detail .blog-review-note{margin:28px 20px 0;padding:16px 18px}
  .wte-family--blog.wte-family-detail .related-grid{grid-template-columns:minmax(0,1fr)!important}
  .wte-family--blog.wte-family-detail .related-card{min-width:0}
  .wte-family--blog.wte-family-detail .related-card__title{min-width:0;overflow-wrap:anywhere}
  .wte-family--visas.wte-family-index .article-header h1,.wte-family--for.wte-family-index .article-header h1,.wte-family--compare.wte-family-index .page-header h1,.wte-family--cases .case-index__head h1{font-size:44px!important}
  .wte-family--visas.wte-family-index .visa-card{grid-template-columns:36px minmax(0,1fr);column-gap:12px}
  .wte-family--cases .case-detail__head h1{font-size:40px!important}
  .wte-family--cases .case-index__grid>a{min-height:240px}
}

@media(prefers-reduced-motion:reduce){
  .wte-family--for.wte-family-index .prof-card::after{transition:none}
  .wte-family--for.wte-family-index .prof-card:hover::after{transform:none}
}

/* Approved reading rhythm: answer before promotion, compact editorial arrivals. */
.wte-family--blog .bh{padding:36px 0 28px!important}.wte-family--blog .bh__mark,.wte-family--blog .bh .bkick{display:none}.wte-family--blog .bh h1{font-size:clamp(36px,4.5vw,58px)!important;max-width:820px;margin-inline:auto;line-height:1.1!important}.wte-family--blog .bh__sub{max-width:740px;font-size:17px!important;margin-top:18px!important}.wte-family--blog .bsearch{margin-top:24px!important}.wte-family--blog .bh__ticks{margin-top:18px!important}.wte-family--blog.wte-family-detail .blog-hero{min-height:220px;max-height:380px}.wte-family--blog.wte-family-detail .blog-hero__in{padding-block:34px!important}.wte-family--blog.wte-family-detail .blog-hero h1{font-size:clamp(34px,4vw,58px)!important;line-height:1.12!important;max-width:900px}.wte-family--blog.wte-family-detail .article-body{max-width:760px;line-height:1.8}.wte-family--blog.wte-family-detail .article-author{padding-block:12px!important;margin-block:12px!important}.wte-family--blog .key-takeaway{border:1px solid #c8d8cc!important;padding:20px!important;border-radius:0!important}.wte-family--blog .article-body h2{scroll-margin-top:28px}.wte-family--compare .c-hero,.wte-family--for .c-hero{padding-block:34px!important}.wte-family--compare .c-hero h1,.wte-family--for .c-hero h1{font-size:clamp(32px,4.5vw,58px)!important;line-height:1.1!important}
@media(max-width:700px){.wte-family--blog .bh{padding:26px 0!important}.wte-family--blog .bh__sub{font-size:16px!important}.wte-family--blog .blog-hero{max-height:none;min-height:190px}.wte-family--blog .blog-hero__in{padding-inline:18px!important}.wte-family--blog .article-body{font-size:16px;line-height:1.8}.wte-family--blog .bfeat{padding-top:26px!important}.wte-family--blog .blog{padding-bottom:24px!important}}

/* SEO26-039: keep legacy comparison cards within narrow content columns. */
@media screen and (max-width:389px){.wte-family--compare .visa-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))!important}}