/* cexah rebate — design system.
   Tokens first: every rule below references these, no raw colors. */

:root {
  /* Color: HSL components so alpha can be composed where needed. */
  --bg: 0 0% 100%;
  --surface: 210 40% 98%;
  --surface-2: 210 34% 95%;
  --ink: 216 44% 13%;
  --ink-2: 216 18% 34%;
  --ink-3: 216 13% 47%;
  --line: 210 26% 90%;
  --line-2: 210 20% 82%;
  /* --brand is the cexah mark blue (#4d82ff). It only carries large type and
     graphics: 3.9:1 on white passes AA for large text, not body text. */
  --brand: 226 100% 65%;
  --primary: 226 90% 52%;
  --primary-strong: 226 90% 44%;
  --primary-ink: 0 0% 100%;
  --primary-soft: 226 100% 96%;
  --primary-soft-ink: 226 60% 32%;
  --tint: 226 60% 98%;

  /* Type */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, "Songti SC", "Noto Serif SC", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-h1: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  --fs-h2: clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: .90625rem;
  --fs-xs: .8125rem;
  --fs-micro: .75rem;
  --fs-figure: clamp(2.5rem, 2rem + 2.4vw, 3.4rem);
  --fs-stat: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  --lh-tight: 1.18;
  --lh-body: 1.7;
  --tracking-micro: .06em;

  /* Space: 4px base scale */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Shape, elevation, motion */
  --r-sm: .375rem;
  --r-md: .625rem;
  --r-lg: 1rem;
  --r-full: 999px;
  --shadow-1: 0 1px 2px hsl(var(--ink) / .05);
  --shadow-2: 0 2px 4px hsl(var(--ink) / .04), 0 12px 28px -16px hsl(var(--ink) / .22);
  --shadow-cta: 0 8px 18px -10px hsl(var(--primary) / .6);
  --ring: 0 0 0 3px hsl(var(--primary) / .35);
  --t-fast: 140ms cubic-bezier(.2, 0, 0, 1);
  --t-med: 220ms cubic-bezier(.2, 0, 0, 1);

  --measure: 42rem;
  --max: 68rem;
  --header-offset: 5.25rem;
}

/* Native UI (scrollbars, form controls, the page background before CSS lands)
   follows the same three states as the tokens. */
