@property --accent-hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 245;
}
@property --bg-chroma {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.014;
}

:root {
  --accent-hue: 245;
  --bg-chroma: 0.014;

  --bg: oklch(96.5% 0.012 245);
  --bg-2: oklch(94% 0.018 245);
  --ink: oklch(20% 0.04 245);
  --ink-2: oklch(35% 0.04 245);
  --ink-dim: oklch(50% 0.025 245);
  --line: oklch(85% 0.015 245);
  --line-soft: oklch(90% 0.012 245);

  --accent: oklch(38% 0.055 245);
  --accent-strong: oklch(28% 0.065 245);
  --accent-soft: oklch(74% 0.035 245);

  --up: oklch(55% 0.09 165);
  --down: oklch(58% 0.11 25);

  /* ── Liquid-glass recipe (canonical light-glass surface) ──────────────
     Every light glass surface — nav pill, selector card, contact card,
     light dropdown/autocomplete panels — references these. Fill 0.85,
     bright 0.9 rim, four-layer elevation, and a top-edge inner highlight
     (--glass-hilite) that simulates light hitting the glass's thickness. */
  --glass-blur: 28px;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-border-soft: rgba(200, 210, 230, 0.5);
  --glass-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),    /* outer rim — slightly stronger */
    0 4px 6px -2px rgba(8, 14, 40, 0.10),   /* close shadow */
    0 12px 24px -4px rgba(8, 14, 40, 0.22), /* mid lift — heavier */
    0 48px 80px -24px rgba(8, 14, 40, 0.36); /* deep ambient — significantly heavier */
  /* Inner top-edge highlight — drop onto a ::before (inset:0) to read as
     physical glass thickness catching the light. */
  --glass-hilite: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 40%,
    transparent 100%);

  /* ── Active-state impact palette ──────────────────────────────────────
     The two highest-impact result cards (Winning Move + IF YOU MOVE) and
     the route map use a fixed navy/amber pairing — independent of the
     scroll-driven accent hue — so the "verdict" reads as a decisive,
     editorial moment. Muted red carries negative deltas in the table. */
  --impact-navy: oklch(22% 0.04 245);
  --impact-amber: oklch(78% 0.17 75);
  --impact-diff-red: oklch(55% 0.15 25);

  /* Purchasing-Power-Gain card hue — constrained to the emerald band
     (145–165: sage → emerald → deep green). Driven by the scroll handler
     (remapped from --accent-hue); this default covers first paint +
     fixed-hue mode. */
  --verdict-hue: 155;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  /* ========================================================================
     THE NAVY WASH — the canonical navy-aurora system. Whenever a brief says
     "the navy wash", it means exactly this. NEVER hardcode these values;
     always reference these variables (or the --navy-wash-bg stack / .navy-wash
     class built from them).
     ===================================================================== */
  --navy-base-top: oklch(28% 0.065 245);
  --navy-base-bottom: oklch(36% 0.062 252);

  --aurora-peach: oklch(92% 0.05 45);
  --aurora-lavender: oklch(90% 0.06 290);
  --aurora-sage: oklch(91% 0.05 155);

  --aurora-peach-pos: 16% 6%;
  --aurora-lavender-pos: 92% 20%;
  --aurora-sage-pos: 54% 100%;

  --navy-card-shadow:
    0 0 0 1px rgba(15, 21, 53, 0.06),
    0 20px 46px -24px rgba(8, 14, 40, 0.55);

  /* Just the three aurora blobs (no base) — for surfaces that supply their
     own base, e.g. the graduated homepage scroll sections. */
  --navy-aurora-blobs:
    radial-gradient(ellipse 88% 60% at var(--aurora-peach-pos),
      color-mix(in oklab, var(--aurora-peach) 20%, transparent) 0%,
      color-mix(in oklab, var(--aurora-peach) 7%, transparent) 40%,
      transparent 66%),
    radial-gradient(ellipse 82% 62% at var(--aurora-lavender-pos),
      color-mix(in oklab, var(--aurora-lavender) 20%, transparent) 0%,
      color-mix(in oklab, var(--aurora-lavender) 7%, transparent) 42%,
      transparent 68%),
    radial-gradient(ellipse 96% 66% at var(--aurora-sage-pos),
      color-mix(in oklab, var(--aurora-sage) 16%, transparent) 0%,
      color-mix(in oklab, var(--aurora-sage) 6%, transparent) 44%,
      transparent 66%);

  /* The full navy-wash background stack — aurora blobs over the navy base.
     Drop straight into `background:`. */
  --navy-wash-bg:
    var(--navy-aurora-blobs),
    linear-gradient(180deg, var(--navy-base-top) 0%, var(--navy-base-bottom) 100%);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-serif: "Instrument Serif", "Times New Roman", serif;

  /* ── Systematic mobile type scale (≤768px). Reference these tokens inside
     mobile media queries ONLY — they have no effect on desktop. Strictly
     descending so a section heading can never meet or exceed the hero:
     hero 28 > pull-quote 26 > identity 25 > section 23 > subhead 20.
     Every page's heads (home / about / explore / contact / country /
     profession) map to these same steps for one consistent rhythm. */
  --ms-hero: 28px;        /* largest line on the page — page hero display */
  --ms-hero-2: 25px;      /* compact/secondary hero + page-identity name   */
  --ms-section-lg: 26px;  /* feature pull-quote                            */
  --ms-section: 23px;     /* in-page section heading                       */
  --ms-subhead: 20px;     /* card / block subhead                          */
  --ms-lead: 15px;        /* hero & section lead paragraph                 */
  --ms-lead-sm: 14px;     /* secondary lead                                */
}

/* The canonical "navy wash" surface — apply this class (or reference
   --navy-wash-bg / --navy-card-shadow) instead of rebuilding the gradient. */
.navy-wash {
  background: var(--navy-wash-bg);
  box-shadow: var(--navy-card-shadow);
}

/* When the user toggles OFF scroll-driven colors and uses the hue slider,
   we add this class to the root so slider changes ease softly. During scroll
   mode we drive the vars per-frame instead — no transition needed. */
:root.smooth-theme {
  transition:
    --accent-hue 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    --bg-chroma 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

/* Hide scrollbars globally — every page and every scrollable container.
   Scrolling still works; only the visible bar is suppressed. */
* {
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}
*::-webkit-scrollbar {
  display: none;             /* Chrome/Safari */
}

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.app { position: relative; min-height: 100vh; isolation: isolate; }

/* ==== Background — soft pastel aurora ====
   Pure white base. Big, low-saturation washes drifting across the page like
   an aurora: washed-out peach, soft lavender, pale sage, hushed blue.
   The bg layer is taller than the viewport so washes appear at different
   document positions — they drift past as you scroll. */
.bg-base {
  position: fixed; inset: 0; z-index: -10;
  background: #fefefe;
}
.bg-aurora {
  position: fixed;
  inset: -20vh -10vw -20vh -10vw;
  z-index: -9;
  pointer-events: none;
  background:
    /* peach — top left, sweeping across hero+nav */
    radial-gradient(ellipse 65% 42% at 14% 4%,
      oklch(92% 0.05 45 / 0.95) 0%,
      oklch(94% 0.035 45 / 0.55) 35%,
      transparent 72%),
    /* lavender — top right */
    radial-gradient(ellipse 58% 44% at 88% 10%,
      oklch(92% 0.045 290 / 0.9) 0%,
      oklch(94% 0.03 290 / 0.45) 40%,
      transparent 75%),
    /* pale sage — middle left */
    radial-gradient(ellipse 60% 38% at 4% 38%,
      oklch(93% 0.04 155 / 0.8) 0%,
      oklch(95% 0.025 155 / 0.4) 40%,
      transparent 72%),
    /* soft rose / blush — mid-right */
    radial-gradient(ellipse 55% 35% at 96% 52%,
      oklch(94% 0.03 18 / 0.7) 0%,
      oklch(95% 0.02 18 / 0.32) 40%,
      transparent 72%),
    /* hushed sky — lower left */
    radial-gradient(ellipse 55% 32% at 12% 76%,
      oklch(95% 0.028 235 / 0.7) 0%,
      oklch(96% 0.018 235 / 0.3) 40%,
      transparent 72%),
    /* warm peach — bottom right */
    radial-gradient(ellipse 60% 36% at 86% 92%,
      oklch(94% 0.034 55 / 0.75) 0%,
      oklch(95% 0.022 55 / 0.35) 38%,
      transparent 72%);
  filter: blur(40px) saturate(102%);
  will-change: transform;
}
/* Drifting slow horizontal pan — keeps washes feeling alive without distraction */
@keyframes bg-aurora-drift {
  0%   { transform: translate3d(0,     0,    0); }
  50%  { transform: translate3d(-2.5%, 1.5%, 0); }
  100% { transform: translate3d(0,     0,    0); }
}
.bg-aurora { animation: bg-aurora-drift 38s ease-in-out infinite; }

/* Active (results) state — the same 6-wash aurora carries through the whole
   scroll, but softer: desaturated and slightly dimmed so it reads as
   atmosphere behind the data, never competing with it. The drift is also
   reversed so it feels like a different room, not the same one continued. */
.app-active .bg-aurora {
  filter: blur(46px) saturate(78%);
  opacity: 0.8;
  animation-name: bg-aurora-drift-rev;
}
@keyframes bg-aurora-drift-rev {
  0%   { transform: translate3d(0,    0,     0); }
  50%  { transform: translate3d(2.5%, -1.5%, 0); }
  100% { transform: translate3d(0,    0,     0); }
}

.bg-grid, .bg-grain { display: none; }
.no-grain .bg-grain { display: none; }

/* ==== Glass ==== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
}
/* Inner top-edge highlight — light catching the glass's physical thickness.
   z-index:-1 keeps it above the fill but beneath the card's content. */
.glass::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--glass-hilite);
  pointer-events: none;
  z-index: -1;
}

/* ==== Typography ==== */
.mono-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mono-tag.dim { color: var(--ink-dim); }
.italic-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.dim { color: var(--ink-dim); }
.dim-text { color: var(--ink-dim); }
.mono { font-family: var(--font-mono); }

/* ==== Pill top nav ====
   Fully transparent — the pastel hero gradient flows straight through it.
   No bg, no blur, no border — only the content sits on top of the wash. */
.topnav-wrap {
  position: sticky; top: 18px; z-index: 10000;
  padding: 0 24px;
  margin-bottom: -52px; /* pull content under the floating pill */
}
.topnav-pill {
  max-width: 1180px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 10px 18px;
  border-radius: 100px;
  /* Frosted glass, not a white bar: drop the near-opaque shared --glass-bg
     (0.85) for a much more translucent fill and push the blur harder so the
     aurora reads through it. Global override → every page, desktop + mobile. */
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(40px) saturate(185%);
  -webkit-backdrop-filter: blur(40px) saturate(185%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}
.topnav-pill::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--glass-hilite);
  pointer-events: none;
  z-index: -1;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink);
}
/* One-time slow spin on initial page load — fires once via CSS animation,
   doesn't loop. The SVG keeps its final state (no transform). */
.logo svg {
  transform-origin: 50% 50%;
  animation: logo-spin-once 1.4s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
}
@keyframes logo-spin-once {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Wave animation for the "Anywhere" word in the hero — each letter rises
   slightly then settles, staggered left-to-right. Triggers once on mount
   and re-triggers when the word scrolls back into view (handled in JS by
   toggling .wave-play). */
.wave-text {
  display: inline-block;
  /* keep italic-serif treatment intact; the parent class controls colour */
}
.wave-letter {
  display: inline-block;
  will-change: transform;
}
.wave-text.wave-play .wave-letter {
  animation: anywhere-wave 0.85s cubic-bezier(0.34, 1.4, 0.5, 1) 1 both;
}
@keyframes anywhere-wave {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-0.22em); }
  70%  { transform: translateY(0.04em); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo svg { animation: none; }
  .wave-text.wave-play .wave-letter { animation: none; }
}
.logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.015em;
}
.logo-dot { color: var(--ink-dim); font-weight: 500; }
.nav-links {
  display: flex; gap: 28px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links a {
  position: relative;
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 2px;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--accent-strong); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent-strong);
  border-radius: 2px;
}
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  color: var(--accent-strong);
  border: 1px solid var(--accent-soft);
  border-radius: 100px;
  padding: 9px 20px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.35s ease, border-color 0.35s ease, transform 0.18s ease, box-shadow 0.35s ease;
}
.nav-cta::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  /* Hover fill — the canonical navy wash (never hardcoded). */
  background: var(--navy-wash-bg);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}
.nav-cta:hover {
  color: oklch(98% 0.005 245);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: var(--navy-card-shadow);
}
.nav-cta:hover::before { opacity: 1; }
.status-dot {
  width: 7px; height: 7px;
  background: oklch(75% 0.18 145);
  border-radius: 50%;
  box-shadow: 0 0 0 3px oklch(75% 0.18 145 / 0.25);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ==== Main layout ==== */
.main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 88px 32px 0;
}
.section { padding: 84px 0 12px; }
.section-head {
  display: flex; justify-content: space-between;
  align-items: flex-end; gap: 32px;
  margin-bottom: 28px;
}
.section-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 8px 0 0;
}
.section-sub {
  color: var(--ink-dim);
  font-size: 15px;
  max-width: 560px;
  margin: 14px 0 0;
  line-height: 1.55;
}

/* ==== Hero ==== */
.hero {
  /* Exactly one viewport tall. The hero is .main's first child; .main sits
     5px below the viewport top (the sticky nav's flow contribution) and
     carries an 88px top padding for nav clearance — 93px total. We cancel
     that with a matching negative margin so the hero fills from the very top
     of the viewport and ends exactly at the fold (no peek of the section
     below), then reserve nav height via its own padding-top. height (not
     min-height) keeps it from growing past the viewport, so the open
     dropdown panels overflow visibly without adding page scroll. */
  height: 100vh;
  box-sizing: border-box;
  margin-top: -93px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0 0;
  text-align: center;
}
/* Compact mode — used when results are visible below. The title +
   subtitle stay visible (they're the editorial anchor of the page), but
   we tighten the vertical rhythm so the search card sits closer beneath
   them without the cavernous spacing the landing state uses. */
.hero.hero-compact {
  height: auto;
  margin-top: 0;
  min-height: 0;
  justify-content: flex-start;
  /* Active state: the form card, YOUR ROUTE strip, and result cards should
     read as one cohesive block. Drop the bottom padding so the only space
     below the toggles is the route section's small top padding. */
  padding: 48px 0 0;
}
.hero.hero-compact .hero-title {
  font-size: clamp(36px, 4.4vw, 56px);
  margin-bottom: 10px;
}
.hero.hero-compact .hero-sub {
  margin-bottom: 0;
}
.hero.hero-compact .form-card {
  margin-top: 24px;
  margin-bottom: 8px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(46px, 6vw, 76px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 auto 20px;
  max-width: 980px;
  color: var(--ink);
  text-wrap: balance;
}
.hero-title .italic-serif { font-size: 1.05em; }
.hero-sub {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ==== Form card ==== */
.form-card {
  /* Widened to align with the 1180px nav pill / main column so the search
     fields have more breathing room (was 980px, felt cramped). width:100%
     is required because .hero uses align-items:center, which otherwise
     shrink-wraps the card to its content and ignores max-width. */
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 40px;
  padding: 3rem 2.5rem;
  display: flex; flex-direction: column;
  gap: 14px;
  text-align: left;
  /* Let dropdown menus extend past the card boundaries without being clipped
     by the rounded corners, and lift the whole card above any later sections
     (e.g. How It Works) so open menus paint on top of the page. */
  overflow: visible;
  position: relative;
  z-index: 100;
  /* Canonical liquid-glass recipe (shared tokens) — fill, bright rim and
     four-layer elevation. The top-edge highlight comes from .glass::before. */
  background: var(--glass-bg);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
/* Separate the period/currency toggle row from the dropdowns above so the
   card reads as a control panel, not a single run of form fields. The 14px
   flex gap plus this margin sums to a 2rem break before the toggle row. */
.form-card > .form-row:last-child {
  margin-top: 18px;
}
.form-row {
  display: grid;
  gap: 16px;
}
.form-row.two { grid-template-columns: 1fr 1fr; }
.form-row.with-swap {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.form-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-items: stretch; text-align: left; }
.form-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
  align-self: flex-start;
}

/* Dropdown */
.dd { position: relative; }
/* Lift the active dropdown's stacking context so its panel sits above every
   other form field, the form card itself, and any neighbouring section. */
.dd.open { z-index: 9000; }
/* Closed state — the same liquid-glass language as the floating nav pill:
   translucent (no hard white fill), 28px backdrop blur + saturation lift, a
   soft white border, and the pill's layered shadow. Site border radius. */
.dd-trigger {
  width: 100%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  position: relative;
  isolation: isolate;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 1px rgba(15, 21, 53, 0.04),
    0 8px 28px -12px rgba(15, 21, 53, 0.18),
    0 2px 8px -2px rgba(15, 21, 53, 0.08);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}
/* Inner multiply rim — copied from the nav pill so the glass matches exactly. */
.dd-trigger::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(200, 210, 230, 0.5);
  pointer-events: none;
  mix-blend-mode: multiply;
}
/* Reserved hover accent bar — disabled on the trigger; the glass lift alone
   carries the closed-state hover so it reads as a pill, not a form row. */
.dd-trigger::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  width: 3px; height: 56%;
  background: var(--accent-strong);
  border-radius: 100px;
  display: none;
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
/* Hover — a gentle glass lift only (slightly brighter, a touch more shadow).
   No fill swap, no accent bar: the closed pill stays calm and premium. */
.dd-trigger:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 1px rgba(15, 21, 53, 0.05),
    0 12px 30px -14px rgba(15, 21, 53, 0.22),
    0 2px 8px -2px rgba(15, 21, 53, 0.08);
}
/* Open — same glass, with a soft accent ring to tie it to the panel below. */
.dd.open .dd-trigger {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 0 0 1px var(--accent-soft),
    0 12px 30px -14px rgba(15, 21, 53, 0.22);
}
/* Selected value just reads as the label inside the glass pill — no heavy
   fill, no checkmark swap. The chevron is the only affordance. */
