/* UniversitySwitch: the new site stylesheet.
 *
 * It replaces styles.css and advisory.css on every page that has been moved to the new
 * design, and styles the markup the site already emits (same class names), so a template
 * is moved by changing which stylesheet it links, not what it says. Which pages have been
 * moved is set in content/design-rollout.json (scripts/apply-article-design.mjs). A page
 * not named there still links styles.css.
 *
 * The rules of the system:
 *   Story    a page runs in one order: a headline with one promise and one action, what
 *            backs it, the steps or the facts, the offer, the questions, and a closing band
 *            on the dark ground.
 *   Type     twelve sizes, all named below (--t-micro 13px up to --t-display 74px), and five
 *            weights: 400 text, 500 links and controls, 600 labels and small headings,
 *            700 titles, 800 the headline of a page and of its closing band. A headline is
 *            fluid, tight (-.04em) and may set one phrase in the accent (.hl).
 *   Grid     twelve columns with a 24px gutter inside a 1120px page. Every block starts on
 *            a column line: halves, thirds and quarters all share the left and right edge.
 *   Space    the token scale only (4 8 12 16 24 32 48 64 96); sections sit one --section apart.
 *   Surface  three levels. The page (paper), a card (white, hairline ring, soft shadow),
 *            and the one raised tool on a page (white, deeper shadow). A card that is a
 *            link lifts 4px and deepens its shadow on hover. One card or band per page is
 *            inverted: white on the dark blue ground.
 *   Colour   ink on paper. One accent (--primary) for links, selection and focus. Green is
 *            the WhatsApp channel colour and appears on WhatsApp buttons only.
 *   Motion   things arrive once (a 20px rise with a fade as they are reached, siblings a
 *            tenth of a second apart; a headline's accent phrase takes its colour; the
 *            hero's cards are dealt and open out as the page starts to scroll),
 *            controls answer the hand (press, slide, lift), and results re-enter when the
 *            answer changes. Nothing loops. All of it is off under prefers-reduced-motion.
 *
 * The token block below is copied from assets/styles.css by scripts/lib/article-design.mjs
 * (syncTokens) so both sheets read the same brand tokens. Do not edit it here.
 */
/* BRAND-TOKENS:START */
:root {
  /* Core identity — deliberately chosen, not the Tailwind blue ramp */
  --ink:#0D1F3C;
  --deep:#183579;
  --primary:#2453D4;
  --primary-hover:#1C43B0;
  --tint:#EDF2FF;
  --paper:#F7F9FE;
  --white:#FFFFFF;
  /* Contact channel colours are independent of status and brand colours. */
  --whatsapp:#087F46;
  --whatsapp-hover:#066536;
  /* The single accent. Reserved for the one money action on a page. */
  --accent:#2453D4;
  --accent-hover:#1C43B0;
  --accent-tint:#EDF2FF;
  /* Blue ramp */
  --blue-50:#F5F7FF;
  --blue-100:#EDF2FF;
  --blue-200:#CDDBFF;
  --blue-300:#AEC5FF;
  --blue-400:#8EAEFF;
  --blue-500:#567FE9;
  --blue-600:#2453D4;
  --blue-700:#1C43B0;
  --blue-800:#183579;
  --blue-900:#122651;
  /* Ink ramp */
  --ink-50:#F5F7FB;
  --ink-100:#E4EAF5;
  --ink-200:#C9D5E9;
  --ink-300:#A4B8D7;
  --ink-400:#7D98C0;
  --ink-500:#5D7CAB;
  --ink-600:#425F8D;
  --ink-700:#2C476E;
  --ink-800:#1C3254;
  --ink-900:#0D1F3C;
  --ink-650:#425F8D;
  /* Status only — never decoration */
  --success:#0A6B3A;
  --success-strong:#084F2D;
  --success-tint:#ECF8F1;
  --warning:#A85B00;
  --warning-tint:#FFF7EC;
  --danger:#B3261E;
  --danger-tint:#FDECEA;
  /* Type */
  --font-display:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Space */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  /* Radius */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:20px;
  --r-pill:999px;
  /* Shadow — ink-tinted, three steps */
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 4px 8px -2px rgba(16,24,40,.06),0 12px 24px -8px rgba(16,24,40,.10);
  --shadow-lg:0 8px 16px -4px rgba(16,24,40,.08),0 24px 48px -12px rgba(16,24,40,.14);
  /* Layout & motion */
  --wrap:1120px;
  --wrap-narrow:720px;
  --nav-h:68px;
  --consent-bar-h:0px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-fast:140ms;
  --dur:220ms;
  --dur-slow:360ms;
  /* ── Legacy aliases. Hundreds of per-page inline styles still use these names;
     they now resolve to the new palette instead of the old Tailwind ramp. ── */
  --blue:var(--primary); --blue-hover:var(--primary-hover);
  --blue-light:var(--tint); --blue-mid:var(--blue-200);
  --navy:var(--ink);
  --ink-900:var(--ink); --off:var(--paper); --border:var(--ink-100);
  --text:var(--ink-800); --muted:var(--ink-600); --light:var(--ink-500);
  --green-500:var(--success); --green-600:var(--success-strong);
  --green:var(--success); --green-hover:var(--success-strong);
  --amber-500:var(--warning); --amber-100:var(--warning-tint);
  --red-500:var(--danger);
  --mint-50:var(--success-tint); --mint-100:var(--success-tint); --mint-700:var(--success-strong);
  --gold-50:var(--warning-tint); --gold-700:var(--warning);
  --surface-warm:var(--paper);
  --r-xl:var(--r-lg); --r-2xl:var(--r-lg); --r:var(--r-md); --rs:var(--r-sm);
  --shadow-xs:var(--shadow-sm); --shadow-xl:var(--shadow-lg); --shadow:var(--shadow-sm);
}
/* BRAND-TOKENS:END */

:root {
  --t-display: clamp(2.5rem, 1.2rem + 5.4vw, 4.625rem);
  --t-hero: clamp(2.25rem, 1.35rem + 3.6vw, 3.75rem);
  --t-h1: clamp(2rem, 1.5rem + 2.1vw, 3rem);
  --t-h2: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  --t-title: clamp(1.5rem, 1.35rem + .6vw, 1.75rem);
  --t-h3: 1.25rem;
  --t-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --t-read: 1.0625rem;
  --t-body: 1rem;
  --t-ui: .9375rem;
  --t-small: .875rem;
  --t-micro: .8125rem;

  --gutter: clamp(20px, 4vw, 32px);
  --gap: 24px;
  --section: clamp(64px, 8vw, 112px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --line: var(--ink-100);
  --article: 680px;
  --rail: 260px;

  /* Elevation, built from the brand shadow tokens plus a hairline ring in ink. The ring
     does the job of a border without the two-pixel seam a border and a shadow make. */
  --ring: 0 0 0 1px rgba(13, 31, 60, .08);
  --ring-strong: 0 0 0 1px rgba(13, 31, 60, .16);
  --elev-1: var(--ring), var(--shadow-sm), 0 14px 28px -20px rgba(13, 31, 60, .22);
  --elev-2: var(--ring-strong), var(--shadow-md), 0 24px 44px -24px rgba(13, 31, 60, .28);
  --elev-3: var(--ring), var(--shadow-lg), 0 40px 80px -40px rgba(13, 31, 60, .30);
  --r-card: var(--r-lg);
  --r-control: var(--r-md);
}

/* ── Base ─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink-700);
  background: var(--white);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { color: var(--ink-900); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
h3, h4 { font-weight: 600; letter-spacing: -.01em; }
p { text-wrap: pretty; }
a { color: var(--primary); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--primary-hover); }
strong, b { font-weight: 600; color: var(--ink-900); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--blue-100); color: var(--blue-900); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 12px 16px; background: var(--ink-900); color: var(--white); font-weight: 600; border-radius: 0 0 var(--r-sm) 0; }
.skip-link:focus { left: 0; }
/* The arrow at the end of a link leans the way it points when the link is hovered. */
a span[aria-hidden="true"] { display: inline-block; transition: translate var(--dur-fast) var(--ease); }
a:hover span[aria-hidden="true"] { translate: 2px -2px; }

/* ── Buttons ──────────────────────────────────────────────────────────────────────── */
.btn, .ad-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 0; border-radius: var(--r-control);
  font: 600 var(--t-body)/1.2 var(--font-body); text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease);
}
.btn svg, .ad-button svg { flex: none; width: 20px; height: 20px; }
.btn:hover, .ad-button:hover { translate: 0 -1px; }
.btn:active, .ad-button:active { translate: 0 0; transition-duration: 60ms; }
.btn-wa, .ad-primary {
  background: var(--whatsapp); color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(6, 101, 54, .4), 0 8px 18px -8px rgba(8, 127, 70, .6);
}
.btn-wa:hover, .ad-primary:hover {
  background: var(--whatsapp-hover); color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 4px rgba(6, 101, 54, .4), 0 14px 24px -10px rgba(8, 127, 70, .7);
}
.btn-secondary, .ad-secondary, .btn-quiet-wa { background: var(--white); color: var(--ink-900); box-shadow: var(--ring-strong), var(--shadow-sm); }
.btn-secondary:hover, .ad-secondary:hover, .btn-quiet-wa:hover { color: var(--ink-900); box-shadow: 0 0 0 1px var(--ink-400), var(--shadow-md); }
.btn-quiet-wa svg { color: var(--whatsapp); }
.btn-primary { background: var(--ink-900); color: var(--white); }

/* ── Header ───────────────────────────────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: var(--gap);
  height: var(--nav-h);
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 rgba(13, 31, 60, .08);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.is-scrolled .site-nav { background: rgba(255, 255, 255, .94); box-shadow: 0 1px 0 rgba(13, 31, 60, .08), 0 10px 30px -18px rgba(13, 31, 60, .35); }
.logo { display: flex; flex: none; align-items: center; }
.logo-img { width: auto; height: 40px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav-item { position: relative; }
.nav-item > a { display: block; padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--t-ui); font-weight: 500; color: var(--ink-700); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nav-item > a:hover, .nav-item:focus-within > a { background: var(--ink-50); color: var(--ink-900); }
.nav-item > a.active, .nav-item > a[aria-current="page"] { color: var(--ink-900); font-weight: 600; }
.nav-menu {
  position: absolute; top: calc(100% + 6px); left: -8px; min-width: 256px; padding: 8px;
  background: var(--white); border-radius: 14px; box-shadow: var(--elev-2);
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98); transform-origin: 24px 0;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
/* A bridge over the gap, so the pointer can travel from the link into its menu. */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav-item:hover > .nav-menu, .nav-item:focus-within > .nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-menu a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--t-small); font-weight: 500; color: var(--ink-700); }
.nav-menu a:hover { background: var(--ink-50); color: var(--ink-900); }
.mobile-subnav-toggle { display: none; }
.nav-r { display: flex; flex: none; align-items: center; gap: 8px; }
.nav-cta { min-height: 40px; padding: 0 16px; font-size: var(--t-small); border-radius: 10px; }
.nav-cta svg { width: 18px; height: 18px; }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink-900); transition: transform var(--dur) var(--ease), background-color var(--dur-fast) var(--ease); }
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(6px); }
/* The three bars fold into a cross while the menu is open. */
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }

