/* =====================================================================
   Passport? Good.
   Light, editorial, card-led. Country identity is carried by --line,
   which every page sets from the country JSON.
   ===================================================================== */

:root {
  color-scheme: light;

  --g25:  #fcfcfd;
  --g50:  #f9fafb;
  --g100: #f2f4f7;
  --g200: #eaecf0;
  --g300: #d0d5dd;
  --g400: #98a2b3;
  --g500: #667085;
  --g600: #475467;
  --g700: #344054;
  --g800: #1d2939;
  --g900: #101828;

  --ok:    #17b26a;
  --warn:  #f79009;

  --line: var(--g900);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;

  --sh-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sh-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --sh-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);

  --head-h: 72px;
  --tabs-h: 53px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--g900);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; }
ul, ol, dl, dd, dt { margin: 0; padding: 0; }
li { list-style: none; }

.shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--g900);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0 0 var(--r-md) 0;
  font-size: 0.875rem;
  font-weight: 500;
}
.skip:focus { left: 0; }

/* --- masthead ------------------------------------------------------ */

/* Opaque on purpose. A backdrop-filter here forces the compositor to
   re-sample the backdrop every scroll frame down a 5,000px page, which
   costs real jank and can leave unpainted bands — all to show 14% of a
   blur through an almost-solid bar. Solid white also matches .tabbar
   directly below it, which the translucent version never quite did. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--g200);
}
.topbar-in {
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.025em;
  color: var(--g900);
  flex: none;
}
.brand .mark { flex: none; }

.mainnav {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}
.mainnav a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--g600);
  transition: color 0.15s, background 0.15s;
}
.mainnav a:hover { color: var(--g900); background: var(--g50); }

.langswitch {
  display: flex;
  flex: none;
  border: 1px solid var(--g300);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.langswitch a {
  padding: 0.4375rem 0.6875rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--g600);
  background: #fff;
  transition: background 0.15s, color 0.15s;
}
.langswitch a + a { border-left: 1px solid var(--g300); }
.langswitch a:hover { background: var(--g50); color: var(--g900); }
.langswitch a[aria-current='true'] { background: var(--g900); color: #fff; }

/* --- country tabs — real links, one indexable URL per country ------- */

.tabbar {
  position: sticky;
  top: var(--head-h);
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--g200);
}
.tabbar-in { overflow: hidden; }
.tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -0.75rem;
  padding: 0 0.75rem;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.9375rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--g500);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
/* Flags run 3:2, so a rounded rectangle shows each one whole. A circular
   crop would cut the canton off Taiwan's flag and the trigrams off Korea's,
   which is the part that makes them identifiable at this size. The hairline
   keeps mostly-white flags (Japan) from dissolving into the bar. */
.tab-flag {
  width: 21px;
  height: 14px;
  flex: none;
  box-sizing: border-box;
  border-radius: 3px;
  object-fit: cover;
  /* a real border, not an inset shadow: on a replaced element the shadow
     renders under the image, which leaves Japan's white field edgeless */
  border: 1px solid rgba(16, 24, 40, 0.22);
  opacity: 0.85;
  transition: opacity 0.15s;
}
.tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  opacity: 0.45;
  transition: opacity 0.15s, transform 0.15s;
}
.tab:hover { color: var(--g800); }
.tab:hover .tab-dot { opacity: 0.8; }
.tab:hover .tab-flag { opacity: 1; }
.tab[aria-current='page'] {
  color: var(--g900);
  font-weight: 600;
  border-bottom-color: var(--line);
}
.tab[aria-current='page'] .tab-dot { opacity: 1; transform: scale(1.15); }
.tab[aria-current='page'] .tab-flag { opacity: 1; }
.tab-tag {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g500);
  background: var(--g100);
  padding: 0.125rem 0.3125rem;
  border-radius: 4px;
}

/* --- shared bits --------------------------------------------------- */

/* `main` also carries .shell, whose `padding: 0 2rem` outranks a bare
   element selector — the vertical padding has to match its specificity. */
main.shell { padding-top: 2.5rem; padding-bottom: 4rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--g600);
  margin-bottom: 0.75rem;
}
.eyebrow--onDark { color: rgba(255, 255, 255, 0.72); }

.pagehead { max-width: 46rem; margin-bottom: 2.5rem; }
.pagehead h1 { font-size: 2.25rem; line-height: 1.16; }
.pagehead .lede { margin-top: 1rem; }

.lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--g600);
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--g500);
  margin-bottom: 1.5rem;
}
.crumb a { font-weight: 500; }
.crumb a:hover { color: var(--g900); text-decoration: underline; }
.crumb span { color: var(--g300); }

.code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--line);
  background: color-mix(in srgb, var(--line) 12%, #fff);
}
.code--solid { color: #fff; background: var(--line); }

/* Country marker used anywhere the name is already visible. Same reasoning
   as .tab-flag: rounded rectangle, because a circular crop removes the very
   part that identifies Taiwan's and Korea's flags. The border is what keeps
   a mostly-white flag (Japan) from vanishing into the background. */
.flagchip {
  width: 27px;
  height: 18px;
  flex: none;
  box-sizing: border-box;
  border-radius: 3px;
  object-fit: cover;
  border: 1px solid rgba(16, 24, 40, 0.22);
  vertical-align: -0.15em;
}
.flagchip--sm { width: 21px; height: 14px; }
.flagchip--mini { width: 18px; height: 12px; border-radius: 2px; }
.flagchip--onDark { border-color: rgba(255, 255, 255, 0.35); }

.tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--g600);
  background: var(--g100);
  border-radius: 4px;
  padding: 0.125rem 0.375rem;
}
.tag--onDark {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--g700);
  flex: none;
  transition: color 0.15s;
}
.textlink svg { transition: transform 0.2s; }
.textlink:hover { color: var(--g900); }
.textlink:hover svg { transform: translateX(3px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn--light { background: #fff; color: var(--g900); border-color: #fff; box-shadow: var(--sh-xs); }
.btn--light:hover { background: var(--g100); border-color: var(--g100); }
.btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); }
.btn--dark { background: var(--g900); color: #fff; }
.btn--dark:hover { background: var(--g800); }

.notice {
  border: 1px solid var(--g200);
  border-left: 3px solid var(--warn);
  background: var(--g50);
  border-radius: var(--r-md);
  padding: 0.875rem 1.125rem;
  font-size: 0.9375rem;
  color: var(--g600);
  margin-top: 1.5rem;
}

/* --- ads ------------------------------------------------------------
   Three rules do the work here.

   1. Every slot reserves its height before anything loads (`min-height`
      on .ad-box). An ad that arrives and shoves the article down is a
      layout shift, and layout shift costs ranking — so the reserved box
      is protecting the traffic the ads are being paid for.
   2. The label is always visible. A block inside an article that is not
      marked as advertising is the thing ad policies exist to forbid, and
      the styling deliberately stays quieter than any heading so it never
      reads as a section of the page.
   3. Generous margins. Clicks that happen because an ad sat too close to
      a link are worth nothing and risk the account. */
.ad {
  display: block;
  margin: 3.5rem 0;
}
.ad-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g400);
  text-align: center;
}
.ad-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  overflow: hidden;
}
/* Placeholder only — a live unit fills .ad-box and this never renders. */
.ad-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: inherit;
  align-self: stretch;
  border: 1px dashed var(--g300);
  border-radius: var(--r-lg);
  background: var(--g25);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g400);
}
.ad .adsbygoogle { width: 100%; }

/* In-content, between the first and second section of an article. Tighter
   than a standalone break so the body still reads as one piece. */
.ad--inline { margin: 2.75rem 0; }
.ad--inline .ad-box { min-height: 250px; }

/* Rides the sticky table of contents. Desktop only: below 1080px the rail
   is hidden, and stacking a third unit onto a phone would crowd the read. */
.ad--rail { display: none; }
@media (min-width: 1080px) {
  .ad--rail {
    display: block;
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--g200);
  }
  .ad--rail .ad-box { min-height: 600px; }
}

/* --- hero ---------------------------------------------------------- */

.hero {
  position: relative;
  /* width is pinned so that max-height clamps the height only — with
     aspect-ratio alone the cap would shrink the box horizontally too. */
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--g900);
  aspect-ratio: 16 / 9;
  min-height: 440px;
  max-height: 620px;
  display: flex;
}
.hero .thumb,
.hero .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
/* Two layers: one lifts the whole lower half, one shields the left
   column where the type sits. Hero photos are busy and often bright. */
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(16, 24, 40, 0.72) 0%, rgba(16, 24, 40, 0.34) 42%, rgba(16, 24, 40, 0) 78%),
    linear-gradient(to top, rgba(16, 24, 40, 0.95) 0%, rgba(16, 24, 40, 0.88) 26%, rgba(16, 24, 40, 0.6) 52%, rgba(16, 24, 40, 0.22) 78%, rgba(16, 24, 40, 0.1) 100%);
}
.hero-in {
  position: relative;
  align-self: flex-end;
  width: 100%;
  padding: 2.5rem;
  color: #fff;
}
.hero-id {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}
.hero-id h1 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-tagline {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}