:root { color-scheme: light dark; }
:root:has(#theme-light:checked) { color-scheme: light; }
:root:has(#theme-dark:checked) { color-scheme: dark; }

/* Two ways to be dark: the reader's own system, or the header switch. The token
   list below is therefore written twice on purpose — CSS cannot share one block
   between a @media branch and a :has() branch. Change one, change the other. */
@media (prefers-color-scheme: dark) {
  :root:not(:has(#theme-light:checked)) {
    --bg: 216 34% 7%;
    --surface: 216 26% 11%;
    --surface-2: 216 22% 15%;
    --ink: 210 33% 94%;
    --ink-2: 212 18% 74%;
    --ink-3: 212 14% 61%;
    --line: 216 18% 20%;
    --line-2: 216 16% 28%;
    --brand: 226 100% 72%;
    --primary: 226 100% 74%;
    --primary-strong: 226 100% 84%;
    --primary-ink: 226 45% 10%;
    --primary-soft: 226 45% 18%;
    --primary-soft-ink: 226 95% 87%;
    --tint: 226 32% 13%;
    --shadow-1: 0 1px 2px hsl(0 0% 0% / .5);
    --shadow-2: 0 2px 4px hsl(0 0% 0% / .4), 0 16px 32px -18px hsl(0 0% 0% / .8);
    --shadow-cta: 0 8px 18px -10px hsl(var(--primary) / .5);
  }
}

:root:has(#theme-dark:checked) {
  --bg: 216 34% 7%;
  --surface: 216 26% 11%;
  --surface-2: 216 22% 15%;
  --ink: 210 33% 94%;
  --ink-2: 212 18% 74%;
  --ink-3: 212 14% 61%;
  --line: 216 18% 20%;
  --line-2: 216 16% 28%;
  --brand: 226 100% 72%;
  --primary: 226 100% 74%;
  --primary-strong: 226 100% 84%;
  --primary-ink: 226 45% 10%;
  --primary-soft: 226 45% 18%;
  --primary-soft-ink: 226 95% 87%;
  --tint: 226 32% 13%;
  --shadow-1: 0 1px 2px hsl(0 0% 0% / .5);
  --shadow-2: 0 2px 4px hsl(0 0% 0% / .4), 0 16px 32px -18px hsl(0 0% 0% / .8);
  --shadow-cta: 0 8px 18px -10px hsl(var(--primary) / .5);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: hsl(var(--bg));
  color: hsl(var(--ink));
  font: var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* ---------- layout ---------- */

.shell, main {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

section { margin-block: var(--sp-7); }
section:first-of-type { margin-top: var(--sp-6); }

/* Anchored sections must clear the sticky header, or the nav lands on the
   heading instead of below it. */
[id] { scroll-margin-top: var(--header-offset); }

/* ---------- type ---------- */

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -.015em;
  margin: var(--sp-3) 0 var(--sp-4);
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -.005em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

p { margin: 0 0 var(--sp-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 650; color: hsl(var(--ink)); }

a { color: hsl(var(--primary)); text-underline-offset: 3px; transition: color var(--t-fast); }
a:hover { color: hsl(var(--primary-strong)); }
a:focus-visible { outline: 3px solid hsl(var(--primary) / .55); outline-offset: 3px; border-radius: var(--r-sm); }

code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: hsl(var(--surface-2));
  border: 1px solid hsl(var(--line));
  border-radius: var(--r-sm);
  padding: .1em .4em;
}

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 650;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: hsl(var(--ink-3));
  margin: 0;
}

.lead { font-size: var(--fs-lead); line-height: 1.6; color: hsl(var(--ink-2)); margin: 0; }

.as-of, .dash-key, .cta-note, .code-line, .channel-tag, .tiny, .scroll-hint, .hero-meta {
  color: hsl(var(--ink-3));
  font-size: var(--fs-xs);
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: hsl(var(--bg) / .88);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid hsl(var(--line));
}

.site-header > .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: nowrap;
  padding-block: var(--sp-3);
}

.brand {
  margin: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-md);
  transition: opacity var(--t-fast);
}
.brand-link:hover { opacity: .82; }
.brand-link:focus-visible { outline: 3px solid hsl(var(--primary) / .55); outline-offset: 3px; }

/* The official lockup ships in two inkings; pick one per color scheme.
   The SVG carries generous internal padding, so display size is set here
   rather than trusting the intrinsic box. Both dark paths are listed because
   one comes from the system and one from the header switch. */
.logo-img { display: block; flex: none; width: 126px; height: 50px; }
img.logo-img[src="logo-dark.svg"] { display: none; }
.footer-brand .logo-img { width: 104px; height: 42px; }
@media (min-width: 60rem) {
  .brand .logo-img { width: 172px; height: 69px; }
}
@media (prefers-color-scheme: dark) {
  :root:not(:has(#theme-light:checked)) img.logo-img[src="logo.svg"] { display: none; }
  :root:not(:has(#theme-light:checked)) img.logo-img[src="logo-dark.svg"] { display: block; }
}
:root:has(#theme-dark:checked) img.logo-img[src="logo.svg"] { display: none; }
:root:has(#theme-dark:checked) img.logo-img[src="logo-dark.svg"] { display: block; }

/* ---------- theme switch (no script: radios + :has) ---------- */

.theme-toggle {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid hsl(var(--line));
  border-radius: var(--r-full);
  background: hsl(var(--surface));
}
.theme-toggle input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.theme-toggle label {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1;
  color: hsl(var(--ink-3));
  padding: .35rem .5rem;
  border-radius: var(--r-full);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.theme-toggle label:hover { color: hsl(var(--ink)); }
.theme-toggle .tt-icon { font-size: var(--fs-xs); line-height: 1; }
.theme-toggle input:checked + label {
  color: hsl(var(--primary-soft-ink));
  background: hsl(var(--primary-soft));
}
.theme-toggle input:focus-visible + label {
  outline: 3px solid hsl(var(--primary) / .55);
  outline-offset: 1px;
}
.tt-text { display: inline; }
@media (max-width: 47.9375rem) {
  /* The header row is tight on a phone: keep the glyph, drop the word. */
  .tt-text { display: none; }
}

.header-tag {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .02em;
  color: hsl(var(--primary-soft-ink));
  background: hsl(var(--primary-soft));
  border-radius: var(--r-full);
  padding: .3rem .7rem;
}

/* Zero-JS section navigation: one scrollable row on narrow screens instead of
   a hamburger that would need a script. */
.site-nav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--sp-1);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: none;
  color: hsl(var(--ink-2));
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  padding: .3rem .65rem;
  border-radius: var(--r-full);
  transition: color var(--t-fast), background var(--t-fast);
}
.site-nav a:hover { color: hsl(var(--primary)); background: hsl(var(--tint)); }
.site-nav a:focus-visible { outline: 3px solid hsl(var(--primary) / .55); outline-offset: 2px; }

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

.hero {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
  margin-block: var(--sp-7) var(--sp-8);
}

.hero-copy { min-width: 0; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-xs);
  color: hsl(var(--ink-3));
}

/* The honest version of a "we track N exchanges" stat bar: it also states how
   much of the data is still unverified. */
.stat-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid hsl(var(--line));
}
.stat-strip li { display: grid; gap: var(--sp-1); min-width: 0; }
.stat-strip strong {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--ink));
}
.stat-strip span { font-size: var(--fs-xs); color: hsl(var(--ink-3)); }

.value-card {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--sp-5);
}

.value-card > * { max-width: none; }

.vc-label {
  font-size: var(--fs-micro);
  font-weight: 650;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: hsl(var(--ink-3));
  margin: 0 0 var(--sp-3);
}

.vc-figure {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
}

.vc-num {
  font-family: var(--font-display);
  font-size: var(--fs-figure);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--brand));
}