@media (max-width: 960px) {
  .site-nav { gap: 12px; justify-content: space-between; }
  .nav-toggle { display: flex; }
  .nav-links { display: none; }
  .nav-links.show {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    padding: 4px var(--gutter) 24px; margin: 0;
    background: var(--white); box-shadow: 0 1px 0 var(--line), 0 24px 40px -24px rgba(13, 31, 60, .35);
  }
  .nav-item { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; border-bottom: 1px solid var(--line); }
  .nav-item > a { padding: 14px 0; font-size: var(--t-body); color: var(--ink-900); }
  .nav-item > a:hover, .nav-item:focus-within > a { background: none; }
  .mobile-subnav-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
  .mobile-subnav-toggle span { width: 9px; height: 9px; border-right: 2px solid var(--ink-600); border-bottom: 2px solid var(--ink-600); transform: translateY(-2px) rotate(45deg); transition: transform var(--dur) var(--ease); }
  .nav-item.is-open .mobile-subnav-toggle span { transform: translateY(2px) rotate(-135deg); }
  .nav-menu, .nav-item:hover > .nav-menu, .nav-item:focus-within > .nav-menu { display: none; position: static; grid-column: 1 / -1; min-width: 0; padding: 0 0 12px; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .nav-menu::before { content: none; }
  .nav-item.is-open > .nav-menu { display: block; }
  .nav-menu a { padding: 10px 0 10px 12px; font-size: var(--t-ui); }
}
@media (max-width: 640px) {
  :root { --nav-h: 60px; }
  .logo-img { height: 34px; }
  .nav-cta { padding: 0 12px; }
}

/* ── The grid and the card ────────────────────────────────────────────────────────── */
.ad-shell { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.ad-hero, .ad-trust { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.ad-route-grid, .ad-services, .ad-resource-grid, .ad-feedback-grid, .ad-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

.ad-route-grid > a, .ad-resource-grid > a, .ad-service, .ad-feedback, .ad-trust-grid article, .article-offer, .offer-card {
  background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1);
  transition: box-shadow var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.ad-route-grid > a, .ad-resource-grid > a, .ad-service, .ad-feedback { display: flex; flex-direction: column; padding: 28px; color: var(--ink-700); }
.ad-route-grid > a:hover, .ad-resource-grid > a:hover { color: var(--ink-700); box-shadow: var(--elev-2); translate: 0 -4px; }
.ad-route-grid > a:active, .ad-resource-grid > a:active { translate: 0 -1px; transition-duration: 80ms; }

/* ── Home: hero ───────────────────────────────────────────────────────────────────── */
/* One idea at a time: each section opens on a large heading, with enough room around it
   to read as its own thing and no more. */
.ad-page { --section: clamp(72px, 8vw, 116px); background: var(--paper); }
/* A wash of the brand blue behind the headline, fading into the page by the fold. */
.ad-page main {
  background:
    radial-gradient(60rem 26rem at 88% -6rem, rgba(36, 83, 212, .13), transparent 70%),
    radial-gradient(44rem 22rem at 4% -8rem, rgba(36, 83, 212, .07), transparent 70%)
    no-repeat;
}
/* Words on the left, the photograph on the right, the finder across the full width. The
   copy block is laid out by this grid directly, so the same markup can put the finder
   straight after the opening lines on a phone. */
.ad-hero { padding-block: clamp(40px, 6vw, 80px) 64px; grid-template-rows: auto auto auto 1fr; }
.ad-hero-copy { display: contents; }
.ad-hero h1 { grid-column: 1 / span 6; grid-row: 1; font-size: var(--t-display); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.ad-hero-copy > p:first-of-type { grid-column: 1 / span 6; grid-row: 2; max-width: 30em; margin-top: 24px; font-size: var(--t-lead); color: var(--ink-700); }
.ad-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ad-hero .ad-actions { grid-column: 1 / span 6; grid-row: 3; }
.ad-fine { margin-top: 12px; font-size: var(--t-small); color: var(--ink-600); }
.ad-hero .ad-fine { grid-column: 1 / span 6; grid-row: 4; }
.ad-hero-visual { grid-column: 7 / -1; grid-row: 1 / span 4; align-self: stretch; position: relative; min-height: 320px; border-radius: 24px; overflow: hidden; box-shadow: var(--elev-2); }
.ad-hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* The caption stays for assistive technology; it is not shown over the picture. */
.ad-hero-visual figcaption { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.ad-hero-link { grid-column: 1 / span 6; grid-row: 6; margin-top: 24px; font-size: var(--t-ui); font-weight: 500; }
.ad-hero-proof { grid-column: 7 / -1; grid-row: 6; display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 24px; font-size: var(--t-small); color: var(--ink-600); }
.ad-hero-proof span { position: relative; padding-left: 18px; }
.ad-hero-proof span::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 5px; border-left: 1.5px solid var(--ink-500); border-bottom: 1.5px solid var(--ink-500); transform: rotate(-45deg); }

/* ── Home: the finder ─────────────────────────────────────────────────────────────── */
/* The one raised surface on the page. A search bar asks three questions; the answer fills
   the rest of the panel. */
.finder {
  grid-column: 1 / -1; grid-row: 5; margin-top: clamp(56px, 7vw, 96px);
  background: var(--white); border-radius: 24px; box-shadow: var(--elev-3); overflow: hidden;
}
.finder-head { padding: 28px 32px 32px; background: linear-gradient(180deg, var(--blue-50), var(--paper)); box-shadow: inset 0 -1px 0 var(--line); }
.finder-body { padding: 28px 32px 32px; }
.finder h2 { font-size: var(--t-h3); letter-spacing: -.015em; }

/* The bar: one white strip, three fields, a hairline between them. */
.finder-form { margin-top: 16px; display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; background: var(--white); border-radius: 16px; box-shadow: var(--ring-strong), var(--shadow-sm); }
.finder-field { position: relative; display: block; padding: 12px 20px 13px; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.finder-field:first-child { border-radius: 16px 0 0 16px; }
.finder-field:last-child { border-radius: 0 16px 16px 0; }
.finder-field + .finder-field { box-shadow: inset 1px 0 0 var(--line); }
.finder-field:hover { background: var(--blue-50); }
.finder-field:focus-within { background: var(--white); box-shadow: inset 0 0 0 2px var(--primary); z-index: 1; }
.finder-field > span { display: block; font-size: var(--t-micro); font-weight: 500; color: var(--ink-600); }
.finder-field select {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; margin-top: 1px; padding: 0 28px 0 0;
  border: 0; border-radius: 0; outline: 0; background: transparent;
  font: 600 var(--t-read)/1.4 var(--font-body); color: var(--ink-900); text-overflow: ellipsis; cursor: pointer;
}
/* The chevron belongs to the field, so it stays put while the select's text changes. */
.finder-field::after { content: ""; position: absolute; right: 22px; bottom: 22px; width: 8px; height: 8px; border-right: 2px solid var(--ink-500); border-bottom: 2px solid var(--ink-500); transform: rotate(45deg); pointer-events: none; transition: border-color var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease); }
.finder-field:hover::after, .finder-field:focus-within::after { border-color: var(--primary); translate: 0 2px; }

/* The answer. */
.finder-summary { font-size: var(--t-ui); font-weight: 600; line-height: 1.5; color: var(--ink-900); }
.finder-results { margin-top: 16px; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.finder-row { padding: 18px 20px 16px; background: var(--paper); border-radius: 16px; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.finder-row:hover { background: var(--white); box-shadow: var(--ring), var(--shadow-md); }
.finder-row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.finder-row-name { font-size: var(--t-read); font-weight: 600; color: var(--ink-900); }
.finder-row-name:hover { color: var(--primary); }
.finder-row-cost { font-size: var(--t-ui); font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.finder-bar { display: flex; height: 6px; margin-top: 10px; border-radius: 3px; background: var(--ink-100); overflow: hidden; }
.finder-bar i { display: block; height: 100%; background: var(--primary); transition: width var(--dur-slow) var(--ease); }
.finder-bar i + i { background: var(--blue-300); }
.finder-row-facts { margin-top: 10px; font-size: var(--t-micro); line-height: 1.7; color: var(--ink-600); }
.finder-fact { white-space: nowrap; margin-right: 14px; }
.finder-fact-tuition::before, .finder-fact-living::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--primary); }
.finder-fact-living::before { background: var(--blue-300); }
.finder-row-source { color: var(--ink-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-200); }
.finder-row-source:hover { color: var(--ink-900); text-decoration-color: currentColor; }
.finder-row-family { margin-top: 8px; font-size: var(--t-small); color: var(--ink-700); }
.finder-row-guides { margin-top: 8px; font-size: var(--t-small); font-weight: 500; line-height: 1.45; }
.finder-row-guide { display: block; }
.finder-row-guide a::before { content: "→ "; color: var(--ink-400); }
.finder-more { margin-top: 12px; }
.finder-more-btn { width: 100%; min-height: 44px; border: 0; border-radius: var(--r-control); background: var(--white); box-shadow: var(--ring-strong); font-size: var(--t-small); font-weight: 600; color: var(--ink-900); cursor: pointer; transition: box-shadow var(--dur) var(--ease), background-color var(--dur-fast) var(--ease); }
.finder-more-btn:hover { background: var(--paper); box-shadow: 0 0 0 1px var(--ink-400); }
.finder-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-top: 28px; }
.finder-guides { display: grid; gap: 20px; align-content: start; }
.finder-guides h3 { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0; color: var(--ink-600); }
.finder-guides ul { margin-top: 4px; list-style: none; columns: 2; column-gap: 32px; }
.finder-guides li { padding: 8px 0; border-bottom: 1px solid var(--line); break-inside: avoid; font-size: var(--t-ui); font-weight: 500; line-height: 1.4; }
.finder-ask { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: var(--t-small); color: var(--ink-600); }
.finder-fine { margin-top: 28px; border-top: 1px solid var(--line); font-size: var(--t-micro); line-height: 1.55; color: var(--ink-600); }
.finder-fine summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; cursor: pointer; list-style: none; transition: color var(--dur-fast) var(--ease); }
.finder-fine summary::-webkit-details-marker { display: none; }
.finder-fine summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur) var(--ease); }
.finder-fine[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.finder-fine summary:hover { color: var(--ink-900); }
.finder-fine p { max-width: 70em; padding-bottom: 8px; }

/* Without the script there is no bar: a heading, then every destination. */
.finder:not(.is-live) .finder-head { padding-bottom: 0; background: none; box-shadow: none; }
.finder:not(.is-live) .finder-body { padding-top: 12px; }

@media (max-width: 960px) {
  /* The finder follows the opening lines, ahead of the buttons: the tool before the ask. */
  .ad-hero { display: flex; flex-direction: column; }
  .ad-hero h1 { order: 1; }
  .ad-hero-copy > p:first-of-type { order: 2; margin-top: 20px; }
  .finder { order: 3; margin-top: 32px; }
  .ad-hero .ad-actions { order: 4; margin-top: 32px; }
  .ad-hero .ad-fine { order: 5; }
  .ad-hero-link { order: 6; }
  .ad-hero-proof { order: 7; }
  .finder-foot { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
  /* The bar stands on end: three rows, label on the left, answer on the right. */
  .finder-form { grid-template-columns: minmax(0, 1fr); }
  .finder-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 40px 8px 16px; }
  .finder-field:first-child { border-radius: 16px 16px 0 0; }
  .finder-field:last-child { border-radius: 0 0 16px 16px; }
  .finder-field + .finder-field { box-shadow: inset 0 1px 0 var(--line); }
  .finder-field select { width: auto; max-width: 11.5em; margin: 0; padding: 0; font-size: var(--t-ui); text-align: right; text-align-last: right; }
  .finder-field::after { right: 18px; bottom: 50%; margin-bottom: -2px; }
  .finder-results { grid-template-columns: minmax(0, 1fr); }
  .finder-guides ul { columns: 1; }
}
@media (max-width: 640px) {
  .finder { margin-inline: calc(var(--gutter) * -.5); border-radius: 20px; }
  .finder-head { padding: 24px 20px; }
  .finder-body { padding: 24px 20px; }
  .finder-row-head { flex-direction: column; }
  .ad-actions .ad-button, .finder-ask, .finder-ask .btn { width: 100%; }
}

/* ── Home: sections ───────────────────────────────────────────────────────────────── */
.ad-credibility { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); overflow: hidden; }
.ad-credibility a { display: block; padding: 22px 24px; transition: background-color var(--dur-fast) var(--ease); }
.ad-credibility a + a { box-shadow: inset 1px 0 0 var(--line); }
.ad-credibility a:hover { background: var(--blue-50); }
.ad-credibility strong { display: block; font-size: var(--t-body); }
.ad-credibility span { display: block; margin-top: 2px; font-size: var(--t-small); }

.ad-section { padding-top: var(--section); }
.ad-section-head, .ad-feedback-heading { max-width: 760px; margin-bottom: 48px; }
.ad-section h2 { font-size: var(--t-h1); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.ad-section-head p, .ad-feedback-heading p { margin-top: 12px; font-size: var(--t-lead); }

/* An icon in a tinted square heads each card that points somewhere. The pictures are line
   drawings held in this sheet, set per card by position, so the markup stays as it is. */
:root {
  --icon-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E");
  --icon-swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h15l-3.5-3.5M20 16H5l3.5 3.5'/%3E%3C/svg%3E");
  --icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11h-9l-5 4v-4H4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E");
  --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3.2 3.4 3.2 14.6 0 18M12 3c-3.2 3.4-3.2 14.6 0 18'/%3E%3C/svg%3E");
  --icon-calculator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2.5'/%3E%3Cpath d='M8.5 7.5h7M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16h.01M12 16h.01M15.5 16h.01'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.2c0 4.6-3 8-7.5 9.8-4.500-1.800-7.500-5.200-7.500-9.800V6z'/%3E%3Cpath d='M8.800 12l2.300 2.300 4.200-4.600'/%3E%3C/svg%3E");
  --icon-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.500 3h7.500l4.500 4.500V21h-12z'/%3E%3Cpath d='M14 3v4.500h4.500M9.200 14l2 2 3.600-4'/%3E%3C/svg%3E");
  --icon-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.500 12.500l9-9H20v7.500l-9 9z'/%3E%3Cpath d='M15.800 8.200h.01'/%3E%3C/svg%3E");
  --icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 005.700 0l3-3a4 4 0 00-5.700-5.700l-1.200 1.200'/%3E%3Cpath d='M14 10a4 4 0 00-5.700 0l-3 3a4 4 0 005.700 5.700l1.200-1.200'/%3E%3C/svg%3E");
  --icon-scale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7 20h10M5 7.500h14M5 7.500L2.500 14h5zM19 7.500L16.500 14h5z'/%3E%3C/svg%3E");
}
.ad-route-grid > a, .ad-resource-grid > a, .ad-trust-grid article { position: relative; }
.ad-route-grid > a::before, .ad-resource-grid > a::before, .ad-trust-grid article::before { content: ""; display: block; flex: none; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px; background: var(--tint); }
.ad-route-grid > a::after, .ad-resource-grid > a::after, .ad-trust-grid article::after { content: ""; position: absolute; top: 40px; left: 40px; width: 24px; height: 24px; background: var(--primary); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.ad-route-grid > a:nth-child(1) { --icon: var(--icon-compass); }
.ad-route-grid > a:nth-child(2) { --icon: var(--icon-swap); }
.ad-route-grid > a:nth-child(3) { --icon: var(--icon-chat); }
/* A card's picture follows where it leads, so a grid of any length gets the right ones. */
.ad-resource-grid > a { --icon: var(--icon-compass); }
.ad-resource-grid > a[href*="destination"], .ad-resource-grid > a[href*="countr"] { --icon: var(--icon-globe); }
.ad-resource-grid > a[href*="compare"], .ad-resource-grid > a[href*="work-rights"] { --icon: var(--icon-scale); }
.ad-resource-grid > a[href*="visa"], .ad-resource-grid > a[href*="timeline"], .ad-resource-grid > a[href*="offer-letter"] { --icon: var(--icon-document); }
.ad-resource-grid > a[href*="transfer"], .ad-resource-grid > a[href*="switch"] { --icon: var(--icon-swap); }
.ad-resource-grid > a[href*="cost"], .ad-resource-grid > a[href*="budget"] { --icon: var(--icon-calculator); }
.ad-resource-grid > a[href*="credibility"], .ad-resource-grid > a[href*="university-check"] { --icon: var(--icon-shield); }
.ad-resource-grid > a[href*="interview"], .ad-resource-grid > a[href*="consultation"], .ad-resource-grid > a[href*="contact"] { --icon: var(--icon-chat); }
.ad-trust-grid article:nth-child(1) { --icon: var(--icon-document); }
.ad-trust-grid article:nth-child(2) { --icon: var(--icon-tag); }
.ad-trust-grid article:nth-child(3) { --icon: var(--icon-link); }
.ad-trust-grid article:nth-child(4) { --icon: var(--icon-scale); }

/* The label above a card title. The copy is authored in mixed case and in capitals; show
   both the same way. */
.ad-route-grid > a > span, .ad-resource-grid > a > span { display: block; font-size: var(--t-micro); font-weight: 600; color: var(--primary); text-transform: lowercase; translate: none; }
.ad-route-grid > a > span::first-letter, .ad-resource-grid > a > span::first-letter { text-transform: uppercase; }
.ad-route-grid h3, .ad-resource-grid h3 { margin-top: 8px; font-size: var(--t-h3); line-height: 1.25; }
.ad-route-grid p, .ad-resource-grid p { margin-top: 8px; font-size: var(--t-ui); line-height: 1.6; }
.ad-resource-grid b, .ad-text-link { margin-top: auto; padding-top: 24px; font-size: var(--t-ui); font-weight: 600; color: var(--primary); }
.ad-text-link:hover { color: var(--primary-hover); }
/* The arrow sits in a round well and fills with the accent when the card is hovered. */
.ad-route-grid b { position: absolute; top: 32px; right: 32px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink-50); font-weight: 500; color: var(--ink-700); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), rotate var(--dur) var(--ease); }
.ad-route-grid > a:hover b { background: var(--primary); color: var(--white); rotate: 45deg; }

/* The three services, set out like plans: what it costs, what it is, what you get, and
   one clear way in. The middle one, the service most people are choosing between, is the
   dark card. */
.ad-services { align-items: stretch; }
.ad-service { padding: 36px 32px 32px; }
.ad-pill, .offer-card-eyebrow { display: inline-block; padding: 5px 12px; background: var(--ink-50); border-radius: var(--r-pill); font-size: var(--t-micro); font-weight: 600; line-height: 1.5; color: var(--ink-700); }
/* Free and paid are told apart at a glance: free is the filled accent, paid an outline. */
.ad-service:first-child .ad-pill { background: var(--primary); color: var(--white); }
.ad-service:not(:first-child):not(.ad-featured) .ad-pill { background: transparent; box-shadow: var(--ring-strong); }
.ad-service:first-child { box-shadow: 0 0 0 2px var(--primary), var(--shadow-md), 0 24px 44px -24px rgba(36, 83, 212, .35); }
.ad-service h3 { margin-top: 20px; font-size: var(--t-title); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.ad-service > p { margin-top: 12px; font-size: var(--t-body); line-height: 1.65; color: var(--ink-600); }
.ad-service ul, .offer-card-gets { list-style: none; display: grid; gap: 14px; }
.ad-service ul { margin: 28px 0 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.ad-service li, .offer-card-gets li { position: relative; padding-left: 34px; font-size: var(--t-ui); line-height: 1.5; color: var(--ink-800); }
/* A tick in a tinted disc. */
.ad-service li::before, .offer-card-gets li::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); }
.ad-service li::after, .offer-card-gets li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 10px; height: 5px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.ad-service .ad-text-link { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; margin-top: auto; padding: 0 20px; border-radius: var(--r-control); background: var(--white); box-shadow: var(--ring-strong), var(--shadow-sm); color: var(--ink-900); transition: box-shadow var(--dur) var(--ease), background-color var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease); }
.ad-service .ad-text-link:hover { color: var(--ink-900); box-shadow: 0 0 0 1px var(--ink-400), var(--shadow-md); translate: 0 -1px; }
.ad-service.ad-featured { background: linear-gradient(160deg, var(--blue-900), var(--ink-900) 70%); box-shadow: var(--elev-3); color: var(--ink-200); }
.ad-featured .ad-pill { background: rgba(255, 255, 255, .12); color: var(--white); }
.ad-featured h3 { color: var(--white); }
.ad-featured > p { color: var(--ink-200); }
.ad-featured ul { border-top-color: rgba(255, 255, 255, .14); }
.ad-featured li { color: var(--white); }
.ad-featured li::before { background: rgba(255, 255, 255, .14); }
.ad-featured li::after { border-color: var(--white); }
.ad-featured .ad-text-link { background: var(--white); box-shadow: none; }
.ad-featured .ad-text-link:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }

