/* Thailand Stay Plan: shared styles (v1 preview, 26 Oct 2026)
   Tokens first, then base, layout, components, pages, motion, print. */

/* ---------- Tokens ---------- */
:root {
  --ink: #0E1B2B;
  --teal: #0F6E68;
  --teal-strong: #0B5A55;
  --teal-soft: rgba(15, 110, 104, .10);
  --jade: #2E8B74;
  --saffron: #E8A33D;
  --saffron-ink: #8A5508;
  --saffron-soft: rgba(232, 163, 61, .16);
  --sand: #F4EFE6;
  --sand-deep: #ECE4D6;
  --paper: #FFFFFF;
  --line: rgba(14, 27, 43, .12);
  --line-strong: rgba(14, 27, 43, .22);
  --muted: #5B6673;

  --bg: var(--sand);
  --surface: var(--paper);
  --surface-2: #FBF8F3;
  --text: var(--ink);
  --heading: var(--ink);
  --link: var(--teal);
  --primary: var(--teal);
  --primary-text: #FFFFFF;
  --focus: #1B7FD6;
  --shadow: 0 1px 2px rgba(14, 27, 43, .04), 0 8px 24px rgba(14, 27, 43, .06);
  --shadow-hover: 0 2px 4px rgba(14, 27, 43, .06), 0 18px 40px rgba(14, 27, 43, .12);
  --header-bg: rgba(244, 239, 230, .78);
  --spot-bg: #0E1B2B;
  --spot-text: #EDE7DB;
  --lattice: #0E1B2B;
  --ok: #1E7A4F;
  --ok-soft: rgba(30, 122, 79, .12);
  --warn: #8A5508;
  --warn-soft: rgba(232, 163, 61, .18);
  --no: #8E3B46;
  --no-soft: rgba(142, 59, 70, .10);

  /* Visa Map line colours */
  --vm-privilege: #B08A4A;
  --vm-ltr: #0F6E68;
  --vm-dtv: #2E8B74;
  --vm-nono: #1F4E79;
  --vm-marriage: #A0526B;
  --vm-tr: #6B7C8F;
  --vm-exempt: #9AA5B1;
  --vm-node: #FFFFFF;
  --vm-node-stroke: #0E1B2B;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 16px;
  --radius-sm: 10px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --header-h: 68px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --teal: #3FB5A9;
    --teal-strong: #5CCABE;
    --teal-soft: rgba(63, 181, 169, .14);
    --jade: #4FB394;
    --saffron-ink: #F0B65A;
    --saffron-soft: rgba(232, 163, 61, .14);
    --line: rgba(237, 231, 219, .12);
    --line-strong: rgba(237, 231, 219, .24);
    --muted: #A3ADB8;
    --bg: #0B1420;
    --surface: #121E2C;
    --surface-2: #0F1925;
    --sand-deep: #16222F;
    --text: #EDE7DB;
    --heading: #F6F1E7;
    --link: #5CCABE;
    --primary: #3FB5A9;
    --primary-text: #06201E;
    --focus: #7CC4FF;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .4);
    --header-bg: rgba(11, 20, 32, .74);
    --spot-bg: #121E2C;
    --lattice: #EDE7DB;
    --ok: #5BC98F;
    --ok-soft: rgba(91, 201, 143, .14);
    --warn: #F0B65A;
    --no: #E58C97;
    --no-soft: rgba(229, 140, 151, .12);
    --vm-nono: #5E8FC0;
    --vm-ltr: #3FB5A9;
    --vm-tr: #8798AB;
    --vm-exempt: #7D8B99;
    --vm-node: #121E2C;
    --vm-node-stroke: #EDE7DB;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --teal: #3FB5A9;
  --teal-strong: #5CCABE;
  --teal-soft: rgba(63, 181, 169, .14);
  --jade: #4FB394;
  --saffron-ink: #F0B65A;
  --saffron-soft: rgba(232, 163, 61, .14);
  --line: rgba(237, 231, 219, .12);
  --line-strong: rgba(237, 231, 219, .24);
  --muted: #A3ADB8;
  --bg: #0B1420;
  --surface: #121E2C;
  --surface-2: #0F1925;
  --sand-deep: #16222F;
  --text: #EDE7DB;
  --heading: #F6F1E7;
  --link: #5CCABE;
  --primary: #3FB5A9;
  --primary-text: #06201E;
  --focus: #7CC4FF;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .4);
  --header-bg: rgba(11, 20, 32, .74);
  --spot-bg: #121E2C;
  --lattice: #EDE7DB;
  --ok: #5BC98F;
  --ok-soft: rgba(91, 201, 143, .14);
  --warn: #F0B65A;
  --no: #E58C97;
  --no-soft: rgba(229, 140, 151, .12);
  --vm-nono: #5E8FC0;
  --vm-ltr: #3FB5A9;
  --vm-tr: #8798AB;
  --vm-exempt: #7D8B99;
  --vm-node: #121E2C;
  --vm-node-stroke: #EDE7DB;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--heading);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.35rem, 5.6vw, 4.6rem); font-weight: 450; letter-spacing: -.025em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 560; letter-spacing: -.01em; line-height: 1.2; }
h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 650; letter-spacing: 0; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li + li { margin-top: .35em; }
small, .small { font-size: .875rem; }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .94em; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--primary); color: var(--primary-text); padding: 10px 16px; border-radius: 10px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }
.section--paper { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p.lead { font-size: 1.15rem; color: var(--muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-body); font-size: .78rem; font-weight: 650;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal);
  margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--saffron); border-radius: 2px; }