.dd-check { display: none; }
.dd-value {
  flex: 1; min-width: 0;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}
.dd-value.dd-placeholder {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  color: var(--ink-dim);
  letter-spacing: 0;
}
/* Subtle chevron — thin, low-contrast, ink-dim. Rotates softly on open. */
.dd-caret { color: var(--ink-dim); flex-shrink: 0; transition: transform 0.18s ease, color 0.18s ease; }
.dd.open .dd-caret { transform: rotate(180deg); color: var(--ink-2); }
.dd-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%;
}
.dd-country { display: inline-flex; align-items: center; gap: 10px; }
.dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  /* Translucent dark glass — the same recipe as the floating nav pill, just
     tinted navy instead of white. A real backdrop blur (28px + saturate)
     smokes whatever sits behind so the panel reads as glass, not a solid
     rectangle. The aurora is now only a faint lavender hint in one corner,
     heavily soft. Soft low-opacity white border + an inner multiply rim
     (::before) match the pill exactly. */
  background:
    radial-gradient(ellipse 70% 64% at 88% 0%,
      oklch(90% 0.06 290 / 0.16) 0%, oklch(90% 0.05 290 / 0.05) 46%, transparent 72%),
    linear-gradient(180deg,
      oklch(28% 0.05 248 / 0.94) 0%,
      oklch(32% 0.05 252 / 0.96) 100%);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 0 0 1px rgba(15, 21, 53, 0.18),
    0 18px 40px -16px rgba(8, 14, 40, 0.4),
    0 32px 64px -24px rgba(8, 14, 40, 0.5);
  padding: 6px;
  /* Top of every page stack — the open dropdown always sits above all
     other UI, never clipped by neighbouring sections or cards. */
  z-index: 9999;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Inner rim — copied from the nav pill's ::before so the glass edge matches. */
.dd-menu::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(200, 210, 230, 0.5);
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
.dd-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }
.dd-menu.align-right { left: auto; right: 0; min-width: 100%; }
/* Typeable filter field — pinned above the scrolling list. Mirrors the
   searchable currency dropdown on the country & profession pages. */
.dd-search {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  padding: 10px 13px;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.dd-search::placeholder { color: var(--ink-dim); }
.dd-search:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px oklch(74% 0.035 245 / 0.3);
}
.dd-list {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dd-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Option list sits on the dark navy aurora surface — light interior type,
   exactly like the track cards. */
.dd-empty {
  padding: 14px 14px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: oklch(72% 0.03 255);
  text-align: center;
}
.dd-item {
  width: 100%;
  display: flex; align-items: center;
  padding: 13px 16px 13px 18px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: oklch(90% 0.02 250);
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.dd-item .dd-row { min-width: 0; }
.dd-item .dd-row > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-menu .mono-tag,
.dd-menu .mono-tag.dim { color: oklch(72% 0.035 255); }
.dd-menu .dd-country { color: inherit; }
/* Hover — a soft highlight only: a gentle white-opacity wash plus the
   luminous accent-blue left bar. No flat grey fill block. */
.dd-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: oklch(98% 0.01 250);
}
.dd-item:hover .mono-tag,
.dd-item:hover .mono-tag.dim {
  color: oklch(82% 0.03 255);
}
/* Selected — accent-blue indicator only (persistent left bar + check), no
   heavy fill. Just the faintest wash to anchor the chosen row. */
.dd-item.active,
.dd-item.active:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: transparent;
  color: #fff;
  font-weight: 500;
  padding-right: 40px;
}
.dd-item.active .mono-tag,
.dd-item.active .mono-tag.dim,
.dd-item.active .dd-country {
  color: oklch(82% 0.04 255);
}
.dd-item.active::after {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7.2 L6 10 L11 4' stroke='%2393b1f7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Luminous accent-blue vertical bar. Persistent on the active row; slides in
   on hover. Brighter than --accent so it reads on the dark surface. */
.dd-item::before {
  content: "";
  position: absolute;
  left: 5px; top: 50%;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  width: 3px; height: 60%;
  background: oklch(75% 0.13 75);
  border-radius: 100px;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease;
  opacity: 0;
  z-index: 1;
}
.dd-item:hover::before {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}
.dd-item.active::before {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}

/* Swap button — small frosted-glass capsule. Light, modern, consistent with
   the dropdown panels. Same outline + inset highlight as .dd-trigger so the
   row reads as one set of frosted controls. */
.swap-btn {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 32px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: var(--ink-2);
  cursor: pointer;
  margin-bottom: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 1px rgba(180, 195, 220, 0.25);
}
.swap-btn:hover {
  transform: rotate(180deg);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(245, 248, 255, 0.55) 100%);
  border-color: rgba(255, 255, 255, 0.95);
  color: var(--accent-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(15, 21, 53, 0.04),
    0 0 0 1px rgba(180, 195, 220, 0.45),
    0 8px 22px -10px rgba(15, 21, 53, 0.18);
}

/* Segmented chips */
.seg-chips {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: rgba(15, 21, 53, 0.055);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.seg-chip {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  /* Match the dropdown trigger text colour above so the chip row reads as
     part of the same set of controls. */
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.seg-chip:hover { color: var(--ink); }
/* Hero selector toggles — the pay-period and currency chips are siblings in
   the same row. Lock both (active and inactive) to one font-size, weight and
   family so the active chip doesn't jump typefaces and the two toggles read
   as a single control set rather than mismatched components. Scoped to the
   form card so other seg-chip toggles elsewhere keep their own styling. */
.form-card .seg-chip,
.form-card .seg-chip.active {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
}
/* Active chip reads as a frosted, lifted pill floating above the muted track —
   soft translucent white fill with a gentle elevation shadow, not a hard
   blocked-in dark fill. */
.seg-chip.active {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(15, 21, 53, 0.06),
    0 8px 20px -10px rgba(15, 21, 53, 0.22);
}

/* Hero meta strip */
.hero-meta {
  display: flex; justify-content: center; align-items: center;
  gap: 0;
  margin-top: 8px;
}
.meta-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 36px;
}
.meta-divider {
  width: 1px; height: 32px;
  background: var(--line);
}
.meta-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.meta-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

/* ==== Results — route panel + asymmetric cards ==== */
.results-section { position: relative; }

/* Route panel — dedicated Atlas moment above the cards */
.route-panel {
  padding: 22px 28px 24px;
  margin-bottom: 22px;
  display: flex; flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
}
.route-header {
  display: flex; justify-content: center;
  letter-spacing: 0.3em;
}
.route-header .mono-tag {
  letter-spacing: 0.32em;
  font-size: 11px;
}
.route-map-wrap {
  position: relative;
  height: 220px;
  width: 100%;
  color: oklch(35% 0.06 245);
}
.route-map {
  width: 100%;
  height: 100%;
  display: block;
}
.route-map .wm-grid { color: oklch(40% 0.06 245); opacity: 0.6; }
.route-map .wm-land circle { fill: oklch(35% 0.05 245); }
.route-map .wm-others circle { fill: oklch(35% 0.08 245); }

.route-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.route-end {
  display: flex; flex-direction: column; gap: 4px;
}
.route-end-target { align-items: flex-end; text-align: right; }
.route-end .mono-tag {
  letter-spacing: 0.16em;
  font-size: 10.5px;
}
.route-end-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.route-distance {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 24px;
}
.route-distance .mono-tag {
  letter-spacing: 0.16em;
  font-size: 10px;
}
.route-dist-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.route-dist-unit {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  margin-left: 4px;
  font-weight: 500;
}

.results-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.32fr;
  gap: 22px;
  align-items: stretch;
}
.simple-result-card {
  padding: 28px 32px 26px;
  display: flex; flex-direction: column;
  text-align: left;
  position: relative;
  transition: transform 0.3s ease;
}
.simple-result-card.subordinate {
  background: rgba(255, 255, 255, 0.5);
}
.simple-result-card.dominant {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 1px var(--accent-soft),
    0 18px 44px -18px oklch(40% 0.13 245 / 0.28),
    0 6px 16px -4px oklch(15% 0.04 245 / 0.12);
}
.src-eyebrow-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.src-eyebrow {
  color: var(--ink-dim);
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 600;
}
.src-coords {
  letter-spacing: 0.08em;
  font-size: 10px;
}
.src-country-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
}
.src-city {
  color: var(--ink-dim);
  font-weight: 400;
}
.src-amount {
  display: flex; align-items: baseline;
  gap: 4px;
  margin-bottom: 10px;
}
.src-currency {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  color: var(--ink-dim);
  letter-spacing: -0.02em;
}
.src-num, .animated-num.src-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 64px;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.animated-num { font-variant-numeric: tabular-nums; display: inline-block; }
.src-sub {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-dim);
  margin-bottom: 22px;
}
.src-dot { color: var(--line); }
.src-percentile {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.src-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 0 -4px 18px;
}
.src-row {
  display: flex; justify-content: space-between;
  align-items: center;
  padding: 7px 0;
}
.src-row-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-2);
}
.src-row-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.src-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(15, 21, 53, 0.06);
  color: var(--ink-dim);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  cursor: help;
}

/* ==== Methodology trust strip ==== */
.methodology-strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  margin: 0 auto 4px;
  max-width: 980px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.meth-source {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-weight: 500;
  text-transform: uppercase;
}
.meth-dot {
  color: var(--line);
  font-weight: 400;
}

/* ==== Sticky context bar — bottom dock ==== */
.sticky-context {
  position: fixed; left: 0; right: 0;
  bottom: 24px;
  /* Sits above everything page-level (form card is z-index 100, topnav 50),
     but below open dropdown menus (z-index 9000+) so picking from a
     dropdown still reads as the foreground action. */
  z-index: 200;
  pointer-events: none;
  padding: 0 24px;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
  display: flex; justify-content: center;
}
.sticky-context.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sc-inner {
  margin: 0 auto;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 1px rgba(15, 21, 53, 0.04),
    0 18px 44px -16px rgba(15, 21, 53, 0.28),
    0 6px 16px -4px rgba(15, 21, 53, 0.12);
  font-family: var(--font-body);
  font-size: 13.5px;
  max-width: calc(100vw - 48px);
  flex-wrap: nowrap;
  overflow: hidden;
}
.sc-chip {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  /* The profession name must never wrap to a second line in the dock. Keep it
     on one line and truncate with an ellipsis only in the extreme case. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Reset button — subtle icon button on the far left of the pill. Same
   pill family (rounded, tonal) but visually quieter than the Edit CTA. */
.sc-reset-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(15, 21, 53, 0.12);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: -2px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.sc-reset-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  border-color: rgba(15, 21, 53, 0.22);
  transform: rotate(-30deg);
}
.sc-reset-btn:active { transform: rotate(-30deg) scale(0.94); }
.sc-reset-btn svg { display: block; }
.sc-route {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2);
}
.sc-country { font-family: var(--font-display); font-weight: 500; }
.sc-target { color: var(--accent-strong); font-weight: 600; }
.sc-arrow { color: var(--accent-strong); margin: 0 4px; }
.sc-divider {
  width: 1px; height: 20px;
  background: var(--line);
}
.sc-edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px 7px 12px;
  border-radius: 100px;
  border: none;
  background: var(--accent-strong);
  color: oklch(98% 0.005 245);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 12px -4px oklch(30% 0.14 245 / 0.55);
}
.sc-edit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px oklch(30% 0.14 245 / 0.7);
}
.sc-edit-btn svg { opacity: 0.85; }

/* ==== Detailed Comparison + Heatmap ==== */
.comparison-card {
  padding: 32px 36px;
}
.comparison-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px;
}
.comparison-title {
  font-family: var(--font-display);
  font-weight: 500;
  /* Card sub-heading tier (18px) — the standalone "Detailed Comparison"
     title was reading heavier/larger than the other module headings; bring
     it to the established 18px sub-head size so it sits quietly above the
     table rather than competing with the eyebrow-led section titles. */
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.cmp-table { display: flex; flex-direction: column; }
.cmp-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  /* Single faint hairline between rows — nothing louder. */
  border-top: 1px solid rgba(15, 21, 53, 0.12);
}
.cmp-row.cmp-header {
  border-top: none;
  padding: 8px 0 14px;
}
.cmp-row:not(.cmp-header) { padding: 12px 0; }
/* Column headers — quiet uppercase mono that whispers above the data. */
.cmp-row.cmp-header .cmp-cell {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
  color: var(--ink);
  font-weight: 500;
  padding: 0 16px;
}
.cmp-cell.metric {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-2);
  padding: 6px 16px 6px 4px;
}
/* Value + indicator-bar stack. No cell fills — the translucent card lets
   the aurora read through behind the table. */
.cmp-cell.num {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  padding: 6px 16px;
}
.cmp-row.cmp-header .cmp-cell.num { padding: 0 16px; }
/* Slim proportional indicator bar under each value, left-aligned.
   Current country = navy, target country = amber. */
.cmp-bar {
  height: 4px;
  border-radius: 2px;
  align-self: flex-start;
  min-width: 4px;
}
.cmp-bar.win { background: oklch(52% 0.12 145); }
.cmp-bar.loss { background: oklch(52% 0.15 25); }
.cmp-bar.eq { background: oklch(60% 0 0); opacity: 0.4; }
/* Difference — coloured number only, no fill. Muted better/worse signal. */
.cmp-cell.num.diff { gap: 0; }
.cmp-cell.num.diff.pos { color: oklch(52% 0.12 145); font-weight: 600; }
.cmp-cell.num.diff.neg { color: oklch(52% 0.15 25); font-weight: 600; }
.cmp-cell.num.diff.zero { opacity: 0.4; font-weight: 600; }

/* ==== Verdict — editorial reveal layout ==== */
.verdict-section { padding-top: 100px; }
.verdict-stage {
  display: flex; flex-direction: column;
  gap: 36px;
  position: relative;
}

.verdict-eyebrow {
  text-align: center;
  letter-spacing: 0.3em;
}
.verdict-eyebrow .mono-tag {
  font-size: 11px;
  letter-spacing: 0.32em;
}