.ad-quote-mark { display: block; height: 28px; font-size: var(--t-display); font-weight: 700; line-height: 1; color: var(--blue-200); }
.ad-feedback { padding: 32px; }
.ad-feedback blockquote p { font-size: var(--t-body); line-height: 1.65; color: var(--ink-800); }
.ad-feedback figcaption { margin-top: auto; padding-top: 24px; }
.ad-feedback figcaption strong { display: block; font-size: var(--t-ui); }
.ad-feedback figcaption span { font-size: var(--t-small); color: var(--ink-600); }
.ad-more-feedback { margin-top: 24px; }
.ad-more-feedback summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--t-ui); font-weight: 600; color: var(--primary); cursor: pointer; list-style: none; }
.ad-more-feedback summary::-webkit-details-marker { display: none; }
.ad-more-feedback[open] summary { margin-bottom: 16px; }
.ad-more-feedback summary span { transition: rotate var(--dur) var(--ease); }
.ad-more-feedback[open] summary span { rotate: 45deg; }

/* Personal guidance: the statement first, like every other section, then its four points
   as a row of equal cards. */
.ad-trust { display: block; }
.ad-trust > div:first-child { max-width: 760px; margin-bottom: 48px; }
.ad-trust .ad-section-head { margin-bottom: 0; }
.ad-trust > div:first-child > p { margin-top: 12px; font-size: var(--t-lead); }
.ad-trust > div > .ad-text-link { display: inline-block; padding-top: 16px; }
.ad-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.ad-trust-grid article { padding: 28px; }
.ad-trust-grid article::after { top: 40px; left: 40px; }
.ad-trust-grid h3 { font-size: var(--t-read); line-height: 1.3; }
.ad-trust-grid p { margin-top: 8px; font-size: var(--t-ui); line-height: 1.6; }
.ad-step-grid h3 { padding-top: 7px; font-size: var(--t-read); }
.ad-step-grid p { margin-top: 8px; font-size: var(--t-ui); line-height: 1.6; }

/* Numbered steps: the number sits beside its words, never on a line of its own. */
.ad-step-grid { list-style: none; gap: 32px var(--gap); }
.ad-step-grid > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
.ad-step-grid > li > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); font-size: var(--t-micro); font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.ad-step-grid > li > :is(h3, p) { grid-column: 2; }

/* The page closes on the dark ground: the ask, and one way to make it. */
.ad-close { margin-block: var(--section); padding: clamp(48px, 7vw, 96px) var(--gutter); background: radial-gradient(44rem 18rem at 50% -5rem, rgba(86, 127, 233, .38), transparent 70%), linear-gradient(160deg, var(--blue-900), var(--ink-900) 70%); border-radius: 32px; box-shadow: var(--elev-3); text-align: center; color: var(--ink-200); }
.ad-close h2 { max-width: 17em; margin-inline: auto; font-size: var(--t-hero); font-weight: 800; line-height: 1.06; letter-spacing: -.04em; color: var(--white); }
.ad-close > p:first-of-type { max-width: 560px; margin: 18px auto 0; font-size: var(--t-lead); color: var(--ink-200); }
.ad-close .ad-actions { justify-content: center; margin-top: 32px; }
.ad-close .ad-fine { color: var(--ink-300); }
.ad-close .ad-secondary { background: transparent; color: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }
.ad-close .ad-secondary:hover { color: var(--white); box-shadow: 0 0 0 1px var(--white); }

@media (max-width: 1100px) {
  .ad-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ad-hero-visual { order: 8; min-height: 0; margin-top: 32px; aspect-ratio: 16 / 10; }
  .ad-route-grid, .ad-services, .ad-resource-grid, .ad-feedback-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ad-credibility { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-credibility a { padding: 18px 20px; }
  .ad-credibility a + a { box-shadow: none; }
  .ad-credibility a:nth-child(even) { box-shadow: inset 1px 0 0 var(--line); }
  .ad-credibility a:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .ad-service { padding: 32px 24px 24px; }
  .ad-feedback { padding: 28px 24px; }
  .ad-step-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .ad-trust-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ad-trust-grid article { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 24px; }
  .ad-trust-grid article::before { grid-row: 1 / span 2; margin: 0; }
  .ad-trust-grid article::after { top: 36px; left: 36px; }
  .ad-trust-grid h3, .ad-trust-grid p { grid-column: 2; }
}

/* ── Home: told as a story ────────────────────────────────────────────────────────── */
/* The home page reads top to bottom as one story: the promise, set large and centred, over
   five real destinations; then how it works, one step to a screen, each step with the
   thing it describes beside it (the questions, the answer, the paid reviews); then what is
   free and what is paid; students' words; who is behind it; and the ask. */
.is-story .ad-hero { display: block; padding-block: clamp(40px, 5.5vw, 80px) 0; text-align: center; }
.is-story .ad-hero-copy { display: block; }
.is-story .ad-hero h1 { max-width: 11em; margin-inline: auto; font-size: clamp(2.75rem, 1.1rem + 6.6vw, 5.75rem); line-height: .98; letter-spacing: -.055em; }
/* The accent phrase is one block, so its gradient and its entrance run across both lines. */
.is-story .ad-hero h1 span { display: inline-block; padding-bottom: .14em; margin-bottom: -.14em; }
.is-story .ad-hero-copy > p:first-of-type { max-width: 34em; margin: 28px auto 0; }
.is-story .ad-hero .ad-actions { justify-content: center; margin-top: 32px; }
.is-story .ad-hero .ad-fine { margin-top: 14px; }
.is-story .ad-hero-visual { display: none; }
.is-story .ad-hero-link { display: inline-block; margin-top: 28px; }
.is-story .ad-hero-proof { justify-content: center; margin-top: 12px; }

/* Five destinations, fanned like a hand of cards. Each is a link to its own page. */
.hero-fan { margin-top: clamp(32px, 4vw, 56px); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: clip; }
.hero-fan-cards { display: flex; justify-content: center; padding: 16px 0 52px; }
.hero-fan-card { position: relative; flex: none; width: clamp(148px, 16.5vw, 212px); margin-inline: -6px; padding: 10px 10px 16px; background: var(--white); border-radius: 20px; box-shadow: var(--elev-2); text-align: left; color: var(--ink-900); rotate: calc(var(--tilt, 0deg) * (1 + var(--spread, 0) * .5)); translate: calc(var(--shift, 0px) * var(--spread, 0)) calc(var(--drop, 0px) * (1 + var(--spread, 0) * .6)); transition: rotate .4s var(--ease-out), translate .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.hero-fan-card:nth-child(1) { --tilt: -8deg; --drop: 36px; --shift: -34px; }
.hero-fan-card:nth-child(2) { --tilt: -4deg; --drop: 10px; --shift: -16px; z-index: 1; }
.hero-fan-card:nth-child(3) { z-index: 2; }
.hero-fan-card:nth-child(4) { --tilt: 4deg; --drop: 10px; --shift: 16px; z-index: 1; }
.hero-fan-card:nth-child(5) { --tilt: 8deg; --drop: 36px; --shift: 34px; }
.hero-fan-card:hover, .hero-fan-card:focus-visible { z-index: 3; rotate: 0deg; translate: 0 -10px; box-shadow: var(--elev-3); color: var(--ink-900); }
.hero-fan-card picture { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--ink-50); }
.hero-fan-card img { width: 100%; height: 100%; object-fit: cover; }
.hero-fan-name { display: block; margin: 12px 4px 0; font-size: var(--t-read); font-weight: 700; letter-spacing: -.015em; }
.hero-fan-cost { display: block; margin: 2px 4px 0; font-size: var(--t-micro); color: var(--ink-600); }
.hero-fan-note { max-width: 46em; margin-inline: auto; font-size: var(--t-micro); color: var(--ink-600); }

/* Every section opens the same way: one large line, centred. */
.is-story .ad-section-head, .is-story .ad-feedback-heading, .is-story .ad-trust > div:first-child { margin-inline: auto; text-align: center; }
.is-story .ad-section h2 { font-size: var(--t-hero); line-height: 1.04; letter-spacing: -.04em; }
.is-story .ad-process .ad-section-head { margin-bottom: 16px; }

/* How it works: one step at a time. The number and the line share a row, two sentences
   follow, and the thing the step describes sits beside them. */
[data-finder] .ad-step-grid { display: block; }
[data-finder] .ad-step-grid > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--gap); padding: clamp(28px, 3.5vw, 48px) 0; }
[data-finder] .ad-step-grid > li > span { grid-column: 1; grid-row: 2; align-self: center; width: 48px; height: 48px; background: var(--primary); box-shadow: 0 12px 24px -12px rgba(36, 83, 212, .8); font-size: var(--t-ui); font-weight: 700; color: var(--white); }
[data-finder] .ad-step-grid > li > h3 { grid-column: 2 / span 4; grid-row: 2; align-self: center; padding: 0; font-size: var(--t-h1); font-weight: 800; line-height: 1.06; letter-spacing: -.04em; }
[data-finder] .ad-step-grid > li > p { grid-column: 2 / span 4; grid-row: 3; margin-top: 14px; font-size: var(--t-lead); line-height: 1.6; color: var(--ink-600); }
[data-finder] .ad-step-grid > li > .story-panel { grid-column: 7 / -1; grid-row: 1 / -1; align-self: center; }