.hero-feature { display: block; max-width: 44rem; }
.hero-feature h2 {
  font-size: 2.75rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 0.875rem;
}
.hero-answer {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 38rem;
}
.hero-go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  transition: border-color 0.15s;
}
.hero-go svg { transition: transform 0.2s; }
.hero-feature:hover .hero-go { border-bottom-color: #fff; }
.hero-feature:hover .hero-go svg { transform: translateX(4px); }

/* --- at a glance --------------------------------------------------- */

.glance {
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  margin-top: 2rem;
  overflow: hidden;
}
.glance-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
  padding: 0.875rem 1.25rem;
  background: var(--g50);
  border-bottom: 1px solid var(--g200);
}
.glance-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.glance-item {
  padding: 1.125rem 1.25rem;
  border-left: 1px solid var(--g200);
}
.glance-item:first-child { border-left: 0; }
.glance-item dt {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--g500);
  margin-bottom: 0.25rem;
}
.glance-item dt::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g400);
  flex: none;
}
.glance-item[data-tone='yes'] dt::before { background: var(--ok); }
.glance-item[data-tone='partial'] dt::before { background: var(--warn); }
.glance-item[data-tone='no'] dt::before { background: var(--g400); }
.glance-item dd {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--g900);
  letter-spacing: -0.01em;
}

/* --- sections + cards ---------------------------------------------- */

.axis, .cross { margin-top: 4rem; }

.axis-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.75rem;
}
.axis-head h2 { font-size: 1.5rem; }
.axis-head .lede { font-size: 1rem; margin-top: 0.375rem; max-width: 42rem; }

.cards { display: grid; gap: 2rem; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }

/* A lone card spans the row horizontally instead of sitting in a third
   of it with two empty columns alongside. */
.cards--1 .card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem;
  align-items: center;
}
.cards--1 .card .thumb,
.cards--1 .card .thumb--blank { margin-bottom: 0; }
.cards--1 .card h3 { font-size: 1.5rem; }
.cards--1 .card-desc { -webkit-line-clamp: 4; line-clamp: 4; }

.card { display: block; }
.card .thumb,
.card .thumb--blank {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--g100);
  margin-bottom: 1.25rem;
}
.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.card:hover .thumb img { transform: scale(1.035); }

.thumb--blank {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--line) 16%, #fff), color-mix(in srgb, var(--line) 4%, #fff));
}
.thumb--blank span {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--line) 55%, #fff);
}

.card h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  margin-bottom: 0.5rem;
  transition: color 0.15s;
}
.card:hover h3 { color: var(--g600); }
.card-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--g600);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--g500);
}
.src { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; color: var(--g700); }
.src-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--line) 18%, var(--g100));
  border: 1.5px solid color-mix(in srgb, var(--line) 45%, #fff);
  flex: none;
}
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--g300); flex: none; }

/* --- cross-country list -------------------------------------------- */

.crosslist { border-top: 1px solid var(--g200); }
.crosslist li { border-bottom: 1px solid var(--g200); }
.crosslist a {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 0.75rem 1.25rem 0;
  transition: background 0.15s, padding-left 0.15s;
}
.crosslist a:hover { background: var(--g50); padding-left: 0.75rem; }
.cross-q {
  flex: 1;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--g900);
}
.cross-flags { display: flex; gap: 0.25rem; flex: none; }
.cross-go { color: var(--g400); flex: none; transition: color 0.15s, transform 0.2s; }
.crosslist a:hover .cross-go { color: var(--g900); transform: translateX(3px); }
.crosslist-all .cross-q { color: var(--g600); font-weight: 500; }

/* --- compare page --------------------------------------------------- */

.cmplist { display: grid; gap: 1rem; }
.cmplist a {
  position: relative;
  display: block;
  border: 1px solid var(--g200);
  border-left: 4px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.375rem 3.5rem 1.375rem 1.5rem;
  box-shadow: var(--sh-xs);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.cmplist a:hover { box-shadow: var(--sh-lg); }
.cmp-country {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--g600);
  margin-bottom: 0.5rem;
}
.cmp-answer { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
.cmplist .cross-go { position: absolute; right: 1.5rem; top: 50%; margin-top: -10px; }

/* --- question page -------------------------------------------------- */

/* Article + contents rail. The rail only appears when the body has real
   sections, so a short answer page stays a single column. */
.article { display: block; }
.article--railed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }

@media (min-width: 1080px) {
  .article--railed { grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); }
}

.rail { display: none; }
@media (min-width: 1080px) {
  .rail { display: block; }
  .toc {
    position: sticky;
    /* clears the masthead and the country tab strip */
    top: calc(var(--head-h) + var(--tabs-h) + 2rem);
    border-left: 2px solid var(--g200);
    padding-left: 1.25rem;
  }
}
.toc-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: 0.875rem;
}
.toc ol { counter-reset: toc; }
.toc li + li { margin-top: 0.625rem; }
.toc a {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--g600);
  transition: color 0.15s;
}
.toc a:hover { color: var(--g900); }

.postimg {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 0 0 2.5rem;
  background: var(--g100);
}
.postimg img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.prose { max-width: 44rem; }
.prose h1 { font-size: 2.25rem; line-height: 1.16; margin-bottom: 1.75rem; }
.prose h2 {
  font-size: 1.375rem;
  margin: 2.75rem 0 1rem;
  scroll-margin-top: calc(var(--head-h) + var(--tabs-h) + 1.5rem);
}
.prose p { font-size: 1.0625rem; line-height: 1.7; color: var(--g600); margin-bottom: 1.25rem; }
.prose .eyebrow { margin-bottom: 0.75rem; }
.prose-lede {
  font-size: 1.25rem !important;
  line-height: 1.6 !important;
  color: var(--g600) !important;
  margin-bottom: 0.5rem !important;
}

/* Numbered procedure — "insert cash, then press" only reads correctly
   when the order is visible. */
.steps { counter-reset: step; margin: 0 0 1.5rem; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 2.75rem;
  margin-bottom: 1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--g600);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--line);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bullets { margin: 0 0 1.5rem; }
.bullets li {
  position: relative;
  padding-left: 1.375rem;
  margin-bottom: 0.625rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--g600);
}
.bullets li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.75rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--g300);
}

/* Outbound links inside prose — the opt-out addresses on the privacy page.
   Set apart from the paragraphs rather than dressed as bullets: these are
   things to click, and a reader scanning for "where do I turn this off"
   should find them without reading the sentence around them. */
.linklist { margin: 0 0 1.5rem; display: grid; gap: 0.5rem; }
.linklist a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--g700);
  text-decoration: underline;
  text-decoration-color: var(--g300);
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.linklist a:hover { color: var(--g900); text-decoration-color: var(--g600); }

.plate {
  border: 1px solid var(--g200);
  border-left: 5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--g25);
  padding: 1.375rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--sh-xs);
}
.plate .eyebrow { margin-bottom: 0.375rem; font-size: 0.8125rem; }
.plate-answer {
  font-size: 1.375rem !important;
  line-height: 1.45 !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--g900) !important;
  margin: 0 !important;
}

.notes { margin-bottom: 1.5rem; }
.notes li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-top: 1px solid var(--g200);
  font-size: 1rem;
  color: var(--g600);
}
.notes li:last-child { border-bottom: 1px solid var(--g200); }
.notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.4rem;
  width: 0.625rem;
  height: 2px;
  background: var(--line);
  border-radius: 1px;
}

.meta {
  font-size: 0.875rem !important;
  color: var(--g500) !important;
  border-top: 1px solid var(--g200);
  padding-top: 1rem;
  margin-top: 2rem !important;
}
.meta a { color: var(--g700); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* --- credits -------------------------------------------------------- */

.credits { display: grid; gap: 1rem; max-width: 48rem; }
.credits li {
  display: flex;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: 0.75rem;
}
.credits .thumb, .credits .thumb--blank {
  width: 96px;
  height: 64px;
  flex: none;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.credits .thumb img { width: 100%; height: 100%; object-fit: cover; }
.credits-title { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; }
.credits-title a:hover { text-decoration: underline; }
.credits-meta { font-size: 0.8125rem; color: var(--g500); margin-top: 0.25rem; }
.credits-meta a { text-decoration: underline; text-underline-offset: 2px; }

/* --- dark endcap: CTA + footer -------------------------------------- */

.endcap {
  background: var(--g900);
  border-radius: var(--r-xl);
  color: #fff;
  padding: 4rem 3rem 3rem;
  margin-bottom: 3rem;
  --mark-ink: var(--g900);
}
.cta { text-align: center; max-width: 40rem; margin: 0 auto; }
.cta h2 { font-size: 1.875rem; margin-bottom: 0.75rem; }
.cta p { color: var(--g300); font-size: 1.0625rem; line-height: 1.6; }
.cta-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.endcap-rule { height: 1px; background: rgba(255, 255, 255, 0.12); margin: 3.5rem 0 2.5rem; }

/* Brand block on the left, three link groups on the right. Only the lists
   a reader actually navigates with live here; licence and privacy sit in
   the base row instead. */
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: 3rem;
}
.foot-brand p {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--g400);
  max-width: 18rem;
}