.answer {
  font-size: 1.12rem; line-height: 1.55; color: var(--text);
  border-left: 3px solid var(--saffron); padding: .2em 0 .2em 1em; margin: 0 0 1.4em; max-width: 70ch;
}
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--heading); margin-right: auto; }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand-name { font-family: var(--font-display); font-size: 1.22rem; font-weight: 560; letter-spacing: -.01em; white-space: nowrap; }
.logo-line { stroke: var(--heading); }
.logo-route { stroke: var(--saffron); }
.logo-dot { fill: var(--saffron); }
.site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav li + li { margin-top: 0; }
.site-nav a {
  display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none;
  color: var(--text); font-size: .94rem; font-weight: 500;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--teal-soft); color: var(--teal-strong); }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); cursor: pointer; padding: 0;
}
.icon-btn:hover { border-color: var(--teal); color: var(--teal); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-grid; }
  .nav-toggle[aria-expanded="true"] { background: var(--heading); border-color: var(--heading); color: var(--bg); }
  /* Mobile menu: a full-height sheet under the header, in the page's own colours and type */
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: var(--bg); border-top: 1px solid var(--line);
    padding: 12px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 26px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav > ul > li { border-bottom: 1px solid var(--line); }
  .site-nav > ul a {
    display: flex; align-items: center; gap: 14px; padding: 16px 2px; border-radius: 0; background: none;
    font: 520 1.42rem/1.2 var(--font-display); color: var(--heading); letter-spacing: -.01em;
  }
  .site-nav > ul a::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; border: 2px solid var(--saffron); }
  .site-nav > ul a::after {
    content: ""; margin-left: auto; width: 9px; height: 9px; flex: none;
    border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s;
  }
  .site-nav > ul a:hover, .site-nav > ul a[aria-current="page"] { background: none; color: var(--teal-strong); }
  .site-nav > ul a:hover::before, .site-nav > ul a[aria-current="page"]::before { background: var(--saffron); }
  .site-nav > ul a:hover::after { transform: translateX(3px) rotate(45deg); border-color: var(--teal); }
  .nav-extra { display: flex; flex-direction: column; gap: 22px; }
  .nav-extra .eyebrow { margin: 0 0 10px; }
  .site-nav .nav-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; margin: 0; padding: 0; }
  .site-nav .nav-guides a {
    display: flex; align-items: center; min-height: 48px; height: 100%; padding: 10px 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    font: 550 .88rem/1.3 var(--font-body); color: var(--text); text-decoration: none;
  }
  .site-nav .nav-guides a:hover, .site-nav .nav-guides a[aria-current="page"] { border-color: var(--teal); color: var(--teal-strong); }
  .site-nav .nav-extra .btn { display: flex; width: 100%; padding: 12px 22px; border-radius: 999px; color: var(--primary-text); font-size: 1rem; font-weight: 600; }
  .site-nav .nav-extra .btn:hover { background: var(--teal-strong); color: var(--primary-text); }
  .nav-foot { font-size: .8rem; color: var(--muted); margin: 0; }
  html.nav-open { overflow: hidden; }
}
@media (min-width: 901px) { .nav-extra { display: none; } }
/* Desktop "Guides" dropdown (built by app.js from the footer's guide list) */
.nav-dd { position: relative; }
.nav-dd-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 500 .94rem/1.5 var(--font-body); color: var(--text);
}
.nav-dd-btn svg { width: 12px; height: 12px; transition: transform .18s; }
.nav-dd-btn:hover, .nav-dd-btn[aria-expanded="true"], .nav-dd.is-current .nav-dd-btn { background: var(--teal-soft); color: var(--teal-strong); }
.nav-dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dd-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; width: 540px; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-hover);
  padding: 14px; opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-dd.is-open .nav-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-dd-panel .eyebrow { margin: 2px 8px 10px; }
.nav-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
.site-nav .nav-dd-grid a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: .92rem; }
.site-nav .nav-dd-grid a::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; border: 2px solid var(--saffron); }
.site-nav .nav-dd-grid a:hover::before, .site-nav .nav-dd-grid a[aria-current="page"]::before { background: var(--saffron); }
.site-nav .nav-dd-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 600; color: var(--teal-strong); }
.site-nav .nav-dd-cta:hover { background: var(--teal-soft); }
@media (max-width: 1180px) { .nav-dd-panel { left: auto; right: -40px; transform: translateY(-6px); } .nav-dd.is-open .nav-dd-panel { transform: none; } }
@media (max-width: 900px) { .nav-dd { display: none; } }

/* ---------- Buttons, pills, badges ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn-primary { background: var(--primary); color: var(--primary-text); }
.btn-primary:hover { background: var(--teal-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-accent { background: var(--saffron); color: #1D1405; }
.btn-accent:hover { box-shadow: 0 10px 26px rgba(232, 163, 61, .35); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-block { width: 100%; }
.checked {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .8rem; font-weight: 600; color: var(--ok);
  background: var(--ok-soft); border-radius: 999px; padding: 4px 12px 4px 10px; white-space: nowrap;
}
.checked::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--ok-soft); }
.pill { display: inline-flex; align-items: center; gap: .4em; font-size: .76rem; font-weight: 650; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill--ok { color: var(--ok); background: var(--ok-soft); }
.pill--check { color: var(--warn); background: var(--warn-soft); }
.pill--no { color: var(--no); background: var(--no-soft); }
.pill--sample { color: var(--saffron-ink); background: var(--saffron-soft); border: 1px dashed var(--saffron); }
.src { font-size: .84rem; color: var(--muted); line-height: 1.5; }
.src a { color: var(--muted); }
.src a:hover { color: var(--link); }

/* ---------- Lattice texture + dividers ---------- */
.lattice { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--lattice); opacity: .05; z-index: 0; }
.has-lattice { position: relative; isolation: isolate; }
.has-lattice > .container { position: relative; z-index: 1; }
.divider { display: block; width: 100%; max-width: var(--max); height: 34px; margin: 0 auto; padding: 0 var(--gutter); color: var(--line-strong); }
.divider svg { width: 100%; height: 34px; display: block; overflow: visible; }
.dv-line { fill: none; stroke-width: 3; stroke-linecap: round; }
.dv-a { stroke: var(--vm-ltr); opacity: .45; }
.dv-b { stroke: var(--saffron); }
.dv-c { stroke: var(--vm-nono); opacity: .35; }
.dv-node { fill: var(--vm-node); stroke: var(--vm-node-stroke); stroke-width: 2; }