/* Top reveal — winner name + dark stat card side by side */
.verdict-reveal {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: stretch;
  padding: 0 8px;
}
.verdict-name-wrap {
  display: flex; flex-direction: column; justify-content: center;
  gap: 8px;
}
.verdict-best-of {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  color: var(--ink-dim);
  font-weight: 400;
  line-height: 1;
}
.verdict-name-mega {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(72px, 8vw, 124px);
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.verdict-period {
  color: var(--accent-strong);
}
.verdict-name-sub {
  margin-top: 14px;
  letter-spacing: 0.16em;
  font-size: 11px;
}

/* Dark stat card — borrows the savings-result language */
.verdict-stat-card {
  padding: 28px 32px;
  border-radius: 22px;
  background: linear-gradient(165deg, oklch(32% 0.10 var(--verdict-hue)), oklch(22% 0.10 var(--verdict-hue)));
  border: 1px solid oklch(35% 0.13 var(--verdict-hue));
  color: oklch(96% 0.01 var(--verdict-hue));
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px -20px oklch(15% 0.1 var(--verdict-hue) / 0.5);
}
.verdict-stat-card::before {
  content: ""; position: absolute; top: -40%; right: -20%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, oklch(55% 0.12 var(--verdict-hue) / 0.45), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.verdict-stat-card::after {
  content: ""; position: absolute; bottom: -30%; left: -10%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, oklch(45% 0.12 var(--verdict-hue) / 0.35), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.vsc-eyebrow {
  color: oklch(78% 0.05 var(--verdict-hue));
  position: relative;
  letter-spacing: 0.14em;
  font-size: 11px;
}
.vsc-num-wrap {
  display: flex; align-items: baseline;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.vsc-sign {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 64px;
  color: #ffffff;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-right: 4px;
}
.vsc-num, .animated-num.vsc-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 112px;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: oklch(98% 0.005 var(--verdict-hue));
  font-variant-numeric: tabular-nums;
}
.vsc-pct {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 56px;
  color: oklch(82% 0.06 var(--verdict-hue));
  letter-spacing: -0.04em;
  margin-left: 4px;
}
.vsc-foot {
  font-family: var(--font-body);
  font-size: 14px;
  color: oklch(82% 0.04 var(--verdict-hue));
  position: relative;
}
.vsc-foot-strong { color: oklch(96% 0.01 var(--verdict-hue)); font-weight: 500; }

.verdict-lede-new {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--ink-2);
  margin: 0 auto;
  max-width: 760px;
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
}
.verdict-lede-new strong { color: var(--ink); font-weight: 600; }

/* Versus row — loser card | arc | winner card */
.verdict-versus {
  display: grid;
  grid-template-columns: 1fr 220px 1.55fr;
  gap: 0;
  align-items: stretch;
  margin-top: 12px;
}

/* Arc column — floating label above an elegant sweep */
.verdict-arc-col {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  padding: 24px 0;
  position: relative;
}
.varc-floating {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.varc-floating-eyebrow {
  letter-spacing: 0.18em;
  font-size: 10px;
  color: var(--ink-dim);
}
.varc-floating-pct {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
  margin: 2px 0;
}
.varc-floating-foot {
  letter-spacing: 0.12em;
  font-size: 9.5px;
}
.verdict-arc {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}
.varc-path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: drawArc 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s forwards;
}
@keyframes drawArc {
  to { stroke-dashoffset: 0; }
}

/* Sequential entry: left card → arc → right card. */
.vc-mini-anim,
.vc-hero-anim {
  opacity: 0;
  transform: translateY(10px);
  animation: vcardIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.vc-mini-anim { animation-delay: 0s; }
.vc-hero-anim { animation-delay: 1.4s; }
@keyframes vcardIn {
  to { opacity: 1; transform: translateY(0); }
}
.vc-mini-anim { opacity: 0.85; }
.vc-mini-anim { animation-name: vcardInMini; }
@keyframes vcardInMini {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 0.85; transform: translateY(0); }
}

/* Loser (mini) card */
.vc-mini {
  padding: 26px 28px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex; flex-direction: column;
  gap: 12px;
  align-self: center;
  opacity: 0.85;
}
.vc-mini-eyebrow { letter-spacing: 0.14em; font-size: 10.5px; }
.vc-mini-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink-2);
}
.vc-mini-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.03em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.vc-mini-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-dim);
}
.vc-mini-stats {
  display: flex; gap: 20px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.vc-mini-stats > div {
  display: flex; flex-direction: column; gap: 2px;
}
.vc-mini-stat {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Animated arc — legacy SVG-text styling no longer used, kept as fallback */
.varc-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--ink-dim);
}
.varc-pct {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  fill: var(--accent-strong);
  letter-spacing: -0.025em;
}

/* Winner hero card — dominant editorial treatment.
   Soft liquid-glass treatment — no heavy solid border. The card is held
   by a layered shadow (inner sheen + soft outer ring + ambient drop) so
   it sits in the same visual language as the rest of the page glass. */
.vc-hero {
  padding: 32px 36px;
  /* Highest-impact card — navy + cream accents, matched exactly to the
     About page design system. Two tokens only, scoped here so every
     var() reference resolves to the corrected values. */
  --impact-navy: oklch(38% 0.055 245);
  --impact-amber: oklch(87% 0.05 70);
  background:
    radial-gradient(circle at 100% 0%, oklch(87% 0.05 70 / 0.14), transparent 56%),
    var(--impact-navy);
  border: 1px solid oklch(46% 0.05 245 / 0.55);
  border-radius: 22px;
  display: flex; flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 70px -24px oklch(20% 0.05 245 / 0.55),
    0 10px 26px -10px rgba(8, 14, 40, 0.4);
}
.vc-hero-medal {
  position: absolute;
  top: 24px; right: 24px;
  color: var(--impact-amber);
  opacity: 0.95;
  filter: drop-shadow(0 4px 12px oklch(87% 0.05 70 / 0.3));
}
.vc-hero-eyebrow {
  color: var(--impact-amber);
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 600;
}
.vc-hero-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--impact-amber);
  margin-top: 4px;
}
.vc-hero-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 72px;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--impact-amber);
  font-variant-numeric: tabular-nums;
  margin-top: 18px;
}
.vc-hero-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: oklch(74% 0.02 250);
  margin-bottom: 22px;
}
.vc-hero-stats {
  display: flex; align-items: stretch;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: auto;
}
.vch-stat {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.vch-stat .mono-tag {
  color: oklch(72% 0.02 250);
  letter-spacing: 0.12em;
  font-size: 10px;
}
.vch-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: oklch(97% 0.008 245);
  font-variant-numeric: tabular-nums;
}
.vch-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 18px;
}

/* ── Winner treatment follows purchasing power ──────────────────────────
   By default the right (target) card carries the navy + star treatment
   (Scenario A: moving wins). When staying wins (Scenario B) the navy +
   star + cream move to the left (current) card and the target card drops
   to light glass. Layout is unchanged — only fill, text colour and star. */

/* Star on the current card — only rendered when staying wins. */
.vc-mini-medal {
  position: absolute;
  top: 18px; right: 20px;
  color: var(--impact-amber, oklch(87% 0.05 70));
  opacity: 0.95;
  filter: drop-shadow(0 4px 12px oklch(87% 0.05 70 / 0.3));
}

/* Scenario B — the current (mini) card becomes the navy winner. */
.vc-mini--win {
  --impact-navy: oklch(38% 0.055 245);
  --impact-amber: oklch(87% 0.05 70);
  position: relative;
  overflow: hidden;
  opacity: 1;
  animation-name: vcardIn; /* end at full opacity, not the 0.85 loser dim */
  background:
    radial-gradient(circle at 100% 0%, oklch(87% 0.05 70 / 0.14), transparent 56%),
    var(--impact-navy);
  border-color: oklch(46% 0.05 245 / 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 70px -24px oklch(20% 0.05 245 / 0.55),
    0 10px 26px -10px rgba(8, 14, 40, 0.4);
}
.vc-mini--win .vc-mini-name,
.vc-mini--win .vc-mini-amount,
.vc-mini--win .vc-mini-eyebrow { color: var(--impact-amber); }
.vc-mini--win .vc-mini-label { color: oklch(74% 0.02 250); }
.vc-mini--win .vc-mini-stat { color: oklch(97% 0.008 245); }
.vc-mini--win .vc-mini-stats { border-top-color: rgba(255, 255, 255, 0.12); }
.vc-mini--win .vc-mini-stats .mono-tag.dim { color: oklch(72% 0.02 250); }

/* Scenario B — the target (hero) card drops to light glass. */
.vc-hero--lose {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 1px rgba(15, 21, 53, 0.035),
    0 8px 22px -14px rgba(15, 21, 53, 0.14);
}
.vc-hero--lose .vc-hero-name { color: var(--ink); }
.vc-hero--lose .vc-hero-amount { color: var(--ink-2); }
.vc-hero--lose .vc-hero-eyebrow { color: var(--ink-dim); }
.vc-hero--lose .vc-hero-label { color: var(--ink-dim); }
.vc-hero--lose .vc-hero-stats { border-top-color: var(--line-soft); }
.vc-hero--lose .vch-stat .mono-tag { color: var(--ink-dim); }
.vc-hero--lose .vch-num { color: var(--ink); }
.vc-hero--lose .vch-divider { background: var(--line-soft); }

/* Middle percentage — muted green up, muted red down. */
.varc-pct-up { color: oklch(52% 0.12 145); }
.varc-pct-down { color: oklch(52% 0.15 25); }

/* Verdict bottom stat strip */
.verdict-strip {
  display: flex; align-items: stretch;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-top: 8px;
}
.vstrip-cell {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 8px;
}
.vstrip-cell .mono-tag {
  letter-spacing: 0.12em;
  font-size: 10.5px;
}
.vstrip-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.vstrip-headline.good-ink { color: oklch(38% 0.15 150); }
.vstrip-headline.bad-ink { color: oklch(45% 0.16 22); }
.vstrip-detail {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.vstrip-detail .dim { color: var(--ink-dim); }
.vstrip-divider {
  width: 1px;
  background: var(--line-soft);
  margin: 0 16px;
}

/* Hide the old verdict-shell / verdict-card styles that may still be referenced */
.verdict-shell, .verdict-card, .verdict-cards, .verdict-top, .verdict-headline,
.verdict-name, .verdict-lede, .details-toggle, .verdict-summary,
.vc-head, .vc-country, .vc-block, .vc-block-label, .vc-block-value,
.vc-grid, .vc-stat, .vc-divider, .vc-share, .verdict-share,
.key-factors, .key-factors-title, .key-factors-grid, .kf-item, .kf-label,
.kf-value, .kf-note, .best-pill { /* legacy — kept defined elsewhere */ }

/* ==== Verdict ==== */
.verdict-shell {
  padding: 36px 40px 32px;
}
.verdict-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}
.verdict-headline { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.best-pill {
  display: inline-block;
  align-self: flex-start;
  background: oklch(94% 0.04 245);
  color: var(--accent-strong);
  border: 1px solid oklch(86% 0.06 245);
  padding: 6px 14px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.verdict-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.verdict-lede {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.55;
  max-width: 640px;
}
.verdict-lede strong { color: var(--ink); font-weight: 600; }

.vc-share, .verdict-share {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.vc-share:hover, .verdict-share:hover {
  background: white;
  border-color: var(--accent-soft);
  color: var(--accent-strong);
}

/* Details toggle */
.details-toggle {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 24px;
}
.details-toggle:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--accent-soft);
}
.details-caret { transition: transform 0.2s; color: var(--ink-dim); }
.details-caret.open { transform: rotate(180deg); }

.verdict-summary {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 24px;
}
.verdict-summary strong { color: var(--ink); font-weight: 600; }
.good-ink { color: oklch(45% 0.16 145); }
.bad-ink { color: oklch(50% 0.18 25); }

.verdict-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.verdict-card {
  padding: 24px 26px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex; flex-direction: column; gap: 18px;
}
.verdict-card.winner {
  background: linear-gradient(160deg, oklch(96% 0.04 150 / 0.85), oklch(97% 0.025 145 / 0.55));
  border-color: oklch(80% 0.1 150);
  box-shadow:
    0 1px 0 oklch(97% 0.03 150) inset,
    0 0 0 1px oklch(85% 0.08 150 / 0.6),
    0 12px 32px -16px oklch(45% 0.12 150 / 0.18);
}
.vc-head {
  display: flex; justify-content: space-between; align-items: center;
}
.vc-country {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.vc-block-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 4px;
}
.vc-block-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.vc-block-value.good { color: oklch(38% 0.14 150); }
.vc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.vc-stat {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.vc-stat.good { color: oklch(38% 0.14 150); }
.vc-stat.bad { color: oklch(45% 0.18 25); }
.vc-divider { height: 1px; background: var(--line-soft); }

/* Key Factors */
.key-factors {
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.key-factors-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ink);
}
.key-factors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.kf-item {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.kf-label { font-weight: 600; color: var(--ink); }
.kf-value { color: var(--accent); font-weight: 500; }
.kf-value.good-ink { color: oklch(45% 0.16 150); }
.kf-value.bad-ink { color: oklch(50% 0.18 25); }
.kf-note { color: var(--ink-dim); font-weight: 400; margin-left: 4px; font-family: var(--font-mono); font-size: 12.5px; }

/* mini-pill (CURRENT / TARGET tag) */
.mini-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 100px;
  background: oklch(90% 0.02 245);
  color: var(--ink-dim);
  margin-left: 8px;
  vertical-align: middle;
}
.mini-pill.target {
  background: var(--accent-strong);
  color: oklch(98% 0.005 245);
}
/* CURRENT badge — soft navy tint (TARGET keeps its own fill). */
.mini-pill:not(.target) {
  background: oklch(38% 0.055 245 / 0.15);
  color: oklch(38% 0.055 245);
  border: 1px solid oklch(38% 0.055 245 / 0.3);
}

/* ==== Unit toggle ==== */
.unit-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: 12px;
  gap: 2px;
}
.unit-btn {
  padding: 8px 14px;
  border: none;
  background: transparent;
  /* Match the page's other segmented toggles (.seg-chip): Space Grotesk,
     13px, weight 500, title-case — not mono uppercase — so the Rankings
     tabs read as the same control family as the hero currency/period chips. */
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ink);
  opacity: 0.4;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  font-weight: 500;
}
.unit-btn:hover { opacity: 0.7; }
.unit-btn.active {
  background: oklch(38% 0.055 245);
  color: oklch(87% 0.05 70);
  opacity: 1;
}

/* ==== PPP ==== */
.ppp-strip { padding: 28px 32px; }
.ppp-header {
  display: flex; justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.ppp-rows { display: flex; flex-direction: column; }
.ppp-row {
  display: grid;
  grid-template-columns: 240px 1fr 130px;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.ppp-row:last-child { border-bottom: none; }
.ppp-row.is-current { background: linear-gradient(90deg, oklch(94% 0.025 245 / 0.5), transparent); margin: 0 -32px; padding: 18px 32px; }
.ppp-row.is-target { background: linear-gradient(90deg, oklch(92% 0.05 245 / 0.6), transparent); margin: 0 -32px; padding: 18px 32px; }
.ppp-country { display: flex; align-items: center; gap: 12px; }
.country-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}
.ppp-track {
  position: relative;
  height: 36px;
  background: oklch(92% 0.015 245);
  border-radius: 6px;
  overflow: hidden;
}
.ppp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: 6px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 12px;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  min-width: 60px;
}
.is-target .ppp-fill { background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }
.ppp-fill-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  color: oklch(98% 0.005 245);
  font-variant-numeric: tabular-nums;
}
.ppp-ratio { text-align: right; }
.ratio-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  display: block;
  font-variant-numeric: tabular-nums;
}
.ratio-num.up { color: oklch(35% 0.13 165); }
.ratio-num.down { color: oklch(40% 0.16 25); }
.ppp-legend {
  display: flex; justify-content: space-between;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-dim); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); }