.vc-unit { font-size: var(--fs-sm); color: hsl(var(--ink-2)); }

.vc-sub { font-size: var(--fs-sm); color: hsl(var(--ink-2)); margin: 0 0 var(--sp-4); }

.vc-code {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: hsl(var(--ink-3));
  margin: 0 0 var(--sp-4);
}
.vc-code code { font-size: var(--fs-sm); letter-spacing: .02em; }

.vc-note { font-size: var(--fs-xs); color: hsl(var(--ink-3)); margin: var(--sp-3) 0 0; }

/* The counterfactual is the page's strongest claim, so it gets its own band
   rather than hiding inside a paragraph. */
.vc-why {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: hsl(var(--primary-soft-ink));
  background: hsl(var(--primary-soft));
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
}

/* Rebate arithmetic: a percentage of money the reader already spent, so it
   needs no exchange fee figure to be stated honestly. */
.math-title {
  font-size: var(--fs-sm);
  font-weight: 650;
  margin: var(--sp-5) 0 var(--sp-3);
}
/* Direct vs through-this-page. The rate column says "same schedule" on purpose:
   the difference is the rebate, never the price. */
.direct-vs-linked { width: 100%; border-collapse: collapse; }
.direct-vs-linked th, .direct-vs-linked td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid hsl(var(--line));
  font-size: var(--fs-sm);
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
}
.direct-vs-linked thead th {
  font-size: var(--fs-micro);
  font-weight: 650;
  color: hsl(var(--ink-3));
  white-space: nowrap;
}
.direct-vs-linked tbody th { font-weight: 650; color: hsl(var(--ink)); }
.direct-vs-linked tbody tr:last-child > * { border-bottom: 0; }
.direct-vs-linked .is-us { color: hsl(var(--primary-soft-ink)); background: hsl(var(--primary-soft) / .5); }