.story-panel { padding: 32px; background: linear-gradient(160deg, var(--blue-100), var(--blue-50) 75%); border-radius: 32px; box-shadow: inset 0 0 0 1px rgba(36, 83, 212, .10); text-align: left; }
.story-panel-title { font-size: var(--t-h3); font-weight: 700; letter-spacing: -.015em; color: var(--ink-900); }
.story-panel-hint { margin-top: 16px; font-size: var(--t-small); color: var(--ink-600); }
/* The questions: three rows, the question on the left and its answer on the right. */
.story-ask .finder-form { grid-template-columns: minmax(0, 1fr); margin-top: 20px; border-radius: 20px; box-shadow: var(--ring), var(--shadow-md); }
.story-ask .finder-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 72px; padding: 10px 46px 10px 22px; }
.story-ask .finder-field:first-child { border-radius: 20px 20px 0 0; }
.story-ask .finder-field:last-child { border-radius: 0 0 20px 20px; }
.story-ask .finder-field + .finder-field { box-shadow: inset 0 1px 0 var(--line); }
.story-ask .finder-field:focus-within { box-shadow: inset 0 0 0 2px var(--primary); }
.story-ask .finder-field > span { font-size: var(--t-small); }
.story-ask .finder-field select { width: auto; max-width: 12em; margin: 0; padding: 0; text-align: right; text-align-last: right; }
.story-ask .finder-field::after { right: 22px; bottom: 50%; margin-bottom: -2px; }
/* The answer: the destinations that fit, then the free next step. */
.story-answer .finder-results { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
.story-answer .finder-row { background: var(--white); box-shadow: var(--ring), var(--shadow-sm); }
.story-answer .finder-row-head { flex-direction: row; }
.story-answer .finder-ask { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
/* Two quiet lines close the answer: the guides for this situation, and the method. */
.finder-fold { margin-top: 16px; border-top: 1px solid rgba(36, 83, 212, .14); font-size: var(--t-micro); color: var(--ink-600); }
.finder-fold + .finder-fine { margin-top: 0; }
.finder-fold summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; cursor: pointer; list-style: none; transition: color var(--dur-fast) var(--ease); }
.finder-fold summary::-webkit-details-marker { display: none; }
.finder-fold summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur) var(--ease); }
.finder-fold[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.finder-fold summary:hover { color: var(--ink-900); }
.story-answer .finder-guides { padding-bottom: 12px; gap: 12px; }
.finder-guides-title { font-size: var(--t-micro); font-weight: 600; color: var(--ink-600); }
.story-answer .finder-guides ul { columns: 1; }
.story-answer .finder-guides li { border-bottom-color: rgba(36, 83, 212, .12); font-size: var(--t-small); }
.story-answer .finder-guides li:last-child { border-bottom: 0; }
.story-answer .finder-fine { margin-top: 12px; border-top-color: rgba(36, 83, 212, .14); }
/* Going deeper: the one dark panel, naming the paid reviews. */
.story-deeper { background: linear-gradient(160deg, var(--blue-900), var(--ink-900) 70%); box-shadow: var(--elev-3); }
.story-deeper ul { list-style: none; display: grid; gap: 12px; }
.story-deeper a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; padding: 18px 24px; background: rgba(255, 255, 255, .08); border-radius: 20px; color: var(--white); transition: background-color var(--dur) var(--ease), translate var(--dur) var(--ease); }
.story-deeper a:hover { background: rgba(255, 255, 255, .15); color: var(--white); translate: 0 -2px; }
.story-deeper-name { font-size: var(--t-h3); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.story-deeper-tag { flex: none; padding: 5px 12px; background: rgba(255, 255, 255, .14); border-radius: var(--r-pill); font-size: var(--t-micro); font-weight: 600; }

/* Without the script there are no questions to answer: the step shows the whole list. */
[data-finder]:not(.is-live) .story-ask { display: none; }
[data-finder]:not(.is-live) :is(.finder-row-family, .finder-row-guide:not([data-need="none"])) { display: none; }

/* The last grid before the ask steps back: three plain columns, no cards. */
.is-story .ad-resource-grid > a { padding: 24px 0 0; background: none; border-top: 1px solid var(--ink-200); border-radius: 0; box-shadow: none; }
.is-story .ad-resource-grid > a:hover { box-shadow: none; translate: none; }
.is-story .ad-resource-grid > a::before, .is-story .ad-resource-grid > a::after { content: none; }
.is-story .ad-resource-grid b { padding-top: 16px; }

@media (max-width: 960px) {
  .is-story .ad-hero { display: block; }
  .is-story .ad-hero .ad-actions { margin-top: 28px; }
  [data-finder] .ad-step-grid > li { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; column-gap: 14px; padding: 28px 0; }
  [data-finder] .ad-step-grid > li > span { grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
  [data-finder] .ad-step-grid > li > h3 { grid-column: 2; grid-row: 1; }
  [data-finder] .ad-step-grid > li > p { grid-column: 1 / -1; grid-row: 2; }
  [data-finder] .ad-step-grid > li > .story-panel { grid-column: 1 / -1; grid-row: 3; margin-top: 20px; }
  .is-story .ad-process .ad-section-head { margin-bottom: 8px; }
}
@media (max-width: 700px) {
  /* Three cards fit a phone; the outer two wait for a wider screen. */
  .hero-fan-card:nth-child(1), .hero-fan-card:nth-child(5) { display: none; }
  .hero-fan-card { width: 28vw; margin-inline: -3px; padding: 7px 7px 12px; border-radius: 16px; }
  .hero-fan-card:nth-child(2) { --tilt: -6deg; --drop: 14px; }
  .hero-fan-card:nth-child(4) { --tilt: 6deg; --drop: 14px; }
  .hero-fan-card picture { border-radius: 10px; }
  .hero-fan-name { margin: 8px 2px 0; font-size: var(--t-small); }
  .hero-fan-cost { margin: 2px 2px 0; line-height: 1.35; }
  .hero-fan-cards { padding-bottom: 36px; }
  .story-panel { margin-inline: calc(var(--gutter) * -.5); padding: 20px 16px; border-radius: 24px; }
  .story-ask .finder-field { min-height: 60px; padding: 8px 40px 8px 16px; }
  .story-ask .finder-field::after { right: 18px; }
  .story-ask .finder-field select { max-width: 10.5em; font-size: var(--t-ui); }
  .story-answer .finder-row-head { flex-direction: column; }
  .story-answer .finder-ask, .story-answer .finder-ask .btn { width: 100%; }
  .story-deeper a { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── Consultation, about and contact pages ────────────────────────────────────────── */
/* These pages share the home page's vocabulary (ad-*), so they share its cards, grid and
   spacing. What is added here is what only they have: a page heading, the service detail
   opening with its "what you get" card, the question lists, the person card and the form. */
.ad-shell > .breadcrumb { margin: 0; padding-top: 28px; }
.ad-eyebrow { display: block; font-size: var(--t-micro); font-weight: 600; color: var(--primary); }
.ad-free-first { margin-top: 16px; }
.ad-free-first a { font-weight: 600; }

/* Page heading: the page's name as a label, its line as the headline. */
.ad-heading { padding-block: clamp(28px, 4vw, 48px) 8px; }
.ad-heading h1 { font-size: var(--t-small); font-weight: 600; line-height: 1.5; letter-spacing: 0; color: var(--primary); }
.ad-heading h1 span { display: block; max-width: 16em; margin-top: 8px; font-size: var(--t-display); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; color: var(--ink-900); }
.ad-heading > p { max-width: 40em; margin-top: 20px; font-size: var(--t-lead); }
.ad-tight { padding-top: 56px; }

/* A service page opens with its words on the left and what you get on the right. */
.ad-detail-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-block: clamp(24px, 4vw, 40px) 8px; }
.ad-detail-hero > div { grid-column: 1 / span 7; }
.ad-back { display: block; width: fit-content; margin-bottom: 28px; font-size: var(--t-small); font-weight: 500; color: var(--ink-600); }
.ad-back:hover { color: var(--ink-900); }
.ad-detail-hero > div > .ad-eyebrow { display: inline-block; margin-bottom: 16px; padding: 5px 12px; background: var(--tint); border-radius: var(--r-pill); }
.ad-detail-hero h1 { font-size: var(--t-display); font-weight: 800; line-height: 1.03; letter-spacing: -.045em; }
.ad-detail-hero h1 + p { max-width: 34em; margin-top: 20px; font-size: var(--t-lead); }
/* What you get: the one dark card on the page. */
.ad-deliverable { grid-column: 8 / -1; padding: 44px 40px 32px; background: linear-gradient(160deg, var(--blue-900), var(--ink-900) 70%); border-radius: 24px; box-shadow: var(--elev-3); color: var(--ink-200); }
.ad-deliverable .ad-eyebrow { color: var(--blue-300); }
.ad-deliverable h2 { margin-top: 10px; font-size: var(--t-title); line-height: 1.2; letter-spacing: -.02em; color: var(--white); }
.ad-deliverable ul { margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); list-style: none; display: grid; gap: 18px; }
.ad-deliverable li { position: relative; padding-left: 38px; font-size: var(--t-read); line-height: 1.5; color: var(--white); }
.ad-deliverable li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.ad-deliverable li::after { content: ""; position: absolute; left: 7px; top: 9px; width: 10px; height: 5px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg); }
/* The closing line: the words on the left, the arrow in a small disc on the right. */
.ad-deliverable-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--t-ui); font-weight: 500; color: var(--ink-200); }
.ad-deliverable-bottom span { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--white); }

/* Two statements side by side, each a card. */
.ad-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.ad-two-col > * { padding: 36px 32px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); }
.ad-two-col .ad-section-head, .ad-disclosure .ad-section-head { margin-bottom: 12px; }
.ad-two-col h2, .ad-disclosure h2, .ad-visa-banner h2, .ad-practice h2, .ad-person h2, .ad-contact-form h2, .ad-contact-aside h2 { font-size: var(--t-title); line-height: 1.2; letter-spacing: -.02em; }
.ad-two-col p + p, .ad-person p + p, .ad-practice p + p { margin-top: 12px; }
.ad-two-col .ad-text-link { display: inline-block; padding-top: 20px; }

/* Questions: one card, one row each. */
.ad-faqs { background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); overflow: hidden; }
.ad-faqs details + details { border-top: 1px solid var(--line); }
.ad-faqs summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 16px 28px; font-size: var(--t-read); font-weight: 600; line-height: 1.35; color: var(--ink-900); cursor: pointer; list-style: none; transition: background-color var(--dur-fast) var(--ease); }
.ad-faqs summary::-webkit-details-marker { display: none; }
.ad-faqs summary:hover { background: var(--blue-50); }
.ad-faqs summary span { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink-50); font-size: var(--t-h3); font-weight: 400; line-height: 1; color: var(--ink-700); transition: rotate var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.ad-faqs details[open] summary span { rotate: 45deg; background: var(--primary); color: var(--white); }
.ad-faqs details p { max-width: 46em; padding: 0 28px 24px; font-size: var(--t-body); line-height: 1.65; }

/* Wide cards that hold a heading, a few lines and one way on. */
.ad-visa-banner, .ad-practice, .ad-disclosure { padding: 36px 32px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); }
.ad-visa-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: var(--gap); }
.ad-visa-banner > div { flex: 1 1 360px; }
.ad-visa-banner h2, .ad-practice h2 { margin-top: 8px; }
.ad-visa-banner p, .ad-practice h2 + p { margin-top: 8px; }
.ad-practice { max-width: 820px; }
.ad-practice .ad-text-link { display: inline-block; padding-top: 16px; }
.ad-three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--gap); margin-top: 28px; }
.ad-three-col article { padding-top: 20px; border-top: 1px solid var(--ink-200); }
.ad-three-col h3 { font-size: var(--t-read); }
.ad-three-col p { margin-top: 8px; font-size: var(--t-ui); line-height: 1.6; }

/* The sample review: words on the left, the outline of the document on the right. */
.ad-sample-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.ad-sample-layout > div:first-child { grid-column: 1 / span 5; }
.ad-sample-layout .ad-section-head { margin-bottom: 0; }
.ad-sample-layout > div > .ad-text-link { display: inline-block; padding-top: 20px; }
.ad-review-preview { grid-column: 7 / -1; padding: 36px 32px 28px; background: var(--white); border-radius: 24px; box-shadow: var(--elev-3); }
.ad-review-preview h3 { margin-top: 8px; font-size: var(--t-title); font-weight: 700; letter-spacing: -.02em; }
.ad-review-preview ol { margin-top: 24px; list-style: none; counter-reset: part; }
.ad-review-preview li { position: relative; padding: 18px 0 18px 48px; border-top: 1px solid var(--line); counter-increment: part; }
.ad-review-preview li::before { content: counter(part); position: absolute; left: 0; top: 18px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); font-size: var(--t-micro); font-weight: 600; color: var(--primary); }
.ad-review-preview strong { display: block; font-size: var(--t-read); }
.ad-review-preview li p { margin-top: 2px; font-size: var(--t-ui); }
.ad-review-preview .ad-fine { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }

/* The person behind the guides. */
.ad-person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: start; margin-top: var(--section); padding: 40px; background: var(--white); border-radius: 24px; box-shadow: var(--elev-1); }
.ad-monogram { display: grid; place-items: center; align-content: center; gap: 6px; width: 148px; height: 148px; border-radius: 36px; background: linear-gradient(160deg, var(--blue-700), var(--ink-900)); font-size: var(--t-h1); font-weight: 700; letter-spacing: -.02em; color: var(--white); }
.ad-monogram span { font-size: var(--t-micro); font-weight: 500; letter-spacing: 0; color: var(--blue-200); }
.ad-person h2 { margin-top: 6px; }
.ad-person h2 + p { margin-top: 12px; }
.ad-person p { max-width: 44em; }