/* ---------- Visa Map SVG (inline) ---------- */
.visa-map { width: 100%; height: auto; display: block; overflow: visible; }
.vm-line { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s ease, stroke-width .5s ease; }
.vm-flow { fill: none; stroke: none; }
.vm-privilege .vm-line { stroke: var(--vm-privilege); }
.vm-ltr .vm-line { stroke: var(--vm-ltr); }
.vm-dtv .vm-line { stroke: var(--vm-dtv); }
.vm-nono .vm-line { stroke: var(--vm-nono); }
.vm-marriage .vm-line { stroke: var(--vm-marriage); }
.vm-tr .vm-line { stroke: var(--vm-tr); }
.vm-exempt .vm-line { stroke: var(--vm-exempt); }
.vm-route { transition: opacity .5s ease; }
.visa-map.has-active .vm-route:not(.is-active) .vm-line { opacity: .28; }
.visa-map.has-active .vm-route:not(.is-active) .vm-stop,
.visa-map.has-active .vm-route:not(.is-active) .vm-end { opacity: .5; }
.visa-map.has-active .vm-route:not(.is-active) text { opacity: .62; }
.vm-line, .vm-stop, .vm-end, .visa-map text { transition: opacity .5s ease, stroke .5s ease; }
.vm-route.is-active .vm-name { font-weight: 700; }
.vm-route.is-active .vm-line { stroke: var(--saffron); stroke-width: 8; }
.vm-route.is-active .vm-flow {
  stroke: #FFF6E3; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 16;
  animation: vmflow 1.6s linear infinite;
}
.vm-stop { fill: var(--vm-node); stroke: var(--vm-node-stroke); stroke-width: 2.5; }
.vm-end { fill: var(--vm-node); stroke: var(--vm-node-stroke); stroke-width: 3.5; }
.vm-route.is-active .vm-end { stroke: var(--saffron); }
.vm-origin { fill: var(--vm-node); stroke: var(--vm-node-stroke); stroke-width: 3.5; }
.vm-name { font: 600 15px var(--font-body); fill: var(--heading); }
.vm-cap { font: 400 11.5px var(--font-body); fill: var(--muted); }
@keyframes vmflow { to { stroke-dashoffset: -36; } }
.map-figure { margin: 0; position: relative; }
.map-figure figcaption { font-size: .84rem; color: var(--muted); margin-top: .6rem; }

/* ---------- Hero ---------- */
.hero { padding: clamp(36px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); overflow: hidden; overflow: clip; }
.hero-grid { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: start; }
@media (max-width: 1020px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1021px) { .hero-grid > .tool { position: sticky; top: calc(var(--header-h) + 20px); } }
.hero h1 { margin-bottom: .45em; }
.hero h1 em { font-style: italic; color: var(--teal); font-weight: 400; }
.hero-sub { font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.55; max-width: 36em; color: var(--text); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 1.2rem 0 2rem; }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 2.2rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.figure { margin: 0; }
.figure b { display: block; font-family: var(--font-display); font-weight: 450; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1; letter-spacing: -.02em; color: var(--heading); font-variant-numeric: lining-nums; }
.figure span { display: block; font-size: .84rem; color: var(--muted); margin-top: .45rem; line-height: 1.35; }
@media (max-width: 420px) { .figures { grid-template-columns: 1fr 1fr; } .figures .figure:last-child { grid-column: 1 / -1; } }