.rebate-math { width: 100%; border-collapse: collapse; }
.rebate-math th, .rebate-math td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid hsl(var(--line));
  font-size: var(--fs-sm);
}
.rebate-math thead th {
  font-size: var(--fs-micro);
  font-weight: 650;
  color: hsl(var(--ink-3));
  text-align: right;
  white-space: nowrap;
}
.rebate-math td.col-text { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.rebate-math td.col-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: hsl(var(--primary));
}
/* Only the rebate column is ours to emphasise: the fee you pay is the same either way. */
.rebate-math td.col-year { font-weight: 400; color: hsl(var(--ink-2)); }
.rebate-math td.col-net { color: hsl(var(--ink)); }
.rebate-math tbody tr:last-child > * { border-bottom: 0; }
.math-note { font-size: var(--fs-xs); color: hsl(var(--ink-3)); margin: var(--sp-3) 0 var(--sp-5); }

/* ---------- buttons ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--primary-strong)));
  color: hsl(var(--primary-ink));
  text-decoration: none;
  font-weight: 650;
  font-size: var(--fs-body);
  letter-spacing: .01em;
  padding: .875rem 1.4rem;
  min-height: 48px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-cta);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.cta:hover { color: hsl(var(--primary-ink)); filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 12px 22px -10px hsl(var(--primary) / .65); }
.cta:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.cta:focus-visible { outline: 3px solid hsl(var(--primary) / .6); outline-offset: 3px; }
.cta-block { display: flex; width: 100%; }
.cta-arrow { transition: transform var(--t-fast); }
.cta:hover .cta-arrow { transform: translateX(2px); }

/* ---------- table ---------- */

.table-card {
  border: 1px solid hsl(var(--line));
  border-radius: var(--r-lg);
  background: hsl(var(--bg));
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: hsl(var(--surface));
  border-bottom: 1px solid hsl(var(--line));
}

.table-head p { margin: 0; font-size: var(--fs-xs); color: hsl(var(--ink-3)); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: hsl(var(--ink-2));
  background: hsl(var(--bg));
  border: 1px solid hsl(var(--line));
  border-radius: var(--r-full);
  padding: .25rem .6rem;
}
.chip::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: var(--r-full);
  background: hsl(var(--ink-3));
}
.chip[data-state="pending"] { color: hsl(var(--primary-soft-ink)); background: hsl(var(--primary-soft)); border-color: transparent; }
.chip[data-state="pending"]::before { background: hsl(var(--primary)); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-head .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }

/* Column count varies with what has been verified, so layout is automatic. */
table.compare { width: 100%; border-collapse: collapse; min-width: 46rem; font-size: var(--fs-sm); }
caption { caption-side: top; text-align: left; }

table.compare th, table.compare td {
  padding: var(--sp-4);
  text-align: right;
  vertical-align: middle;
  border-bottom: 1px solid hsl(var(--line));
  overflow-wrap: break-word;
}
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: hsl(var(--tint)); }
tbody tr:last-child > * { border-bottom: 0; }

thead th {
  background: hsl(var(--surface));
  font-size: var(--fs-micro);
  font-weight: 650;
  letter-spacing: .02em;
  color: hsl(var(--ink-3));
  white-space: nowrap;
}