/* Contact: the form as the main card, the direct routes beside it. */
.ad-contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; padding-top: 40px; }
.ad-contact-form { grid-column: 1 / span 7; padding: 40px; background: var(--white); border-radius: 24px; box-shadow: var(--elev-3); }
.ad-contact-form h2 + p { margin-top: 8px; }
.ad-contact-form form { margin-top: 12px; }
.ad-contact-form label { display: block; margin: 20px 0 6px; font-size: var(--t-small); font-weight: 600; color: var(--ink-900); }
.ad-contact-form label span { font-weight: 400; color: var(--ink-500); }
.ad-contact-form :is(input, select, textarea) { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: var(--r-control); background: var(--white); box-shadow: var(--ring-strong); font: 400 var(--t-body)/1.5 var(--font-body); color: var(--ink-900); transition: box-shadow var(--dur-fast) var(--ease); }
.ad-contact-form select { -webkit-appearance: none; appearance: none; padding-right: 40px; background: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%) calc(100% - 21px) 21px / 6px 6px no-repeat, linear-gradient(135deg, var(--ink-500) 50%, transparent 50%) calc(100% - 15px) 21px / 6px 6px no-repeat, var(--white); }
.ad-contact-form textarea { min-height: 128px; resize: vertical; }
.ad-contact-form :is(input, select, textarea):hover { box-shadow: 0 0 0 1px var(--ink-400); }
.ad-contact-form :is(input, select, textarea):focus { outline: 0; box-shadow: 0 0 0 2px var(--primary), 0 0 0 6px rgba(36, 83, 212, .14); }
.ad-contact-form .ad-fine { margin-top: 16px; }
.ad-contact-form .ad-actions { margin-top: 24px; }
.ad-contact-aside { grid-column: 8 / -1; padding: 36px 32px; background: var(--white); border-radius: 24px; box-shadow: var(--elev-1); }
.ad-contact-aside h2 { margin-top: 8px; }
.ad-contact-aside .ad-actions { flex-direction: column; margin-top: 20px; }
.ad-contact-aside .ad-button { width: 100%; }
.ad-direct-email { display: inline-block; margin-top: 24px; font-size: var(--t-read); font-weight: 600; }
.ad-contact-aside > p { margin-top: 4px; font-size: var(--t-ui); }
.ad-contact-note { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.ad-contact-note h3 { font-size: var(--t-read); }
.ad-contact-note p { margin-top: 8px; font-size: var(--t-ui); line-height: 1.6; }
.ad-qr { margin-top: 24px; }
.ad-qr img { width: 148px; height: 148px; padding: 10px; background: var(--white); border-radius: 16px; box-shadow: var(--ring); }

@media (max-width: 960px) {
  .ad-detail-hero, .ad-sample-layout, .ad-contact-grid { display: block; }
  .ad-deliverable, .ad-review-preview, .ad-contact-aside { margin-top: 32px; }
  .ad-two-col, .ad-three-col { grid-template-columns: minmax(0, 1fr); }
  .ad-two-col { gap: 16px; }
  .ad-person { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 24px; }
  .ad-monogram { width: 112px; height: 112px; border-radius: 28px; }
  .ad-two-col > *, .ad-visa-banner, .ad-practice, .ad-disclosure, .ad-contact-aside, .ad-review-preview { padding: 28px 24px; }
  .ad-deliverable { padding: 36px 28px 28px; }
  .ad-contact-form { padding: 28px 24px; }
  .ad-faqs summary { padding: 14px 20px; }
  .ad-faqs details p { padding: 0 20px 20px; }
  .ad-visa-banner .ad-button { width: 100%; }
}

/* ── Article ──────────────────────────────────────────────────────────────────────── */
/* Three columns on a wide screen: the contents on the left, the guide in the middle, the
   offer and related guides on the right. Both rails stay in view while the guide scrolls.
   Article pages use a wider page so the middle column keeps a full reading measure. */
.is-article { --wrap: 1280px; }
.page-hero { padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(32px, 4vw, 48px); background: radial-gradient(52rem 20rem at 92% -6rem, rgba(36, 83, 212, .10), transparent 70%), var(--paper); box-shadow: inset 0 -1px 0 var(--line); }
.page-hero .wrap { max-width: var(--wrap); margin-inline: auto; }
/* The gutter is the wrap's own padding, so it does not depend on a parent selector. */
.article-wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; }
.breadcrumb { display: flex; gap: 8px; margin-bottom: 28px; font-size: var(--t-micro); color: var(--ink-600); white-space: nowrap; }
.breadcrumb a { flex: none; color: var(--ink-600); }
.breadcrumb a:hover { color: var(--ink-900); }
.breadcrumb [aria-hidden] { flex: none; color: var(--ink-300); translate: none; }
.breadcrumb-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.article-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: var(--t-micro); font-weight: 600; color: var(--ink-600); }
.article-kicker a { padding: 4px 10px; background: var(--tint); border-radius: var(--r-pill); color: var(--primary); }
.article-kicker-sep { color: var(--ink-300); }
.page-hero h1 { max-width: 21em; font-size: var(--t-h1); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.hero-sub { max-width: 44em; margin-top: 16px; font-size: var(--t-lead); color: var(--ink-600); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-offer-note { margin-top: 12px; font-size: var(--t-small); color: var(--ink-600); }

/* The bar under the header that fills as the article is read. */
.read-progress { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 199; height: 3px; background: var(--primary); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

.article-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr) 272px; column-gap: 48px; align-items: start; padding: 48px var(--gutter) var(--section); }
.page-toc { grid-column: 1; grid-row: 1; }
.article-body { grid-column: 2; grid-row: 1; min-width: 0; max-width: 720px; font-size: var(--t-read); line-height: 1.75; color: var(--ink-800); }
.article-sidebar { grid-column: 3; grid-row: 1; }
.page-toc, .article-sidebar { position: sticky; top: calc(var(--nav-h) + 32px); max-height: calc(100vh - var(--nav-h) - 56px); overflow-y: auto; scrollbar-width: thin; }

.page-toc summary { font-size: var(--t-micro); font-weight: 600; color: var(--ink-900); list-style: none; pointer-events: none; }
.page-toc summary::-webkit-details-marker { display: none; }
.page-toc ol { margin-top: 12px; list-style: none; box-shadow: inset 1px 0 0 var(--line); }
.page-toc a { display: block; padding: 6px 0 6px 16px; box-shadow: inset 0 0 0 var(--primary); font-size: var(--t-small); line-height: 1.4; color: var(--ink-600); transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.page-toc a:hover { color: var(--ink-900); }
.page-toc a[aria-current] { box-shadow: inset 2px 0 0 var(--primary); color: var(--ink-900); font-weight: 500; }

/* The right rail: the offer as a card, then the guides this one belongs with. */
.article-sidebar { display: flex; flex-direction: column; gap: 28px; padding: 2px; }
.article-sidebar-cta { order: -1; padding: 24px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); }
.article-sidebar-cta strong { display: block; font-size: var(--t-read); line-height: 1.3; }
.article-sidebar-cta p { margin-top: 8px; font-size: var(--t-small); line-height: 1.55; }
.article-sidebar-cta .btn { width: 100%; margin-top: 16px; }
.article-sidebar-guide-link { display: block; margin-top: 12px; font-size: var(--t-small); font-weight: 600; }
.mini-label, .tool-callout .label { display: block; margin-bottom: 6px; font-size: var(--t-micro); font-weight: 600; color: var(--primary); }
.toc h4 { margin: 24px 0 4px; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0; color: var(--ink-600); }
.toc h4:first-child { margin-top: 0; }
.toc p { font-size: var(--t-small); color: var(--ink-700); }
.toc a { display: block; padding: 8px 0; font-size: var(--t-small); font-weight: 500; line-height: 1.4; color: var(--ink-900); }
.toc a:hover { color: var(--primary); }
.toc a + a { border-top: 1px solid var(--line); }
.toc .toc-all { color: var(--ink-600); }

/* The picture that opens the guide. */
.article-hero-figure { margin: 0 0 32px; }
.article-hero-figure img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--elev-1); }
.destination-hero-credit, .article-body figcaption { margin-top: 8px; font-size: var(--t-micro); line-height: 1.5; color: var(--ink-600); }
.article-body figure { margin: 2em 0; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--r-control); }

.article-body > :first-child { margin-top: 0; }
.article-body p { margin-bottom: 1.25em; }
.article-body h2 { margin: 2.4em 0 .6em; font-size: var(--t-title); line-height: 1.2; letter-spacing: -.02em; counter-reset: step; }
.article-body h3 { margin: 1.9em 0 .5em; font-size: var(--t-h3); line-height: 1.3; }
.article-body h4 { margin: 1.6em 0 .4em; font-size: var(--t-read); line-height: 1.35; }
.article-body hr { display: none; }
.article-body ul, .article-body ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.article-body li { margin: .45em 0; padding-left: .2em; }
.article-body li::marker { color: var(--ink-400); }
.article-body blockquote { margin: 2em 0; padding: 4px 0 4px 20px; box-shadow: inset 3px 0 0 var(--blue-300); color: var(--ink-700); }
/* A numbered list that the source wrote as one list per step: number the steps in order
   under their heading instead of showing "1." each time. */
.article-body ol > li:only-child { list-style: none; counter-increment: step; margin-left: -1.3em; padding-left: 0; font-size: var(--t-read); }
.article-body ol > li:only-child::before { content: counter(step); display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: var(--tint); font-size: var(--t-micro); font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.article-body ol:has(> li:only-child) { margin-bottom: .35em; }
.article-body ol:has(> li:only-child) + p { padding-left: 36px; }
.article-body a { text-decoration: underline; text-decoration-color: var(--blue-200); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.article-body a:hover { text-decoration-color: currentColor; }
.article-body a.btn, .inline-related a { text-decoration: none; }

.inline-related { margin: 2em 0; padding: 20px 24px; background: var(--paper); border-radius: var(--r-control); box-shadow: inset 3px 0 0 var(--blue-300); }
.article-body .inline-related-lead { margin-bottom: 8px; font-size: var(--t-micro); font-weight: 600; line-height: 1.5; color: var(--ink-600); }
.article-body .inline-related-list { margin: 0; padding: 0; list-style: none; }
.article-body .inline-related-list li { margin: 0; padding: 6px 0; font-size: var(--t-body); font-weight: 500; line-height: 1.45; }

/* Offers and pointers inside an article share one plain card: words on the left, one
   button on the right. The full green button is kept for the top of the page and for
   the offer that closes it. */
.article-offer, .article-conversion-strip, .tool-callout { margin: 2.5em 0; padding: 24px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); }
.article-offer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 20px; align-items: center; }
.article-body .article-offer p { grid-column: 1 / -1; margin: 0; font-size: var(--t-ui); line-height: 1.55; color: var(--ink-700); }
.article-body .article-offer .article-offer-title { margin-bottom: 4px; font-size: var(--t-read); font-weight: 600; color: var(--ink-900); }
.article-body .article-offer .article-offer-note { grid-column: 2; margin-top: 16px; font-size: var(--t-micro); color: var(--ink-600); }
.article-offer .article-offer-btn { grid-column: 1; margin-top: 16px; }
.article-offer .article-offer-btn, .article-conversion-strip:not(.article-conversion-strip-final) .btn-wa { background: var(--white); color: var(--ink-900); box-shadow: var(--ring-strong), var(--shadow-sm); }
.article-offer .article-offer-btn:hover, .article-conversion-strip:not(.article-conversion-strip-final) .btn-wa:hover { background: var(--white); color: var(--ink-900); box-shadow: 0 0 0 1px var(--ink-400), var(--shadow-md); }
.article-offer .article-offer-btn svg, .article-conversion-strip:not(.article-conversion-strip-final) .btn-wa svg { color: var(--whatsapp); }
.article-conversion-strip, .tool-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.article-conversion-strip > div:first-child, .tool-callout > div:first-child { flex: 1 1 320px; min-width: 0; }
.article-conversion-strip strong { display: block; font-size: var(--t-read); line-height: 1.3; }
.article-body .article-conversion-strip p, .article-body .tool-callout p { margin: 4px 0 0; font-size: var(--t-ui); line-height: 1.55; color: var(--ink-700); }
.article-body .tool-callout h3 { margin: 0; font-size: var(--t-read); }
.article-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.article-conversion-strip-final { margin-top: 40px; padding: clamp(24px, 4vw, 32px); background: radial-gradient(36rem 14rem at 100% -4rem, rgba(36, 83, 212, .10), transparent 70%), var(--white); box-shadow: var(--elev-3); }
.article-conversion-strip-final strong { font-size: var(--t-title); font-weight: 700; letter-spacing: -.02em; }
.btn-primary { background: var(--primary); color: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(28, 67, 176, .4), 0 8px 18px -8px rgba(36, 83, 212, .6); }
.btn-primary:hover { background: var(--primary-hover); color: var(--white); }

.article-attribution { margin-top: 3em; padding-top: 24px; border-top: 1px solid var(--line); }
.article-body .article-byline { margin-bottom: 8px; font-size: var(--t-small); font-weight: 500; color: var(--ink-900); }
.article-byline-sep { margin: 0 4px; color: var(--ink-300); }
.article-body .article-disclosure { margin: 0; font-size: var(--t-micro); line-height: 1.55; color: var(--ink-600); }

.offer-card { margin-top: 40px; padding: clamp(24px, 4vw, 36px); background: radial-gradient(36rem 14rem at 100% -4rem, rgba(36, 83, 212, .10), transparent 70%), var(--white); border-radius: var(--r-card); box-shadow: var(--elev-3); }
.article-body .offer-card-title { margin: 16px 0 8px; font-size: var(--t-title); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--ink-900); }
.article-body .offer-card-body { margin: 0; font-size: var(--t-body); line-height: 1.6; }
.article-body .offer-card-gets { margin: 20px 0 0; padding: 0; }
.article-body .offer-card-gets li { margin: 0; padding-left: 34px; }
.offer-card-actions { margin-top: 24px; }
.article-body .offer-card-note { margin: 12px 0 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-600); }
.article-body .offer-card-fine { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--t-small); line-height: 1.55; color: var(--ink-600); }

/* Tables, in a guide or on any other page. On a wide screen a table is one card: a tinted header row, hairlines between
   rows. On a phone each row becomes its own card: the first cell is the title, every other
   cell sits beside its column name. */
main table { width: 100%; margin: 2em 0; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: var(--r-control); box-shadow: var(--elev-1); overflow: hidden; font-size: var(--t-ui); line-height: 1.5; }
main th, main td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
main tbody tr:last-child > * { border-bottom: 0; }
main thead th { vertical-align: bottom; background: var(--paper); font-size: var(--t-micro); font-weight: 600; color: var(--ink-600); }
main tbody th, main tbody td:first-child { font-weight: 600; color: var(--ink-900); }
main tbody tr { transition: background-color var(--dur-fast) var(--ease); }
main tbody tr:hover { background: var(--blue-50); }
main table.rt-wide { font-size: var(--t-small); }
main table.rt-wide :is(th, td) { padding: 12px; }
@media (max-width: 760px) {
  main table:not(.rt-stack, .rt-kv) { display: block; overflow-x: auto; }
  main table:is(.rt-stack, .rt-kv), main table:is(.rt-stack, .rt-kv) :is(tbody, tr, th, td) { display: block; }
  main table:is(.rt-stack, .rt-kv) { background: none; border-radius: 0; box-shadow: none; overflow: visible; font-size: var(--t-ui); }
  main table.rt-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  main table:is(.rt-stack, .rt-kv) tr { margin-bottom: 12px; padding: 16px 18px; background: var(--white); border-radius: var(--r-control); box-shadow: var(--elev-1); }
  main table:is(.rt-stack, .rt-kv) tr:hover { background: var(--white); }
  main table:is(.rt-stack, .rt-kv) :is(th, td) { padding: 0; border: 0; }
  main table.rt-stack td[data-label] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; padding: 6px 0; font-weight: 400; color: var(--ink-800); }
  main table.rt-stack td[data-label] + td[data-label] { border-top: 1px solid var(--line); }
  main table.rt-stack td[data-label]::before { content: attr(data-label); font-size: var(--t-micro); line-height: 1.75; color: var(--ink-600); }
  main table.rt-stack tr > td:first-child { display: block; padding: 0 0 10px; border: 0; font-size: var(--t-read); font-weight: 600; color: var(--ink-900); }
  main table.rt-stack tr > td:first-child::before { content: none; }
  main table.rt-stack tr > td:first-child + td { border-top: 0; }
  main table.rt-kv th { margin-bottom: 2px; font-size: var(--t-micro); font-weight: 600; color: var(--ink-600); }
}
.table-wrap, .compare-table-wrap, .switch-country-table { margin: 24px 0; }
.table-wrap table, .compare-table-wrap table, .switch-country-table table { margin: 0; }