/* ---------- Tool (Visa Map form) ---------- */
.tool {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow); padding: clamp(18px, 2.6vw, 28px); position: relative;
}
.tool::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--teal), var(--jade) 55%, var(--saffron));
}
.tool-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; }
.tool-head h2 { font-size: 1.5rem; margin: 0; }
.tool-step { font-size: .8rem; color: var(--muted); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; }
.fields .full { grid-column: 1 / -1; }
@media (max-width: 339px) { .fields { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field > label, .field > legend { font-size: .86rem; font-weight: 600; color: var(--heading); padding: 0; }
.field .hint { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.input, select.input {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  font: 500 .98rem var(--font-body); appearance: none; -webkit-appearance: none;
}
select.input {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px;
}
.input:hover { border-color: var(--teal); }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label {
  flex: 1 1 auto; text-align: center; cursor: pointer; user-select: none;
  padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 12px; font-size: .9rem; font-weight: 550;
  background: var(--surface-2); color: var(--text); transition: background .15s, border-color .15s, color .15s;
}
.seg label:hover { border-color: var(--teal); }
.seg input:checked + label { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-strong); box-shadow: inset 0 0 0 1px var(--teal); }
.seg input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.tool-note { font-size: .8rem; color: var(--muted); margin: 12px 0 0; }

/* ---------- Results ---------- */
.results { scroll-margin-top: calc(var(--header-h) + 16px); padding-top: clamp(24px, 4vw, 48px); }
.results-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.results-head h2 { margin: 0; }
.results-summary { color: var(--muted); margin: .4rem 0 0; }
.route-list { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); list-style: none; padding: 0; margin: 0; }
.route-list > li + li { margin-top: 0; }
.route-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 14px; height: 100%;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.route-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.route-card.is-top { border-color: var(--saffron); box-shadow: 0 0 0 1px var(--saffron), var(--shadow); }
.rc-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; }
.rc-rank { font-family: var(--font-display); font-size: 2.6rem; line-height: .9; font-weight: 400; color: var(--muted); font-variant-numeric: lining-nums; }
.is-top .rc-rank { color: var(--saffron-ink); }
.rc-title { margin: 0; font-size: 1.3rem; }
.rc-sub { font-size: .9rem; color: var(--muted); margin: .25rem 0 0; }
.rc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 12px; margin: 0; overflow: hidden; }
.rc-stats > div { padding: 10px 12px; border-left: 1px solid var(--line); min-width: 0; }
.rc-stats > div:first-child { border-left: 0; }
.route-list > li:first-child { grid-column: 1 / -1; }
.route-card:not(.is-top) .rc-stats { grid-template-columns: 1fr 1fr; }
.route-card:not(.is-top) .rc-stats > div:nth-child(3) { border-left: 0; }
.route-card:not(.is-top) .rc-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.rc-stats dt { font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rc-stats dd { margin: 3px 0 0; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.2; color: var(--heading); overflow-wrap: anywhere; }
.rc-stats dd small { display: block; font-family: var(--font-body); font-size: .74rem; color: var(--muted); margin-top: 2px; line-height: 1.35; }
@media (max-width: 560px) {
  .rc-stats { grid-template-columns: 1fr 1fr; }
  .rc-stats > div:nth-child(3) { border-left: 0; }
  .rc-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.rc-why, .rc-watch { margin: 0; padding: 0; list-style: none; font-size: .94rem; }
.rc-why li, .rc-watch li { position: relative; padding-left: 22px; }
.rc-why li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.rc-watch li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 10px; border: 2px solid var(--saffron); border-radius: 50%; }
.rc-label { font-size: .74rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.rc-papers summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--link); }
.rc-papers ol { margin: .6rem 0 0; font-size: .9rem; }
.rc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 12px; }
.rc-foot a.more { font-weight: 600; text-decoration: none; white-space: nowrap; }
.rc-foot a.more::after { content: " \2192"; }
.nofit { margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px; }
.nofit summary { cursor: pointer; padding: 14px 0; font-weight: 600; }
.nofit ul { padding-left: 0; list-style: none; }
.nofit li { padding: 10px 0; border-top: 1px solid var(--line); margin: 0; font-size: .94rem; }
.plan-cta {
  margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center;
  background: var(--spot-bg); color: var(--spot-text); border-radius: 22px; padding: clamp(22px, 3.4vw, 36px); position: relative; overflow: hidden;
}
.plan-cta h3 { color: #F6F1E7; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.plan-cta p { color: #C9C3B8; margin: 0; }
.plan-cta .input { background: rgba(255, 255, 255, .06); border-color: rgba(237, 231, 219, .28); color: #F6F1E7; }
.plan-cta .input::placeholder { color: #9AA3AD; }
.plan-cta .form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-cta .form-row .input { flex: 1 1 220px; }
.plan-cta .form-note { font-size: .8rem; color: #A9B1BA; margin-top: 10px; }
.plan-cta label { color: #F6F1E7; }
@media (max-width: 820px) { .plan-cta { grid-template-columns: 1fr; } }
.form-status { font-size: .88rem; margin-top: 10px; min-height: 1.3em; }
.plan-cta .form-status { color: var(--saffron); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(18px, 2.4vw, 26px); position: relative;
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover { box-shadow: var(--shadow-hover); }
a.card { color: inherit; text-decoration: none; display: flex; flex-direction: column; }
a.card:hover { transform: translateY(-2px); }
.card h3 { margin-bottom: .4em; }
.card .facts { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 8px; }
.card .facts li { margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); font-size: .94rem; }
.card .facts li:first-child { border-top: 0; padding-top: 0; }
.card .card-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.card .go { font-weight: 600; color: var(--link); }
.card .go::after { content: " \2192"; }
.route-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
.route-chip i { width: 26px; height: 6px; border-radius: 6px; background: var(--c, var(--teal)); display: inline-block; }

/* What changed */
.changed-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.change-card .date { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; color: var(--heading); font-weight: 420; letter-spacing: -.02em; margin-bottom: .2rem; }
.change-card .date-sub { font-size: .8rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--saffron-ink); margin-bottom: 1rem; }
.change-card p { font-size: .98rem; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); list-style: none; padding: 0; margin: 0; counter-reset: step; position: relative; }
.steps > li { margin: 0; position: relative; padding-top: 64px; }
.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); border: 3px solid var(--heading);
  font-family: var(--font-display); font-size: 1.25rem; color: var(--heading); z-index: 1;
}
.steps > li:last-child::before { border-color: var(--saffron); }
.steps::before { content: ""; position: absolute; top: 21px; left: 23px; right: 10%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--teal), var(--jade), var(--saffron)); }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
  .steps::before { top: 0; bottom: 0; left: 21px; right: auto; width: 4px; height: auto; background: linear-gradient(180deg, var(--teal), var(--jade), var(--saffron)); }
  .steps > li { padding: 4px 0 8px 70px; }
}

/* Offices */
.office-card { overflow: hidden; }
.office-card .office-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: .8rem; flex-wrap: wrap; }
.office-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .9rem; }
.office-card dt { color: var(--muted); }
.office-card dd { margin: 0; text-align: right; white-space: nowrap; font-weight: 600; }
.skeleton { display: block; height: 9px; border-radius: 9px; background: linear-gradient(90deg, var(--line), var(--line-strong), var(--line)); margin-top: 8px; }
.sample-note { margin-top: 18px; font-size: .9rem; color: var(--muted); }