table.compare th.col-ex { text-align: left; white-space: nowrap; }
table.compare th[scope="row"].col-ex { font-weight: 650; font-size: var(--fs-body); color: hsl(var(--ink)); }
.ex-icon { width: 26px; height: 26px; border-radius: 7px; vertical-align: middle; margin-right: var(--sp-3); }
table.compare th.col-text, table.compare td.col-text { text-align: left; }
table.compare .col-num { font-family: var(--font-mono); font-size: .86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The channel's own column gets a quiet highlight so the eye lands there. */
table.compare .col-hl { background: hsl(var(--primary-soft) / .55); font-weight: 700; }
thead .col-hl { color: hsl(var(--primary-soft-ink)); }

.row-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--primary-strong)));
  color: hsl(var(--primary-ink));
  text-decoration: none;
  font-weight: 650;
  font-size: var(--fs-xs);
  padding: .45rem .7rem;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
  white-space: nowrap;
  transition: filter var(--t-fast), transform var(--t-fast);
}
.row-cta:hover { color: hsl(var(--primary-ink)); filter: brightness(1.07); transform: translateY(-1px); }
.row-cta:focus-visible { outline: 3px solid hsl(var(--primary) / .6); outline-offset: 2px; }
.row-cta-go { letter-spacing: .01em; }
.cell-rate {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: hsl(var(--ink-2));
  margin-bottom: .3rem;
}
.cell-note { display: block; font-size: var(--fs-micro); font-weight: 400; color: hsl(var(--ink-3)); margin-top: .3rem; }

/* Badges restate a verified field only; pending tone marks what we could not
   confirm about our own link. */
.ex-badges { display: block; white-space: normal; margin-top: .3rem; }
.badge {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.4;
  color: hsl(var(--ink-2));
  background: hsl(var(--surface-2));
  border-radius: var(--r-full);
  padding: .1rem .5rem;
  margin-right: .25rem;
}
.badge[data-tone="pending"] {
  color: hsl(var(--primary-soft-ink));
  background: hsl(var(--primary-soft));
}

.dash { font-weight: 700; color: hsl(var(--ink-3)); }
.source-link { white-space: nowrap; }

/* ---------- lists ---------- */

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 var(--sp-5); }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: var(--sp-4);
  max-width: var(--measure);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .1em;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--r-full);
  background: hsl(var(--primary-soft));
  color: hsl(var(--primary-soft-ink));
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plain, .terms { padding-left: 1.15rem; margin: 0; }
.plain li, .terms li { margin-bottom: var(--sp-3); max-width: var(--measure); }
.terms { max-width: 46rem; list-style: none; padding-left: 0; }
.terms li {
  position: relative;
  padding: var(--sp-4);
  border: 1px solid hsl(var(--line));
  border-radius: var(--r-md);
  background: hsl(var(--surface));
  margin-bottom: var(--sp-3);
}
.terms li strong { display: block; margin-bottom: var(--sp-1); }

/* ---------- head-to-head cards ---------- */

.vs-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.vs-card {
  border: 1px solid hsl(var(--line));
  border-radius: var(--r-lg);
  background: hsl(var(--bg));
  padding: var(--sp-4);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.vs-card:hover { border-color: hsl(var(--line-2)); box-shadow: var(--shadow-2); transform: translateY(-2px); }

.vs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  font-weight: 650;
}
.vs-side { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.vs-side .ex-icon { margin-right: 0; }
.vs-word { font-size: var(--fs-micro); font-weight: 600; color: hsl(var(--ink-3)); text-transform: lowercase; }

.vs-rows { margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-3); }
.vs-row dt { font-size: var(--fs-micro); color: hsl(var(--ink-3)); margin-bottom: .15rem; }
.vs-row dd {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.vs-row dd .num:first-child { text-align: left; }
.vs-row dd .num:last-child { text-align: right; }
.vs-sep { font-family: var(--font-body); font-size: var(--fs-micro); color: hsl(var(--ink-3)); }

.vs-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: 0; }
.vs-cta-side { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); min-width: 0; }
.vs-cta-side .vs-side { font-size: var(--fs-xs); font-weight: 600; }
.vs-cta-side .cell-rate { margin-bottom: 0; }
/* The shared CTA wording is longer than a pill in a two-up card, so it wraps
   instead of forcing the card wider. */