@media (max-width: 1239px) {
  /* Two columns: the contents stay on the left; the offer and related guides follow the
     guide instead of sitting beside it. */
  .article-wrap { grid-template-columns: 220px minmax(0, 1fr); }
  .page-toc { grid-row: 1 / span 2; }
  .article-sidebar { grid-column: 2; grid-row: 2; position: static; max-height: none; max-width: 720px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
}
@media (max-width: 1023px) {
  .page-hero .wrap { max-width: 720px; }
  .article-wrap { display: block; max-width: calc(720px + 2 * var(--gutter)); padding-top: 24px; }
  .page-toc { position: static; max-height: none; margin-bottom: 32px; background: var(--white); border-radius: var(--r-control); box-shadow: var(--elev-1); }
  .page-toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; font-size: var(--t-ui); cursor: pointer; pointer-events: auto; }
  .page-toc summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-600); border-bottom: 2px solid var(--ink-600); transform: translateY(-2px) rotate(45deg); transition: transform var(--dur) var(--ease); }
  .page-toc[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .page-toc ol { margin: 0; padding: 0 16px 8px; box-shadow: none; }
  .page-toc a, .page-toc a[aria-current] { padding: 10px 0; box-shadow: none; font-size: var(--t-ui); }
  .page-toc li + li a { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .article-body { font-size: var(--t-body); line-height: 1.7; }
  .article-body ol > li:only-child { font-size: var(--t-body); }
  .article-hero-figure { margin-bottom: 24px; }
  .hero-actions .btn, .offer-card-actions .btn, .article-cta-actions, .article-cta-actions .btn, .tool-callout .btn { width: 100%; }
  .article-offer { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .article-body .article-offer .article-offer-note { grid-column: 1; margin-top: 8px; }
  .article-conversion-strip, .tool-callout { padding: 20px; }
  .inline-related { padding: 16px 20px; }
}

/* ── Hub, destination, guide and tool pages ───────────────────────────────────────── */
/* These pages are built from one older vocabulary: a hero, then sections that each hold a
   heading and a grid, a list, a table or a tool, then a closing band. The arc is the same
   on every one of them: the promise and one action, what to check, the guides, the ask. */
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.page-hero .wrap { max-width: var(--wrap); padding-inline: 0; }
main > section:not([class*="ad-"]) { padding-block: clamp(56px, 7vw, 96px); }
main > section.tight { padding-block: clamp(40px, 5vw, 64px); }
main > section.bg-off { background: var(--paper); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
main > section[style] { padding-inline: 0 !important; }
/* An article's one section is its three-column layout, which sets its own space. */
.is-article main > section:not([class]) { padding-block: 0; }

.label { display: block; margin-bottom: 10px; font-size: var(--t-micro); font-weight: 600; color: var(--primary); }
.page-hero .label { display: inline-block; margin-bottom: 18px; padding: 5px 12px; background: var(--tint); border-radius: var(--r-pill); }
.lede, .page-hero .wrap > p:not([class]), .destination-hero-copy > p:not([class]) { max-width: 44em; margin-top: 18px; font-size: var(--t-lead); color: var(--ink-600); }
body:not(.is-article) .page-hero h1 { max-width: 17em; font-size: var(--t-hero); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; }
/* The one phrase of a headline set in the accent. */
.hl, .ad-hero h1 span { color: var(--primary); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hl, .ad-hero h1 span { background: linear-gradient(100deg, var(--blue-700), var(--blue-500) 60%, var(--blue-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}

/* A destination opens with its words on the left and its photograph on the right. */
.destination-hero-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.destination-hero-copy { grid-column: 1 / span 7; }
.destination-hero-figure { grid-column: 8 / -1; margin: 0; }
.destination-hero-figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: var(--elev-2); }
.destination-hero-figure .destination-hero-credit { margin-top: 10px; }

.btn-lg, .btn-xl { min-height: 52px; padding: 0 24px; font-size: var(--t-read); }
.btn-block { width: 100%; }
.btn-white { background: var(--white); color: var(--ink-900); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 24px -12px rgba(0, 0, 0, .5); }
.btn-white:hover { background: var(--white); color: var(--ink-900); box-shadow: 0 0 0 4px rgba(255, 255, 255, .22), 0 12px 24px -12px rgba(0, 0, 0, .5); }
.btn-white svg { color: var(--whatsapp); }
.btn-ghost-white, .btn-outline-light { background: transparent; color: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }
.btn-ghost-white:hover, .btn-outline-light:hover { color: var(--white); box-shadow: 0 0 0 1px var(--white); }
.btn-ghost { background: transparent; color: var(--ink-900); box-shadow: var(--ring-strong); }
.btn-ghost:hover { color: var(--ink-900); box-shadow: 0 0 0 1px var(--ink-400); }

.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2, .tool-copy h2, .tool-guidance-main h2, .trust-layout h2, .faq-group h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.03em; }
.section-head p, .tool-copy > p, .tool-guidance-main > p { margin-top: 12px; font-size: var(--t-lead); color: var(--ink-600); }
.section-note { margin-top: 20px; font-size: var(--t-small); color: var(--ink-600); }

/* Cards that lead somewhere. */
.decision-grid, .concern-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.concern-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.decision-card, .concern-card { position: relative; display: flex; flex-direction: column; padding: 28px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); color: var(--ink-700); transition: box-shadow var(--dur) var(--ease), translate var(--dur) var(--ease); }
a.decision-card:hover, a.concern-card:hover { color: var(--ink-700); box-shadow: var(--elev-2); translate: 0 -4px; }
a.decision-card:active, a.concern-card:active { translate: 0 -1px; transition-duration: 80ms; }
.decision-card h3, .concern-card h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.015em; }
.decision-card p, .concern-card p { margin-top: 8px; font-size: var(--t-ui); line-height: 1.6; }
.decision-card .mini-label { margin-bottom: 8px; }
.card-cta { display: inline-block; margin-top: auto; padding-top: 22px; font-size: var(--t-ui); font-weight: 600; color: var(--primary); }
a.card-cta:hover { color: var(--primary-hover); }
/* An arrow in a round well on a card that is one whole link; it turns as the card lifts. */
a.concern-card { padding-right: 68px; }
a.concern-card::after { content: "↗"; position: absolute; top: 24px; right: 24px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink-50); font-size: var(--t-small); color: var(--ink-700); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), rotate var(--dur) var(--ease); }
a.concern-card:hover::after { background: var(--primary); color: var(--white); rotate: 45deg; }

/* A destination card leads with its photograph. */
.destination-card { padding: 0; overflow: hidden; }
.destination-card picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-50); }
.destination-card-image { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease); }
a.destination-card:hover .destination-card-image { scale: 1.05; }
.destination-card h3 { margin: 22px 24px 0; }
.destination-card p { margin: 8px 24px 0; }
.destination-card .card-cta { margin: auto 24px 0; padding: 20px 0 24px; }
/* Where every card in a row carries the same photograph (a destination's own guides), the
   picture steps back to a thumbnail beside the words. */
.bg-off .destination-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 18px; padding: 20px; }
.bg-off .destination-card picture { grid-row: 1 / span 3; align-self: start; aspect-ratio: 1; border-radius: 14px; }
.bg-off .destination-card h3 { margin: 2px 0 0; font-size: var(--t-read); }
.bg-off .destination-card p { margin: 6px 0 0; font-size: var(--t-small); line-height: 1.5; }
.bg-off .destination-card .card-cta { margin: 0; padding: 10px 0 0; font-size: var(--t-small); }

/* The topic chips above the article list: the chosen one is filled in ink. */
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.blog-filter { min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--ring-strong); font-size: var(--t-small); font-weight: 500; color: var(--ink-700); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.blog-filter:hover { box-shadow: 0 0 0 1px var(--ink-400); color: var(--ink-900); }
.blog-filter.active { background: var(--ink-900); box-shadow: none; color: var(--white); }

/* The guides of a section, folded by category. */
.markdown-category-group { border-top: 1px solid var(--ink-200); }
.markdown-category-group:last-of-type { border-bottom: 1px solid var(--ink-200); }
.markdown-category-group > summary { display: flex; align-items: center; gap: 4px 24px; max-width: none; min-height: 72px; margin: 0; padding: 14px 0; cursor: pointer; list-style: none; text-align: left; }
.markdown-category-group > summary::-webkit-details-marker { display: none; }
.markdown-category-group > summary h3 { font-size: var(--t-h3); letter-spacing: -.015em; transition: color var(--dur-fast) var(--ease); }
.markdown-category-group > summary:hover h3 { color: var(--primary); }
.markdown-category-group > summary p { margin: 0 0 0 auto; font-size: var(--t-small); color: var(--ink-600); }
.markdown-category-group > summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink-50); font-size: var(--t-h3); line-height: 1; color: var(--ink-700); transition: rotate var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.markdown-category-group[open] > summary::after { rotate: 45deg; background: var(--primary); color: var(--white); }
.markdown-category-group > .decision-grid { padding: 8px 0 28px; }
[data-hub-group][data-collapsed="true"] .hub-card-extra { display: none; }
.hub-see-more { display: block; min-height: 44px; margin: 0 0 28px; padding: 0 20px; border: 0; border-radius: var(--r-control); background: var(--white); box-shadow: var(--ring-strong), var(--shadow-sm); font-size: var(--t-small); font-weight: 600; color: var(--ink-900); cursor: pointer; transition: box-shadow var(--dur) var(--ease), translate var(--dur-fast) var(--ease); }
.hub-see-more:hover { box-shadow: 0 0 0 1px var(--ink-400), var(--shadow-md); translate: 0 -1px; }

/* Short points, each with a tick. */
.pill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-block: 24px; }
.info-pill { position: relative; padding: 16px 20px 16px 52px; background: var(--white); border-radius: 14px; box-shadow: var(--elev-1); font-size: var(--t-ui); font-weight: 500; line-height: 1.5; color: var(--ink-800); }
.info-pill::before { content: ""; position: absolute; left: 18px; top: 17px; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); }
.info-pill::after { content: ""; position: absolute; left: 24px; top: 24px; width: 10px; height: 5px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.info-pill strong { display: block; }
.content-depth-section .wrap > p { max-width: 46em; margin-top: 16px; font-size: var(--t-read); line-height: 1.7; }

/* The short answer, ahead of everything else. */
.answer-box { padding: clamp(24px, 4vw, 40px); background: var(--white); border-radius: 24px; box-shadow: inset 4px 0 0 var(--primary), var(--elev-2); }
.answer-box h2 { max-width: 24em; font-size: var(--t-title); line-height: 1.2; letter-spacing: -.02em; }
.answer-box p { max-width: 52em; margin-top: 12px; font-size: var(--t-read); line-height: 1.7; }
.af-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.af-item { padding: 28px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); }
.af-item h3 { font-size: var(--t-read); line-height: 1.35; }
.af-item p { margin-top: 10px; font-size: var(--t-ui); line-height: 1.65; }

/* Notes and warnings inside a page. */
.notice-box, .callout { margin: 24px 0; padding: 18px 22px; background: var(--blue-50); border-radius: 14px; box-shadow: inset 3px 0 0 var(--primary); font-size: var(--t-ui); line-height: 1.6; color: var(--ink-800); }
.notice-box p, .callout p, .article-body .notice-box p, .article-body .callout p { margin: 0; }
.warning-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.risk-box, .sidebar-card { padding: 28px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); }
.risk-box h3 { font-size: var(--t-h3); }
.risk-box ul { margin-top: 16px; list-style: none; display: grid; gap: 12px; }
.risk-box li { position: relative; padding-left: 26px; font-size: var(--t-ui); line-height: 1.55; }
.risk-box li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }

/* Four steps in a row, each number beside its words. */
.journey-strip { padding-block: 0 !important; }
.journey-strip .wrap { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.journey-step { display: flex; align-items: center; gap: 12px; font-size: var(--t-ui); font-weight: 600; line-height: 1.4; color: var(--ink-900); }
.journey-step strong { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); font-size: var(--t-small); color: var(--primary); font-variant-numeric: tabular-nums; }

/* The free check: what you get on the left, the one dark card on the right. */
.trust-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.trust-layout > div:first-child { grid-column: 1 / span 7; }
.trust-layout > div:first-child > p { max-width: 40em; margin-top: 12px; font-size: var(--t-lead); color: var(--ink-600); }
.trust-gets { margin-top: 24px; list-style: none; display: grid; gap: 14px; }
.trust-gets li { position: relative; padding-left: 34px; font-size: var(--t-read); line-height: 1.5; color: var(--ink-800); }
.trust-gets li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); }
.trust-gets li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 10px; height: 5px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.trust-layout .trust-fine { margin-top: 24px; font-size: var(--t-small); color: var(--ink-600); }
.consult-card, .tool-guidance-aside { grid-column: 8 / -1; padding: 40px 36px; background: linear-gradient(160deg, var(--blue-900), var(--ink-900) 70%); border-radius: 24px; box-shadow: var(--elev-3); color: var(--ink-200); }
.consult-card h3, .tool-guidance-aside h3 { font-size: var(--t-title); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--white); }
.consult-card p, .tool-guidance-aside p { margin-top: 12px; font-size: var(--t-ui); line-height: 1.65; color: var(--ink-200); }
.consult-card .btn { margin-top: 28px; }