/* Spotlight */
.spotlight { background: var(--spot-bg); color: var(--spot-text); border-radius: 28px; overflow: hidden; position: relative; isolation: isolate; }
.spotlight .lattice { color: #E8A33D; opacity: .06; }
.spotlight-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .spotlight-inner { grid-template-columns: 1fr; } }
.spotlight h2 { color: #F6F1E7; }
.spotlight h2 em { color: var(--saffron); font-style: italic; font-weight: 400; }
.spotlight p { color: #CFC9BE; }
.spotlight a { color: #F0C27A; }
.spotlight .eyebrow { color: #F0C27A; }
.gold-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--saffron), transparent); border: 0; margin: 1.4rem 0; opacity: .7; }
.mini-calc { background: rgba(255, 255, 255, .04); border: 1px solid rgba(232, 163, 61, .35); border-radius: 20px; padding: clamp(18px, 2.6vw, 28px); }
.mini-calc label { font-weight: 600; color: #F6F1E7; font-size: .92rem; }
.mini-calc output { font-family: var(--font-display); }
.mini-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(237, 231, 219, .14); }
.mini-row:first-of-type { border-top: 0; }
.mini-row span { color: #CFC9BE; font-size: .92rem; }
.mini-row b { font-family: var(--font-display); font-weight: 450; font-size: 1.5rem; color: #F6F1E7; white-space: nowrap; }
.mini-row.is-gold b { color: var(--saffron); }
.disclosure { font-size: .84rem; line-height: 1.5; border: 1px solid rgba(232, 163, 61, .35); border-radius: 12px; padding: 10px 14px; margin-top: 1.2rem; color: #DCD5C9; }
.disclosure--light { border-color: var(--saffron); background: var(--saffron-soft); color: var(--text); }

/* Range input */
input[type="range"] { width: 100%; accent-color: var(--saffron); min-height: 32px; }
.range-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.range-val { font-family: var(--font-display); font-size: 1.25rem; }

/* Sources */
.sources { columns: 2 320px; column-gap: 40px; padding: 0; list-style: none; margin: 0; }
.sources li { break-inside: avoid; padding: 12px 0; border-top: 1px solid var(--line); margin: 0; font-size: .94rem; }
.sources li b { display: block; font-weight: 600; }
.sources li span { color: var(--muted); font-size: .86rem; }
.sources a { overflow-wrap: anywhere; }
.trust { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: 28px; }
.trust .card { padding: 18px 20px; }
.trust h3 { font-size: 1.08rem; }
.trust p { font-size: .92rem; margin: 0; color: var(--muted); }

/* FAQ */
.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.7vw, 1.3rem); font-weight: 520; color: var(--heading); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--teal), var(--teal)) center / 14px 2px no-repeat, linear-gradient(var(--teal), var(--teal)) center / 2px 14px no-repeat;
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 0 20px; max-width: 70ch; }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* Footer */
.site-footer { background: var(--spot-bg); color: #CFC9BE; padding: clamp(48px, 7vw, 80px) 0 32px; position: relative; overflow: hidden; margin-top: clamp(48px, 6vw, 80px); }
.site-footer a { color: #E9E3D8; }
.footer-map { position: absolute; right: -40px; bottom: -30px; width: min(620px, 80vw); opacity: .16; pointer-events: none; }
.footer-grid { position: relative; display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
.site-footer h2 { font-family: var(--font-body); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #F0C27A; font-weight: 650; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 .5rem; font-size: .94rem; }
.site-footer .brand { color: #F6F1E7; margin-bottom: 1rem; }
.site-footer .logo-line { stroke: #F6F1E7; }
.footer-legal { position: relative; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(237, 231, 219, .14); font-size: .84rem; color: #A9B1BA; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.footer-legal p { margin: 0; }

/* ---------- Inner pages ---------- */
.page-hero { padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); overflow: hidden; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 1.6rem; font-size: .86rem; color: var(--muted); }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.breadcrumbs a { color: var(--muted); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
@media (max-width: 960px) { .page-hero-grid { grid-template-columns: 1fr; } }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
.page-hero .standfirst { font-size: clamp(1.08rem, 1.5vw, 1.24rem); max-width: 40em; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: .88rem; color: var(--muted); margin-top: 1.2rem; }
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.toc { position: sticky; top: calc(var(--header-h) + 24px); font-size: .9rem; }
.toc h2 { font-family: var(--font-body); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 650; margin-bottom: .8rem; }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.toc li { margin: 0; }
.toc a { display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--heading); }
.toc a.is-current { color: var(--teal-strong); border-left-color: var(--saffron); font-weight: 600; }
@media (max-width: 1000px) {
  .toc { position: static; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
  .toc ol { columns: 2 200px; border-left: 0; }
  .toc a { padding: 6px 0; border-left: 0; margin: 0; }
}
.article > section { padding: clamp(36px, 5vw, 56px) 0; border-top: 1px solid var(--line); }
.article > section:first-child { border-top: 0; padding-top: 0; }
.article h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
.article h3 { margin-top: 1.6em; }
.article p, .article li { max-width: 72ch; }
.rule-src { display: block; font-size: .84rem; color: var(--muted); margin: -.4em 0 1.2em; }
.callout { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 12px; padding: 16px 20px; margin: 1.4rem 0; }
.callout--gold { border-left-color: var(--saffron); }
.callout h3, .callout h4 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.big-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; margin: 1.6rem 0; }
.big-figures .figure { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 1.4rem 0; }
.table-wrap:focus-visible { outline: 3px solid var(--focus); }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
caption { text-align: left; padding: 14px 18px 0; font-size: .86rem; color: var(--muted); caption-side: top; }
th, td { text-align: left; vertical-align: top; padding: 13px 16px; border-bottom: 1px solid var(--line); }
thead th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; background: var(--surface-2); white-space: nowrap; }
tbody th { font-family: var(--font-display); font-weight: 560; font-size: 1rem; color: var(--heading); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.num, td .num { white-space: nowrap; }
.compare-table { min-width: 760px; }
.compare-table thead th:not(:first-child) { min-width: 150px; }
.tier-row--muted td, .tier-row--muted th { color: var(--muted); }

/* Timeline (retirement) */
.timeline-svg { width: 100%; height: auto; margin: 1rem 0 .5rem; color: var(--muted); }
.tl-line { fill: none; stroke: var(--vm-nono); stroke-width: 7; stroke-linecap: round; }
.tl-line-hi { fill: none; stroke: var(--saffron); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 16; animation: vmflow 1.6s linear infinite; }
.tl-node { fill: var(--vm-node); stroke: var(--vm-node-stroke); stroke-width: 4; }
.tl-node--end { stroke: var(--saffron); }
.tl-num { font: 600 20px var(--font-display); fill: var(--heading); }
.tl-lbl { font: 600 15px var(--font-body); fill: var(--heading); }
.tl-cap { font: 400 12.5px var(--font-body); fill: var(--muted); }
@media (max-width: 640px) { .tl-lbl, .tl-cap { display: none; } }
.step-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 12px; counter-reset: s; }
.step-list > li { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 16px 64px; position: relative; }
.step-list > li::before {
  counter-increment: s; content: counter(s); position: absolute; left: 16px; top: 14px;
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--vm-nono); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1rem; color: var(--heading); background: var(--surface);
}
.step-list > li:last-child::before { border-color: var(--saffron); }
.step-list h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.step-list p { margin: 0; font-size: .95rem; }

/* Checklist */
.checklist {
  background: var(--paper); color: #0E1B2B; border-radius: 6px; padding: clamp(22px, 3vw, 36px);
  box-shadow: 0 1px 0 rgba(14, 27, 43, .06), 0 18px 40px rgba(14, 27, 43, .14);
  border: 1px solid rgba(14, 27, 43, .1); position: relative; margin: 1.6rem 0; max-width: 720px;
}
.checklist::after { content: ""; position: absolute; top: 0; right: 0; width: 36px; height: 36px; background: linear-gradient(225deg, var(--bg) 50%, #E9E2D5 50%); border-bottom-left-radius: 6px; }
.checklist h3 { color: #0E1B2B; margin-top: 0; font-size: 1.35rem; }
.checklist .cl-meta { font-size: .8rem; color: #5B6673; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-bottom: 2px solid #0E1B2B; padding-bottom: 10px; margin-bottom: 14px; }
.checklist ul { list-style: none; padding: 0; margin: 0; }
.checklist li { margin: 0; border-bottom: 1px dashed rgba(14, 27, 43, .18); }
.checklist label { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 11px 0; cursor: pointer; font-size: .96rem; }
.checklist input { width: 20px; height: 20px; margin-top: 2px; accent-color: #0F6E68; }
.checklist .why { display: block; font-size: .82rem; color: #5B6673; }
.checklist .cl-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.checklist .btn-ghost { color: #0E1B2B; border-color: rgba(14, 27, 43, .3); }
.checklist .cl-progress { font-size: .86rem; color: #5B6673; }

/* Calculators */
.calc { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 3vw, 32px); box-shadow: var(--shadow); margin: 1.6rem 0; }
.calc-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 36px); }
@media (max-width: 860px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-inputs { display: grid; gap: 16px; align-content: start; }
.calc-out h3 { margin-top: 0; font-size: 1.15rem; }
.bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.bars li { margin: 0; }
.bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; align-items: baseline; }
.bar-top b { font-weight: 600; }
.bar-top .num { white-space: nowrap; }
.bar-track { height: 12px; background: var(--sand-deep); border-radius: 12px; overflow: hidden; margin-top: 6px; }
.bar-fill { height: 100%; width: 0; border-radius: 12px; background: var(--c, var(--teal)); transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.bars li.is-na .bar-fill { background: repeating-linear-gradient(45deg, var(--line-strong) 0 6px, transparent 6px 12px); }
.bars li.is-na .bar-top { color: var(--muted); }
.bar-note { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.calc-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; margin-bottom: 18px; }
.calc-result .figure { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.calc-result .figure b { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.calc-assume { font-size: .82rem; color: var(--muted); margin-top: 16px; }

/* Fit lists */
.fit { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 1.4rem 0; }
.fit .card ul { list-style: none; padding: 0; margin: 0; }
.fit .card li { padding: 9px 0 9px 28px; border-top: 1px solid var(--line); margin: 0; position: relative; font-size: .96rem; }
.fit .card li:first-child { border-top: 0; }
.fit .yes li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
.fit .no li::before { content: ""; position: absolute; left: 3px; top: 17px; width: 13px; height: 2.5px; background: var(--no); }

/* Lead form */
.lead-form { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); margin: 1.4rem 0; max-width: 760px; }
.lead-form .fields { margin-bottom: 14px; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .9rem; align-items: start; margin: 8px 0 16px; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--teal); }
.preview-note { font-size: .82rem; color: var(--muted); margin-top: 10px; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .vm-route.is-active .vm-flow { animation: none; stroke-dasharray: none; stroke: none; }
}

/* ---------- Print (checklist and pages) ---------- */
@media print {
  .site-header, .site-footer, .toc, .tool, .plan-cta, .lead-form, .calc, .nav-toggle, .theme-toggle, .lattice, .divider, .cl-actions { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .layout { display: block; }
  .checklist { box-shadow: none; border: 1px solid #999; }
  a { color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Routes grid: the two routes with full guides span two columns on wide screens */
.routes-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 960px) {
  .routes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .routes-grid .card--wide { grid-column: span 2; }
  .routes-grid .card--wide .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .routes-grid .card--wide .facts li { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 14px; }
  .routes-grid .card--wide .facts li:first-child { border-left: 0; padding-left: 0; }
  .routes-grid .card--wide h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
}
.card--wide { background: linear-gradient(135deg, var(--surface) 60%, var(--teal-soft)); }
.wide-fig { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; }
.wide-fig b { display: block; font-family: var(--font-display); font-weight: 420; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.05; letter-spacing: -.02em; color: var(--heading); }
.spotlight a.btn-accent, .spotlight a.btn-accent:hover { color: #1D1405; text-decoration: none; }
.compare-table { min-width: 720px; font-size: .9rem; }
.compare-table th, .compare-table td { padding: 12px 12px; }
.compare-table thead th:not(:first-child) { min-width: 128px; white-space: normal; }
.compare-table tbody th { font-size: .95rem; }
.step-list .num, .article p .num { font-family: inherit; font-size: inherit; letter-spacing: inherit; }
/* Hero areas: copy and map on the left, tool on the right (sticky); on phones the tool comes before the map */
.hero-grid { grid-template-areas: "copy tool" "map tool"; row-gap: 0; }
.hero-copy { grid-area: copy; }
.hero-map { grid-area: map; }
.hero-grid > .tool { grid-area: tool; align-self: start; }
@media (max-width: 1020px) {
  .hero-grid { grid-template-areas: "copy" "tool" "map"; row-gap: 32px; }
}
.range-val { white-space: nowrap; }

/* ---------- Phase B guide components (27 Oct 2026) ---------- */
/* Law vs practice: every rule section can show the instrument and the dated office practice side by side */
.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin: 1.4rem 0; }
.rule-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; border-top: 4px solid var(--teal); }
.rule-box--practice { border-top-color: var(--saffron); }
.rule-box--counter { border-top-color: var(--no); }
.rule-box .kicker { display: block; font-size: .74rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.rule-box h3, .rule-box h4 { margin: 0 0 .5rem; font-size: 1.08rem; }
.rule-box p, .rule-box li { font-size: .95rem; }
.rule-box p:last-child, .rule-box ul:last-child { margin-bottom: 0; }
.rule-box ul { padding-left: 1.1em; margin: 0; }
/* Dated change log and timelines */
.changelog { list-style: none; padding: 0; margin: 1.2rem 0; border-top: 1px solid var(--line); }
.changelog li { margin: 0; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 6px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.changelog .cl-date { font-family: var(--font-display); font-size: 1.1rem; color: var(--heading); line-height: 1.3; }
.changelog .cl-date small { display: block; font-family: var(--font-body); font-size: .74rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--saffron-ink); margin-top: 4px; }
.changelog h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.changelog p { margin: 0 0 .4rem; font-size: .95rem; }
.changelog .src { margin: 0; }
.changelog li.is-future .cl-date { color: var(--muted); }
.changelog li.is-future .cl-date small { color: var(--muted); }
@media (max-width: 560px) { .changelog li { grid-template-columns: 1fr; } }
/* Key-value facts (offices, fees) */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: .95rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
@media (max-width: 420px) { .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 8px; } }
/* Office cards with real data */
.office-card .office-sub { font-size: .88rem; color: var(--muted); margin: -.3rem 0 .9rem; }
.office-card .kv { font-size: .9rem; }
.office-card .kv dd { white-space: normal; text-align: left; font-weight: 500; overflow-wrap: anywhere; }
.office-card .office-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .86rem; }
/* Hand-back to the Visa Map */
.handback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; background: var(--spot-bg); color: var(--spot-text); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); margin: 2rem 0 .4rem; }
.handback h3 { color: #F6F1E7; margin: 0 0 .3rem; font-size: 1.25rem; }
.handback p { color: #C9C3B8; margin: 0; max-width: 54ch; font-size: .95rem; }
.handback .btn-accent { flex: none; }
/* Rule-status pills inside tables and lists */
.pill--law { color: var(--teal-strong); background: var(--teal-soft); }
.pill--practice { color: var(--saffron-ink); background: var(--saffron-soft); }
.pill--forum { color: var(--muted); background: var(--sand-deep); }
:root[data-theme="dark"] .pill--forum { background: rgba(255,255,255,.08); }
/* Compact fee table */
.fee-table th, .fee-table td { font-size: .95rem; }
.fee-table td.num { white-space: nowrap; }
/* Decision list: who this is for, who it is not for */
.fit-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 10px; }
.fit-list li { margin: 0; padding: 12px 14px 12px 44px; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: .95rem; }
.fit-list li::before { content: ""; position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; border-radius: 50%; }
.fit-list li.yes::before { background: var(--ok-soft); box-shadow: inset 0 0 0 2px var(--ok); }
.fit-list li.no::before { background: var(--no-soft); box-shadow: inset 0 0 0 2px var(--no); }
.fit-list li.check::before { background: var(--warn-soft); box-shadow: inset 0 0 0 2px var(--warn); }

/* Mobile fixes 2026-10-27: footer stacking, segmented choices in equal cells, back-to-top button */
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-grid > :nth-child(1), .footer-grid > :nth-child(3) { grid-column: 1 / -1; }
  .footer-grid > :nth-child(3) { order: 3; }
  .footer-grid > :nth-child(4) { order: 2; }
  .footer-grid > :nth-child(2) { order: 1; }
  .footer-map { display: none; }
  .footer-legal { flex-direction: column; }
}
@media (max-width: 560px) {
  .seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .seg:has(> input:nth-of-type(4)) { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .fields > .field:not(.full) > legend { min-height: 3.2em; display: flex; align-items: flex-end; }
}
.to-top {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--spot-bg); color: #F6F1E7; border: 1px solid rgba(237, 231, 219, .24); box-shadow: var(--shadow-hover);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--teal-strong); }
.to-top svg { width: 22px; height: 22px; }
@media print { .to-top { display: none !important; } }

/* Code blocks never widen the page */
pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-size: .82rem; line-height: 1.55; }
pre code { white-space: pre; }
code { overflow-wrap: anywhere; }

/* Tables become stacked cards on phones (app.js adds .stack and data-label from the header row) */
@media (max-width: 640px) {
  .table-wrap.stack-wrap { overflow-x: visible; border: 0; background: none; border-radius: 0; }
  table.stack, table.stack tbody, table.stack caption { display: block; }
  table.stack { min-width: 0; }
  table.stack caption { padding: 0 0 10px; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.stack tr { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; }
  table.stack th, table.stack td { display: block; padding: 6px 0; border-bottom: 0; }
  table.stack tbody th { font-size: 1.05rem; padding: 2px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
  table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; margin-bottom: 2px; }
  table.stack td.num, table.stack td .num { white-space: normal; }
}

/* Privilege introduction offer (2026-10-27): hero buttons, CTA strip, reasons, steps, Visa Map card block */
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 1.4rem; }
.hero-cta .small { flex-basis: 100%; margin: 2px 0 0; }
.cta-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  margin: 1.6rem 0 0; padding: 20px 22px; border-radius: var(--radius);
  background: var(--spot-bg); color: #E9E3D8;
}
.cta-strip p { margin: 0; color: #CFC9BE; }
.cta-strip .cta-strip-title { font: 560 1.25rem/1.3 var(--font-display); color: #F6F1E7; margin-bottom: 4px; }
.cta-strip > div { flex: 1 1 280px; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 1.4rem 0; }
.why-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.why-item h3 { font-size: 1.02rem; margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; }
.why-item h3::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; border: 2px solid var(--saffron); transform: translateY(-1px); }
.why-item p { margin: 0; font-size: .92rem; color: var(--muted); }
.intro-steps { list-style: none; counter-reset: st; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.intro-steps li { counter-increment: st; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 56px; position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.intro-steps li::before { content: counter(st); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--primary-text); font-weight: 700; font-size: .9rem; }
.intro-steps span { font-size: .9rem; color: var(--muted); }
.rc-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--saffron-soft); border: 1px solid rgba(232, 163, 61, .35); }
.rc-intro p { margin: 0; flex: 1 1 240px; font-size: .92rem; }
.rc-intro .btn { min-height: 42px; padding: 9px 18px; font-size: .94rem; }
@media (max-width: 560px) { .hero-cta .btn, .cta-strip .btn, .rc-intro .btn { width: 100%; } }

/* ---------- 2026-11-07: five-column footer, agent card, route bar, proof strip, price box ---------- */
.footer-grid--5 { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
@media (max-width: 1100px) { .footer-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid--5 > :first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid--5 { grid-template-columns: 1fr; } }
.footer-app { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #F0C27A !important; text-decoration: none; }
.footer-app:hover { text-decoration: underline; }
.side-card { margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 14px; box-shadow: var(--shadow); }
.side-card-title { font: 560 1.05rem/1.3 var(--font-display); color: var(--heading); margin: 0 0 .3rem; }
.side-card p { font-size: .88rem; color: var(--muted); margin: 0 0 .8rem; }
.side-card .btn { margin: 0 0 8px; font-size: .9rem; min-height: 42px; }
.side-card .btn:last-child { margin-bottom: 0; }
@media (max-width: 1000px) { .side-card { display: none; } }
.route-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.route-bar .btn { flex: 1 1 0; min-height: 44px; font-size: .92rem; padding: 8px 10px; }
@media (max-width: 1000px) { .route-bar { display: flex; } body.has-route-bar { padding-bottom: 76px; } .route-bar.is-hidden { transform: translateY(110%); transition: transform .25s; } }
.agent-section .intro-steps { margin-bottom: 1.2rem; }
.proof-strip { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 1.4rem 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.proof-strip span { display: inline-flex; align-items: center; gap: 7px; }
.proof-strip svg { width: 16px; height: 16px; flex: none; color: var(--teal); }
.proof-strip a { color: inherit; font-weight: 600; }
.app-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.app-badge:hover { border-color: var(--teal); color: var(--teal); }
.app-badge svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .header-inner .app-badge { display: none; } }
.price-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; margin: 1.2rem 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--saffron); border-radius: 14px; }
.price-box .figure b { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.price-box .price-src { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); margin: 0; }
.tool-more { display: grid; gap: 14px; grid-column: 1 / -1; }
.tool-more[hidden] { display: none; }
.tool-reveal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.tool-reveal button { background: none; border: 0; padding: 0; color: var(--link); font: 600 .9rem var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tool-reveal .small { margin: 0; }
.watch-form { margin: 1.4rem 0 0; }
.watch-form .form-row { display: flex; flex-wrap: wrap; gap: 10px; }
.watch-form .form-row .input { flex: 1 1 240px; }
.watch-form .seg { margin: 10px 0; }
.watch-form .seg label { flex: 0 1 auto; font-size: .84rem; min-height: 38px; padding: 6px 12px; }
.plan-cta .consent { margin-top: 10px; font-size: .86rem; color: #DCD5C9; }