.vs-cta .row-cta { justify-content: center; white-space: normal; text-align: center; line-height: 1.35; }

/* ---------- earnings disclosure & FAQ ---------- */

.gate-rules { margin: var(--sp-5) 0 0; border-top: 1px solid hsl(var(--line)); }
.gate-rules > div {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid hsl(var(--line));
}
.gate-rules dt { font-weight: 650; font-size: var(--fs-sm); }
.gate-rules dd { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: hsl(var(--ink-2)); }
@media (min-width: 48rem) {
  .gate-rules > div {
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: baseline;
  }
}

/* Native details/summary keeps the accordion JavaScript-free. */
.faq { display: grid; gap: var(--sp-3); }
.faq details {
  border: 1px solid hsl(var(--line));
  border-radius: var(--r-md);
  background: hsl(var(--surface));
  transition: border-color var(--t-fast);
}
.faq details[open] { border-color: hsl(var(--line-2)); background: hsl(var(--bg)); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-lead);
  line-height: 1;
  color: hsl(var(--ink-3));
}
.faq details[open] summary { border-bottom: 1px solid hsl(var(--line)); border-radius: var(--r-md) var(--r-md) 0 0; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { background: hsl(var(--tint)); }
.faq summary:focus-visible { outline: 3px solid hsl(var(--primary) / .55); outline-offset: 2px; }
.faq details p {
  margin: 0;
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: hsl(var(--ink-2));
}

/* ---------- panels ---------- */

.note-panel {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

.legal {
  border-top: 1px solid hsl(var(--line));
  padding-top: var(--sp-5);
  margin-top: var(--sp-8);
}
.legal h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-micro); color: hsl(var(--ink-3)); }
.legal p { font-size: var(--fs-xs); line-height: 1.65; color: hsl(var(--ink-2)); max-width: 58rem; margin-bottom: var(--sp-3); }
.legal p strong { color: hsl(var(--ink)); }

/* ---------- exchange detail pages ---------- */

/* The exchange's own icon sits inline with the headline, so the name is stated
   once. */
.ex-h1 { display: flex; align-items: flex-start; gap: var(--sp-4); }
.ex-h1 .ex-icon { flex: none; width: 44px; height: 44px; border-radius: 11px; margin: .4rem 0 0; }

.fact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
}
.fact {
  border: 1px solid hsl(var(--line));
  border-radius: var(--r-md);
  background: hsl(var(--surface));
  padding: var(--sp-4);
}
.fact dt {
  font-size: var(--fs-micro);
  letter-spacing: .02em;
  color: hsl(var(--ink-3));
  margin-bottom: var(--sp-1);
}
.fact dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-lead);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.source-line { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: hsl(var(--ink-3)); }

/* The subject column is marked in the header; the leading value in each row is
   marked in the cell. Both are facts about this page's own set, not rankings. */
table.pair-table th.col-metric { text-align: left; width: 1%; }
table.pair-table tbody th {
  text-align: left;
  font-weight: 600;
  color: hsl(var(--ink-2));
  white-space: nowrap;
  width: 1%;
}
table.pair-table thead th.col-ex { text-align: center; white-space: normal; min-width: 7rem; }
table.pair-table thead th.col-ex .ex-icon { display: block; margin: 0 auto var(--sp-1); }
table.pair-table thead th.is-this { background: hsl(var(--primary-soft)); }
table.pair-table thead th.is-this a { color: hsl(var(--primary-soft-ink)); }
table.pair-table .is-lead {
  font-weight: 700;
  color: hsl(var(--primary));
  background: hsl(var(--primary-soft) / .45);
}
table.pair-table td.is-this { background: hsl(var(--primary-soft) / .28); }
table.pair-table td.is-this.is-lead { background: hsl(var(--primary-soft) / .55); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-5) 0 0; }
.cta-quiet {
  background: hsl(var(--bg));
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--line-2));
  box-shadow: none;
}
.cta-quiet:hover { color: hsl(var(--primary-strong)); background: hsl(var(--tint)); filter: none; transform: none; }