/* ==== Take-home ==== */
.takehome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.takehome-card { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.takehome-head { display: flex; justify-content: space-between; align-items: flex-start; }
.card-country { display: flex; align-items: center; gap: 12px; }
.takehome-net { text-align: right; }
.net-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.stack-bar {
  position: relative;
  height: 36px;
  background: oklch(92% 0.015 245);
  border-radius: 8px;
  overflow: hidden;
}
.stack-gross {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, oklch(86% 0.04 245) 0 6px, oklch(82% 0.05 245) 6px 12px);
  display: flex; align-items: center;
  padding-left: 12px;
  border-radius: 8px;
}
.stack-net {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: 8px;
  display: flex; align-items: center;
  padding-left: 12px;
}
.stack-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.stack-label.net { color: oklch(98% 0.005 245); }
.takehome-foot {
  display: flex; align-items: stretch;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.foot-item { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.foot-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.foot-divider { width: 1px; background: var(--line-soft); margin: 0 16px; }

/* ==== Ranking ==== */
.ranking-card { padding: 8px 28px 16px; }
.ranking-header, .ranking-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.5fr) 56px 110px 80px;
  gap: 18px;
  align-items: center;
}
.ranking-header {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.ranking-header .rank-col {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.ranking-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.ranking-row:last-child { border-bottom: none; }
.ranking-row.is-current { background: linear-gradient(90deg, oklch(94% 0.025 245 / 0.5), transparent); margin: 0 -28px; padding: 14px 28px; }
.ranking-row.is-target { background: linear-gradient(90deg, oklch(92% 0.05 245 / 0.55), transparent); margin: 0 -28px; padding: 14px 28px; }
.rank-col { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rank-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.podium .rank-num { color: var(--accent-strong); }
.rank-amount {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rank-track {
  flex: 1; height: 6px;
  background: oklch(38% 0.055 245 / 0.35);
  border-radius: 100px;
  overflow: hidden;
}
.rank-fill {
  height: 100%;
  background: oklch(38% 0.055 245);
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* New: per-column atoms */
.rank-mono-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.rank-tax .rank-mono-val { color: var(--ink-2); }
.rank-coli .rank-mono-val { color: var(--ink); font-weight: 600; }

/* Inline visa cell — simple coloured dot + label, NO pill. */
.visa-inline {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.visa-inline .visa-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: none;
}
.visa-inline.visa-accessible .visa-dot { background: oklch(62% 0.16 145); }
.visa-inline.visa-moderate .visa-dot   { background: oklch(75% 0.16 85); }
.visa-inline.visa-hard .visa-dot       { background: oklch(62% 0.18 22); }
.visa-inline-label { font-weight: 500; color: var(--ink); }

/* Footnote beneath the ranking table */
.ranking-footnote {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 14px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.ranking-footnote-star {
  color: var(--accent-strong);
  font-size: 10px;
  transform: translateY(-1px);
}

/* ==== Savings ==== */
.savings-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}
.savings-controls { padding: 32px; display: flex; flex-direction: column; gap: 28px; }
.control-block { display: flex; flex-direction: column; gap: 12px; }
.control-head { display: flex; justify-content: space-between; align-items: baseline; }
.control-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}
.control-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: oklch(90% 0.02 245);
  border-radius: 100px;
  outline: none;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  background: var(--accent-strong);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(15, 21, 53, 0.2);
  transition: transform 0.15s;
}
.range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--accent-strong);
  border-radius: 50%; cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(15, 21, 53, 0.2);
}
.range-ticks {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.preset-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.preset-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-body);
}
.preset-chip:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.control-divider { height: 1px; background: var(--line-soft); }
.rate-row {
  display: flex; gap: 0;
  margin-top: 8px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  border: 1px solid var(--line-soft);
}
.rate-cell { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rate-cell + .rate-cell { border-left: 1px solid var(--line-soft); padding-left: 20px; }
.rate-cell:not(:last-child) { padding-right: 20px; }
.rate-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.savings-result {
  padding: 32px;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, oklch(25% 0.13 245), oklch(18% 0.1 245));
  border: 1px solid oklch(35% 0.13 245);
  color: oklch(96% 0.01 245);
  position: relative;
  overflow: hidden;
}
.savings-result::before {
  content: ""; position: absolute; top: -50%; right: -30%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, oklch(60% 0.15 245 / 0.4), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.savings-result .mono-tag.dim, .savings-result .mono-tag { color: oklch(75% 0.04 245); }
.result-eyebrow { margin-bottom: 20px; position: relative; }
.result-time { display: flex; align-items: baseline; gap: 12px; position: relative; }
.result-big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 96px;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: oklch(98% 0.005 245);
  font-variant-numeric: tabular-nums;
}
.result-unit {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  color: oklch(80% 0.06 245);
}
.result-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: oklch(75% 0.04 245);
  margin-top: 8px;
  letter-spacing: 0.02em;
  position: relative;
}
.result-bar {
  height: 4px;
  background: oklch(40% 0.1 245);
  border-radius: 100px;
  margin: 24px 0;
  overflow: hidden;
  position: relative;
}
.result-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, oklch(75% 0.13 245), oklch(90% 0.05 245));
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.result-foot {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto;
  position: relative;
}
.foot-line {
  display: flex; justify-content: space-between;
  font-size: 13px;
  color: oklch(85% 0.025 245);
}
.foot-line .mono { color: oklch(98% 0.005 245); font-weight: 500; }

/* ==== Savings — controls (wide) + side-by-side comparison ==== */
.savings-controls-wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 28px 36px;
  margin-bottom: 18px;
}
.savings-controls-wide .control-block { gap: 12px; }
.savings-controls-wide .rate-row { margin-top: 4px; }

.savings-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.savings-compare-solo { grid-template-columns: 1fr; }

.scard {
  padding: 28px 30px;
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.scard-loser {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 0 0 1px rgba(15, 21, 53, 0.04),
    0 8px 22px -14px rgba(15, 21, 53, 0.12);
}
.scard-winner {
  /* Highest-impact savings card — navy + cream accents, matched exactly to
     the About page design system. Two tokens only, scoped here. */
  --impact-navy: oklch(38% 0.055 245);
  --impact-amber: oklch(87% 0.05 70);
  background:
    radial-gradient(circle at 100% 0%, oklch(87% 0.05 70 / 0.12), transparent 55%),
    var(--impact-navy);
  border: 1px solid oklch(46% 0.05 245 / 0.55);
  color: oklch(96% 0.008 245);
  box-shadow:
    0 20px 50px -22px oklch(20% 0.05 245 / 0.55),
    0 6px 18px -8px oklch(15% 0.04 245 / 0.4);
}
.scard-winner::before {
  content: ""; position: absolute; top: -45%; right: -25%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, oklch(87% 0.05 70 / 0.22), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.scard-winner::after {
  content: ""; position: absolute; bottom: -35%; left: -10%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, oklch(60% 0.08 245 / 0.3), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}

.scard-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  position: relative;
}
.scard-country { display: flex; align-items: center; gap: 12px; min-width: 0; }
.scard-country-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scard-country-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}
.scard-winner .scard-country-name { color: oklch(98% 0.008 245); }
.scard-country-city {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-dim);
}
.scard-winner .scard-country-city { color: oklch(74% 0.02 250); }

.scard-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(15, 21, 53, 0.05);
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.scard-winner .scard-badge {
  background: oklch(87% 0.05 70 / 0.18);
  color: var(--impact-amber);
}

.scard-time {
  display: flex; align-items: baseline; gap: 10px;
  position: relative;
  margin-top: 6px;
}
.scard-big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 84px;
  letter-spacing: -0.045em;
  line-height: 0.88;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.scard-winner .scard-big { color: var(--impact-amber); }
.scard-unit {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  color: var(--ink-dim);
}
.scard-winner .scard-unit { color: oklch(80% 0.03 250); }
.scard-sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  position: relative;
}
.scard-winner .scard-sub { color: oklch(72% 0.02 250); }

.scard-bar {
  position: relative;
  height: 4px;
  background: rgba(15, 21, 53, 0.06);
  border-radius: 100px;
  overflow: hidden;
  margin: 4px 0 6px;
}
.scard-winner .scard-bar { background: oklch(34% 0.03 245); }
.scard-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent-strong));
  border-radius: 100px;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scard-winner .scard-bar-fill {
  background: linear-gradient(90deg, oklch(82% 0.02 250), oklch(96% 0.01 250));
}

.scard-divider {
  height: 1px; background: var(--line-soft);
  margin: 2px 0;
}
.scard-winner .scard-divider { background: rgba(255, 255, 255, 0.14); }

.scard-rows {
  display: flex; flex-direction: column;
  gap: 9px;
  position: relative;
}
.scard-row {
  display: flex; justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.scard-row-label {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-dim);
  display: inline-flex; align-items: center; gap: 8px;
}
.scard-winner .scard-row-label { color: oklch(74% 0.02 250); }
.scard-row-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.scard-winner .scard-row-value { color: oklch(97% 0.008 245); }
.scard-row-faded {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  font-weight: 400;
  margin-left: 2px;
}
.scard-winner .scard-row-faded { color: oklch(66% 0.02 250); }
.ppp-mini {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 100px;
  background: oklch(90% 0.02 245);
  color: var(--ink-dim);
  text-transform: uppercase;
}

.savings-delta {
  display: flex; align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 8px 22px -14px rgba(15, 21, 53, 0.12);
}
.savings-delta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  background: oklch(94% 0.07 145 / 0.5);
  color: oklch(35% 0.16 150);
  flex-shrink: 0;
}
.savings-delta-pill .mono-tag {
  letter-spacing: 0.16em;
  font-size: 10px;
  color: oklch(35% 0.16 150);
}
.savings-delta-text {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
  flex: 1;
}
.savings-delta-text strong {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -0.005em;
}
.savings-delta-text .accent {
  font-family: var(--font-display);
  font-weight: 600;
  color: oklch(35% 0.16 150);
  font-variant-numeric: tabular-nums;
}
.savings-delta-text .dim { color: var(--ink-dim); font-family: var(--font-mono); font-size: 12px; }
.savings-delta-num {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
  padding-left: 18px;
  border-left: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.savings-delta-num .mono-tag {
  letter-spacing: 0.16em;
  font-size: 10px;
}
.savings-delta-big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.025em;
  color: oklch(35% 0.16 150);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==== Footer ==== */
.footer {
  max-width: 100%;
  width: 100%;
  /* Sits flush against whatever section precedes it (the FAQ on the home
     page) — no margin gap to expose the body wash and create a seam. */
  margin: 0;
  padding: 56px max(32px, calc((100vw - 1180px) / 2)) 32px;
  display: grid;
  grid-template-columns: 1.2fr 2.4fr;
  gap: 48px;
  border-radius: 0;
  /* Match the FAQ's bottom orbital wash so the two sections flow into
     each other with no seam. The light translucent base over the body
     bg was creating a darker dip; here we use a solid, on-palette light
     ground tinted to land at the same value as the FAQ's end stop. */
  background: oklch(96.5% 0.012 245);
  border: none;
  box-shadow: none;
  position: relative;
}
.footer::before {
  /* Single hairline at the very top of the footer — a quiet editorial
     rule, not a hard seam. Sits inside the footer so it can't bleed any
     darker shadow up into the FAQ. */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(78% 0.02 245 / 0.5) 12%,
    oklch(78% 0.02 245 / 0.5) 88%,
    transparent 100%);
  pointer-events: none;
}
.footer-left { display: flex; flex-direction: column; gap: 16px; }
.footer-copy {
  color: var(--ink-dim);
  font-size: 13.5px;
  max-width: 360px;
  line-height: 1.6;
}
.footer-cols { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 48px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; text-align: right; }
.footer-col .mono-tag { margin-bottom: 6px; }
.footer-col a {
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--accent-strong); }
/* Email address beneath the footer description — editorial Instrument Serif.
   Universal (styles.css is loaded on every page); footer-email sits in
   .footer-left, not .footer-col, so footer-col link rules don't touch it. */
.footer-email {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: oklch(18% 0.02 245);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-email:hover { color: var(--accent-strong); }
.footer-bottom {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end;
  text-align: right;
  padding-top: 32px;
  margin-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.footer-disclaimer {
  grid-column: 1 / -1;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-dim);
  letter-spacing: 0.005em;
  opacity: 0.72;
}

/* Flag visuals */
.flag, .flag-lg {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  display: inline-block;
}
.flag { font-size: 18px; }
.flag-lg { font-size: 24px; line-height: 1; }

/* ==== How It Works — full-bleed sticky scroll stack ====
   Each card is a full-viewport section (100vw × 100vh) pinned to the top.
   As you scroll, the next card slides up and FULLY covers the previous one
   (edge to edge). No floating, no rounded corners — true page-section
   stacking, like Base44's onboarding.
   The section breaks out of .main's 1180px container to span the viewport. */
.how-it-works {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: 64px;
  margin-bottom: 0;
  padding: 0;
  /* Each .hiw-card is position:sticky; stacking is implicit because each
     section is 100vh tall and the next one's top sticks at 0, sliding over
     the previous one's content. */
}
/* `.hiw-track` wraps the three cards. On desktop it's display:contents — it
   generates no box, so the sticky stack lays out exactly as if the cards were
   direct children of `.how-it-works`. On mobile (≤768px) it becomes the
   horizontal swipe scroller. */
.hiw-track { display: contents; }
.hiw-card {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  max-height: 1080px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Background tints — a single blue/navy aurora that DEEPENS and cools as the
   user scrolls the three sections (the arc):
   1: pale slate-blue + peach wash (light) — unchanged
   2: same palette, noticeably deeper & cooler — pure blue/navy, no purple,
      ~45% of the way to full navy
   3: full dark midnight navy (matches the About-page CTA / footer) */
/* Background — ONE navy aurora system shared by all three sticky sections.
   The dusk progression is driven by TWO independent dials so the mid section
   stays a warm, saturated blue rather than washing out to flat grey:
     • the NAVY BASE darkness lives on each card's own `background`
     • the AURORA BLOBS (full-saturation peach/lavender/sage) live in ::after,
       their strength set per card via opacity.
   Same palette + same blob positions throughout — only base lightness and
   blob opacity climb. Card 03's base is the exact destination spec. */
.hiw-card-1,
.hiw-card-2,
.hiw-card-3 {
  isolation: isolate;
}
/* 01 — lightest: almost white with a hint of cool blue, plus the three
   navy-wash aurora blobs at their canonical positions, low opacity so they
   read as a soft pastel wash over the light base (not flat). */
.hiw-card-1 {
  background:
    radial-gradient(ellipse 88% 60% at var(--aurora-peach-pos),
      color-mix(in oklab, var(--aurora-peach) 48%, transparent) 0%,
      transparent 64%),
    radial-gradient(ellipse 82% 62% at var(--aurora-lavender-pos),
      color-mix(in oklab, var(--aurora-lavender) 42%, transparent) 0%,
      transparent 66%),
    radial-gradient(ellipse 96% 66% at var(--aurora-sage-pos),
      color-mix(in oklab, var(--aurora-sage) 40%, transparent) 0%,
      transparent 64%),
    linear-gradient(180deg,
      oklch(96% 0.02 245) 0%,
      oklch(94% 0.024 247) 100%);
  color: oklch(20% 0.03 252);
}
/* 02 — mid: the navy wash at mid intensity. Same aurora palette + blob
   positions as the full wash (section 03), at mid opacity over a genuinely
   dark mid-navy base — clearly darker than 01, lighter than 03. Dark enough
   that the content (and the right-hand mock) reads in white. The aurora
   colours/positions reference the navy-wash tokens. */
.hiw-card-2 {
  background:
    radial-gradient(ellipse 88% 60% at var(--aurora-peach-pos),
      color-mix(in oklab, var(--aurora-peach) 32%, transparent) 0%,
      transparent 66%),
    radial-gradient(ellipse 82% 62% at var(--aurora-lavender-pos),
      color-mix(in oklab, var(--aurora-lavender) 32%, transparent) 0%,
      transparent 68%),
    radial-gradient(ellipse 96% 66% at var(--aurora-sage-pos),
      color-mix(in oklab, var(--aurora-sage) 26%, transparent) 0%,
      transparent 66%),
    linear-gradient(180deg,
      oklch(44% 0.055 248) 0%,
      oklch(50% 0.05 256) 100%);
  color: oklch(96% 0.01 250);
}
/* 03 — full navy wash (aurora blobs over the navy base). */
.hiw-card-3 {
  background: var(--navy-wash-bg);
  color: oklch(96% 0.008 250);
}
.hiw-card-1::after,
.hiw-card-2::after,
.hiw-card-3::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* The canonical navy-wash aurora blobs (peach / lavender / sage) — never
     hardcoded; each card supplies its own base + opacity below. */
  background: var(--navy-aurora-blobs);
}
/* Card 01 keeps the shared aurora overlay (faint hint over its light base).
   Cards 02 & 03 carry their complete navy wash on the card itself, so their
   overlay is switched off to avoid doubling the blobs. */
/* All three cards now carry their complete aurora wash on the card itself
   (baked into the background), so the shared ::after overlay is switched off
   for every card to avoid doubling the blobs. */
.hiw-card-1::after,
.hiw-card-2::after,
.hiw-card-3::after { display: none; }
/* 03 keeps the unified navy aurora at full intensity (set in the shared rule
   above). Only its content layer needs lifting above the ::after overlay. */
.hiw-card-3 .hiw-inner { position: relative; z-index: 1; }

/* Two-column layout inside each section: text on the left, mockup right. */
.hiw-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
}

.hiw-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
}

/* Large step counter — top-left, bold and editorial */
.hiw-counter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1;
  display: flex; align-items: baseline; gap: 2px;
  margin-bottom: 4px;
}
.hiw-counter-n {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.hiw-counter-slash {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  opacity: 0.45;
  margin: 0 6px;
  font-weight: 400;
}
.hiw-counter-total {
  font-size: 22px;
  font-weight: 500;
  opacity: 0.55;
  letter-spacing: -0.02em;
}
.hiw-card-1 .hiw-counter { color: oklch(28% 0.08 235); }
.hiw-card-2 .hiw-counter { color: oklch(92% 0.04 248); }
.hiw-card-3 .hiw-counter { color: oklch(88% 0.04 250); }

.hiw-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 5.4vw, 80px);
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
  max-width: 600px;
}
.hiw-title .italic-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
  color: inherit;
  opacity: 0.9;
}
.hiw-card-1 .hiw-title .italic-serif { color: oklch(35% 0.11 235); }
.hiw-card-2 .hiw-title .italic-serif { color: oklch(88% 0.06 245); }
.hiw-card-3 .hiw-title .italic-serif { color: oklch(88% 0.06 245); }

