/* TrueTransfer — landing page
   Extracted from the approved wireframe. The wireframe's `.browser.mobile X`
   selectors become real media queries here; nothing else about the design changed. */

:root {
  --ink: #0f1620;
  --muted: #5b6a7c;
  --faint: #8494a6;
  --line: #e2e7ee;
  --site: #ffffff;
  --sunk: #f5f7fb;
  --brand: #4f5ad4;
  --g1: #2f86d6; --g2: #4f5ad4; --g3: #7048cf;
  --ok: #17a34a;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display: "IBM Plex Sans Condensed", "IBM Plex Sans", ui-sans-serif, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8eef6; --muted: #8b9bae; --faint: #64737f;
    --line: #212c39; --site: #111923; --sunk: #0d141d; --brand: #8b93f0;
  }
}
:root[data-theme="dark"] {
  --ink: #e8eef6; --muted: #8b9bae; --faint: #64737f;
  --line: #212c39; --site: #111923; --sunk: #0d141d; --brand: #8b93f0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--site); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Latin runs inside RTL text — keeps punctuation and amounts from migrating */
bdi { unicode-bidi: isolate; }

.sec { padding: 64px 40px; }
.sec.alt { background: var(--sunk); }
.inner { max-width: 880px; margin: 0 auto; }

/* lockup — the wordmark is ONE inline span or the flex gap splits it */
.lk {
  display: inline-flex; align-items: center; gap: .3em;
  font-weight: 600; letter-spacing: -.042em; line-height: 1; white-space: nowrap;
  color: var(--ink); text-decoration: none;
}
.lk > svg { width: 1.12em; height: 1.12em; flex: none; }
.lk .w { display: inline; white-space: nowrap; }
.lk .t2 { color: var(--brand); }
/* The section suffix on a lockup — TrueTransfer /shop. It is a Telegram command, so it is set the
   way Telegram sets its interface: the platform's own UI face at regular-ish weight, reversed out of
   a full pill. The fill is the wordmark's own indigo, so the block is drawn from the mark rather than
   introducing a second colour. The lockup is a flex row with gap .3em; the pill trims that to .2em,
   because a filled block reads heavier than text and the pill's own .62em of side padding already
   supplies the air before the slash. */
.lk .sfx {
  font-family: -apple-system, "SF Pro Text", system-ui, Roboto, "Segoe UI", sans-serif;
  font-weight: 500; font-size: .84em; letter-spacing: -.005em;
  color: #fff; background: var(--brand);
  padding: .26em .62em; border-radius: 999px;
  margin-inline-start: -.1em;
}
/* --brand lightens in the dark theme, where white on it would fall to about 2.3:1. The pill keeps
   the light-theme indigo instead, which holds white at 5.9:1 against a dark page. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lk .sfx { background: #4f5ad4; } }
:root[data-theme="dark"] .lk .sfx { background: #4f5ad4; }

/* language suggestion — offered, never redirected */
.langbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 40px; background: color-mix(in srgb, var(--brand) 11%, transparent);
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.langbar b { font-weight: 600; }
.langbar .go {
  font: 600 13px/1 var(--sans); background: var(--brand); color: #fff;
  border: 0; border-radius: 8px; padding: 9px 14px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.langbar .x {
  margin-inline-start: auto; background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 17px; line-height: 1; padding: 4px 6px;
}

/* nav */
.nav {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 40px; border-bottom: 1px solid var(--line);
}
.nav .cta-sm {
  margin-inline-start: auto; font: 600 13.5px/1 var(--sans);
  background: var(--brand); color: #fff; border: 0;
  border-radius: 9px; padding: 11px 16px; cursor: pointer;
  letter-spacing: -.01em; text-decoration: none; display: inline-block;
}

/* hero */
.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 7vw, 68px); line-height: .96;
  letter-spacing: -.028em; margin: 0 0 16px; max-width: 15ch;
}
.hero .sub {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(19px, 3vw, 27px); color: var(--brand);
  letter-spacing: -.016em; margin: 0 0 22px;
}
.hero .body { margin: 0 0 26px; color: var(--muted); max-width: 48ch; font-size: 16.5px; }
.hero .body strong { color: var(--ink); font-weight: 600; }
.herogrid { display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center; }

.cta {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 16px/1 var(--sans); letter-spacing: -.012em;
  background: linear-gradient(135deg, var(--g1), var(--g2) 55%, var(--g3));
  color: #fff; border: 0; border-radius: 13px; padding: 17px 26px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(79,90,212,.32);
  text-decoration: none;
}
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.badges li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ok);
  background: rgba(23,163,74,.12); border-radius: 999px; padding: 7px 13px;
}
.badges li::before { content: "\2713"; font-weight: 700; opacity: .85; }