/* Tier ladder on the agency page. */
.tier-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tier-table th, .tier-table td {
  padding: var(--sp-4);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid hsl(var(--line));
}
.tier-table thead th {
  font-size: var(--fs-micro);
  font-weight: 650;
  color: hsl(var(--ink-3));
  white-space: nowrap;
}
.tier-table tbody th { font-weight: 650; }
.tier-table tbody tr:last-child > * { border-bottom: 0; }
.tier-table .is-us { background: hsl(var(--primary-soft) / .5); }
.tier-table .is-us strong { color: hsl(var(--primary)); }

/* Secondary action: navigation, not the affiliate button, so it must not look
   like one. */
.row-cta-ghost {
  background: hsl(var(--bg));
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--line-2));
  box-shadow: none;
}
.row-cta-ghost:hover { color: hsl(var(--primary-strong)); background: hsl(var(--tint)); filter: none; }

.vs-side a { display: inline-flex; align-items: center; gap: var(--sp-2); color: inherit; text-decoration: none; }
.vs-side a:hover { color: hsl(var(--primary)); text-decoration: underline; }

.cell-detail {
  display: block;
  margin-top: .4rem;
  font-size: var(--fs-micro);
  color: hsl(var(--ink-3));
  text-decoration: none;
  white-space: nowrap;
}
.cell-detail:hover { color: hsl(var(--primary)); text-decoration: underline; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid hsl(var(--line));
  background: hsl(var(--surface));
  margin-top: var(--sp-8);
}
.site-footer > .shell { padding-block: var(--sp-5) var(--sp-6); }
.site-footer p { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); color: hsl(var(--ink-3)); }
.footer-brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: hsl(var(--ink)); font-weight: 700; }

/* ---------- a11y helpers ---------- */

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -4rem;
  z-index: 20;
  background: hsl(var(--primary));
  color: hsl(var(--primary-ink));
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.scroll-hint { display: none; margin: 0 0 var(--sp-2); }

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

@media (max-width: 47.9375rem) {
  .scroll-hint { display: block; }

  /* The theme switch stays on the logo row; the anchor nav gets a full-width
     second row so it does not collapse to one visible link. */
  .site-header > .shell { flex-wrap: wrap; }
  .site-nav { order: 3; flex-basis: 100%; }
  :root { --header-offset: 7.5rem; }

  /* The nav row scrolls, so fade its end to hint that more links follow. */
  .site-nav {
    mask-image: linear-gradient(90deg, hsl(0 0% 0%) calc(100% - 1.5rem), transparent);
    -webkit-mask-image: linear-gradient(90deg, hsl(0 0% 0%) calc(100% - 1.5rem), transparent);
  }

  /* Keep the exchange name visible while the fee columns scroll sideways. */
  th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: hsl(var(--bg));
    box-shadow: 1px 0 0 hsl(var(--line));
  }
  tbody tr:hover th[scope="row"] { background: hsl(var(--tint)); }
  .cta-block { width: 100%; }

  /* Four numeric columns and a three-column contrast have to breathe less here. */
  .rebate-math th, .rebate-math td,
  .direct-vs-linked th, .direct-vs-linked td { padding: var(--sp-2) var(--sp-3); }
  .rebate-math thead th { white-space: normal; }
  .rebate-math th, .rebate-math td { font-size: var(--fs-xs); }

  /* Four text columns cannot fit 390px, so this one scrolls sideways. */
  .tier-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 46rem; }
}

@media (min-width: 60rem) {
  :root { --header-offset: 6.5rem; }
  .hero {
    grid-template-columns: minmax(0, 1.4fr) minmax(20rem, .9fr);
    gap: var(--sp-8);
    align-items: center;
  }
  .value-card { padding: var(--sp-6); }
  .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
  .fact-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .cta:hover { transform: none; }
}