.hiw-desc {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  margin: 0;
  max-width: 480px;
  opacity: 0.82;
  text-wrap: pretty;
}

.hiw-meta {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  flex-wrap: wrap;
}
.hiw-meta-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}

/* Right column — mockup container */
.hiw-right {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  min-height: 0;
}

/* ==== HiW Mockups — common ==== */
.hiw-mock {
  width: 100%;
  max-width: 520px;
  position: relative;
}
.hiw-card-1 .hiw-mock { color: oklch(22% 0.07 235); }
.hiw-card-2 .hiw-mock,
.hiw-card-3 .hiw-mock { color: oklch(96% 0.008 250); }

/* --- Mock 1: Profession picker --- */
.hiw-mock-profession {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 18px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 20px 60px -24px rgba(15, 21, 53, 0.22),
    0 6px 18px -8px rgba(15, 21, 53, 0.1);
}
.hmp-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hmp-eyebrow { color: oklch(40% 0.1 235); font-weight: 600; }
.hmp-count { opacity: 0.55; }
.hmp-search {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(35, 52, 90, 0.12);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  color: oklch(22% 0.06 235);
}
.hmp-search svg { opacity: 0.5; flex-shrink: 0; }
.hmp-caret {
  display: inline-block;
  font-weight: 200;
  opacity: 0.6;
  margin-left: 1px;
  animation: hiwCaret 1s steps(2) infinite;
}
@keyframes hiwCaret { 50% { opacity: 0; } }
.hmp-list {
  display: flex; flex-direction: column;
  gap: 2px;
}
.hmp-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: oklch(28% 0.05 235);
}
.hmp-row.selected {
  background: var(--ink);
  color: #fff;
}
.hmp-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: oklch(98% 0.005 250);
}
.hmp-tier-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(40% 0.1 235);
  font-weight: 600;
  margin-top: 4px;
}
.hmp-tiers {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(35, 52, 90, 0.1);
  border-radius: 10px;
}
.hmp-tier {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 7px;
  color: oklch(40% 0.06 235);
}
.hmp-tier.selected {
  background: oklch(22% 0.08 235);
  color: oklch(98% 0.005 250);
}

/* --- Mock 2: Countries pair --- */
.hiw-mock-countries {
  /* Navy-wash surface (aurora blobs over the navy base) + the canonical
     navy card shadow — not a flat panel. */
  background: var(--navy-wash-bg);
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--navy-card-shadow);
}
.hmc-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hmc-eyebrow { color: oklch(87% 0.05 70); font-weight: 600; }
.hmc-rate { opacity: 0.6; }
.hmc-pair {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 12px;
  align-items: stretch;
}
.hmc-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.hmc-card-target {
  background: oklch(87% 0.05 70 / 0.18);
  border-color: oklch(87% 0.05 70 / 0.4);
}
.hmc-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}
.hmc-card-target .hmc-card-eyebrow {
  color: oklch(87% 0.05 70);
  opacity: 0.9;
}
.hmc-flag { font-size: 28px; line-height: 1; margin: 4px 0 2px; }
.hmc-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.hmc-city {
  font-family: var(--font-body);
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 6px;
}
.hmc-stats {
  display: flex; flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hmc-stats > div {
  display: flex; justify-content: space-between;
}
.hmc-stats > div > span:first-child { opacity: 0.5; }
.hmc-stats > div > span:last-child { font-weight: 600; }
.hmc-bridge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  color: oklch(87% 0.05 70);
}
.hmc-bridge svg { width: 100%; height: 50px; opacity: 0.85; }
.hmc-bridge-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.hmc-foot {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  opacity: 0.7;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hmc-foot-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(87% 0.05 70);
  box-shadow: 0 0 0 3px oklch(87% 0.05 70 / 0.2);
}

/* --- Mock 3: Results dashboard --- */
.hiw-mock-results {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}
.hmr-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hmr-card-main {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background:
    radial-gradient(circle at 100% 0%, oklch(87% 0.05 70 / 0.3), transparent 60%),
    rgba(255, 255, 255, 0.05);
  display: flex; flex-direction: column;
  gap: 6px;
  min-height: 140px;
  justify-content: space-between;
}
.hmr-card-rows {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: flex; flex-direction: column;
  gap: 0;
  padding: 14px 18px;
}
.hmr-card-bars {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  padding: 14px 18px 12px;
}
.hmr-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}
.hmr-big {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: oklch(87% 0.05 70);
  line-height: 1;
}
.hmr-sign { font-size: 28px; opacity: 0.7; }
.hmr-num { font-size: 64px; }
.hmr-pct { font-size: 32px; opacity: 0.8; margin-left: 4px; }
.hmr-foot {
  font-family: var(--font-body);
  font-size: 12px;
  opacity: 0.65;
}
.hmr-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-body);
  font-size: 12.5px;
}
.hmr-row:last-child { border-bottom: none; }
.hmr-label { opacity: 0.6; }
.hmr-label-tip {
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: help;
}
.hmr-value {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: 14px;
}
.hmr-value em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-left: 4px;
  font-weight: 400;
}
.hmr-up { color: oklch(78% 0.13 145); }
.hmr-bars-head { margin-bottom: 10px; }
.hmr-bar-row {
  display: grid;
  grid-template-columns: 24px 36px 1fr 30px;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.hmr-bar-rank { opacity: 0.4; }
.hmr-bar-name { font-weight: 600; opacity: 0.85; }
.hmr-bar-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  overflow: hidden;
}
.hmr-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, oklch(87% 0.05 70), oklch(87% 0.05 70));
  border-radius: 100px;
}
.hmr-bar-val {
  text-align: right;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

/* ==== Cost of Living strip ==== */
.col-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.col-card {
  padding: 22px 24px;
  display: flex; flex-direction: column;
  gap: 16px;
  background: rgba(255, 255, 255, 0.5);
}
.col-card-head {
  display: flex; align-items: center; justify-content: space-between;
}
.col-card-head .mono-tag {
  letter-spacing: 0.14em;
  font-size: 10.5px;
}
.col-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
}
.col-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 8px;
}
.col-side {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.col-side.tgt { text-align: right; align-items: flex-end; }
.col-country {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.col-val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.col-side.tgt .col-val { color: var(--accent-strong); }
.col-arrow {
  color: var(--ink-dim);
  padding-bottom: 4px;
}
.col-diff {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.col-diff strong {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.col-diff.up strong { color: oklch(45% 0.16 22); }
.col-diff.down strong { color: oklch(38% 0.15 150); }
.col-diff.flat strong { color: var(--ink-2); }

/* ==== Visa difficulty tag ==== */
.visa-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 6px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.visa-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.visa-tag.visa-accessible {
  background: oklch(95% 0.04 145 / 0.7);
  color: oklch(38% 0.14 150);
  border-color: oklch(82% 0.08 145 / 0.5);
}
.visa-tag.visa-accessible .visa-dot { background: oklch(62% 0.16 145); }
.visa-tag.visa-moderate {
  background: oklch(96% 0.05 85 / 0.7);
  color: oklch(45% 0.13 75);
  border-color: oklch(85% 0.1 85 / 0.5);
}
.visa-tag.visa-moderate .visa-dot { background: oklch(75% 0.16 85); }
.visa-tag.visa-hard {
  background: oklch(95% 0.05 22 / 0.7);
  color: oklch(45% 0.16 22);
  border-color: oklch(85% 0.1 22 / 0.5);
}
.visa-tag.visa-hard .visa-dot { background: oklch(62% 0.18 22); }

/* Adjust ranking grid to fit visa tag in country column */
.ranking-row .country-name {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ranking-header .rank-co::after,
.ranking-row .rank-co .visa-tag { /* nothing — placeholder for selector spec */ }

/* ==== Savings — currency toggle (replaces USD basket) ==== */
.savings-currency-toggle {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.scurr-btn {
  padding: 7px 14px;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-dim);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.18s;
  white-space: nowrap;
}
.scurr-btn:hover { color: var(--ink); }
.scurr-btn.active {
  background: var(--accent-strong);
  color: oklch(98% 0.005 245);
  box-shadow: 0 2px 6px rgba(15, 21, 53, 0.15);
}

/* ==== Responsive ==== */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .topnav-pill { justify-content: space-between; }
  .ranking-header, .ranking-row { grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) 48px 96px 70px; gap: 12px; }
  .meta-item { padding: 0 24px; }
  .hiw-inner { padding: 40px 36px; gap: 36px; }
}
@media (max-width: 760px) {
  .main, .footer { padding-left: 18px; padding-right: 18px; }
  .route-aurora-inner { padding-left: 18px; padding-right: 18px; }
  .form-row.two { grid-template-columns: 1fr; }
  .form-row.with-swap { grid-template-columns: 1fr; }
  .swap-btn { margin: 0 auto; }
  .results-strip { grid-template-columns: 1fr; }
  .takehome-grid, .savings-grid { grid-template-columns: 1fr; }
  .savings-controls-wide { grid-template-columns: 1fr; gap: 24px; }
  .savings-compare { grid-template-columns: 1fr; }
  .savings-delta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .savings-delta-num { padding-left: 0; border-left: none; align-items: flex-start; }
  .scard-big { font-size: 64px; }
  .ppp-row { grid-template-columns: 1fr; gap: 12px; }
  .hero-meta { flex-wrap: wrap; gap: 16px; }
  .meta-divider { display: none; }
  .verdict-cards { grid-template-columns: 1fr; }
  .key-factors-grid { grid-template-columns: 1fr; }
  .cmp-row { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 8px; }
  /* Stacked cards on mobile — single column inside */
  .hiw-card { min-height: 0; }
  .hiw-inner { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
  .hiw-title { font-size: clamp(32px, 8vw, 44px); }
  .hiw-right { min-height: 320px; padding: 24px; }
  .hiw-right { order: 2; }
  .hiw-mock { max-width: 100%; }
  /* Ranking — drop tax + col index columns on phones, keep visa */
  .ranking-header, .ranking-row { grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) 96px; gap: 10px; }
  .rank-bar, .rank-tax, .rank-coli { display: none; }
  .col-strip { grid-template-columns: 1fr; }
  .col-versus { gap: 12px; }
}

/* Empty-state placeholder for the Display Currency segchip — appears when
   no countries are picked yet. Renders as a quiet dashed pill so the row
   doesn't collapse, but it's clearly inactive. */
.seg-chips.seg-chips-empty {
  background: transparent;
  border: 1px dashed var(--line);
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 46px;
}
.seg-chip-empty {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  /* Match the dropdown / chip text colour above. */
  color: var(--ink);
  padding: 0 14px;
}

/* When no profession/country is picked, the dropdown shows its placeholder
   string instead of a value. Style it as a subdued, monospace cue. */
.dd-value:empty::before,
.dd-trigger > .dd-value {
  /* placeholder fallback (handled by the JS render path) */
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORLD MAP — themable tokens for arc & city markers
   ═══════════════════════════════════════════════════════════════════════════ */
.world-map .wm-grad-cur { stop-color: oklch(40% 0.13 245); }
.world-map .wm-grad-tgt { stop-color: oklch(28% 0.13 245); }
.world-map .wm-arc-stop-a { stop-color: oklch(45% 0.13 245); }
.world-map .wm-arc-stop-b { stop-color: oklch(28% 0.13 245); }
.world-map .wm-arc-stop-c { stop-color: oklch(22% 0.13 245); }
.world-map .wm-marker-cur { fill: oklch(40% 0.13 245); }
.world-map .wm-ring-cur { stroke: oklch(40% 0.13 245); }
.world-map .wm-label-cur { fill: oklch(40% 0.13 245); }
.world-map .wm-marker-tgt { fill: oklch(22% 0.13 245); }
.world-map .wm-ring-tgt { stroke: oklch(22% 0.13 245); }
.world-map .wm-label-tgt { fill: oklch(22% 0.13 245); }

/* Light orbital variant — muted indigo dots & arcs on the light ground.
   No warm tones (those belong to the About origin map). */
/* Origin pin navy, destination pin amber. Labels stay navy for legibility. */
.route-map-aurora .wm-marker-cur { fill: var(--impact-navy); }
.route-map-aurora .wm-ring-cur { stroke: var(--impact-navy); }
.route-map-aurora .wm-label-cur { fill: var(--impact-navy); }
.route-map-aurora .wm-marker-tgt { fill: var(--impact-amber); }
.route-map-aurora .wm-ring-tgt { stroke: var(--impact-amber); }
.route-map-aurora .wm-label-tgt { fill: var(--impact-navy); }

/* City name + coord labels — mirror the FlightMap label vocabulary so the
   active route view reads as a focused view of the same atlas. Same size
   as the FlightMap labels — small caps, not oversized. */
.route-map-aurora .wm-label-name {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.route-map-aurora .wm-label-coords {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.15px;
  letter-spacing: 0.04em;
  fill: oklch(48% 0.06 258);
  opacity: 0.7;
}

/* Single route curve cur → tgt. Slow draw-in, then static. Amber-gold to
   echo the strip's data values and lead the eye toward the destination. */
.route-map-aurora .wm-route-line {
  stroke: oklch(82% 0.12 78);
  /* The viewBox is 96 units wide (~9–13× on-screen scale), so a literal 1.5
     would render ~13px thick. 0.12 user-units ≈ 1.5px on screen — the
     intended thin line — and keeps the dash-based draw-in working. */
  stroke-width: 0.12;
  stroke-linecap: round;
  opacity: 0;
  animation: wm-route-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  filter: drop-shadow(0 0 1px oklch(82% 0.12 78 / 0.75));
}
@keyframes wm-route-draw {
  0%   { opacity: 0;    stroke-dashoffset: var(--len, 100); }
  15%  { opacity: 0.85; }
  100% { opacity: 0.85; stroke-dashoffset: 0; }
}
/* Network links — thin muted indigo/navy curves, draw in on scroll. */
.route-map-aurora .wm-net-line {
  stroke: oklch(34% 0.10 268);
  stroke-width: 0.18;
  stroke-linecap: round;
  opacity: 0.55;
  animation: wm-net-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes wm-net-draw {
  from { stroke-dashoffset: var(--len, 100); }
  to   { stroke-dashoffset: 0; }
}
/* City dots / rings — subtle fade in, no constant looping animation. */
.route-map-aurora .wm-net-dot {
  opacity: 0;
  animation: wm-net-dot-fade 0.55s ease-out forwards;
}
@keyframes wm-net-dot-fade {
  from { opacity: 0; }
  to   { opacity: var(--final-op, 0.85); }
}
.route-map-aurora .wm-net-label {
  opacity: 0;
  animation: wm-net-dot-fade 0.6s ease-out forwards;
  --final-op: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUTE — full-bleed light orbital panel
   Same soft white + muted indigo/peach/sky orbital wash used across the
   home page. Light ground, no card frame.
   ═══════════════════════════════════════════════════════════════════════════ */
.route-aurora {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  /* Bottom padding mirrors the gap above the strip so YOUR ROUTE sits centered
     between the toggle card and the result cards (8 + 0 + 28 = 36px below,
     matching 28 + 8 = 36px above). */
  padding: 8px 0;
  position: relative;
  overflow: hidden;
  /* Background removed — the section now sits on the page's own wash rather
     than carrying its own aurora panel. */
  background: transparent;
}

.route-aurora::before {
  display: none;
}
.route-aurora::after { display: none; }
.route-aurora-inner {
  max-width: 1180px;
  padding: 0 32px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  /* Flush: the map container and the YOUR ROUTE strip butt directly together
     so they read as one continuous navy block (was 28px). */
  gap: 0;
}
.route-aurora .route-eyebrow {
  color: oklch(45% 0.06 245);
  letter-spacing: 0.32em;
  text-align: center;
  width: 100%;
}
.route-aurora .route-header { justify-content: center; text-align: center; }
.route-map-wrap-aurora {
  position: relative;
  /* Lets the SVG drive its own height via aspect-ratio (matches the
     static FlightMap exactly). */
  height: auto;
  width: 100%;
  /* Drives the currentColor of the SVG — muted indigo on the light ground */
  color: oklch(40% 0.1 268);
}
.route-map-aurora { width: 100%; height: auto; display: block; }
/* Light-ground world map — quiet grid + dim land dots in slate.
   .wm-others circles get their muted colours assigned per-dot in JSX. */
.route-map-aurora .wm-grid { color: oklch(55% 0.05 245); opacity: 0.45; }
.route-map-aurora .wm-land circle { fill: oklch(60% 0.04 245); opacity: 0.4; }
/* ── Navy-wash atlas (active route map) ──────────────────────────────────
   The map now shares the navy wash + cream language of the YOUR ROUTE strip
   below it. Everything is a single warm cream (--atlas-cream), layered by
   OPACITY into a depth hierarchy: faint continents → minor cities → mid
   cities → major hubs, so the map reads as an accurate world-city index
   rather than an undifferentiated dot cloud. The route arc + the two
   endpoints carry the only colour (cream origin, amber-gold destination).
   All rules scoped to .route-map-aurora so the homepage FlightMap keeps its
   light-ground indigo palette. */
.route-map-aurora { --atlas-cream: oklch(90% 0.035 78); }

/* Reference grid + ocean labels — quietest layer, barely-there annotation. */
.route-map-aurora .fm-grid { color: var(--atlas-cream); opacity: 0.14; }
.route-map-aurora .fm-ocean-label { fill: var(--atlas-cream); opacity: 0.22; }

/* Continental base dot cloud — faint texture beneath the real cities. */
.route-map-aurora .fm-land circle { fill: var(--atlas-cream); opacity: 0.16; }

/* City tiers — accurate major / mid / minor roster, separated by size + glow.
   Minor: small quiet dots. Mid: medium. Major hubs: a bright dot inside a
   thin halo ring so the global hubs clearly outrank the rest. */
.route-map-aurora .wm-atlas-minor circle { fill: var(--atlas-cream); opacity: 0.4; }
.route-map-aurora .wm-atlas-mid circle   { fill: var(--atlas-cream); opacity: 0.62; }
.route-map-aurora .wm-atlas-hub-dot       { fill: var(--atlas-cream); opacity: 0.92; }
.route-map-aurora .wm-atlas-hub-ring      { stroke: var(--atlas-cream); stroke-width: 0.1; opacity: 0.38; }

/* Endpoint name + coord labels — the global .fm-label-* fills are dark indigo
   (tuned for the light homepage map) and vanish on the navy base, so override
   them to cream here. The origin reads cream; only the destination value is
   amber-gold, mirroring the strip's cream-foreground / gold-data split. */
.route-map-aurora .fm-label-name { fill: var(--atlas-cream); opacity: 0.95; }
.route-map-aurora .fm-label-coords { fill: var(--atlas-cream); opacity: 0.55; }
/* Route footer — no card, sits clean on the light orbital ground */
.route-footer-aurora {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  gap: 32px;
  align-items: center;
  padding: 24px 32px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* Match hero form card width */
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  /* Navy glass — same treatment as the nav pill on a navy base. The inner
     highlight simulates light on the top edge (physical thickness); the outer
     shadow grounds it against the page. */
  background: oklch(38% 0.055 245);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 24px rgba(0, 0, 0, 0.18);
  color: var(--ink);
}
/* Navy-strip text palette — cream foreground + amber-gold for the data values. */
.route-footer-aurora .route-end-name { color: oklch(87% 0.05 70); }
.route-footer-aurora .route-dist-num { color: oklch(84% 0.06 76); }
.route-footer-aurora .route-dist-unit { color: oklch(87% 0.05 70 / 0.5); }
.route-footer-aurora .route-time-val { color: oklch(84% 0.06 76); }
/* FROM / TO / DISTANCE / TIME small labels — cream at 50%. */
.route-footer-aurora .mono-tag.dim { color: oklch(87% 0.05 70 / 0.5); letter-spacing: 0.18em; }
/* Country name (last label in each endpoint column) — cream at 60%. */
.route-footer-aurora .route-end .mono-tag.dim:last-child { color: oklch(87% 0.05 70 / 0.6); }



/* "YOUR ROUTE" section label sits flush above the strip as its header. */
.route-strip-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.route-strip-label {
  /* Merged map + strip read as one continuous navy zone, so the redundant
     "YOUR ROUTE" header is hidden. The chevron on the strip still drives the
     collapse, so functionality is unaffected. */
  display: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
  /* Stays dark (--ink) — the label sits above the navy strip on the light page
     background, where cream would read too faint. */
  color: var(--ink);
  padding-left: 2px;
}


/* TIME column — mirrors the centered DISTANCE column. */
.route-time {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 12px;
  text-align: center;
}
.route-time .mono-tag { letter-spacing: 0.16em; font-size: 10px; }
.route-time-val {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  text-wrap: balance;
}


/* Results sections under the route. */
.main-results { padding-top: 0; padding-bottom: 112px; }
/* First section under the route (the CURRENT/TARGET cards) carries the gap that
   keeps the YOUR ROUTE strip centered between the toggles and the cards (8 +
   0 + 28 = 36px, equal to the 36px above the strip). */
.main-results .results-section { padding-top: 28px; }

/* ═══════════════════════════════════════════════════════════════════════════
   STATS COUNTER — four oversized odometer numbers, full bleed.
   Light pastel ground that ties into the hero. Dark text, no cards.
   ═══════════════════════════════════════════════════════════════════════════ */
.stats-counter {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 96px 24px 88px;
  position: relative;
  background: #ffffff;
}

/* Editorial header — sits above the stat row */
.stats-head {
  max-width: 1180px;
  margin: 0 auto 56px;
  text-align: center;
  display: flex; flex-direction: column;
  gap: 16px;
  align-items: center;
}
.stats-eyebrow {
  letter-spacing: 0.32em;
  font-size: 11px;
  color: oklch(45% 0.06 245);
}
.stats-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 0;
  max-width: 600px;
  color: var(--ink);
  text-wrap: balance;
}
.stats-heading .italic-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-strong);
}
.stats-lede {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

.stats-inner {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 96px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: stretch;
  justify-items: stretch;
  border-top: 1px solid oklch(75% 0.02 245 / 0.45);
  border-bottom: 1px solid oklch(75% 0.02 245 / 0.45);
}
.stat-cell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  position: relative;
  padding: 36px 0 40px;
}
.stat-cell:not(:first-child) {
  border-left: none;
}
.stat-cell::before { content: none; }
.stat-cell-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.stat-index {
  font-weight: 600;
  color: var(--ink-2);
}
.stat-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 100px;
  background: oklch(94% 0.04 145 / 0.6);
  color: oklch(35% 0.16 150);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  border: 1px solid oklch(80% 0.08 145 / 0.5);
}
.stat-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: oklch(62% 0.16 145);
  box-shadow: 0 0 0 3px oklch(62% 0.16 145 / 0.25);
  animation: pulse 2.2s ease-in-out infinite;
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(72px, 8vw, 124px);
  letter-spacing: -0.055em;
  line-height: 0.88;
  color: oklch(22% 0.04 250);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
}
.stat-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.stat-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 34ch;
  text-wrap: pretty;
  margin-top: 2px;
}

/* Sources subheading — full-width caption below the stats */
.stats-sources {
  max-width: 1180px;
  margin: 96px auto 0;
  padding: 0;
  border-top: none;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(38% 0.03 250);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0.5s;
}
.stats-sources.in { opacity: 1; transform: translateY(0); }
.stats-sources-label {
  font-weight: 500;
  color: oklch(34% 0.04 250);
}
.stats-sources-dash {
  color: oklch(58% 0.02 250);
  margin: 0 -4px;
}
.stats-sources-list {
  display: inline-flex; align-items: center; gap: 12px;
  flex-wrap: wrap; justify-content: center;
  font-weight: 600;
  color: oklch(28% 0.04 250);
}
.stats-sources-sep {
  color: oklch(65% 0.02 250);
  font-weight: 400;
}

/* Odometer reels — each digit is a 1em-tall window, with a strip of 0–9
   stacked behind it. We translate the strip up to land on the target digit. */
.odo {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.odo-static {
  display: inline-block;
  line-height: 1;
}
.odo-reel {
  display: inline-block;
  position: relative;
  height: 1em;
  width: 0.62em; /* slightly tighter than 1ch so digits read as a number */
  overflow: hidden;
  vertical-align: baseline;
  line-height: 1;
}
.odo-strip {
  display: flex;
  flex-direction: column;
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.odo-digit {
  height: 1.1em;
  display: flex;
  align-items: flex-start;
  line-height: 1;
}
/* Date variant — fades + slides up rather than spinning */
.stat-date {
  display: inline-block;
  font-size: 0.58em; /* "May 2026" needs less width than the big digits */
  letter-spacing: -0.04em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0.5s;
}
.stat-date.in { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════
   FLIGHT MAP — deep soft navy band with aurora-style gradient washes
   (teal, violet, indigo) bleeding through like northern lights.
   Ethereal and luminous rather than dark and flat.
   ═══════════════════════════════════════════════════════════════════════════ */
.flight-map {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 120px 24px 132px;
  position: relative;
  /* Light orbital wash — same family as the hero / stats. Soft white
     base with muted indigo/sky/peach glows from the edges. */
  background:
    radial-gradient(ellipse 55% 45% at 14% 24%, oklch(92% 0.05 155 / 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 86% 22%, oklch(93% 0.045 290 / 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 50% 92%, oklch(95% 0.04 235 / 0.6) 0%, transparent 70%),
    linear-gradient(180deg, oklch(98% 0.008 245) 0%, oklch(97% 0.012 245) 100%);
  overflow: hidden;
}
.flight-map::before {
  /* Subtle aurora drift — kept very soft on the light ground */
  content: "";
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 40% 25% at 30% 30%, oklch(85% 0.06 260 / 0.25) 0%, transparent 60%),
    radial-gradient(ellipse 45% 28% at 70% 70%, oklch(85% 0.06 290 / 0.22) 0%, transparent 60%);
  filter: blur(50px);
  pointer-events: none;
  animation: fmAurora 18s ease-in-out infinite alternate;
}
.flight-map::after { display: none; }
@keyframes fmAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.06); }
}

/* Tagline overlay — italic serif phrase floating above the map */
.fm-overlay {
  max-width: 1180px;
  margin: 0 auto 64px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.fm-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: oklch(45% 0.06 245);
  margin-bottom: 28px;
}
.fm-tagline {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 74px);
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 0 auto;
  max-width: 600px;
  color: oklch(20% 0.04 245);
  text-wrap: balance;
}
.fm-tagline-em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: oklch(28% 0.08 270);
  font-size: 1em;
}
.fm-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: oklch(40% 0.03 245);
  max-width: 540px;
  margin: 24px auto 0;
  text-wrap: balance;
}
.fm-sub strong {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--font-display);
}