/* Questions that open in place. */
.faq-grid-lite { background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); overflow: hidden; }
.faq-grid-lite details + details { border-top: 1px solid var(--line); }
.faq-grid-lite summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 16px 28px; font-size: var(--t-read); font-weight: 600; line-height: 1.35; color: var(--ink-900); cursor: pointer; list-style: none; transition: background-color var(--dur-fast) var(--ease); }
.faq-grid-lite summary::-webkit-details-marker { display: none; }
.faq-grid-lite summary:hover { background: var(--blue-50); }
.faq-grid-lite summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink-50); font-size: var(--t-h3); font-weight: 400; line-height: 1; color: var(--ink-700); transition: rotate var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.faq-grid-lite details[open] summary::after { rotate: 45deg; background: var(--primary); color: var(--white); }
.faq-grid-lite details p { max-width: 46em; padding: 0 28px 24px; font-size: var(--t-body); line-height: 1.65; }
.faq-platform { display: grid; gap: 64px; }
.faq-group h2 { margin-bottom: 24px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.fi { background: var(--white); border-radius: 16px; box-shadow: var(--elev-1); overflow: hidden; transition: box-shadow var(--dur) var(--ease); }
.fi.open { box-shadow: 0 0 0 1px var(--blue-300), var(--shadow-md); }
.fq { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 60px; padding: 16px 20px; border: 0; background: none; text-align: left; font-size: var(--t-body); font-weight: 600; line-height: 1.4; color: var(--ink-900); cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.fq:hover { background: var(--blue-50); }
.fqi { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink-50); font-size: var(--t-read); line-height: 1; color: var(--ink-700); transition: rotate var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.fi.open .fqi { rotate: 45deg; background: var(--primary); color: var(--white); }
.fa { max-height: 0; overflow: hidden; padding: 0 20px; font-size: var(--t-ui); line-height: 1.7; color: var(--ink-700); transition: max-height var(--dur-slow) var(--ease), padding var(--dur) var(--ease); }
.fi.open .fa { max-height: 640px; padding: 0 20px 20px; }

/* The closing band: the ask, full width, on the dark ground. */
.cta-band { position: relative; padding-block: clamp(64px, 9vw, 120px) !important; background: radial-gradient(48rem 20rem at 50% -6rem, rgba(86, 127, 233, .38), transparent 70%), linear-gradient(160deg, var(--blue-900), var(--ink-900) 70%); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); text-align: center; color: var(--ink-200); }
.cta-band.compact { padding-block: clamp(56px, 7vw, 88px) !important; }
.cta-band h2 { max-width: 19em; margin-inline: auto; font-size: var(--t-hero); font-weight: 800; line-height: 1.06; letter-spacing: -.04em; color: var(--white); }
.cta-band .wrap > p { max-width: 38em; margin: 18px auto 0; font-size: var(--t-lead); color: var(--ink-200); }
.cta-btns, .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.cta-band .wrap > .cta-note { margin-top: 16px; font-size: var(--t-small); color: var(--ink-300); }
.band { padding: clamp(48px, 6vw, 72px) var(--gutter); background: var(--paper); }
.band-col { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 720px; margin-inline: auto; text-align: center; }
.band-cta { background: linear-gradient(160deg, var(--blue-900), var(--ink-900) 70%); color: var(--ink-200); }
.band-cta :is(h2, h3) { color: var(--white); }

/* A guide laid out as words with its contents beside it. */
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 56px; align-items: start; }
.article-toc { position: sticky; top: calc(var(--nav-h) + 32px); }
.toc-card strong { display: block; font-size: var(--t-micro); font-weight: 600; color: var(--ink-900); }
.toc-card a { display: block; padding: 6px 0 6px 16px; box-shadow: inset 1px 0 0 var(--line); font-size: var(--t-small); line-height: 1.4; color: var(--ink-600); transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.toc-card strong + a { margin-top: 12px; }
.toc-card a:hover { box-shadow: inset 2px 0 0 var(--primary); color: var(--ink-900); }
.article-layout > .article-body { grid-column: 2; }
.countries-grid.inline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 2em 0; }
.article-body .country-note h3 { margin: 0; }
.article-body .country-note p { margin: 8px 0 0; }
.article-body .country-note a.card-cta { text-decoration: none; }
/* The older USA guides: the words with one rail beside them. */
body:not(.is-article) .article-wrap { grid-template-columns: minmax(0, 1fr) 300px; }
body:not(.is-article) .article-wrap > .article-body { grid-column: 1; }
body:not(.is-article) .article-wrap > .article-sidebar { grid-column: 2; }
.article-sidebar > div[style] { padding: 28px 24px !important; background: linear-gradient(160deg, var(--blue-900), var(--ink-900) 70%) !important; border-radius: var(--r-card) !important; box-shadow: var(--elev-2); }
.toc .toc-title { margin-bottom: 4px; font-size: var(--t-micro); font-weight: 600; color: var(--ink-900); }
.badge { display: inline-block; padding: 4px 10px; background: var(--tint); border-radius: var(--r-pill); font-size: var(--t-micro); font-weight: 600; color: var(--primary); }
.badge-yellow { background: var(--warning-tint); color: var(--warning); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.skcard { padding: 20px; background: var(--white); border-radius: 16px; box-shadow: var(--elev-1); }
.article-body .skcard :is(h3, h4) { margin: 0 0 6px; font-size: var(--t-read); }
.article-body .skcard p { margin: 0; font-size: var(--t-ui); line-height: 1.6; }
.sktag { display: inline-block; margin-bottom: 8px; padding: 3px 9px; background: var(--tint); border-radius: var(--r-pill); font-size: var(--t-micro); font-weight: 600; color: var(--primary); }

/* A tool: what it is for on the left, the form as the raised card on the right. */
.tool-guidance-shell { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; }
.tool-guidance-main { grid-column: 1 / span 8; padding: 40px; background: var(--white); border-radius: 24px; box-shadow: var(--elev-1); }
.tool-guidance-aside { grid-column: 9 / -1; padding: 36px 32px; }
.tool-guidance-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 14px; background: rgba(255, 255, 255, .12); font-size: var(--t-h3); color: var(--white); }
.tool-guidance-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.tool-guidance-actions .btn-secondary { background: transparent; color: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); }
.tool-guidance-actions .btn-secondary:hover { color: var(--white); box-shadow: 0 0 0 1px var(--white); }
.tool-step-list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 32px; }
.tool-step-list > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
.tool-step-list span { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); font-size: var(--t-micro); font-weight: 600; color: var(--primary); }
.tool-step-list strong { grid-column: 2; display: block; padding-top: 7px; font-size: var(--t-read); }
.tool-step-list p { grid-column: 2; margin-top: 6px; font-size: var(--t-ui); line-height: 1.6; color: var(--ink-600); }
.tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 56px; align-items: start; }
.tool-copy .btn { margin-top: 8px; }
.tool-card { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px; background: var(--white); border-radius: 24px; box-shadow: var(--elev-3); }
.tool-card.recog-card { position: static; }
.tool-card h3 { padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: var(--t-title); font-weight: 700; letter-spacing: -.02em; }
.tool-card label, .fg label { display: grid; gap: 6px; font-size: var(--t-small); font-weight: 600; color: var(--ink-900); }
.fg label { display: block; margin-bottom: 6px; }
.tool-hint, .fg-hint { font-size: var(--t-micro); font-weight: 400; color: var(--ink-600); }
.tool-card :is(input:not([type="checkbox"], [type="radio"]), select, textarea), .fg :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: var(--r-control); background: var(--white); box-shadow: var(--ring-strong); font: 400 var(--t-body)/1.5 var(--font-body); color: var(--ink-900); transition: box-shadow var(--dur-fast) var(--ease); }
.tool-card select, .fg select { -webkit-appearance: none; appearance: none; padding-right: 40px; background: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%) calc(100% - 21px) 21px / 6px 6px no-repeat, linear-gradient(135deg, var(--ink-500) 50%, transparent 50%) calc(100% - 15px) 21px / 6px 6px no-repeat, var(--white); }
.tool-card :is(input, select, textarea):hover, .fg :is(input, select, textarea):hover { box-shadow: 0 0 0 1px var(--ink-400); }
.tool-card :is(input, select, textarea):focus, .fg :is(input, select, textarea):focus { outline: 0; box-shadow: 0 0 0 2px var(--primary), 0 0 0 6px rgba(36, 83, 212, .14); }
.fg { margin-bottom: 16px; }
.fg.has-error :is(input, select, textarea) { box-shadow: 0 0 0 2px var(--danger); }
.fg textarea { min-height: 120px; resize: vertical; }
.tool-checks { margin: 0; padding: 16px 18px 8px; border: 0; border-radius: var(--r-control); box-shadow: var(--ring-strong); }
.tool-checks legend { padding: 0 6px; font-size: var(--t-small); font-weight: 600; color: var(--ink-900); }
.tool-card label.tool-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: var(--t-ui); font-weight: 400; color: var(--ink-800); }
.tool-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); }
/* The answer appears under the form and settles into place. */
.tool-result { display: none; padding: 20px; background: var(--paper); border-radius: 16px; box-shadow: var(--ring); font-size: var(--t-ui); line-height: 1.6; }
.tool-result.show { display: block; }
.tool-result h4 { margin-bottom: 10px; font-size: var(--t-read); }
.tool-result .table-wrap { margin: 12px 0; overflow-x: auto; border-radius: var(--r-control); box-shadow: var(--ring); }
.tool-result table { min-width: 34em; margin: 0; border-radius: 0; box-shadow: none; font-size: var(--t-small); }
.tool-result table td:first-child a { font-weight: 600; white-space: nowrap; }
.tool-verdict { margin: 12px 0 16px; padding: 16px 18px; background: var(--white); border-radius: 14px; box-shadow: inset 3px 0 0 var(--ink-300), var(--ring); }
.tool-verdict-ok { box-shadow: inset 3px 0 0 var(--success), var(--ring); }
.tool-verdict-info { box-shadow: inset 3px 0 0 var(--primary), var(--ring); }
.tool-verdict-warn { box-shadow: inset 3px 0 0 var(--warning), var(--ring); }
.tool-verdict-bad { box-shadow: inset 3px 0 0 var(--danger), var(--ring); }
.tool-verdict strong { display: block; margin-bottom: 4px; font-size: var(--t-read); line-height: 1.35; }
.tool-verdict p { font-size: var(--t-ui); line-height: 1.55; }
.tool-flag { font-weight: 600; color: var(--danger); }
.tool-pass { font-weight: 600; color: var(--success); }
.tool-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.tool-mini { padding: 14px; background: var(--white); border-radius: 12px; box-shadow: var(--ring); }
.tool-mini strong { display: block; margin-bottom: 4px; }
.tool-mini p { font-size: var(--t-small); line-height: 1.45; }
.tool-list { margin: 12px 0 16px; padding-left: 20px; }
.tool-list li { margin: 7px 0; }
.tool-source { margin: 14px 0 6px; font-size: var(--t-micro); line-height: 1.5; color: var(--ink-600); }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* The credibility checker: steps to tick off, and the warning signs. */
.verify-list { list-style: none; display: grid; gap: 16px; }
.verify-step { display: flex; gap: 18px; min-width: 0; padding: 24px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); }
.verify-num { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); font-size: var(--t-small); font-weight: 600; color: var(--primary); }
.verify-body { display: grid; gap: 10px; min-width: 0; }
.verify-body h3 { font-size: var(--t-read); line-height: 1.35; }
.verify-body p { font-size: var(--t-ui); line-height: 1.65; }
.verify-body .btn { justify-self: start; max-width: 100%; height: auto; padding-block: 10px; white-space: normal; text-align: left; }
.verify-body code { padding: 1px 5px; background: var(--ink-50); border-radius: 4px; font-size: .9em; }
.verify-done { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: var(--t-small); font-weight: 600; color: var(--ink-600); cursor: pointer; }
.verify-done input { width: 18px; height: 18px; accent-color: var(--success); }
.verify-reading { list-style: none; display: grid; gap: 10px; }
.verify-reading a { display: block; padding: 16px 18px; background: var(--white); border-radius: 14px; box-shadow: var(--elev-1); font-weight: 600; transition: box-shadow var(--dur) var(--ease), translate var(--dur) var(--ease); }
.verify-reading a:hover { box-shadow: var(--elev-2); translate: 0 -2px; }
.recog-result:empty { display: none; }
.recog-panel { display: grid; gap: 14px; margin-top: 20px; padding: 24px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); }
.recog-panel.recog-ok { box-shadow: inset 4px 0 0 var(--success), var(--elev-1); }
.recog-panel.recog-warn { box-shadow: inset 4px 0 0 var(--warning), var(--elev-1); }
.recog-flags { display: grid; gap: 10px; margin-bottom: 18px; }
/* An option you can pick: selected is an accent border on a pale accent fill. */
.tool-card label.recog-flag, .recog-flag { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--white); border-radius: 14px; box-shadow: var(--ring-strong); font-size: var(--t-ui); font-weight: 400; line-height: 1.5; color: var(--ink-800); cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.recog-flag:hover { background: var(--blue-50); }
.recog-flag input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); }
.recog-flag:has(input:checked) { background: var(--tint); box-shadow: 0 0 0 2px var(--primary); }

/* The guide and tool directories, the calculator, and the contact strip under them. */
.ad-journey-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: var(--gap); padding: 36px 32px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-1); }
.ad-journey-contact > div:first-child { flex: 1 1 360px; }
.ad-journey-contact h2 { margin-top: 8px; font-size: var(--t-title); line-height: 1.2; letter-spacing: -.02em; }
.ad-journey-contact p { max-width: 40em; margin-top: 8px; }
.ad-journey-contact .ad-actions { flex: none; flex-direction: column; margin: 0; }
.ad-directory-search { margin-bottom: 24px; padding: 28px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--elev-2); }
.ad-directory-search label { display: block; margin-bottom: 10px; font-size: var(--t-small); font-weight: 600; color: var(--ink-900); }
.ad-directory-search > div { display: flex; gap: 12px; }
.ad-directory-search input { flex: 1; min-width: 0; min-height: 52px; padding: 12px 16px; border: 0; border-radius: var(--r-control); box-shadow: var(--ring-strong); font: 400 var(--t-read)/1.4 var(--font-body); color: var(--ink-900); transition: box-shadow var(--dur-fast) var(--ease); }
.ad-directory-search input:focus { outline: 0; box-shadow: 0 0 0 2px var(--primary), 0 0 0 6px rgba(36, 83, 212, .14); }
.ad-directory-search p { margin-top: 12px; font-size: var(--t-small); color: var(--ink-600); }
.ad-directory-group { border-top: 1px solid var(--ink-200); }
.ad-directory-group:last-of-type { border-bottom: 1px solid var(--ink-200); }
.ad-directory-group summary { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 0; font-size: var(--t-read); font-weight: 600; color: var(--ink-900); cursor: pointer; list-style: none; transition: color var(--dur-fast) var(--ease); }
.ad-directory-group summary::-webkit-details-marker { display: none; }
.ad-directory-group summary:hover { color: var(--primary); }
.ad-directory-group summary span { flex: 1; text-align: right; font-size: var(--t-small); font-weight: 400; color: var(--ink-600); translate: none; }
.ad-directory-group summary::after { content: "+"; flex: none; margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink-50); font-size: var(--t-h3); font-weight: 400; line-height: 1; color: var(--ink-700); transition: rotate var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.ad-directory-group[open] summary::after { rotate: 45deg; background: var(--primary); color: var(--white); }
.ad-directory-group > p { max-width: 52em; padding-bottom: 16px; font-size: var(--t-ui); line-height: 1.65; }
.ad-directory-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; padding-bottom: 20px; }
.ad-directory-links a { padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--t-ui); font-weight: 500; line-height: 1.45; }
.ad-budget-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; padding-top: 32px; }
.ad-budget-layout .ad-contact-form { grid-column: auto; }
.ad-budget-layout button:disabled { opacity: .5; cursor: not-allowed; }
.ad-budget-result { position: sticky; top: calc(var(--nav-h) + 24px); padding: 40px 36px; background: linear-gradient(160deg, var(--blue-900), var(--ink-900) 70%); border-radius: 24px; box-shadow: var(--elev-3); color: var(--ink-200); }
.ad-budget-result .ad-eyebrow { color: var(--blue-300); }
.ad-budget-result :is(h2, h3) { margin-top: 10px; font-size: var(--t-title); line-height: 1.2; letter-spacing: -.02em; color: var(--white); }
.ad-budget-result :is(p, li) { margin-top: 12px; font-size: var(--t-ui); line-height: 1.65; color: var(--ink-200); }
.ad-budget-result :is(strong, b) { color: var(--white); }
.ad-budget-result ul { margin-top: 16px; padding-left: 20px; }
.ad-budget-result .ad-text-link { display: inline-block; padding-top: 20px; color: var(--white); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .4); }
/* The answer: the figure large, then each line that makes it up. */
.ad-budget-result .ad-budget-total { margin-top: 8px; font-size: var(--t-hero); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ad-budget-breakdown { margin: 24px 0; }
.ad-budget-breakdown > div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: var(--t-ui); }
.ad-budget-breakdown dt { color: var(--ink-200); }
.ad-budget-breakdown dd { font-weight: 600; text-align: right; color: var(--white); font-variant-numeric: tabular-nums; }
.ad-budget-result .ad-secondary { background: transparent; color: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }
.ad-budget-result .ad-secondary:hover { color: var(--white); box-shadow: 0 0 0 1px var(--white); }
.ad-budget-result .ad-fine { color: var(--ink-300); }
.ad-budget-adjust { margin: 24px 0; padding: 4px 0; border-block: 1px solid var(--line); }
.ad-budget-adjust summary { min-height: 44px; display: flex; align-items: center; font-size: var(--t-small); font-weight: 600; color: var(--primary); cursor: pointer; }
.ad-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