/* phone in hero */
.phone {
  width: 232px; flex: none; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 18px 44px rgba(15,22,32,.18);
}
.phone .pbar {
  height: 34px; background: linear-gradient(104deg,#4a7fab,#6150d4);
  display: flex; align-items: center; padding-inline: 9px;
  color: #fff; font-size: 11px; font-weight: 600; letter-spacing: -.01em;
}
.phone .pbody { padding: 20px 16px 16px; text-align: center; }
.phone .amt { font-size: 31px; font-weight: 600; letter-spacing: -.035em; color: #05070a; }
.phone .chips { display: flex; gap: 6px; justify-content: center; margin-top: 11px; }
.phone .chips span {
  font-size: 10.5px; font-weight: 600; color: #2481cc;
  background: rgba(36,129,204,.13); border-radius: 999px; padding: 5px 10px;
}
.phone .pad { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 16px; }
.phone .pad i {
  height: 32px; border-radius: 9px; background: #f1f3f5; display: grid; place-items: center;
  font-style: normal; font-size: 14px; color: #05070a;
}
.phone .mainbtn {
  margin-top: 12px; height: 38px; border-radius: 11px;
  background: #2481cc; color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
}

/* section heads */
.sec h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(27px, 4.4vw, 42px); line-height: 1.02;
  letter-spacing: -.024em; margin: 0 0 14px; max-width: 22ch;
}
.sec .lede { margin: 0 0 30px; color: var(--muted); max-width: 54ch; font-size: 16.5px; }
.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand); margin: 0 0 12px;
}

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step {
  background: var(--site); border: 1px solid var(--line);
  border-radius: 15px; padding: 24px 22px;
}
.step b {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 600; margin-bottom: 15px;
}
.step h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.018em; }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* reach */
.reach { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rcard {
  border: 1px solid var(--line); border-radius: 15px; padding: 24px 22px; background: var(--site);
}
.rcard .big {
  font-family: var(--display); font-size: 52px; font-weight: 700;
  letter-spacing: -.035em; line-height: 1; color: var(--brand);
}
.rcard .big.asset { font-size: 34px; }
.rcard .cap { font-size: 14px; color: var(--muted); margin-top: 6px; }
.chipwrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chipwrap span {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  background: var(--sunk); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 7px;
}
.sec.alt .chipwrap span { background: var(--site); }

/* fees */
.fees { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.fee {
  border: 1px solid var(--line); border-radius: 15px; padding: 24px 22px; background: var(--site);
}
.fee .n { font-family: var(--display); font-size: 44px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.fee .n.zero { color: var(--ok); }
.fee .l { font-size: 14.5px; color: var(--muted); margin-top: 8px; }

/* trust list */
.trust { display: flex; flex-direction: column; }
.trust > div {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.trust > div:last-child { border-bottom: 0; }
.trust i {
  font-style: normal; color: var(--ok); font-weight: 700; font-size: 15px; line-height: 1.5;
}
.trust b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 3px; }
.trust p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* faq — native <details> so answers stay indexable when closed */
.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 19px 0; font-size: 16.5px; font-weight: 600;
  letter-spacing: -.014em; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after {
  content: "+"; margin-inline-start: auto; flex: none;
  font-size: 22px; font-weight: 400; line-height: 1.1; color: var(--brand);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--brand); }
.faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.faq details p {
  margin: -4px 0 20px; color: var(--muted); font-size: 15px;
  max-width: 62ch; padding-inline-end: 38px;
}

/* closing cta */
.close {
  background: linear-gradient(135deg, var(--g1), var(--g2) 55%, var(--g3));
  color: #fff; text-align: center;
}
.close h2 { color: #fff; margin-inline: auto; max-width: 20ch; }
.close .lede { color: rgba(255,255,255,.82); margin-inline: auto; }
.close .cta { background: #fff; color: var(--g2); box-shadow: 0 8px 22px rgba(0,0,0,.18); }

/* footer */
footer.site-foot {
  padding: 36px 40px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
}
footer.site-foot .links { display: flex; flex-wrap: wrap; gap: 16px; margin-inline-start: auto; }
footer.site-foot a, footer.site-foot span.l { font-size: 13.5px; color: var(--muted); text-decoration: none; }
footer.site-foot a:hover { color: var(--brand); }
footer.site-foot small { display: block; width: 100%; color: var(--faint); font-size: 12.5px; }

/* language picker in the footer — every locale reachable by a crawlable link */
.langgrid { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.langgrid a {
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  background: var(--sunk); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 9px;
}
.langgrid a:hover { color: var(--brand); border-color: var(--brand); }
.langgrid a[aria-current="page"] { color: var(--brand); font-weight: 600; }

/* ── responsive: what the wireframe's Mobile toggle simulated ── */
@media (max-width: 860px) {
  .herogrid { grid-template-columns: 1fr; gap: 32px; }
  .steps, .fees, .reach { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sec { padding: 44px 22px; }
  .nav, .langbar { padding-inline: 22px; }
  footer.site-foot { padding: 28px 22px; }
  footer.site-foot .links { margin-inline-start: 0; }
}
@media (min-width: 1200px) {
  .sec { padding: 84px 6vw; }
  .nav, .langbar, footer.site-foot { padding-inline: 6vw; }
  .inner { max-width: 1140px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── language picker: a globe pill in the header between the wordmark and the
      button. Opens a 5 x 5 grid of every language in its own script; on phones
      the grid drops below the header as a two-column sheet. ────────────────── */
.nav { position: relative; }
.nav .langpick { position: relative; }
.nav .cta-sm { margin-inline-start: auto; }
.langpick > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 13.5px/1 var(--sans); color: var(--ink);
  padding: 9px 11px 9px 10px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; background: var(--site);
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.langpick > summary::-webkit-details-marker { display: none; }
.langpick > summary::marker { content: ""; }
.langpick > summary > svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.langpick > summary .chev { width: 12px; height: 12px; transition: transform .16s ease; }
.langpick > summary .cnt {
  font-family: var(--mono); font-size: 10.5px; line-height: 1;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 13%, transparent);
  border-radius: 999px; padding: 4px 6px;
}
.langpick > summary:hover { color: var(--brand); border-color: var(--brand); }
.langpick > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.langpick[open] > summary { color: var(--brand); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--site)); }
.langpick[open] > summary .chev { transform: rotate(180deg); }

.langpanel {
  position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 60;
  display: grid; grid-template-columns: repeat(5, minmax(128px, max-content)); gap: 2px;
  background: var(--site); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px; box-shadow: 0 22px 54px rgba(15,22,32,.18);
  max-height: min(70vh, 560px); overflow-y: auto;
}
.langpanel a {
  font-size: 14px; color: var(--ink); text-decoration: none;
  padding: 10px 12px; border-radius: 10px; white-space: nowrap;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  transition: background .12s ease, color .12s ease;
}
.langpanel a:hover { background: var(--sunk); color: var(--brand); }
.langpanel a[aria-current="page"] {
  color: var(--brand); font-weight: 600; background: color-mix(in srgb, var(--brand) 9%, transparent);
}
.langpanel a[aria-current="page"]::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none;
}

/* ── reach: a compact dark band. One card. Stats on top, two exact grids
      below: 42 currencies = 14 x 3, 25 languages = 5 x 5. ───────────────────── */
.reach-band {
  background: radial-gradient(120% 90% at 85% 0%, #1b2440 0%, #0f1620 55%, #0b1017 100%);
  color: #eef2f8; padding-block: 56px;
}
.reach-band .kicker { color: #9aa3ff; }
.reach-band h2 { color: #fff; max-width: 24ch; margin-bottom: 22px; }
.reach-band .rcard.compact {
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09);
  padding: 22px 24px 24px; border-radius: 18px;
}
.reach-band .stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.reach-band .big {
  font-family: var(--display); font-weight: 700; font-size: 54px; line-height: .95; letter-spacing: -.04em;
  background: linear-gradient(120deg, #7cb4ff 0%, #8b93f0 45%, #b08cff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.reach-band .cap { color: #b7c1d1; font-size: 14px; line-height: 1.45; margin-top: 6px; max-width: 34ch; }
.reach-band .readout {
  margin: 10px 0 0; min-height: 1.3em;
  font-family: var(--display); font-weight: 700; font-size: 21px;
  letter-spacing: -.02em; line-height: 1.1; color: rgba(255,255,255,.3);
  transition: color .14s ease;
}
.reach-band .readout.on { color: #fff; }

.reach-band .chipwrap { display: grid; margin: 0; }
.reach-band .chipwrap.ccys { grid-template-columns: repeat(14, 1fr); gap: 5px; }
.reach-band .chipwrap.langs { grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }

.reach-band .chipwrap span {
  display: flex; align-items: baseline; justify-content: center;
  font-family: var(--sans); font-weight: 500; color: #dfe6f0; cursor: default; white-space: nowrap;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.reach-band .chipwrap.ccys span { gap: 4px; font-size: 12.5px; padding: 7px 4px; }
.reach-band .chipwrap.ccys span i { font-style: normal; font-weight: 600; color: #9aa3ff; font-size: 12.5px; }
.reach-band .chipwrap.langs span { align-items: center; font-size: 15px; padding: 8px 6px; }
.reach-band .chipwrap span:hover, .reach-band .chipwrap span:focus-visible {
  background: #fff; border-color: #fff; color: #0f1620; outline: none;
}
.reach-band .chipwrap span:hover i, .reach-band .chipwrap span:focus-visible i { color: var(--g2); }

@media (max-width: 1000px) {
  .reach-band .chipwrap.ccys { grid-template-columns: repeat(7, 1fr); }         /* 7 x 6 */
  .reach-band .chipwrap.langs span { font-size: 14px; }
}
@media (max-width: 760px) {
  .reach-band { padding-block: 40px; }
  .reach-band .stats { grid-template-columns: 1fr; gap: 14px; }
  .reach-band .big { font-size: 44px; }
  .reach-band .readout { font-size: 18px; }
  .reach-band .chipwrap.ccys { grid-template-columns: repeat(6, 1fr); gap: 4px; }   /* 6 x 7 */
  .reach-band .chipwrap.ccys span i { display: none; }
  .reach-band .chipwrap.langs { grid-template-columns: repeat(2, 1fr); }
  .reach-band .chipwrap.langs span { font-size: 14px; }
}

@media (max-width: 900px) {
  .langpanel { grid-template-columns: repeat(3, minmax(128px, 1fr)); }
}
@media (max-width: 760px) {
  .nav .langpick { position: static; }
  .langpanel {
    inset-inline: 12px; top: calc(100% + 6px);
    grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: min(64vh, 520px);
  }
  .langpanel a { font-size: 14px; padding: 11px 12px; white-space: normal; }
}
@media (max-width: 560px) {
  /* three things must fit in 375px: wordmark, button, globe. Everything tightens. */
  .nav { padding-inline: 14px; gap: 8px; }
  .nav > a:first-child .lk { font-size: 15.5px !important; }
  .nav .cta-sm { font-size: 12.5px; padding: 10px 12px; }
  .langpick > summary { padding: 7px 8px; gap: 4px; }
  .langpick > summary .cur { display: none; }
  .langpick > summary .cnt { display: none; }
  .langpanel { inset-inline: 8px; }
}

/* ── settlement asset marks beside USDC / USDT ───────────────────────────── */
.rcard .big.asset { display: inline-flex; align-items: center; gap: .3em; }
.rcard .big.asset .coin { width: .95em; height: .95em; flex: none; }

/* ── "How it works" cards: lift on hover, number badge takes the gradient ──── */
.step {
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.step b { transition: background .16s ease, transform .16s ease; }
.step:hover {
  transform: translateY(-4px); border-color: var(--brand);
  box-shadow: 0 16px 36px rgba(79,90,212,.14);
}
.step:hover b {
  background: linear-gradient(135deg, var(--g1), var(--g2) 55%, var(--g3));
  transform: scale(1.08);
}
.step:hover h3 { color: var(--brand); }
.step h3 { transition: color .16s ease; }
@media (prefers-reduced-motion: reduce) { .step, .step b { transition: none; } .step:hover { transform: none; } }

/* ── step cards reveal a fuller explanation on hover (tap on touch) ──────── */
.step { cursor: default; outline: none; }
.step .more {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .22s ease, opacity .18s ease, margin-top .22s ease;
  margin-top: 0;
}
.step .more > p {
  overflow: hidden; margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.55;
  border-top: 1px solid var(--line); padding-top: 0;
  transition: padding-top .22s ease;
}
.step:hover .more, .step:focus-within .more, .step.is-open .more { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
.step:hover .more > p, .step:focus-within .more > p, .step.is-open .more > p { padding-top: 12px; }
.step.is-open { border-color: var(--brand); }
.step.is-open h3 { color: var(--brand); }
.step:focus-visible { border-color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .step .more, .step .more > p { transition: none; } }

/* ── typography system for headings ─────────────────────────────────────────
   One display face for every heading: Instrument Serif, regular weight only,
   with a single emphasised word per heading. Latin emphasis is italic; on the
   Chinese pages, where italics do not exist, emphasis is the brand colour.
   Body copy, UI labels and the wordmark stay IBM Plex Sans. ──────────────── */
:root { --display: "Instrument Serif", Georgia, "Times New Roman", serif; }

.hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(44px, 7.6vw, 82px); line-height: .98; letter-spacing: -.012em; max-width: 16ch;
}
.hero .sub {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(22px, 3.2vw, 31px); letter-spacing: -.008em;
}
.sec h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(32px, 4.8vw, 52px); line-height: 1.02; letter-spacing: -.012em; max-width: 24ch;
}
.hero h1 em, .sec h2 em { font-style: italic; font-weight: 400; }
html[lang^="zh"] .hero h1 em, html[lang^="zh"] .sec h2 em { font-style: normal; color: var(--brand); }
.close h2 em { color: #fff; }

/* the other display elements follow the same face at its only weight */
.fee .n, .rcard .big, .reach-band .big, .reach-band .readout, .close h2 { font-family: var(--display); font-weight: 400; }
.reach-band .readout { font-style: italic; letter-spacing: -.01em; }
.fee .n { font-size: 50px; letter-spacing: -.02em; }
.reach-band .big { letter-spacing: -.03em; }
.rcard .big.asset { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; }   /* USDC / USDT are codes, not headings */

/* ── heading line-breaking ──────────────────────────────────────────────────
   One line wherever the width allows. Where a heading must wrap, the lines
   are balanced so a single word or character is never left alone on the last
   line. CJK headings break only between words (at spaces and punctuation),
   never mid-word, with an emergency break only if a run would overflow. ── */
h1, h2, h3, .hero .sub, .readout { text-wrap: balance; }
p, .cap, .lede, .step .more > p, .faq details p { text-wrap: pretty; }

.hero h1, .sec h2, .close h2 { max-width: none; }
.hero h1 { font-size: clamp(42px, 6.8vw, 76px); }
.sec h2  { font-size: clamp(30px, 4.4vw, 48px); }

html[lang^="zh"] :is(h1, h2, h3, .hero .sub, .readout, summary) {
  /* Chinese breaks between characters by design. keep-all forbids that, and in a narrow column it
     over-constrains until a full stop is stranded on a line of its own — the one thing Chinese
     typesetting really forbids. strict is the rule that matters. */
  word-break: normal; overflow-wrap: break-word; line-break: strict;
}
html[lang^="zh"] .hero h1 { font-size: clamp(36px, 5.8vw, 64px); }
html[lang^="zh"] .sec h2  { font-size: clamp(26px, 3.9vw, 44px); }

/* ── reach: two rows, one pattern. Each row = number | grid. ───────────────
   42 currencies = 7 x 6, 25 languages = 5 x 5, beside their own number. ──── */
.reach-band .rrow { display: grid; grid-template-columns: 236px 1fr; gap: 28px; align-items: start; }
.reach-band .rrow + .rrow { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.reach-band .stat { padding-top: 2px; }
.reach-band .big { font-size: 56px; }
.reach-band .cap { font-size: 13.5px; max-width: 22ch; }
.reach-band .readout { font-size: 19px; margin-top: 10px; min-height: 2.4em; }
.reach-band .chipwrap.ccys { grid-template-columns: repeat(7, 1fr); gap: 6px; }
.reach-band .chipwrap.langs { grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 0; }
.reach-band .chipwrap.ccys span { font-size: 13px; padding: 8px 6px; }
.reach-band .chipwrap.langs span { font-size: 15px; padding: 8px 6px; }
@media (max-width: 1000px) {
  .reach-band .chipwrap.ccys { grid-template-columns: repeat(6, 1fr); }              /* 6 x 7 */
  .reach-band .chipwrap.langs { grid-template-columns: repeat(5, 1fr); }
  .reach-band .chipwrap.langs span { font-size: 13.5px; }
}
@media (max-width: 760px) {
  .reach-band .rrow { grid-template-columns: 1fr; gap: 14px; }
  .reach-band .readout { min-height: 1.3em; }
  .reach-band .chipwrap.ccys { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .reach-band .chipwrap.langs { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .reach-band .chipwrap.langs span:last-child { grid-column: 1 / -1; }             /* 25 = 12 x 2 + one full-width */
}

/* ── strong Chinese typography: one heavy sans for every display element ── */
/* The full-width stops, taken from Noto Sans TC for BOTH Chinese variants, by explicit choice.
   Traditional centres 、。，：；！？ in the character cell and raises them off the baseline; the
   Mainland standard GB/T 15834 sets the comma and full stop in the lower left, on the baseline.
   Centred is the treatment we want on both pages, so the seven codepoints come from Noto Sans TC
   and nothing else does — every ideograph still resolves to Noto Sans SC on the Simplified pages,
   so the character forms stay Mainland forms. Self-hosted and subset to exactly those glyphs:
   4.1 kB for all three files, against 50 kB for Google's own subsets of the same font. Variable
   weight, so a stop in 800-weight display matches the heading it sits in and a stop in 400-weight
   body matches the sentence. */
@font-face { font-family: "TC stops"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/noto-tc-punct-a.woff2) format("woff2");
  unicode-range: U+3001, U+3002, U+FF0C, U+FF1A; }
@font-face { font-family: "TC stops"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/noto-tc-punct-b.woff2) format("woff2");
  unicode-range: U+FF01, U+FF1F; }
@font-face { font-family: "TC stops"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/noto-tc-punct-c.woff2) format("woff2");
  unicode-range: U+FF1B; }

html:root[lang="zh-Hant"] {
  --display: "TC stops", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --sans: "TC stops", "IBM Plex Sans", "Noto Sans TC", "PingFang TC", ui-sans-serif, system-ui, sans-serif;
}
html:root[lang="zh-Hans"] {
  --display: "TC stops", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
  --sans: "TC stops", "IBM Plex Sans", "Noto Sans SC", "PingFang SC", ui-sans-serif, system-ui, sans-serif;
}
html[lang^="zh"] :is(.hero h1, .sec h2, .close h2) {
  font-family: var(--display); font-weight: 800; letter-spacing: .01em; line-height: 1.16;
}
html[lang^="zh"] .hero h1 { font-size: clamp(36px, 5.6vw, 62px); }
/* Chinese + Latin in one heading (就在 Telegram 收款): a full CJK space reads as a
   hole at display sizes. Pull the word gaps in to roughly a quarter em, the
   conventional mixed-script spacing, without removing the break opportunity. */
html[lang^="zh"] :is(.hero h1, .sec h2, .close h2) { word-spacing: -.14em; }
html[lang^="zh"] .sec h2  { font-size: clamp(26px, 3.8vw, 42px); }
html[lang^="zh"] :is(.hero h1, .sec h2) em { font-style: normal; font-weight: 800; color: var(--brand); }
html[lang^="zh"] .close h2 em { color: #fff; }
html[lang^="zh"] .hero .sub { font-family: var(--display); font-style: normal; font-weight: 700; font-size: clamp(20px, 2.7vw, 27px); letter-spacing: .01em; }
html[lang^="zh"] :is(.reach-band .big, .fee .n, .rcard .big) { font-family: var(--display); font-weight: 800; font-style: normal; }
html[lang^="zh"] .reach-band .readout { font-family: var(--display); font-weight: 700; font-style: normal; letter-spacing: .01em; }
html[lang^="zh"] .step h3 { font-weight: 700; }

/* ── heading typography, final: heavy grotesque, set tight ─────────────────
   Inter Tight for every display element on the Latin pages; the Chinese pages
   keep Noto Sans 800 (their rules are more specific and stay in force). One
   accent word per heading in the brand colour — the one emphasis device that
   works identically in every script. ─────────────────────────────────────── */
:root { --display: "Inter Tight", "Inter", -apple-system, "SF Pro Display", "IBM Plex Sans", sans-serif; }

.hero h1 {
  font-family: var(--display); font-weight: 800; font-style: normal;
  font-size: clamp(40px, 6.2vw, 72px); line-height: 1.0; letter-spacing: -.035em;
}
.sec h2, .close h2 {
  font-family: var(--display); font-weight: 700; font-style: normal;
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.05; letter-spacing: -.03em;
}
.hero h1 em, .sec h2 em { font-style: normal; font-weight: inherit; color: var(--brand); }
.close h2 em { color: #fff; }
.hero .sub {
  font-family: var(--display); font-weight: 600; font-style: normal;
  font-size: clamp(20px, 2.8vw, 27px); letter-spacing: -.022em;
}
.fee .n, .rcard .big, .reach-band .big {
  font-family: var(--display); font-weight: 800; font-style: normal; letter-spacing: -.045em;
}
.reach-band .readout { font-family: var(--display); font-weight: 700; font-style: normal; letter-spacing: -.02em; }
.step h3 { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.022em; }

/* ── reach, final: a diptych. Two equal columns, each = number, caption,
      readout, then its grid. 6 x 7 currency tiles and 5 x 5 language tiles
      are sized to the same total height so both grids share a baseline. ── */
.reach-band .rcard.compact { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; }
.reach-band .rrow { display: block; }
.reach-band .rrow + .rrow {
  margin: 0; padding: 0; border-top: 0;
  border-inline-start: 1px solid rgba(255,255,255,.08); padding-inline-start: 28px;
}
.reach-band .stat { padding: 0 0 16px; }
.reach-band .big { font-size: 56px; }
.reach-band .cap { max-width: none; font-size: 13.5px; }
.reach-band .readout { min-height: 1.3em; margin-top: 8px; font-size: 19px; }
.reach-band .chipwrap.ccys { grid-template-columns: repeat(6, 1fr); gap: 6px; }   /* 42 = 6 x 7 */
.reach-band .chipwrap.langs { grid-template-columns: repeat(5, 1fr); gap: 6px; }  /* 25 = 5 x 5 */
.reach-band .chipwrap span { align-items: center; }
.reach-band .chipwrap.ccys span { min-height: 34px; padding: 0 4px; font-size: 12.5px; }
.reach-band .chipwrap.langs span {
  min-height: 50px; padding: 4px 6px; font-size: 14px; line-height: 1.2;
  white-space: normal; text-align: center;
}
@media (max-width: 1000px) {
  .reach-band .rcard.compact { grid-template-columns: 1fr; gap: 20px; }
  .reach-band .rrow + .rrow {
    border-inline-start: 0; padding-inline-start: 0;
    border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px;
  }
  .reach-band .chipwrap.ccys { grid-template-columns: repeat(7, 1fr); }            /* 7 x 6 */
  .reach-band .chipwrap.langs { grid-template-columns: repeat(5, 1fr); }
}

/* ── currency readout: name, then a sample amount in that currency's own
      convention. Both columns reserve two lines so the grids stay level. ── */
.reach-band .readout { min-height: 2.75em; }
.reach-band .readout .amt {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: 0; color: #b7c1d1;
}

/* ── captions under 42 / 25: readable, and the same reserved height in both
      columns so the grids below stay level however the lines wrap ────────── */
.reach-band .cap { font-size: 16.5px; line-height: 1.5; color: #c9d2df; margin-top: 8px; min-height: 3em; max-width: none; }
@media (max-width: 760px) { .reach-band .cap { min-height: 0; font-size: 15.5px; } }

/* ── currency readout: the symbol alone under the name, set as a mark ────── */
.reach-band .readout .amt {
  display: block; margin-top: 2px;
  font-family: var(--sans); font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: 0; color: #9aa3ff;
}

/* ── the page's own currency and language are pre-selected in the grids ──── */
.reach-band .readout { color: #fff; }   /* always showing a real value now, never a hint */

/* ── footer disclaimer line, on every page ──────────────────────────────── */
footer.site-foot .disc { width: 100%; margin: 6px 0 0; color: var(--faint); font-size: 12.5px; line-height: 1.6; max-width: 96ch; }
footer.site-foot .disc a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
footer.site-foot .disc a:hover { color: var(--brand); }

/* ── the whole disclaimer as small print in every footer (~8pt), in columns ── */
footer.site-foot .disc-full {
  width: 100%; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
  columns: 3; column-gap: 32px; font-size: 11px; line-height: 1.55; color: var(--faint);
}
footer.site-foot .disc-full h3 { font: 700 11px/1.4 var(--sans); color: var(--muted); margin: 0 0 3px; break-after: avoid; break-inside: avoid; }
footer.site-foot .disc-full p { margin: 0 0 8px; break-inside: avoid; }
footer.site-foot .disc-full h3 + p { break-before: avoid; }
footer.site-foot .disc-full strong { color: var(--muted); font-weight: 600; }
footer.site-foot .disc-full em { font-style: normal; color: var(--muted); }
footer.site-foot .disc-full a { color: var(--muted); }
@media (max-width: 1000px) { footer.site-foot .disc-full { columns: 2; } }
@media (max-width: 640px)  { footer.site-foot .disc-full { columns: 1; font-size: 11.5px; } }

/* ── footer small print: ~8pt, headings same size and only semi-bold, one
      highlighted title across the columns so the block is recognisable ──── */
footer.site-foot .disc-full { font-size: 10.5px; line-height: 1.5; }
footer.site-foot .disc-full h3 { font-size: 10.5px; font-weight: 600; color: var(--muted); margin: 0 0 2px; }
footer.site-foot .disc-full p { margin: 0 0 7px; }
footer.site-foot .disc-full strong { font-weight: 600; }
footer.site-foot .disc-title {
  column-span: all; margin: 0 0 10px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
}

/* ── footer disclaimer at 7pt ────────────────────────────────────────────── */
footer.site-foot .disc-full { font-size: 9.33px; line-height: 1.5; column-gap: 28px; }
footer.site-foot .disc-full h3 { font-size: 9.33px; }
footer.site-foot .disc-full p { margin: 0 0 6px; }
footer.site-foot .disc-title { font-size: 10px; }
@media (max-width: 640px) { footer.site-foot .disc-full { font-size: 10px; } }   /* phones can't go lower legibly */

/* ── footer disclaimer line at 5pt, same as the disclaimer page ──────────── */
footer.site-foot .disc { font-size: 6.67px; line-height: 1.5; max-width: none; margin-top: 8px; }
footer.site-foot .disc a { font-size: inherit; }

/* ── phones: final word on the reach grids (must stay last in this file, the
      ≤1000px tablet rule above would otherwise win at phone width too) ──── */
@media (max-width: 640px) {
  .reach-band .chipwrap.ccys { grid-template-columns: repeat(6, 1fr); gap: 4px; }        /* 42 = 6 x 7 */
  .reach-band .chipwrap.ccys span { min-height: 32px; padding: 0 2px; font-size: 12px; }
  .reach-band .chipwrap.ccys span i { display: none; }                                    /* code only; symbol is in the readout */
  .reach-band .chipwrap.langs { grid-template-columns: repeat(2, 1fr); gap: 5px; }        /* 25 = 12 x 2 + one full row */
  .reach-band .chipwrap.langs span { min-height: 40px; font-size: 14px; }
  .reach-band .chipwrap.langs span:last-child { grid-column: 1 / -1; }
}

/* ── footer disclaimer line: 7pt (5pt was tried and rejected as unreadable) ── */
footer.site-foot .disc { font-size: 9.33px; line-height: 1.55; }

/* Figures that carry a word ("1 tap"): Inter Tight's space is narrow and the
   tight tracking closes it up, so open the word gap back out. */
.fee .n { word-spacing: .22em; }

/* Bilingual lockup on Chinese pages: "TrueTransfer 直付". The Latin wordmark stays
   IBM Plex Sans 600; the Chinese name sits beside it in the CJK companion face at
   92% of the size so its strokes match Plex's weight, in ink, a quarter-em away. */
.lk .cn { font-family: var(--display); font-weight: 700; font-size: .81em; letter-spacing: .02em; color: var(--ink); margin-inline-start: .34em; white-space: nowrap; position: relative; top: -.02em; }
/* The nav button never breaks inside its label; with the bilingual lockup the row
   is wider, so let the button keep its width and the lockup give way instead. */
.nav .cta-sm { white-space: nowrap; flex: none; }
.nav > a:first-child { min-width: 0; }

/* ── Japanese, Korean, Thai: their own display faces and line-breaking rules ── */
html:root[lang="ja"] { --display: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; --sans: "IBM Plex Sans JP", "IBM Plex Sans", "Hiragino Sans", "Yu Gothic", sans-serif; }
html:root[lang="ko"] { --display: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --sans: "IBM Plex Sans KR", "IBM Plex Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
html:root[lang="th"] { --display: "IBM Plex Sans Thai", "Sukhumvit Set", "Thonburi", "Tahoma", sans-serif; --sans: "IBM Plex Sans Thai", "IBM Plex Sans", "Thonburi", "Tahoma", sans-serif; }
/* Indic, Arabic and Hebrew scripts: their own faces; tall matras and diacritics need looser leading and no negative tracking */
html:root[lang="hi"] { --display: "Noto Sans Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", "Nirmala UI", sans-serif; --sans: "Noto Sans Devanagari", "IBM Plex Sans", "Kohinoor Devanagari", "Nirmala UI", sans-serif; }
html:root[lang="pa"] { --display: "Noto Sans Gurmukhi", "Gurmukhi MN", "Gurmukhi Sangam MN", "Nirmala UI", sans-serif; --sans: "Noto Sans Gurmukhi", "IBM Plex Sans", "Gurmukhi MN", "Nirmala UI", sans-serif; }
html:root[lang="bn"] { --display: "Noto Sans Bengali", "Kohinoor Bangla", "Bangla Sangam MN", "Nirmala UI", sans-serif; --sans: "Noto Sans Bengali", "IBM Plex Sans", "Kohinoor Bangla", "Nirmala UI", sans-serif; }
html:root[lang="ar"], html:root[lang="fa"] { --display: "IBM Plex Sans Arabic", "SF Arabic", "Geeza Pro", "Segoe UI", sans-serif; --sans: "IBM Plex Sans Arabic", "IBM Plex Sans", "SF Arabic", "Geeza Pro", "Segoe UI", sans-serif; }
html:root[lang="he"] { --display: "IBM Plex Sans Hebrew", "SF Hebrew", "Arial Hebrew", "Segoe UI", sans-serif; --sans: "IBM Plex Sans Hebrew", "IBM Plex Sans", "SF Hebrew", "Arial Hebrew", "Segoe UI", sans-serif; }
html:is([lang="hi"], [lang="pa"], [lang="bn"], [lang="ar"], [lang="fa"], [lang="he"]) :is(.hero h1, .sec h2, .close h2) { font-family: var(--display); font-weight: 700; letter-spacing: 0; line-height: 1.22; }
html:is([lang="hi"], [lang="pa"], [lang="bn"], [lang="ar"], [lang="fa"], [lang="he"]) .hero h1 { font-size: clamp(32px, 5.4vw, 58px); }
html:is([lang="hi"], [lang="pa"], [lang="bn"], [lang="ar"], [lang="fa"], [lang="he"]) .sec h2 { font-size: clamp(24px, 3.6vw, 40px); }
html:is([lang="hi"], [lang="pa"], [lang="bn"], [lang="ar"], [lang="fa"], [lang="he"]) :is(.hero h1, .sec h2) em { font-style: normal; font-weight: 700; color: var(--brand); }
html:is([lang="hi"], [lang="pa"], [lang="bn"], [lang="ar"], [lang="fa"], [lang="he"]) .close h2 em { color: #fff; }
html:is([lang="hi"], [lang="pa"], [lang="bn"], [lang="ar"], [lang="fa"], [lang="he"]) .hero .sub { font-family: var(--display); font-style: normal; font-weight: 600; font-size: clamp(19px, 2.6vw, 26px); letter-spacing: 0; line-height: 1.35; }
html:is([lang="hi"], [lang="pa"], [lang="bn"], [lang="ar"], [lang="fa"], [lang="he"]) :is(.reach-band .big, .fee .n, .rcard .big) { font-family: var(--display); font-weight: 700; font-style: normal; letter-spacing: 0; }
html:is([lang="hi"], [lang="pa"], [lang="bn"], [lang="ar"], [lang="fa"], [lang="he"]) .reach-band .readout { font-family: var(--display); font-weight: 600; font-style: normal; letter-spacing: 0; }
html:is([lang="hi"], [lang="pa"], [lang="bn"], [lang="ar"], [lang="fa"], [lang="he"]) .step h3 { font-weight: 600; }
html:is([lang="hi"], [lang="pa"], [lang="bn"]) body, html:is([lang="hi"], [lang="pa"], [lang="bn"]) p { line-height: 1.75; }
html:is([lang="ar"], [lang="fa"], [lang="he"]) body, html:is([lang="ar"], [lang="fa"], [lang="he"]) p { line-height: 1.8; }
/* the demo keypad reads 1-2-3 left to right in every script, like a real phone */
[dir="rtl"] .pad { direction: ltr; }
html:is([lang="ja"], [lang="ko"]) :is(.hero h1, .sec h2, .close h2) { font-family: var(--display); font-weight: 800; letter-spacing: .01em; line-height: 1.18; }
html:is([lang="ja"], [lang="ko"]) .hero h1 { font-size: clamp(34px, 5.4vw, 60px); }
html:is([lang="ja"], [lang="ko"]) .sec h2  { font-size: clamp(25px, 3.7vw, 41px); }
html:is([lang="ja"], [lang="ko"]) :is(.hero h1, .sec h2) em { font-style: normal; font-weight: 800; color: var(--brand); }
html:is([lang="ja"], [lang="ko"]) .close h2 em { color: #fff; }
html:is([lang="ja"], [lang="ko"]) .hero .sub { font-family: var(--display); font-style: normal; font-weight: 700; font-size: clamp(19px, 2.6vw, 26px); letter-spacing: .01em; }
html:is([lang="ja"], [lang="ko"]) :is(.reach-band .big, .fee .n, .rcard .big) { font-family: var(--display); font-weight: 800; font-style: normal; }
html:is([lang="ja"], [lang="ko"]) .reach-band .readout { font-family: var(--display); font-weight: 700; font-style: normal; letter-spacing: .01em; }
html:is([lang="ja"], [lang="ko"]) .step h3 { font-weight: 700; }
html[lang="ja"] :is(h1, h2, h3, .hero .sub, .readout, summary) { word-break: normal; line-break: strict; overflow-wrap: anywhere; }
html[lang="ko"] :is(h1, h2, h3, .hero .sub, .readout, summary, p) { word-break: keep-all; overflow-wrap: anywhere; }
/* Thai: tall vowel and tone marks need more leading; the browser's dictionary breaks lines */
html[lang="th"] :is(.hero h1, .sec h2, .close h2) { font-family: var(--display); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
html[lang="th"] .hero h1 { font-size: clamp(32px, 5vw, 56px); }
html[lang="th"] .sec h2  { font-size: clamp(24px, 3.5vw, 38px); }
html[lang="th"] :is(.hero h1, .sec h2) em { font-style: normal; font-weight: 700; color: var(--brand); }
html[lang="th"] .close h2 em { color: #fff; }
html[lang="th"] .hero .sub { font-family: var(--display); font-style: normal; font-weight: 600; font-size: clamp(19px, 2.6vw, 26px); line-height: 1.4; }
html[lang="th"] :is(.reach-band .big, .fee .n, .rcard .big) { font-family: var(--display); font-weight: 700; font-style: normal; }
html[lang="th"] .reach-band .readout { font-family: var(--display); font-weight: 600; font-style: normal; }
html[lang="th"] body, html[lang="th"] p, html[lang="th"] li { line-height: 1.75; }
html[lang="th"] :is(h1, h2, h3, p, summary, .readout) { word-break: normal; line-break: normal; }


/* ══ TYPESETTING BY SCRIPT ══════════════════════════════════════════════════
   The same rules the Shops pages are held to, applied to the rest of the site. Negative tracking is
   a Latin device: it flatters a Latin headline and damages every script that joins its letters
   (Arabic, Persian), stacks marks above and below the line (Thai, Hindi, Bengali, Punjabi) or is
   drawn on a fixed body (Chinese, Japanese, Korean), where it pulls each glyph into its neighbour's
   marks. Those scripts also need more leading than a Latin cap-height measure leaves them. Setting
   this by script rather than per language means a language added later is already right. */
html:is([lang^="zh"], [lang^="ja"], [lang^="ko"], [lang^="th"], [lang^="hi"], [lang^="bn"],
        [lang^="pa"], [lang^="ar"], [lang^="he"], [lang^="fa"])
  :is(h1, h2, h3, h4, p, li, td, th, summary, figcaption, .sub, .lede, .readout, .big, .n,
      .cta, .cta-sm, .ghost, .eyebrow, .kicker, blockquote, dt, dd, label, button) {
  letter-spacing: 0;
}
/* 1.02 measures Latin cap height and leaves no room for anything drawn outside it. */
html:is([lang^="zh"], [lang^="ja"], [lang^="ko"]) :is(h1, h2, h3) { line-height: 1.24; }
html:is([lang^="hi"], [lang^="bn"], [lang^="pa"]) :is(h1, h2, h3) { line-height: 1.34; }
html:is([lang^="ar"], [lang^="he"], [lang^="fa"]) :is(h1, h2, h3) { line-height: 1.26; }
html[lang^="vi"] :is(h1, h2, h3) { line-height: 1.16; }  /* stacked tone marks need the headroom */
html:is([lang^="hi"], [lang^="bn"], [lang^="pa"]) :is(body, p, li) { line-height: 1.85; }
html:is([lang^="ar"], [lang^="he"], [lang^="fa"]) :is(body, p, li) { line-height: 1.8; }

/* Where a line may break. Korean has words and should not split one; Chinese and Japanese must not
   open a line with closing punctuation; the Indic scripts break at their own joins. */
html:is([lang^="hi"], [lang^="bn"], [lang^="pa"]) :is(h1, h2, h3, p, li, summary) {
  word-break: normal; overflow-wrap: break-word;
}
html:is([lang^="ar"], [lang^="he"], [lang^="fa"]) :is(h1, h2, h3, p, li, summary) {
  word-break: normal; overflow-wrap: break-word;
}
/* Nothing is justified anywhere: at these measures justification opens rivers, and nothing in this
   stylesheet asks for it. A blanket `text-align: start` used to sit here to enforce that, but it also
   overrode the sections that are centred on purpose — the closing block ended up with a left-aligned
   lede and a left-aligned PDF link inside a centred column. Paragraphs inherit their alignment from
   whatever block they are in, which is the correct default in every script; the typesetting check
   fails the build if justified text ever appears. */