.fm-svg {
  display: block;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  height: auto;
  aspect-ratio: 16 / 8;
  max-height: 640px;
  position: relative;
  z-index: 1;
}
/* Desktop only — enlarge the map a touch so it reads bigger on wide screens.
   Mobile keeps its own (overridden) aspect-ratio + max-height, untouched. */
@media (min-width: 769px) {
  .fm-svg {
    max-width: 1480px;
    max-height: 760px;
  }
}

.fm-grid { color: oklch(55% 0.05 245); opacity: 0.45; }
.fm-land circle { fill: oklch(60% 0.04 245); opacity: 0.4; }
.fm-minor circle { fill: oklch(48% 0.06 260); opacity: 0.65; }
.fm-mid circle {
  fill: oklch(40% 0.10 258);
  opacity: 0.85;
}

/* Major-hub city labels — IBM Plex Mono uppercase + small coord subtext.
   Matches the label vocabulary used on the About origin map (Marble Bar /
   Perth), but in muted indigo so the home-page palette stays consistent —
   no warm beige / terracotta. Low opacity so the labels never crowd the
   map; treated as quiet annotation, not a primary layer. */
.fm-label-name {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  fill: oklch(32% 0.10 258);
  opacity: 0.78;
}
.fm-label-coords {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.15px;
  letter-spacing: 0.04em;
  fill: oklch(48% 0.06 258);
  opacity: 0.62;
}

/* Network links — hairline muted indigo/navy curves between the 8 labeled
   hub cities. Each link draws in SEQUENTIALLY: one stroke completes, a brief
   pause, then the next begins — the world connects city by city rather than
   the whole web loading at once. Per-line animation-delay is set inline
   (index * step); fill-mode `both` keeps each line fully hidden until its
   turn and frozen at the final state afterwards. */
.fm-net-line {
  stroke: oklch(34% 0.10 268);
  stroke-width: 0.07;
  stroke-linecap: round;
  opacity: 0;
  animation: fmNetDraw 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes fmNetDraw {
  0%   { opacity: 0;    stroke-dashoffset: var(--len, 100); }
  20%  { opacity: 0.55; }
  100% { opacity: 0.55; stroke-dashoffset: 0; }
}

/* City dots — fade in once on scroll-into-view, no constant pulse. */
.fm-net-dot {
  opacity: 0;
  animation: fmNetDot 0.55s ease-out forwards;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes fmNetDot {
  from { opacity: 0; }
  to   { opacity: var(--final-op, 0.85); }
}

/* Major-hub pulse halo — radiates outward continuously so the map keeps
   a faint heartbeat while the user scrolls. Scales up + fades to nothing,
   loops forever; each hub starts on its own phase (set inline). */
.fm-city-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: fmCityPulse 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  opacity: 0;
}
@keyframes fmCityPulse {
  0%   { transform: scale(0.6); opacity: 0.65; }
  70%  { opacity: 0.05; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Static city/label opacities — used when the dots & labels are rendered
   outside the animated-network group and must be visible from first paint.
   The hub layers cascade from a soft outer glow to a crisp inner dot. */
.fm-minor circle { opacity: 0.65; }
.fm-mid circle { opacity: 0.85; }
.fm-city-glow-static { opacity: 0.22; }
.fm-city-dot-static  { opacity: 1; }
.fm-city-ring-static { opacity: 0.55; }
.fm-static-label { opacity: 1; }

/* Ocean & sea labels — watermark layer beneath the network. Italic,
   spaced caps, very low opacity so they read as geographic annotation
   rather than chart copy. Pointer-events disabled so they never block
   interaction with map elements above. */
.fm-ocean-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  fill: oklch(48% 0.04 245);
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
}

/* Major hub label group — fades in as a unit after lines and dots. */
.fm-net-label {
  opacity: 0;
  animation: fmNetDot 0.6s ease-out forwards;
  --final-op: 1;
}

@media (max-width: 760px) {
  .stats-counter { padding: 64px 18px 16px; }
  .stats-head { margin-bottom: 36px; }
  .stats-inner { grid-template-columns: 1fr; gap: 0; padding: 0 18px; border-top: 1px solid oklch(78% 0.02 245 / 0.45); border-bottom: 1px solid oklch(78% 0.02 245 / 0.45); }
  .stat-cell { padding: 28px 18px; }
  .stat-cell:not(:first-child) { border-left: none; border-top: 1px solid oklch(78% 0.02 245 / 0.45); }
  .stat-num { font-size: clamp(56px, 16vw, 96px); }
  .stats-sources { flex-direction: column; gap: 10px; margin-top: 28px; letter-spacing: 0.14em; }
  .stats-sources-dash { display: none; }
}

/* ── Mobile FlightMap (≤768px) — zoomed, full-bleed, no dead zone ──────────
   The JSX swaps in a cropped viewBox ("20 16 78 56") on mobile; here we match
   the container's aspect-ratio to it so the map fills the width with NO
   letterbox whitespace above/below, drop the side padding so it runs edge to
   edge, and nudge up the dot radii + label type so everything reads cleanly
   at phone scale. Desktop is untouched. */
@media (max-width: 768px) {
  .flight-map { padding: 72px 0 56px; }
  .fm-overlay { padding: 0 22px; }
  .fm-svg {
    aspect-ratio: 78 / 56;
    max-height: none;
  }
  /* Proportional bumps so dots stay visible at the zoomed scale. */
  .fm-land circle { r: 0.52; }
  .fm-minor circle { r: 0.46; }
  .fm-mid circle { r: 0.74; }
  /* Labels — larger so city names + coords are legible on a phone. */
  .fm-label-name { font-size: 2.4px; }
  .fm-label-coords { font-size: 1.8px; }
}


/* ═════════════════════════════════════════════════════════════════
   Data load + error states (DataGate)
   ───────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────
   Loading splash (DataGate) — full-screen brand splash. The site's own
   pastel aurora (reusing .bg-base + .bg-aurora), the Salary Atlas globe
   slowly rotating, and a thin determinate progress line beneath it.
   No text. Fades out over the App once data is ready.
   ───────────────────────────────────────────────────────────────── */
.atlas-splash {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg, #fefefe);
  opacity: 1;
  transition: opacity 0.55s ease;
}
.atlas-splash.is-leaving { opacity: 0; pointer-events: none; }
.atlas-splash-stage {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 26px;
}
/* The globe logo — the actual nav mark, spinning a slow, smooth, continuous
   360°. transform-origin centred so it turns on the spot, not a wobble. */
.atlas-splash-globe {
  width: 92px; height: 92px;
  color: var(--ink);
  transform-origin: 50% 50%;
  animation: atlas-splash-spin 10s linear infinite;
}
@keyframes atlas-splash-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Thin progress line — grows left→right, cool-blue --accent fill. */
.atlas-splash-track {
  width: 132px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  overflow: hidden;
}
.atlas-splash-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .atlas-splash-globe { animation: none; }
}

.data-error {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 24px;
  background: var(--bg, #f6f3ef);
}
.data-error-card {
  max-width: 720px;
  width: 100%;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 32px 36px;
  font-family: var(--font-body);
  color: var(--ink, #1a1a1a);
}
.data-error-card h2 {
  font-family: var(--font-display, var(--font-body));
  font-size: 28px;
  line-height: 1.15;
  margin: 10px 0 18px;
  letter-spacing: -0.01em;
}
.data-error-pre {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 18px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 50vh;
  overflow: auto;
  color: oklch(38% 0.13 25);
}
.data-error-hint {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.72;
  margin: 0;
}
.data-error-hint code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: rgba(0,0,0,0.05);
  padding: 1px 6px;
  border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FAQ — frequently asked questions
   Same light orbital ground as the rest of the landing. No cards or heavy
   borders; just stacked rows separated by hairlines. First row open by
   default. Plus/cross icon morphs as you toggle.
   ═══════════════════════════════════════════════════════════════════════════ */
.faq-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  /* No bottom margin — the footer butts directly against the FAQ. The
     gradient terminates at the same lightness as the footer's translucent
     base so the seam disappears. */
  margin-bottom: 0;
  padding: 120px 24px 132px;
  position: relative;
  background:
    radial-gradient(ellipse 50% 50% at 15% 25%, oklch(94% 0.05 45 / 0.5) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 85% 75%, oklch(93% 0.045 290 / 0.45) 0%, transparent 65%),
    linear-gradient(180deg, oklch(98% 0.008 245) 0%, oklch(96.5% 0.012 245) 100%);
}
.faq-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 96px;
  align-items: start;
}
.faq-head {
  text-align: left;
  position: sticky;
  top: 96px;
}
.faq-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: oklch(45% 0.06 245);
  margin-bottom: 20px;
}
.faq-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin: 0 0 20px;
  color: var(--ink);
  max-width: 14ch;
  text-wrap: balance;
}
.faq-title-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-strong);
}
.faq-sub {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 36ch;
  margin: 0;
}
.faq-sub a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 3px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-soft);
}
.faq-row {
  position: relative;
  border-bottom: 1px solid var(--line-soft);
}
/* No left accent bar, no frosted lift plate — clean stacked list */
.faq-row::before,
.faq-row::after { content: none; display: none; }
.faq-row.open { background: transparent; }