/* Legal pages: one readable column. */
.legal-updated { margin-top: 12px; font-size: var(--t-small); color: var(--ink-600); }
.legal-body { max-width: 720px; font-size: var(--t-read); line-height: 1.75; color: var(--ink-800); }
.legal-section + .legal-section { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.legal-section h2 { font-size: var(--t-title); letter-spacing: -.02em; }
.legal-section h3 { margin-top: 28px; font-size: var(--t-h3); }
.legal-section :is(p, ul, ol) { margin-top: 14px; }
.legal-section :is(ul, ol) { padding-left: 1.3em; }
.legal-section li { margin: .4em 0; }
.legal-section a { text-decoration: underline; text-decoration-color: var(--blue-200); text-underline-offset: 3px; }
.legal-inline-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* The enquiry form: one raised card. The page's own style block lays out its rows. */
.enq-form { padding: clamp(24px, 4vw, 40px); background: var(--white); border-radius: 24px; box-shadow: var(--elev-3); }
.enq-form fieldset { border: 0; }
.enq-form fieldset + fieldset { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.enq-form legend { margin-bottom: 16px; font-size: var(--t-h3); font-weight: 600; letter-spacing: -.01em; color: var(--ink-900); }
.enq-note { font-size: var(--t-small); line-height: 1.55; color: var(--ink-600); }
.enq-done { padding: clamp(24px, 4vw, 40px); background: var(--white); border-radius: 24px; box-shadow: var(--elev-3); }
.enq-done ul { margin: 16px 0 24px; padding-left: 1.3em; }

@media (max-width: 1100px) {
  .concern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .destination-hero-layout, .trust-layout, .tool-guidance-shell, .tool-layout, .article-layout, .ad-budget-layout { display: block; }
  .destination-hero-figure, .consult-card, .tool-guidance-aside, .tool-card, .ad-budget-result { margin-top: 32px; }
  .tool-card, .ad-budget-result, .article-toc { position: static; }
  .decision-grid, .af-faq, .warning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .article-toc { margin-bottom: 32px; padding: 16px 20px; background: var(--white); border-radius: var(--r-control); box-shadow: var(--elev-1); }
  body:not(.is-article) .article-wrap { display: block; }
  body:not(.is-article) .article-wrap > .article-sidebar { position: static; max-height: none; margin-top: 40px; }
  .journey-strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .tool-guidance-main { padding: 28px 24px; }
  .tool-step-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .consult-card, .tool-guidance-aside, .ad-budget-result { padding: 32px 24px; }
  .tool-card { padding: 28px 24px; }
}
@media (max-width: 640px) {
  .decision-grid, .concern-grid, .af-faq, .warning-grid, .fgrid, .countries-grid.inline-grid, .grid-2, .tool-mini-grid, .ad-directory-links { grid-template-columns: minmax(0, 1fr); }
  .decision-card:not(.destination-card), .concern-card, .af-item, .risk-box { padding: 24px; }
  .section-head { margin-bottom: 28px; }
  .cta-btns .btn, .cta-row .btn, .tool-actions .btn, .tool-guidance-actions .btn { width: 100%; }
  .markdown-category-group > summary { flex-wrap: wrap; }
  .markdown-category-group > summary p { order: 3; flex-basis: 100%; margin: 0; }
  .markdown-category-group > summary::after { margin-left: auto; }
  .faq-grid-lite summary { padding: 14px 20px; }
  .faq-grid-lite details p { padding: 0 20px 20px; }
  .ad-directory-search > div { flex-direction: column; }
  .ad-journey-contact { padding: 28px 24px; }
  .ad-journey-contact .ad-actions, .ad-journey-contact .ad-button { width: 100%; }
  .verify-step { padding: 20px; gap: 14px; }
}

/* ── A photograph in a page's opening ─────────────────────────────────────────────── */
/* A guide, comparison or hub about one place opens with that place: words on the left, the
   licensed photograph and its credit on the right. A comparison of two places shows both,
   one overlapping the other. */
.page-hero.has-photo .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: start; }
.page-hero.has-photo .wrap > * { grid-column: 1; }
.page-hero.has-photo .wrap > :is(.label, .hero-actions) { justify-self: start; }
.page-hero.has-photo .wrap > .hero-photo { grid-column: 2; grid-row: 1 / span 12; align-self: center; }
.hero-photo figure { margin: 0; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: var(--elev-2); }
.hero-photo .destination-hero-credit { margin-top: 10px; }
.hero-photo-pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 0; }
.hero-photo-pair figure:first-child { grid-column: 1 / span 8; grid-row: 1; }
.hero-photo-pair figure:last-child { grid-column: 5 / -1; grid-row: 2; margin-top: -22%; }
.hero-photo-pair figure:last-child img { box-shadow: 0 0 0 6px var(--paper), var(--elev-3); }
.hero-photo-pair figure:first-child .destination-hero-credit { max-width: 46%; }
.hero-photo-pair figure:last-child .destination-hero-credit { text-align: right; }
@media (max-width: 960px) {
  .page-hero.has-photo .wrap { display: block; }
  .page-hero.has-photo .wrap > .hero-photo { margin-top: 28px; }
  .hero-photo img { aspect-ratio: 16 / 9; }
  .hero-photo-pair figure:first-child .destination-hero-credit { max-width: none; }
  .hero-photo-pair figure:last-child { margin-top: -12%; }
}

/* ── Footer ───────────────────────────────────────────────────────────────────────── */
body > footer { padding: 64px max(var(--gutter), calc((100% - var(--wrap)) / 2)) 32px; background: var(--ink-900); color: var(--ink-200); }
.foot-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gap); padding-bottom: 48px; }
.foot-brand { grid-column: span 4; }
.foot-links-group { grid-column: span 2; }
.logo-img--footer { height: 44px; }
.foot-brand p { max-width: 30em; margin-top: 20px; font-size: var(--t-small); line-height: 1.6; color: var(--ink-200); }
.foot-trust { margin-top: 16px; list-style: none; display: grid; gap: 8px; }
.foot-trust li { position: relative; padding-left: 16px; font-size: var(--t-micro); line-height: 1.5; color: var(--ink-300); }
.foot-trust li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-500); }
.foot-trust a, .foot-cta a { color: var(--white); }
.foot-cta { margin-top: 20px; font-size: var(--t-small); }
.foot-cta a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-500); }
.foot-cta svg { width: 18px; height: 18px; }
/* The shared footer markup sets these headings with inline styles, so the override needs
   !important until the markup in scripts/lib/site-chrome.mjs drops them. */
.foot-links-group :is(h3, h4) { margin-bottom: 12px !important; font-size: var(--t-micro) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--white) !important; }
.foot-links-group a { display: block; width: fit-content; padding: 5px 0; font-size: var(--t-small); color: var(--ink-200); transition: color var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease); }
.foot-links-group a:hover, .foot-trust a:hover { color: var(--white); }
.foot-links-group a:hover { translate: 3px 0; }
.foot-bottom { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--t-micro); color: var(--ink-300); }
@media (max-width: 960px) {
  .foot-brand { grid-column: 1 / -1; }
  .foot-links-group { grid-column: span 6; }
}

/* ── Floating WhatsApp button and cookie bar ──────────────────────────────────────── */
.ad-page .conversion-float { display: none; }
.conversion-float { position: fixed; right: 20px; bottom: calc(20px + var(--consent-bar-h, 0px)); z-index: 150; }
.conversion-float-btn { display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; background: var(--whatsapp); border-radius: var(--r-pill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 4px rgba(6, 101, 54, .4), 0 16px 28px -12px rgba(8, 127, 70, .7); color: var(--white); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s, background-color var(--dur-fast) var(--ease); }
.conversion-float-btn:hover { background: var(--whatsapp-hover); color: var(--white); transform: translateY(-2px); }
.conversion-float.is-resting .conversion-float-btn { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
.conversion-float-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.conversion-float-icon svg { width: 22px; height: 22px; }
.conversion-float-copy strong { display: block; font-size: var(--t-ui); line-height: 1.2; color: var(--white); }
.conversion-float-copy small, .cf-short { display: none; }
.conversion-float-qr { position: absolute; right: 0; bottom: calc(100% + 12px); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 168px; padding: 16px 12px 12px; background: var(--white); border-radius: 14px; box-shadow: var(--elev-2); font-size: var(--t-micro); text-align: center; color: var(--ink-700); }
@media (max-width: 640px) {
  .conversion-float { right: 12px; bottom: calc(12px + var(--consent-bar-h, 0px)); }
  .cf-long { display: none; }
  .cf-short { display: inline; }
}

.consent-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; padding: 16px max(var(--gutter), calc((100% - var(--wrap)) / 2)); background: var(--ink-900); color: var(--ink-200); box-shadow: 0 -16px 40px -24px rgba(13, 31, 60, .6); }
.consent-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.consent-copy { flex: 1 1 320px; }
.consent-copy strong { color: var(--white); font-size: var(--t-ui); }
.consent-copy p { margin-top: 2px; font-size: var(--t-small); color: var(--ink-200); }
.consent-copy a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 8px; }
.consent-bar .btn { min-height: 40px; background: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); color: var(--white); }
.consent-bar .btn:hover { box-shadow: 0 0 0 1px var(--white); }

/* ── Preview note (not part of the design) ────────────────────────────────────────── */
.preview-note { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px var(--gutter); background: var(--white); font-size: var(--t-micro); color: var(--ink-600); }
.preview-note-links a { margin-left: 8px; }

/* ── Motion ───────────────────────────────────────────────────────────────────────── */
/* Moving between pages: a short cross-fade in browsers that support it. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }

  /* Opening: the headline is there at once (it is what the browser paints first); the
     lines beside it and the tool follow in order. */
  .ad-hero-copy > p:first-of-type { animation: rise .6s var(--ease) .04s both; }
  .ad-hero .ad-actions { animation: rise .6s var(--ease) .1s both; }
  .ad-hero .ad-fine { animation: rise .6s var(--ease) .16s both; }
  .finder { animation: rise .7s var(--ease) .2s both; }
  .ad-hero-link, .ad-hero-proof { animation: fade .6s var(--ease) .5s both; }
  .hero-sub { animation: rise .5s var(--ease) .04s both; }
  .hero-actions { animation: rise .5s var(--ease) .1s both; }
  .hero-offer-note { animation: rise .5s var(--ease) .16s both; }

  .page-hero .label { animation: rise .6s var(--ease-out) both; }
  .page-hero .wrap > p:not([class]), .lede, .destination-hero-copy > p:not([class]) { animation: rise .6s var(--ease-out) .06s both; }
  .destination-hero-figure { animation: rise .8s var(--ease-out) .14s both; }
  .ad-heading > p, .ad-detail-hero h1 + p { animation: rise .6s var(--ease-out) .06s both; }
  .ad-detail-hero .ad-actions { animation: rise .6s var(--ease-out) .12s both; }
  .ad-deliverable, .tool-card { animation: rise .8s var(--ease-out) .16s both; }

  /* Arrival on scroll, one recipe everywhere: a short rise with a fade, each sibling a
     tenth of a second behind the one before. The hidden start exists only once the script
     has asked for it. */
  .rv-on .rv { opacity: 0; transform: translateY(20px); }
  .rv-on .rv.rv-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out) calc(var(--i, 0) * 100ms), transform .7s var(--ease-out) calc(var(--i, 0) * 100ms), box-shadow var(--dur) var(--ease), translate var(--dur) var(--ease), background-color var(--dur) var(--ease); }

  /* The hero's cards are dealt: each rises from below and turns to its place. */
  @keyframes deal { from { opacity: 0; translate: 0 64px; rotate: 0deg; } }
  .hero-fan-card { animation: deal .9s var(--ease-out) both; }
  .hero-fan-card:nth-child(3) { animation-delay: .15s; }
  .hero-fan-card:nth-child(2), .hero-fan-card:nth-child(4) { animation-delay: .25s; }
  .hero-fan-card:nth-child(1), .hero-fan-card:nth-child(5) { animation-delay: .35s; }
  .hero-fan-note { animation: fade .6s var(--ease) .7s both; }

  /* The accent phrase of a headline starts in ink and takes its colour, once. On the home
     page, where the phrase is a block of its own, it is written in from the left. */
  @keyframes tint { from { -webkit-text-fill-color: var(--ink-900); } }
  @keyframes wipe { from { clip-path: inset(-10% 100% -30% 0); } to { clip-path: inset(-10% -5% -30% 0); } }
  .hl { animation: tint 1.1s var(--ease) .2s both; }
  .is-story .ad-hero h1 span { animation: wipe .9s var(--ease-out) .12s both; }
  /* A photograph in a page's opening rises into place; the second of a pair follows. */
  .hero-photo figure { animation: rise .8s var(--ease-out) .14s both; }
  .hero-photo-pair figure:last-child { animation-delay: .3s; }
  /* In a step of the story, the words arrive first and the panel slides in beside them. */
  .rv-on .rv > .story-panel { opacity: 0; translate: 36px 0; }
  @media (max-width: 960px) { .rv-on .rv > .story-panel { translate: 0 24px; } }
  .rv-on .rv.rv-in > .story-panel { opacity: 1; translate: 0 0; transition: opacity .8s var(--ease-out) .18s, translate .8s var(--ease-out) .18s; }
  /* The cost bars draw from nothing when their panel arrives. */
  .rv-on .rv:not(.rv-in) .finder-bar i { width: 0 !important; }
  .rv-on .rv.rv-in .finder-bar i { transition: width .9s var(--ease-out) .45s; }
  /* A photograph on a card or in a guide comes up out of a soft blur as it is reached. */
  .rv-on .rv:is(.destination-card, .hero-fan-card) img { scale: 1.08; }
  .rv-on .rv.rv-in:is(.destination-card, .hero-fan-card) img { scale: 1; transition: scale 1.1s var(--ease-out) calc(var(--i, 0) * 100ms); }
  .rv-on a.rv.rv-in.destination-card:hover .destination-card-image { scale: 1.05; transition: scale .6s var(--ease); }

  /* The finder answers: results re-enter one after another, the summary settles. */
  .finder-row.is-in { animation: settle .34s var(--ease) calc(var(--i, 0) * 45ms) both; }
  .finder-summary.is-in { animation: fade .3s var(--ease) both; }

  .nav-links.show { animation: drop var(--dur) var(--ease); }
  .page-toc[open] nav { animation: settle var(--dur) var(--ease); }
  .ad-more-feedback[open] .ad-feedback-grid { animation: rise .4s var(--ease); }
  .markdown-category-group[open] > .decision-grid, .ad-directory-group[open] > :not(summary), .faq-grid-lite details[open] p, .tool-result.show { animation: settle .34s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}
@media print {
  .rv-on .rv { opacity: 1 !important; transform: none !important; }
}