.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.foot-cols h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--g400);
  margin-bottom: 1rem;
}
.foot-cols li + li { margin-top: 0.75rem; }
.foot-cols a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--g200);
  transition: color 0.15s;
}
.foot-cols a:hover { color: #fff; }

.foot-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.brand--foot { color: #fff; }
.brand--foot .mark { color: #fff; }
.foot-base p { font-size: 0.9375rem; color: var(--g400); }

.foot-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.foot-legal a {
  font-size: 0.875rem;
  color: var(--g500);
  transition: color 0.15s;
}
.foot-legal a:hover { color: var(--g200); }

/* --- language gate -------------------------------------------------- */

.gate { display: grid; place-items: center; min-height: 100vh; padding: 2rem; }
.gate main { text-align: center; padding: 0; }
.gate .mark { margin: 0 auto 1.5rem; color: var(--g900); }
.gate h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.gate p { color: var(--g500); font-size: 1.0625rem; }
.gate-links { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; }
.gate-links b { opacity: 0.55; font-weight: 600; }

/* --- focus ---------------------------------------------------------- */

a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--g900);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.endcap a:focus-visible, .hero a:focus-visible { outline-color: #fff; }

/* --- responsive ----------------------------------------------------- */

@media (max-width: 1080px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .foot-cols { gap: 2rem 1.5rem; }
}

@media (max-width: 900px) {
  .cards--3 { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
  .hero-feature h2 { font-size: 2.125rem; }
  .cards--1 .card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }

  /* the tab strip scrolls here — fade the edge so that reads as scrollable */
  .tabbar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 1px;
    width: 3rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 72%);
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  :root { --head-h: 64px; }
  .shell { padding: 0 1.25rem; }
  main.shell { padding-top: 1.5rem; padding-bottom: 3rem; }
  .mainnav { display: none; }
  .brand span { font-size: 1rem; }
  .langswitch { margin-left: auto; }

  /* Stack instead of overlay: the photo sits on top at a fixed height and
     fades into the solid plate the type sits on. `display: block` matters —
     leaving the hero a flex row puts the photo and the text side by side. */
  .hero {
    display: block;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
  }
  .hero .thumb { position: relative; height: 260px; }
  .hero .thumb img { position: absolute; inset: 0; }
  .hero-veil {
    inset: 0 0 auto 0;
    height: 260px;
    background: linear-gradient(to top, var(--g900) 4%, rgba(16, 24, 40, 0.6) 45%, rgba(16, 24, 40, 0.2) 100%);
  }
  .hero-in { padding: 0.5rem 1.5rem 2rem; }
  .hero-feature h2 { font-size: 1.75rem; }
  .hero-tagline { margin-bottom: 1.25rem; }

  .axis-head { flex-direction: column; align-items: flex-start; gap: 0.875rem; }
  .axis, .cross { margin-top: 3rem; }
  .pagehead h1, .prose h1 { font-size: 1.875rem; }
  .glance-item { border-left: 0; border-top: 1px solid var(--g200); }
  .glance-item:first-child { border-top: 0; }

  .endcap { padding: 2.5rem 1.5rem 2rem; border-radius: var(--r-lg); }
  .cta h2 { font-size: 1.5rem; }
  .cta-actions { flex-direction: column; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-base { margin-top: 2.5rem; }
  .ad { margin: 3rem 0; padding: 2rem 1rem; }
}

@media (max-width: 560px) {
  .cards--3, .cards--2 { grid-template-columns: 1fr; }
  .cards--1 .card { grid-template-columns: 1fr; gap: 1.25rem; }
  .cards--1 .card h3 { font-size: 1.25rem; }
  .cross-flags { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}