.faq-q {
  width: 100%;
  background: transparent;
  border: none;
  /* Compact list rhythm — rows breathe slightly but read as a connected list */
  padding: 20px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 0.18s ease;
}
.faq-q:hover { color: var(--accent-strong); }
.faq-q-text { flex: 1; text-wrap: balance; align-self: center; }

/* Bare plus/cross icon — no circle, no border, no background, no container.
   Just the plain symbol that rotates 45° to become an ×. */
.faq-q-icon {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  line-height: 1;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  padding: 0;
  box-shadow: none;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.18s ease;
}
.faq-row.open .faq-q-icon {
  transform: rotate(45deg);
  background: transparent;
  border: none;
  color: var(--accent-strong);
}
.faq-q:hover .faq-q-icon { color: var(--accent-strong); }
.faq-q-icon svg { display: block; }
.faq-cross-v, .faq-cross-h { transition: opacity 0.18s ease; }

.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  /* Clip the answer entirely when collapsed. overflow:hidden on the wrapper
     is what actually keeps the answer text out of the page when the row is
     closed — without it, grid-template-rows: 0fr can leak min-content
     height through the auto-sized grid item. */
  overflow: hidden;
  visibility: hidden;
  transition:
    grid-template-rows 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.32s;
}
.faq-row.open .faq-a-wrap {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0s;
}
.faq-a-wrap > .faq-a {
  overflow: hidden;
  /* Belt-and-braces — explicit min-height: 0 stops auto-sized grid items
     from forcing their min-content height through the 0fr row. */
  min-height: 0;
  margin: 0;
}
.faq-a {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-2);
  /* Closed: zero padding so the 0fr grid track collapses to true 0 — any
     padding here raises the item's min-content size and inflates closed
     rows. Bottom padding is reapplied when the row opens, so the answer
     still has breathing room before the divider. */
  padding: 0 56px 0 4px;
  text-wrap: pretty;
  max-width: 70ch;
}
.faq-row.open .faq-a { padding-bottom: 24px; }
.faq-a em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
}
.faq-a strong { color: var(--ink); font-weight: 600; }

@media (max-width: 980px) {
  .faq-inner { grid-template-columns: 1fr; gap: 48px; }
  .faq-head { position: static; }
  .faq-title { max-width: 18ch; }
}
@media (max-width: 760px) {
  .faq-section { padding: 80px 18px 88px; }
  .faq-inner { gap: 36px; }
  .faq-q { padding: 16px 4px; }
  .faq-a { padding: 0 4px 18px; }
  .fm-overlay { margin-bottom: 40px; }
}

/* ============================================================
   BREADCRUMB TRAIL — Region / Industry / Country / Profession.
   Sits quietly below the floating nav, above the page hero.
   The bar's top padding clears the sticky nav; horizontal
   alignment comes from the parent column (*-main padding, or
   the region-crumb-bar wrapper for the standalone Region page).
   ============================================================ */
.crumb-bar {
  padding-top: 124px;
}
/* Region has no *-main wrapper, so its bar carries the column metrics. */
.region-crumb-bar {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-dim);
}
.crumbs .crumb {
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.16s ease;
}
.crumbs a.crumb:hover { color: var(--accent-strong); }
.crumbs .crumb-current { color: var(--ink-2); }
.crumbs .crumb-sep { color: var(--line); user-select: none; }
@media (max-width: 980px) {
  .crumb-bar { padding-top: 112px; }
  .region-crumb-bar { padding-left: 28px; padding-right: 28px; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE HOMEPAGE FIXES (≤768px)
   Scoped strictly to small screens — desktop layout is untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Fix 1: nav hamburger + full-screen overlay ───────────────────────────
   The burger is a BARE ICON — no background, border or fill, just the glyph
   sitting inside the pill. Hidden until the mobile breakpoint. Tapping it
   opens a full-screen frosted overlay (built by nav-mobile.js). */
.nav-burger {
  display: none; /* shown at ≤768px */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}
.nav-burger:hover { opacity: 0.6; }
.nav-burger:active { opacity: 0.45; }
.nav-burger svg { display: block; }

/* Full-screen overlay menu. Frosted glass over the blurred page, logo
   top-left, × top-right, large stacked links. Fades + lifts in. */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  padding: 18px 24px calc(env(safe-area-inset-bottom, 0px) + 40px);
  /* Light frosted tint — the page content reads through, softly blurred. */
  background:
    radial-gradient(ellipse 90% 50% at 50% 8%,
      oklch(92% 0.05 290 / 0.18) 0%, transparent 60%),
    rgba(248, 249, 252, 0.62);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  opacity: 0;
  transition: opacity 0.26s ease;
}
.nav-overlay.open { opacity: 1; }
body.nav-overlay-lock { overflow: hidden; }

.nav-overlay-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.nav-overlay-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.nav-overlay-logo .logo { color: var(--ink); }
.nav-overlay-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}
.nav-overlay-close:hover { opacity: 0.6; }
.nav-overlay-close:active { opacity: 0.45; }

.nav-overlay-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding-bottom: 6vh;
}
.nav-overlay-links a {
  font-family: var(--font-display);
  font-size: clamp(34px, 11vw, 52px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.nav-overlay-links a:active { opacity: 0.6; }
.nav-overlay-links a.active { color: var(--accent-strong); }
/* Staggered rise-in for the links once the overlay is open. */
.nav-overlay.open .nav-overlay-links a {
  animation: nav-link-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.06s + var(--i, 0) * 0.05s);
}
@keyframes nav-link-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-overlay { transition: none; }
  .nav-overlay.open .nav-overlay-links a { animation: none; }
}

@media (max-width: 768px) {
  /* Fix 1 — hamburger only: show burger, hide the inline links + CTA. */
  .nav-burger { display: inline-flex; }
  .nav-links { display: none; }
  .topnav-pill .nav-cta { display: none; }

  /* Fix 2 — pay-period toggle: full width, equal columns, never clipped.
     min-width:0 lets the equal-width chips shrink past their text's
     intrinsic size; the responsive font keeps the longest label
     ("Fortnightly") legible without spilling past the viewport. */
  .form-card { padding-left: 1.25rem; padding-right: 1.25rem; }
  .form-card .seg-chips { width: 100%; gap: 4px; padding: 4px; }
  .form-card .seg-chip,
  .form-card .seg-chip.active {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 4px;
    font-size: clamp(10px, 2.8vw, 13px);
    letter-spacing: -0.01em;
    text-align: center;
  }

  /* NOTE — the "How it works" 01/02/03 mobile snap stack is defined ONCE, in
     the consolidated block further down (search "How it works" scroll stack).
     The hero is deliberately NOT part of that container: it sits above it in
     normal document flow (<main class="main">) and free-scrolls; the snap
     container wraps only sections 01–03. Don't re-add a second definition here. */

  /* Fix 4 — role/profession dropdown: cap to the viewport so the list is
     always fully scrollable and no options are clipped below the fold. */
  .dd-menu { max-height: min(340px, 60vh); }

  /* ════════════════════════════════════════════════════════════════════
     ACTIVE-STATE MOBILE FIXES — the post-search homepage. Every rule below
     is mobile-only (≤768px). Desktop layout is untouched. These sit after
     the older 760px block in source order, so they win on any conflict.
     ════════════════════════════════════════════════════════════════════ */

  /* ── Fix 1 — Persistent bottom comparison bar ─────────────────────────
     Keep it to a single line that never exceeds the viewport: shrink type,
     truncate the profession with an ellipsis, hold the route (country →
     country) on one line, and drop the two secondary metadata tags
     ("COMPARING", "ANNUALLY · USD") plus their dividers so the essentials
     fit. */
  .sticky-context { bottom: 14px; padding: 0 10px; }
  .sc-inner {
    width: 100%;
    max-width: 100%;
    gap: 8px;
    padding: 7px 9px;
    font-size: 12px;
    flex-wrap: nowrap;
  }
  .sc-inner > .mono-tag.dim,
  .sc-inner > .sc-divider { display: none; }
  .sc-chip {
    min-width: 0;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sc-route {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .sc-country { font-size: 12px; }
  .sc-arrow { margin: 0 2px; }
  .sc-reset-btn { width: 26px; height: 26px; flex-shrink: 0; }
  .sc-edit-btn {
    flex-shrink: 0;
    padding: 6px 11px 6px 9px;
    font-size: 9.5px;
  }

  /* ── Fix 2 — Verdict reveal: winner name + green Purchasing-Power-Gain
     card. Stack the card below the headline at full width; shrink the mega
     figure so nothing overflows and all card text wraps normally. */
  .verdict-reveal {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
  }
  .verdict-name-mega { font-size: clamp(46px, 13vw, 76px); }
  .verdict-stat-card { padding: 22px 22px; }
  .vsc-num, .animated-num.vsc-num { font-size: clamp(64px, 17vw, 96px); }
  .vsc-sign { font-size: 44px; }
  .vsc-pct { font-size: 40px; }
  .vsc-foot { font-size: 13px; }

  /* ── Fix 3 — CURRENT / YOUR MOVE versus cards. Stack vertically: CURRENT
     on top, the percentage indicator in the middle, YOUR MOVE below. Each
     card spans full width so its TAX / COST OF LIVING / TAKE-HOME stats are
     fully visible. The wide horizontal arc SVG is dropped (it only reads
     left-to-right); the floating % stays as the middle indicator. */
  .verdict-versus {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 8px;
  }
  .verdict-arc-col { padding: 2px 0; }
  .verdict-arc { display: none; }
  .vc-mini, .vc-hero { align-self: stretch; }
  .vc-hero { padding: 26px 24px; }
  .vc-mini { padding: 22px 22px; }
  .vc-hero-stats { gap: 6px; }
  .vc-mini-stats { gap: 16px; flex-wrap: wrap; }

  /* ── Fix 4 — Detailed comparison table → card reflow (Option B).
     Each metric row becomes a bordered card: the metric label is the card
     title (spanning full width), and the two country values + the
     difference sit in three aligned columns beneath it. The header row's
     metric label is hidden, leaving the two country names + "Difference" as
     persistent column labels above the cards. No horizontal scroll. */
  .comparison-card { padding: 22px 18px; }
  .comparison-head { margin-bottom: 14px; }
  .cmp-table { gap: 10px; }
  .cmp-row {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px 10px;
  }
  .cmp-row .cmp-cell.metric { grid-column: 1 / -1; }
  /* Header + cards share the same 8px horizontal inset and equal 3-col grid,
     so the country-name labels sit directly above their value columns. */
  .cmp-row.cmp-header { padding: 0 8px 8px; }
  .cmp-row.cmp-header .cmp-cell.metric { display: none; }
  .cmp-row.cmp-header .cmp-cell.num { padding: 0 4px; font-size: 0.62rem; }
  /* Data rows become cards. */
  .cmp-row:not(.cmp-header) {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.4);
  }
  .cmp-row:not(.cmp-header) .cmp-cell.metric {
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    padding: 0 4px 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--line-soft);
  }
  .cmp-row:not(.cmp-header) .cmp-cell.num {
    padding: 4px 4px 0;
    font-size: 15px;
  }

  /* ── Fix 5 — Verdict stats bar (JOB MARKET / SALARY GROWTH / TAX SHIFT /
     JOB STABILITY) into a 2×2 grid. The 1px vertical dividers are removed
     (a grid handles the structure). */
  .verdict-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    padding: 22px 20px;
  }
  .verdict-strip .vstrip-divider { display: none; }
  .verdict-strip .vstrip-cell { padding: 0; }

  /* ── Fix 6 — Rankings toggle: full width, equal tabs, never clipped.
     The ranking section header stacks so the toggle gets the whole row. */
  #ranking .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  #ranking .unit-toggle {
    display: flex;
    width: 100%;
  }
  #ranking .unit-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 6px;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(10px, 2.9vw, 12.5px);
  }

  /* ── Fix 7 — Rankings table: hide RANK (redundant with row order), let the
     country name take more width without wrapping, and fit Country / value /
     Visa within the viewport with no horizontal scroll. */
  .ranking-card { padding: 4px 16px 12px; }
  .ranking-header, .ranking-row {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) 80px;
    gap: 10px;
  }
  .ranking-row.is-current,
  .ranking-row.is-target {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .rank-rk, .rank-bar, .rank-tax, .rank-coli { display: none; }
  .rank-co { min-width: 0; }
  .ranking-row .country-name {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
  }

  /* ── Fix 8 — YOUR ROUTE card: stack FROM / DISTANCE / TIME / TO vertically
     and centre them. Shrink the city name + distance, and let the TIME
     string wrap by word (not letter-by-letter). Chevron pins to the corner. */
  .route-strip-group { padding: 0 4px; }
  .route-footer-aurora {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: center;
    position: relative;
    padding: 18px 14px;
  }
  .route-footer-aurora .route-end,
  .route-footer-aurora .route-distance,
  .route-footer-aurora .route-time,
  .route-footer-aurora .route-end-target {
    align-items: center;
    text-align: center;
    padding: 0;
  }
  .route-footer-aurora .route-end-name { font-size: 18px; }
  .route-footer-aurora .route-dist-num { font-size: 18px; }
  .route-time-val {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    font-size: 12px;
    max-width: 260px;
    margin: 0 auto;
  }


  /* Section titles in the active state — gently reduce so long headlines
     sit comfortably within the narrow column. */
  .main-results .section-title { font-size: clamp(30px, 8vw, 40px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HOMEPAGE MINOR FIXES — June 2026
   Five scoped fixes for the landing-state homepage on phones (≤768px).
   Appended last so these win on any conflict with the earlier mobile blocks.
   Desktop layout (>768px) is never touched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Fix 1 + 2 — Hero: clear the sticky nav pill and fully contain the
     selection card before Section 01.
     The landing hero was `height:100vh` + `justify-content:center`; when its
     content runs taller than the viewport on a phone, centring overflows it
     symmetrically — the headline slid up under the floating nav pill (Fix 1)
     and the selector card bled into "How it works" below (Fix 2).
     Switching to top-aligned natural flow fixes both: a generous padding-top
     drops the headline clear of the pill (pill sits ~18→70px; ~112px gives
     comfortable breathing room beneath it), and `min-height` + padding-bottom
     guarantees the card is fully enclosed before the next section starts. */
  .hero:not(.hero-compact) {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: flex-start;
    padding-top: 132px;
    padding-bottom: 52px;
  }

  /* ── "How it works" (01 / 02 / 03) on mobile — a HORIZONTAL one-slide-at-a-
     time SWIPE CAROUSEL. The old vertical scroll-snap stack caused iOS Safari
     scroll conflicts, so it's replaced with the same pattern as the Detailed-
     Comparison / Cost-of-Living carousels: the section is exactly one screen
     tall, `.hiw-track` is the horizontal mandatory-snap scroller, each
     `.hiw-card` is a full-width slide, and a dot pager overlays the bottom.

     `touch-action: pan-x` is the key to no conflicts: VERTICAL swipes fall
     straight through to the page (hero above free-scrolls; normal page scroll
     resumes after slide 03), while only HORIZONTAL swipes move between slides —
     no nested vertical snap, no trap. */
  .how-it-works {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
    position: relative;
  }
  .hiw-track {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;   /* horizontal swipes drive the carousel;
                                    vertical swipes pass straight to the page so
                                    it never traps scroll (incl. past slide 03) */
  }
  .hiw-track::-webkit-scrollbar { display: none; width: 0; height: 0; }

  /* Each card is a full-width slide laid out as a deterministic flex COLUMN:
     the text block sits at its natural height directly under the nav pill, and
     the mock takes the rest and scrolls INTERNALLY (min-height:0 flex chain →
     no vertical overflow of the slide itself). */
  .hiw-card {
    position: relative;
    top: auto;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    max-height: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    padding: 68px 0 52px;        /* top clears the nav pill; bottom clears the dots */
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .hiw-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 20px;
    gap: 12px;
    align-items: stretch;
  }
  .hiw-left { flex: 0 0 auto; gap: 8px; }
  .hiw-counter { margin-bottom: 0; }
  .hiw-counter-n { font-size: 32px; }
  .hiw-counter-slash { font-size: 20px; margin: 0 4px; }
  .hiw-counter-total { font-size: 14px; }
  .hiw-title { font-size: clamp(21px, 5.6vw, 28px); line-height: 1.08; }
  .hiw-desc { font-size: 13px; line-height: 1.42; }
  .hiw-meta { font-size: 10px; gap: 8px; }

  /* Mock column fills the leftover height; the mock itself scrolls inside. */
  .hiw-right {
    order: 2;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }
  .hiw-mock {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Card 01 — profession: head / search / experience tiers stay pinned; only
     the TITLES LIST scrolls, so the card never spills below the fold. */
  .hiw-mock-profession { padding: 16px; gap: 12px; }
  .hmp-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hmp-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .hmp-row { padding: 9px 12px; }

  /* Card 02 — countries: usually fits; scroll internally as a safety net. */
  .hiw-mock-countries {
    padding: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hiw-mock-countries::-webkit-scrollbar { display: none; width: 0; height: 0; }

  /* Card 03 — results TEASER: one confident editorial card. The big
     purchasing-power gain front & centre (same treatment as the Purchasing
     Power card), four supporting rows below, no TOP-5 list. The "payoff" slide
     before the user scrolls into the full comparison. */
  .hiw-mock-results-m {
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hiw-mock-results-m::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .hmrm-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 18px;
    padding: 22px 20px 6px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 26px 64px -30px rgba(0, 0, 0, 0.55);
  }
  .hmrm-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(88% 0.05 70);
  }
  .hmrm-big {
    display: flex;
    align-items: baseline;
    gap: 1px;
    margin-top: 9px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 0.9;
    color: oklch(97% 0.01 250);
  }
  .hmrm-sign { font-size: 28px; opacity: 0.72; }
  .hmrm-num { font-size: 64px; }
  .hmrm-pct { font-size: 30px; opacity: 0.82; margin-left: 3px; }
  .hmrm-foot {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: oklch(82% 0.02 250);
    opacity: 0.66;
    margin-top: 7px;
  }
  .hmrm-rows {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
  }
  .hmrm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .hmrm-k {
    font-family: var(--font-body);
    font-size: 13px;
    color: oklch(83% 0.02 250);
    opacity: 0.8;
  }
  .hmrm-v {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: oklch(97% 0.01 250);
    font-variant-numeric: tabular-nums;
  }
  .hmrm-v em { font-style: normal; font-size: 11px; opacity: 0.55; margin-left: 1px; }
  .hmrm-up { color: oklch(80% 0.13 150); }

  /* Dot pager (● ○ ○) — overlaid centred on the bottom of the active slide.
     No arrows; swipe only. The active dot uses --accent. */
  .hiw-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
  }
  /* Slide 01 is light → dark muted inactive dots, accent active dot. */
  .hiw-dots .carousel-dot::before { background: oklch(45% 0.03 250 / 0.42); }
  .hiw-dots .carousel-dot.active::before { background: var(--accent); }
  /* Slides 02 & 03 are dark navy (class toggled from JS via carousel.active) →
     light muted inactive dots + a brightened accent so both read on the wash. */
  .hiw-dots--dark .carousel-dot::before { background: rgba(255, 255, 255, 0.42); }
  .hiw-dots--dark .carousel-dot.active::before {
    background: color-mix(in oklab, var(--accent) 55%, white);
  }

  /* ── Fix 4 — "Powered by" sources: a deterministic TWO-ROW layout.
       Row 1 — OECD · WORLD BANK · U.S. BLS
       Row 2 — EUROSTAT · NUMBEO
     The list is a centred flex row. Every literal "·" separator span is hidden
     and the dot is repainted as a ::before on each source, so a separator can
     never sit at the start or end of a line. The break between the two rows is
     forced at a fixed point (after "U.S. BLS") rather than left to flex-wrap,
     so "NUMBEO" can never orphan onto a line of its own. The "POWERED BY" label
     sits above, centred (from `.stats-sources { flex-direction: column }`).
     Shared component → applies to BOTH the homepage and the About page. */
  .stats-sources { flex-direction: column; }
  .stats-sources-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px 0;
  }
  .stats-sources-sep { display: none; }
  .stats-sources-list > span:not(.stats-sources-sep):not(:first-child)::before {
    content: "\00B7";
    margin: 0 9px;
    color: oklch(65% 0.02 250);
    font-weight: 400;
  }
  /* Forced break: the 6th child is the separator between "U.S. BLS" and
     "Eurostat" — turn it into a full-width, zero-height flex break so Eurostat
     and Numbeo are pushed onto row 2 together. */
  .stats-sources-list > .stats-sources-sep:nth-child(6) {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    margin: 0;
  }
  /* Eurostat (7th child) now opens row 2 — strip its leading dot so no row
     ever starts with a separator. Full :not() chain keeps specificity above
     the general dot rule so this override wins. */
  .stats-sources-list > span:not(.stats-sources-sep):not(:first-child):nth-child(7)::before {
    content: none;
  }

  /* ── Fix 5 — FAQ accordion, two parts. Mobile only; desktop untouched.

     (a) CONSISTENT ROW PADDING. The `.faq-q` trigger is the only thing
     setting a closed row's height, so every row gets identical top + bottom
     padding (20px) regardless of how many lines the question wraps to. The
     `.faq-row` hairline divider sits flush below this padding with no extra
     margin (the `.faq-list` flex column has no gap), so rhythm stays even.

     (b) + ICON ALIGNS TO THE FIRST LINE. Switch the row flex container to
     `align-items: flex-start` and pin the icon (and text) to the top so the
     + symbol lines up with the centre of the FIRST line of text rather than
     floating in the middle of a two-line row. A 1px top nudge optically
     centres the glyph against the first line box. */
  .faq-q { padding: 20px 0; line-height: 1.3; align-items: flex-start; }
  .faq-q-text { align-self: flex-start; }
  .faq-q-icon { align-self: flex-start; padding-top: 1px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 2 — shared component primitives (all viewports)
   InfoTip glyph + popover, and carousel dot pager. The dots and the tap
   popover are hidden / inert on desktop; only the native hover tooltip on the
   glyph is active there, so desktop is visually identical to before.
   ═══════════════════════════════════════════════════════════════════════════ */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.info-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: help;
  -webkit-tap-highlight-color: transparent;
}
/* The visible badge — mirrors the legacy .src-info pill exactly. */
.info-tip-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(15, 21, 53, 0.06);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}
/* Tap popover — hidden until JS adds .open (mobile only). */
.info-tip-pop {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 60;
  width: max-content;
  max-width: min(248px, 78vw);
  padding: 10px 13px;
  border-radius: 11px;
  background: oklch(24% 0.03 250);
  color: oklch(96% 0.01 250);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  box-shadow: 0 14px 34px -12px rgba(15, 21, 53, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.info-tip-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: oklch(24% 0.03 250);
}
.info-tip-pop.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* Carousel dot pager — desktop never shows it (carousels are mobile-only). */
.carousel-dots { display: none; }
.carousel-dot {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.carousel-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: oklch(58% 0.03 250 / 0.4);
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot.active::before {
  background: var(--accent);
  transform: scale(1.32);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 2 — MOBILE ACTIVE-STATE FIXES (≤768px)
   Appended last so these win over every earlier mobile block.
   Desktop (>768px) is never touched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Fix 1 — Body copy ~15–18% smaller on mobile, every page. Headings and
     subheadings keep their sizes (they use explicit display/serif px, so the
     reduced body base never reaches them). One global block, all pages. */
  body { font-size: 12.5px; }                                  /* 15 → 12.5 (−17%) */
  /* Homepage prose / ledes / meta */
  .verdict-lede-new { font-size: 15px; }                       /* 18 → 15 */
  .verdict-lede, .verdict-summary { font-size: 13.5px; }       /* 16 → 13.5 */
  .src-sub { font-size: 12px; }                                /* 14 → 12 */
  .footer-copy { font-size: 11.5px; }                          /* 13.5 → 11.5 */
  .faq-a { font-size: 13px; }                                  /* 15.5 → 13 */
  /* Legal / changelog body copy */
  .legal-section p,
  .legal-section ul li,
  .changelog-bullets li { font-size: 13px; }                   /* 15.5/15 → 13 */
  /* About-page body copy / ledes */
  .origin-text p,
  .mission-detail-lead { font-size: 14.5px; }                  /* 17.5 → 14.5 */
  .transparency-lede { font-size: 13.5px; }                    /* 16 → 13.5 */
  .about-feedback-sub,
  .wa-quote-crew { font-size: 14px; }                          /* 17 → 14 */

  /* ── Fix 2 — Map: zoom-to-comparison. The dynamic viewBox + matching inline
     aspect-ratio are set in worldmap.jsx; here we just make sure no earlier
     mobile rule re-imposes the old letterboxed crop on the active route map.
     The SVG's own aspect-ratio now drives the container height, so it hugs the
     visible map with no empty bands above/below. */
  .route-map-aurora.fm-svg { max-height: none; }
  .route-map-wrap-aurora { height: auto; }
  /* Slightly smaller labels so long country names fit the zoomed frame. */
  .route-map-aurora .wm-label-name { font-size: 1.2px; }
  .route-map-aurora .wm-label-coords { font-size: 0.95px; }

  /* ── Fix 3 — YOUR ROUTE: kill the cavernous top gap. The desktop section
     carried 88px of top padding; on a phone that read as dead whitespace
     above the card. Give it normal breathing room instead. */
  .route-aurora { padding: 26px 18px 40px; }
  .route-aurora-inner { gap: 0; }


  /* ── Fix 4 — Info "?" tooltip: ≥44px tap target on phones (glyph stays
     16px), content appears on tap (handled in JS), not hover. */
  .info-tip-btn {
    width: 44px;
    height: 44px;
    margin: -14px -13px -14px -8px;  /* grow hit area without shifting layout */
    cursor: pointer;
  }

  /* ── Fix 5 — Cost-of-living (Rent / Groceries / Transport): horizontal,
     one-card-at-a-time swipe carousel with a dot pager. Overrides the Round 1
     single-column stack. */
  .carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
  }
  .col-carousel { position: relative; }
  .col-strip {
    display: flex;
    grid-template-columns: none;          /* cancel the desktop/round-1 grid */
    gap: 14px;
    margin-top: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .col-strip::-webkit-scrollbar { display: none; }
  .col-card {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: center;
  }
  .col-dots { margin-top: 14px; }

  /* ── Fix 6 — Detailed Comparison: one metric card per slide, horizontal
     swipe + dot pager (rendered as a distinct mobile tree in sections.jsx). */
  .cmp-carousel { position: relative; margin-top: 6px; }
  .cmp-mcards {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .cmp-mcards::-webkit-scrollbar { display: none; }
  .cmp-mcard {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 18px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.46);
  }
  .cmp-mcard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .cmp-mcard-metric {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .cmp-mcard-diff {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .cmp-mcard-diff.pos { color: oklch(52% 0.12 145); }
  .cmp-mcard-diff.neg { color: oklch(52% 0.15 25); }
  .cmp-mcard-diff.zero { color: var(--ink-dim); opacity: 0.6; }
  .cmp-mcard-rows { display: flex; flex-direction: column; gap: 14px; }
  .cmp-mcard-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 12px;
  }
  .cmp-mcard-country {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-2);
  }
  .cmp-mcard-row-tgt .cmp-mcard-country { color: var(--accent); }
  .cmp-mcard-val {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .cmp-mcard-track {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 3px;
    background: oklch(90% 0.012 250 / 0.7);
    overflow: hidden;
  }
  .cmp-mcard-bar { display: block; height: 100%; border-radius: 3px; }
  .cmp-mcard-bar.win { background: oklch(52% 0.12 145); }
  .cmp-mcard-bar.loss { background: oklch(52% 0.15 25); }
  .cmp-mcard-bar.eq { background: oklch(60% 0 0); opacity: 0.4; }
  .cmp-dots { margin-top: 14px; }

  /* ── Fix 7 — Rankings toggle: abbreviate the third tab to "PPP" so all three
     tabs fit one line at equal width with no clipping. Full label stays in the
     table header. */
  #ranking .unit-btn .ut-full { display: none; }
  #ranking .unit-btn .ut-abbr { display: inline; }

  /* ── Fix 8 — Rankings table: CURRENT / TARGET badge drops BELOW the country
     name (never inline, never overlapping), and rows get a little more air. */
  .ranking-row .country-name {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    white-space: normal;
    overflow: visible;
    gap: 5px;
    min-width: 0;
    font-size: 18px;
    line-height: 1.15;
  }
  .ranking-row .country-name .mini-pill { margin: 0; }
  .ranking-row { padding: 18px 0; }
  .ranking-row.is-current,
  .ranking-row.is-target {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

/* Default-state of the unit toggle abbreviation: hide the abbreviation on all
   viewports; the mobile block above flips it for #ranking. */
.unit-btn .ut-abbr { display: none; }
.unit-btn .ut-full { display: inline; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 3 — MOBILE ACTIVE-STATE FIXES (≤768px)
   Appended last. Desktop (>768px) is never touched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Fix 1 — Carousel slides: drop the glass drop-shadow that bled below the
     bottom edge (the horizontal scroller clipped it into a hard line). The
     cards keep definition via a hairline border instead. */
  .col-strip .col-card {
    box-shadow: none;
    border: 1px solid var(--line);
  }
  .cmp-mcards .cmp-mcard { box-shadow: none; }

  /* ── Fix 3 — Rankings table: bring the salary figure down to sit at the same
     visual weight as the country name (18px) so neither dominates. Visa label
     is untouched. */
  .ranking-row .rank-amount { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 3 — SYSTEMATIC MOBILE TYPE SCALE (≤768px)
   One source of truth for heading sizes on phones, keyed to the --ms-* tokens
   in :root. Every heading LEVEL is locked to a single size so the scale reads
   as intentional and identical across pages. Desktop (>768px) is never
   touched. Page-specific heads (about / explore / contact / country /
   profession) reference the SAME tokens from their own stylesheets.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero display — largest line on the page; sits 2 lines at 390px. */
  .hero-title { font-size: var(--ms-hero); line-height: 1.06; }
  /* Active-state compact hero — one rung down (page-identity level). */
  .hero.hero-compact .hero-title { font-size: var(--ms-hero-2); }
  .hero-sub { font-size: var(--ms-lead); }

  /* In-page section heading (e.g. "Top 5 countries for a …"). */
  .section-title { font-size: var(--ms-section); line-height: 1.1; }
  .section-sub { font-size: var(--ms-lead-sm); }

  /* Card / block subhead (e.g. "Detailed Comparison"). The "How it works"
     card titles (.hiw-title, ~22px) already sit cleanly between section and
     subhead, so they are intentionally left as tuned. */
  .comparison-title { font-size: 18px; }  /* match desktop card-title tier */
}