@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Playfair+Display:wght@400;600&display=swap");
/* Binary Reviews - base layer. Everything reads from tokens, never raw hex. */
*{box-sizing:border-box}
body.br{margin:0;background:var(--color-surface-page);color:var(--color-ink);
  font:var(--text-body);-webkit-font-smoothing:antialiased}
.br h1{font:var(--text-h1);letter-spacing:var(--tracking-h1);margin:0}
.br h2{font:var(--text-h2);letter-spacing:var(--tracking-h2);margin:0}
.br h3{font:var(--text-h3);margin:0}
.br-muted{color:var(--color-ink-muted)}
.br-faint{color:var(--color-ink-faint);font:var(--text-body-sm)}
.br-label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
/* All numbers are monospaced so table columns do not jump when sorted. */
.br-num{font:var(--text-num);font-variant-numeric:tabular-nums}
.br-num-lg{font:var(--text-num-lg);font-variant-numeric:tabular-nums}
.br-card{background:var(--color-surface-card);border:1px solid var(--color-line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
:root[data-theme="dark"] .br-card{box-shadow:none}
.br-sunken{background:var(--color-surface-sunken);border-radius:var(--radius-md)}
/* Sponsor colour means "we earn here" and is used for nothing else. */
.br-sponsored{font:var(--text-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-sponsor)}
.br-card--sponsor{box-shadow:var(--shadow-sponsor)}
.br-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:12px 20px;
  border-radius:var(--radius-md);font:600 15px/20px var(--font-sans);text-decoration:none;
  color:var(--color-on-accent);background:var(--br-accent,var(--color-accent-apps))}
.br-btn:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
/* One accent per site: set data-layout on <html> and every accent-aware rule follows. */
[data-layout="apps"]{--br-accent:var(--color-accent-apps)}
[data-layout="money"]{--br-accent:var(--color-accent-money)}
[data-layout="registry"]{--br-accent:var(--color-accent-registry)}
[data-layout="learn"]{--br-accent:var(--color-accent-learn)}
[data-layout="terminal"]{--br-accent:var(--color-accent-terminal)}

/* Binary Reviews - tokens generated from tokens.json. Do not edit by hand. */
:root {
  --color-surface-page: #f7f8fa;
  --color-surface-card: #ffffff;
  --color-surface-sunken: #eceff3;
  --color-ink: #111826;
  --color-ink-muted: #4d5a6e;
  --color-ink-faint: #6b7789;
  --color-line: #dde2ea;
  --color-line-strong: #c2cad6;
  --color-accent-apps: #0d8471;
  --color-accent-money: #1c7a3e;
  --color-accent-registry: #2a4d8f;
  --color-accent-learn: #b85416;
  --color-accent-terminal: #9a6508;
  --color-on-accent: #ffffff;
  --color-sponsor: #7a3fd4;
  --color-positive: #1c7a3e;
  --color-warning: #9a5b00;
  --color-negative: #a62a2a;
  --color-focus-ring: #2a4d8f;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --text-h1: 700 40px/46px var(--font-sans);
  --tracking-h1: -0.02em;
  --text-h2: 700 28px/34px var(--font-sans);
  --tracking-h2: -0.01em;
  --text-h3: 600 20px/26px var(--font-sans);
  --text-body: 400 16px/26px var(--font-sans);
  --text-body-sm: 400 14px/22px var(--font-sans);
  --text-label: 700 11px/14px var(--font-sans);
  --tracking-label: 0.08em;
  --text-num-lg: 600 24px/28px var(--font-mono);
  --text-num: 500 15px/20px var(--font-mono);
  --text-doc-h2: 600 26px/32px var(--font-serif);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-20: 80px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06);
  --shadow-sponsor: 0 0 0 2px rgba(122,63,212,.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --color-surface-page: #0d1117;
  --color-surface-card: #161b22;
  --color-surface-sunken: #0a0d12;
  --color-ink: #e8edf5;
  --color-ink-muted: #9aa7bb;
  --color-ink-faint: #7d8a9d;
  --color-line: #293040;
  --color-line-strong: #3b465c;
  --color-accent-apps: #2fd4b4;
  --color-accent-money: #43c46d;
  --color-accent-registry: #6f9fe8;
  --color-accent-learn: #f08a4b;
  --color-accent-terminal: #e8a33d;
  --color-on-accent: #0d1117;
  --color-sponsor: #b18cf0;
  --color-positive: #43c46d;
  --color-warning: #e0a44a;
  --color-negative: #f07878;
  --color-focus-ring: #8ab4ff;
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-surface-page: #0d1117;
  --color-surface-card: #161b22;
  --color-surface-sunken: #0a0d12;
  --color-ink: #e8edf5;
  --color-ink-muted: #9aa7bb;
  --color-ink-faint: #7d8a9d;
  --color-line: #293040;
  --color-line-strong: #3b465c;
  --color-accent-apps: #2fd4b4;
  --color-accent-money: #43c46d;
  --color-accent-registry: #6f9fe8;
  --color-accent-learn: #f08a4b;
  --color-accent-terminal: #e8a33d;
  --color-on-accent: #0d1117;
  --color-sponsor: #b18cf0;
  --color-positive: #43c46d;
  --color-warning: #e0a44a;
  --color-negative: #f07878;
  --color-focus-ring: #8ab4ff;
  color-scheme: dark;
}

/* Skin: accent pine - type sourcesans - geometry soft. Generated per site by _skin.py. */
:root {
  --color-accent-apps: #0f6b4f;
  --color-accent-money: #0f6b4f;
  --color-accent-registry: #0f6b4f;
  --color-accent-learn: #0f6b4f;
  --color-accent-terminal: #0f6b4f;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-20: 80px;
}
:root[data-theme="dark"] {
  --color-accent-apps: #58cfa0;
  --color-accent-money: #58cfa0;
  --color-accent-registry: #58cfa0;
  --color-accent-learn: #58cfa0;
  --color-accent-terminal: #58cfa0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --color-accent-apps: #58cfa0;
  --color-accent-money: #58cfa0;
  --color-accent-registry: #58cfa0;
  --color-accent-learn: #58cfa0;
  --color-accent-terminal: #58cfa0;
  }
}

/* Listicle kit - layout "terminal". Reads tokens only, never raw hex.
   The design this implements lives in Claude Design, project
   "Binary Reviews - Design System" and the page "MetaTrader Platforms Nigeria". */

/* `overflow-x: hidden` here turns body into the scroll container and silently kills
   `position: sticky` on the header. `clip` stops the sideways scroll without that. */
html, body { overflow-x: clip; }
/* A class that sets display beats the hidden attribute, and the sticky bar then
   sat across the middle of the table on desktop, covering row 03. */
[hidden] { display: none !important; }
body.br { font: var(--text-body); }
a { color: var(--br-accent); }
/* The generic link hover must not reach buttons: on an accent fill it turned the
   white label dark and the button became unreadable for the moment of the hover. */
a:not([class*="btn"]):not([class*="cta"]):not(.chip):not(.box2__btn):not(.mn__link):hover {
  color: var(--color-ink);
}
.br-btn:hover, .topn__btn:hover, .rec__open:hover, .col2__cta:hover, .wn__btn:hover,
.pin__btn:hover, .sheet__btn:hover, .chap__next:hover, .top__start:hover {
  color: var(--color-on-accent);
  filter: brightness(1.08);
}
input, select, button { font: inherit; color: inherit; }
*:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
input[type="checkbox"] { accent-color: var(--br-accent); }

.wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* --------------------------------------------------------------- header */
.topn { position: sticky; top: 0; z-index: 30; background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-line-strong); }
.topn__bar { display: flex; align-items: center; gap: var(--space-4);
  padding-block: 10px; }
.topn__brand { display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--color-ink); flex-shrink: 0; }
.topn__mark { height: 32px; padding: 0 8px; border-radius: var(--radius-sm);
  background: var(--br-accent); color: var(--color-on-accent); display: grid;
  place-items: center; font: 600 13px/1 var(--font-mono); }
.topn__names { display: flex; flex-direction: column; gap: 2px; }
.topn__name { font: 700 15px/18px var(--font-sans); }
.topn__search { flex: 1 1 auto; max-width: 380px; display: flex; align-items: center;
  gap: 8px; padding: 0 10px; height: 40px; border-radius: var(--radius-sm);
  background: var(--color-surface-page); border: 1px solid var(--color-line-strong);
  color: var(--color-ink-muted); }
.topn__search span { font: 500 13px/1 var(--font-mono); }
.topn__search input { flex: 1; min-width: 0; border: 0; background: transparent;
  outline: none; color: var(--color-ink); font: var(--text-body-sm); }
.topn__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topn__cta { display: flex; align-items: center; gap: 10px; }
.topn__ctatext { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.topn__btn { min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm);
  font: 600 14px/18px var(--font-sans); }
.topn__icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--color-line-strong);
  background: var(--color-surface-card); color: var(--color-ink); cursor: pointer; }
.topn__burger { display: none; }

.sheet { border-top: 1px solid var(--color-line); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4); }
.sheet__links { display: flex; flex-direction: column; }
.sheet__link { padding: 12px 0; border-bottom: 1px solid var(--color-line);
  color: var(--color-ink); text-decoration: none; font: 600 16px/24px var(--font-sans); }
.sheet__cta { display: flex; flex-direction: column; gap: 8px; padding: 14px;
  border-radius: var(--radius-sm); background: var(--color-surface-card);
  border: 1px solid var(--color-line); box-shadow: var(--shadow-sponsor); }
.sheet__ctatop { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sheet__btn { justify-content: center; min-height: 48px; }

/* ----------------------------------------------------------------- hero */
.top { padding: clamp(32px, 5vw, 64px) clamp(16px, 3vw, 32px) clamp(32px, 4vw, 48px);
  display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-end;
  border-bottom: 1px solid var(--color-line); }
.top__text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column;
  gap: var(--space-4); }
.top h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; text-wrap: balance; }
.top__lede { margin: 0; max-width: 60ch; }

.term2 { flex: 1 1 380px; min-width: 0; padding: 20px; border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--space-4); }
.term2__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  padding: 4px; border-radius: var(--radius-sm); background: var(--color-surface-sunken);
  border: 1px solid var(--color-line); }
.term2__tab { min-height: 44px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-ink); font: 600 14px/18px var(--font-mono);
  cursor: pointer; }
.term2__tab[aria-selected="true"] { background: var(--br-accent); color: var(--color-on-accent); }
.term2__count { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.term2__num { font: 600 56px/1 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--br-accent); }
.term2__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.term2__chip { padding: 3px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-line-strong); font: var(--text-body-sm); font-size: 13px; }
.term2__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--color-line); }
.term2__filter { border: 0; background: none; padding: 6px 0; color: var(--br-accent);
  font: 600 14px/18px var(--font-sans); cursor: pointer; text-decoration: underline; }

/* -------------------------------------------------------------- sections */
.zone { padding-block: clamp(32px, 4vw, 48px); display: flex; flex-direction: column;
  gap: var(--space-4); }
.zone__head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-4); flex-wrap: wrap; }
.zone__meta { font: var(--text-body-sm); }
.zone__meta b { font: var(--text-num); font-size: 14px; color: var(--color-ink); }

/* ----------------------------------------------------------------- table */
.switches { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--color-surface-card); border: 1px solid var(--color-line); }
.switches__item { display: flex; align-items: center; gap: 6px; min-height: 36px;
  font: var(--text-body-sm); cursor: pointer; }
.switches__item input { width: 16px; height: 16px; margin: 0; }
.switches__clear { margin-left: auto; min-height: 36px; padding: 0 10px;
  border-radius: var(--radius-sm); border: 1px solid var(--br-accent); background: none;
  color: var(--color-ink); font: 600 13px/16px var(--font-mono); cursor: pointer; }

.sheet2 { border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  overflow: hidden; }
.sheet2__head, .rec { display: grid; gap: 12px; padding: 0 14px;
  grid-template-columns: var(--tbl-cols, minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, .8fr)
    minmax(0, .8fr) minmax(0, .7fr) minmax(0, 1.1fr) minmax(0, 1fr)); }
.sheet2__head { background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-line-strong); }
.head3 { display: flex; align-items: center; gap: 6px; padding: 12px 0; border: 0;
  background: none; text-align: left; cursor: pointer; font: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-ink-muted); }
.head3:disabled { cursor: default; }
.head3[aria-sort="ascending"], .head3[aria-sort="descending"] { color: var(--br-accent); }
.head3__arrow { font: 500 11px/1 var(--font-mono); }
.rec { padding: 12px 14px; align-items: center; border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-card); }
.rec:nth-child(even) { background: var(--color-surface-sunken); }
.rec:last-child { border-bottom: 0; }
.rec--sponsor { box-shadow: var(--shadow-sponsor); position: relative; }
.rec__c { min-width: 0; }
.rec__name { display: flex; gap: 10px; align-items: center; }
.rec__pos { font-size: 13px; color: var(--color-ink-muted); width: 22px; flex-shrink: 0; }
.rec__names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec__names a { font: 600 15px/20px var(--font-sans); color: var(--color-ink);
  text-decoration: none; overflow-wrap: anywhere; }
.rec__tag { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.rec__plat { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.badge { padding: 2px 6px; border-radius: var(--radius-sm);
  font: 600 11px/16px var(--font-mono); }
.badge--on { border: 1px solid var(--color-line-strong); color: var(--color-ink); }
.badge--off { border: 1px dashed var(--color-line); color: var(--color-ink-muted); }
.rec__n { font: var(--text-num); font-variant-numeric: tabular-nums; text-align: right; }
.rec__reg { font: var(--text-num); font-size: 13px; overflow-wrap: anywhere; }
.rec__open, .rec__details { display: flex; justify-content: center; align-items: center;
  min-height: 40px; padding: 0 10px; border-radius: var(--radius-sm);
  text-decoration: none; font: 600 13px/16px var(--font-sans); text-align: center; }
.rec__open { background: var(--br-accent); color: var(--color-on-accent); }
.rec__details { border: 1px solid var(--color-line-strong); color: var(--color-ink); }
.rec__details:hover { border-color: var(--br-accent); }

/* ---------------------------------------------------------------- versus */
.comp2 { display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-md); }
.comp2__head, .comp2__row { display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.comp2__head { padding: 12px 14px; background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-line-strong); font: 600 13px/16px var(--font-mono); }
.comp2__row { padding: 10px 14px; border-bottom: 1px solid var(--color-line); }
.comp2__row:nth-child(even) { background: var(--color-surface-sunken); }
.comp2__row span:first-child { font: var(--text-body-sm); color: var(--color-ink-muted); }
.comp2__row .br-num { font-size: 14px; }
.comp2__verdict { margin: 0; padding: 14px; font: var(--text-body-sm); text-wrap: pretty; }

/* ---------------------------------------------------------- requirements */
.rq { border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  overflow: hidden; }
.rq__row { display: grid; gap: 10px; padding: 11px 14px; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1.2fr));
  border-bottom: 1px solid var(--color-line); background: var(--color-surface-card); }
.rq__row:nth-child(even) { background: var(--color-surface-sunken); }
.rq__row--head { background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-line-strong); }
.rq__h { font: 600 13px/16px var(--font-mono); }
.rq__k { font: 600 14px/20px var(--font-sans); }
.rq__v { font-size: 13px; overflow-wrap: anywhere; }
.rq__v--off { color: var(--color-ink-muted); }

/* ----------------------------------------------------------------- tasks */
.tk { padding: 18px; border-radius: var(--radius-md); display: flex;
  flex-direction: column; gap: 12px; }
.tk__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tk__plat { font: 600 12px/16px var(--font-mono); color: var(--br-accent); }
.tk p { margin: 0; font: var(--text-body-sm); text-wrap: pretty; }
.tk__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;
  border-top: 1px solid var(--color-line); }
.tk__list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--color-line); }
.tk__list a { font: 600 14px/20px var(--font-sans); color: var(--color-ink); }
.tk__list span { text-align: right; }

/* ----------------------------------------------------------- methodology */
.meth { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  background: var(--color-line); border: 1px solid var(--color-line);
  border-radius: var(--radius-sm); overflow: hidden; }
.meth__item { padding: 18px; background: var(--color-surface-card); display: flex;
  flex-direction: column; gap: 8px; }
.meth__n { color: var(--br-accent); }
.meth__t { font: 600 16px/22px var(--font-sans); }
.meth__item span:last-child { font: var(--text-body-sm); text-wrap: pretty; }

/* ------------------------------------------------------------------- faq */
.zone--faq { display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px 48px;
  align-items: flex-start; padding-bottom: clamp(56px, 7vw, 88px); }
.zone--faq h2 { flex: 1 1 240px; }
.acc { flex: 3 1 520px; min-width: 0; max-width: 100%;
  border-top: 1px solid var(--color-line-strong); }
.acc__item { border-bottom: 1px solid var(--color-line); }
.acc__q { width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 16px 0; border: 0; background: none; text-align: left;
  color: var(--color-ink); font: 600 16px/24px var(--font-sans); cursor: pointer; }
.acc__sign { font: 500 16px/1 var(--font-mono); color: var(--br-accent); }
.acc__a p { margin: 0; padding: 0 32px 18px 0; color: var(--color-ink-muted);
  text-wrap: pretty; }

/* ---------------------------------------------------------------- footer */
.end { border-top: 1px solid var(--color-line-strong);
  background: var(--color-surface-sunken); }
.end__in { display: flex; flex-direction: column; gap: 28px; padding-block: 40px; }
.end .grid { gap: 28px; }
.end__col { display: flex; flex-direction: column; gap: 8px; }
.end__col a { color: var(--color-ink); text-decoration: none; font: var(--text-body-sm); }
.end__brand { font: 700 15px/18px var(--font-sans); }
.end__note { margin: 0; padding: 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-line-strong); font: var(--text-body-sm);
  color: var(--color-ink-muted); text-wrap: pretty; }
.end__note .br-label { color: var(--color-ink); }

/* ---------------------------------------------------------------- sticky */
.pin { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  padding: 8px 8px 8px 14px; border-radius: var(--radius-sm);
  background: var(--color-surface-card); border: 1px solid var(--color-line-strong);
  box-shadow: var(--shadow-sponsor); display: flex; align-items: center; gap: 12px; }
.pin__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pin__name { font: 600 15px/20px var(--font-sans); }
.pin__btn { min-height: 44px; padding: 0 16px; flex-shrink: 0;
  border-radius: var(--radius-sm); font: 600 14px/18px var(--font-sans); }

/* ------------------------------------------------------- geo soft-block
   Same contract as the rest of the Binary network: the middleware stamps
   data-geo-blocked on <body> and every affiliate element disappears. */
body[data-geo-blocked] .header-cta,
body[data-geo-blocked] .block--cta-block,
body[data-geo-blocked] .sticky-cta,
body[data-geo-blocked] .block--inline-banner,
body[data-geo-blocked] .block--sidebar-banner,
body[data-geo-blocked] .mobile-nav__cta,
body[data-geo-blocked] a[rel~="sponsored"] { display: none !important; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .sheet2__head, .rec { --tbl-cols: 1fr auto; }
  /* Below the table's comfortable width every row becomes a card: the same
     markup, re-flowed, so sorting and filtering keep working. */
  .sheet2__head { display: none; }
  .rec { grid-template-columns: 1fr auto; row-gap: 10px; padding: 14px;
    align-items: start; }
  .rec__name { grid-column: 1 / -1; }
  .rec__plat { grid-column: 1 / -1; }
  /* In card mode every figure is labelled; a bare "$10" on its own told the
     reader nothing. */
  .rec__n[data-col="dep"], .rec__n[data-col="trade"], .rec__n[data-col="pay"], .rec__reg {
    grid-column: 1 / -1; text-align: left; display: flex; gap: 8px; }
  .rec__n[data-col="dep"]::before { content: "Min deposit"; }
  .rec__n[data-col="trade"]::before { content: "Min trade"; }
  .rec__n[data-col="pay"]::before { content: "Payout"; }
  .rec__reg::before { content: "Regulator"; }
  .rec__n::before, .rec__reg::before { font: var(--text-label);
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--color-ink-muted); min-width: 92px; }
  .rec__act { grid-column: 1 / -1; }
  .rec__open, .rec__details { min-height: 44px; }
}
@media (max-width: 1100px) {
  /* The inline nav goes at 1100 and the burger used to arrive only at 767, so
     between those two widths - a small laptop, a tablet in landscape - the page had
     no navigation at all. The two breakpoints are the same one now. */
  .topn__burger { display: grid; }
}
@media (max-width: 767px) {
  .topn__search { display: none; }
  .topn__partner { display: none; }
  .topn__btn { padding: 0 12px; }
  .zone--faq h2 { flex-basis: 100%; }
  .end__in { padding-bottom: 96px; }
}
@media (min-width: 768px) {
  .sheet { display: none; }
}

/* ------------------------------------------------------------ brand marks */
.sym { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm);
  object-fit: contain; background: var(--color-surface-page); }
.sym--mono { display: grid; place-items: center; font: 700 14px/1 var(--font-sans);
  color: #fff; background: var(--color-surface-sunken); }

/* ======================================================= layout A — apps */
.sym--md { width: 56px; height: 56px; border-radius: var(--radius-md); font-size: 20px; }
.sym--lg { width: 72px; height: 72px; border-radius: 20px; font-size: 28px; }
.top--apps { flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  gap: var(--space-6); border-bottom: 0; }
/* The remaining three layouts get the same treatment: one set of parts, more than
   one shape. Shape 0 is always what the layout already shipped, so a site that drew
   0 looks exactly as before. Picked per site in _skin.hero_variant. */
/* money: the budget panel moves from beside the text to under it, or leads the row */
.top--m1 { flex-direction: column; align-items: stretch; }
.top--m1 .top__text, .top--m1 .bg { flex: 1 1 auto; }
.top--m2 { flex-direction: row-reverse; align-items: center; }
.top--m2 .top__text { text-align: right; }
@media (max-width: 860px) {
  .top--m2 { flex-direction: column; }
  .top--m2 .top__text { text-align: left; }
}
/* learn: the artwork swaps sides, or the opening centres and the art sits under it */
.top--l1 { flex-direction: row-reverse; }
.top--l2 { flex-direction: column; align-items: center; text-align: center; }
.top--l2 .top__text { align-items: center; }
.top--l2 .top__act { justify-content: center; }
/* registry: the opening stacks, or reverses */
.top--r1 { flex-direction: column; align-items: stretch; }
.top--r2 { flex-direction: row-reverse; }
@media (max-width: 860px) {
  .top--l1, .top--r2 { flex-direction: column; }
}

/* App-list openings: same parts (kicker, headline, lede, stat tiles), three shapes.
   a0 is the original stack; a1 sets the text against a 2x2 block of tiles; a2 reads as
   an editorial opening - oversized headline on the left, lede on the right, tiles as a
   thin ruled strip rather than cards. Picked per site in _skin.hero_variant. */
.top--a1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--space-6) var(--space-8); align-items: start; }
.top--a1 .top__kicker, .top--a1 h1, .top--a1 .top__lede { grid-column: 1; }
.top--a1 .num2__row { grid-column: 2; grid-row: 1 / span 3; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.top--a2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-8); align-items: end; }
.top--a2 .top__kicker { grid-column: 1 / -1; }
.top--a2 h1 { grid-column: 1; font-size: clamp(34px, 6vw, 68px); max-width: 14ch; }
.top--a2 .top__lede { grid-column: 2; max-width: 46ch; }
.top--a2 .num2__row { grid-column: 1 / -1; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--color-line); }
.top--a2 .num2 { background: none; border: 0; border-right: 1px solid var(--color-line);
  border-radius: 0; box-shadow: none; padding: var(--space-4) var(--space-4)
  var(--space-4) 0; }
.top--a2 .num2:last-child { border-right: 0; }
@media (max-width: 860px) {
  .top--a1, .top--a2 { grid-template-columns: minmax(0, 1fr); }
  .top--a1 .num2__row, .top--a2 h1, .top--a2 .top__lede, .top--a2 .num2__row {
    grid-column: 1; grid-row: auto; }
  .top--a2 .num2__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top--a2 .num2:nth-child(2n) { border-right: 0; }
}

/* Terminal openings: one set of parts, three shapes. t0 is the original two-column
   split; t1 puts the panel under the text at full width; t2 centres the opening and
   lays the panel out as a wide strip. Picked per site in _skin.hero_variant. */
.top--t1 { flex-direction: column; align-items: stretch; }
.top--t1 .top__text { flex: 1 1 auto; }
.top--t1 .term2 { flex: 1 1 auto; }
.top--t1 .term2__tabs { grid-template-columns: repeat(3, minmax(0, 180px)); }
.top--t2 { flex-direction: column; align-items: center; text-align: center; }
.top--t2 .top__text { align-items: center; flex: 1 1 auto; }
.top--t2 .top__lede { max-width: 56ch; }
.top--t2 .term2 { flex: 1 1 auto; width: 100%; display: grid; gap: 16px;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: center;
  text-align: left; }
.top--t2 .term2__tabs { grid-column: 1; }
.top--t2 .term2__count { grid-column: 2; grid-row: 1; }
.top--t2 .term2__chips, .top--t2 .term2__foot { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .top--t2 .term2 { grid-template-columns: minmax(0, 1fr); }
  .top--t2 .term2__count, .top--t2 .term2__tabs { grid-column: 1; grid-row: auto; }
}

.top__kicker { color: var(--br-accent); }
.top--apps h1 { font-size: clamp(32px, 5.2vw, 60px); line-height: 1.05; max-width: 17ch; }
.num2__row { display: grid; gap: 12px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.num2 { padding: 20px; border-radius: var(--radius-lg); display: flex;
  flex-direction: column; gap: 8px; }
.num2__n { font-size: 30px; line-height: 34px; }
.zone__intro { display: flex; flex-direction: column; gap: 8px; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { font: var(--text-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong); }
.stars { color: var(--br-accent); letter-spacing: 1px; }
.stars__off { color: var(--color-line-strong); }

.wn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  border-radius: 24px; overflow: hidden; }
.wn__body { padding: clamp(20px, 4vw, 40px); display: flex; flex-direction: column;
  gap: var(--space-6); }
.wn__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wn__head { display: flex; gap: 16px; align-items: center; }
.wn__names { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wn__names h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.wn__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: var(--text-body-sm); }
.wn__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;
  gap: 12px; }
.wn__list li { display: flex; gap: 12px; align-items: flex-start; }
.wn__n { color: var(--br-accent); }
.wn__cta { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.wn__btn { justify-content: center; min-height: 56px; font-size: 17px; }
.wn__sub { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wn__shot { background: var(--color-surface-sunken); padding: clamp(20px, 4vw, 44px);
  display: flex; justify-content: center; align-items: center; }

.ph { width: 236px; max-width: 100%; border-radius: 38px; padding: 8px;
  background: var(--color-surface-card); border: 1px solid var(--color-line-strong);
  box-shadow: var(--shadow-card); }
.ph__scr { height: 440px; border-radius: 30px; background: var(--color-surface-page);
  overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; }
.ph__bar { display: flex; justify-content: space-between; align-items: center;
  font: 600 11px/14px var(--font-mono); color: var(--color-ink-muted); }
.ph__notch { width: 60px; height: 16px; border-radius: 999px;
  background: var(--color-surface-sunken); }
.ph__pair { display: flex; justify-content: space-between; align-items: center;
  font: 600 13px/16px var(--font-sans); }
.ph__pay { font: 600 11px/14px var(--font-mono); color: var(--br-accent); }
.ph__price { display: flex; align-items: baseline; gap: 6px; }
.ph__price .br-num { font-size: 20px; }
.ph__up { font: 500 11px/14px var(--font-mono); color: var(--color-positive); }
.ph__chart { width: 100%; flex: 1; min-height: 0; }
.ph__tf { display: flex; gap: 6px; }
.ph__tf span { flex: 1; text-align: center; padding: 6px 0; border-radius: 8px;
  background: var(--color-surface-sunken); font: 500 11px/14px var(--font-mono); }
.ph__tf .is-on { background: none; border: 1px solid var(--br-accent); color: var(--br-accent); }
.ph__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph__fields div { padding: 8px; border-radius: 10px; background: var(--color-surface-card);
  border: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 2px; }
.ph__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph__btns span { text-align: center; padding: 11px 0; border-radius: 10px;
  color: var(--color-on-accent); font: 700 13px/16px var(--font-sans); }
.ph__up2 { background: var(--color-positive); }
.ph__down { background: var(--color-negative); }

.flt { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end;
  padding: 16px 20px; border-radius: var(--radius-lg); }
.flt__g { display: flex; flex-direction: column; gap: 8px; }
.flt__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong); background: var(--color-surface-card);
  color: var(--color-ink); font: 600 14px/18px var(--font-sans); cursor: pointer; }
.chip--num { font-family: var(--font-mono); }
.chip.is-on { background: var(--br-accent); color: var(--color-on-accent);
  border-color: var(--br-accent); }
.sw { min-height: 40px; display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 6px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong); background: var(--color-surface-card);
  color: var(--color-ink); font: 600 14px/18px var(--font-sans); cursor: pointer; }
.sw__track { width: 40px; height: 24px; border-radius: 999px;
  background: var(--color-line-strong); position: relative; transition: background .15s; }
.sw__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--color-surface-card); transition: left .15s; }
.sw[aria-checked="true"] .sw__track { background: var(--br-accent); }
.sw[aria-checked="true"] .sw__knob { left: 19px; }
.flt__count { margin-left: auto; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; font: var(--text-body-sm); }
.flt__reset { border: 0; background: none; padding: 8px 0; color: var(--br-accent);
  font: 600 14px/18px var(--font-sans); cursor: pointer; text-decoration: underline; }

.box2__grid { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.box2 { padding: 20px; border-radius: 20px; display: flex; flex-direction: column;
  gap: 16px; }
.box2__head { display: flex; gap: 14px; align-items: flex-start; }
.box2__names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.box2__title { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.box2__title h3 { overflow-wrap: anywhere; }
.box2__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font: var(--text-body-sm); }
.box2__facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  border-radius: var(--radius-md); overflow: hidden; background: var(--color-line);
  border: 1px solid var(--color-line); }
.box2__facts > div { padding: 10px 12px; background: var(--color-surface-sunken);
  display: flex; flex-direction: column; gap: 4px; }
.box2__facts dd { margin: 0; font: var(--text-body-sm); color: var(--color-ink); }
.box2__wide { grid-column: 1 / -1; }
.box2__btn { margin-top: auto; display: flex; justify-content: center; align-items: center;
  min-height: 48px; border-radius: var(--radius-md); border: 1.5px solid var(--br-accent);
  color: var(--br-accent); text-decoration: none; font: 600 15px/20px var(--font-sans); }
.box2__btn:hover { background: var(--color-surface-sunken); color: var(--br-accent); }
.box2__none { padding: 40px 24px; border-radius: var(--radius-lg);
  border: 1px dashed var(--color-line-strong); display: flex; flex-direction: column;
  align-items: center; gap: 12px; text-align: center; }

.cmp { border-radius: 20px; overflow: hidden; }
.cmp__head, .cmp__row { display: grid; gap: 12px;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); }
.cmp__head { padding: 16px; border-bottom: 1px solid var(--color-line); align-items: end; }
.cmp__head label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cmp__head select { width: 100%; min-height: 44px; padding: 0 10px;
  border-radius: var(--radius-md); border: 1px solid var(--color-line-strong);
  background: var(--color-surface-sunken); color: var(--color-ink);
  font: 600 15px/20px var(--font-sans); }
.cmp__row { padding: 14px 16px; border-bottom: 1px solid var(--color-line);
  align-items: start; }
.cmp__row > span:first-child { font: var(--text-body-sm); color: var(--color-ink-muted); }
.cmp__v { display: flex; flex-direction: column; gap: 4px; min-width: 0;
  overflow-wrap: anywhere; }
.cmp__better { font: var(--text-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-positive); }
.cmp__sum { padding: 14px 16px; margin: 0; }
@media (max-width: 600px) {
  .wn__shot { display: none; }
  .box2__facts { grid-template-columns: 1fr; }
}

/* ====================================================== layout B — money */
.top--money { flex-wrap: wrap; align-items: stretch; }
.bg { flex: 1 1 380px; min-width: 0; padding: 20px; border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-4); }
.bg__lab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bg__val { font-size: 34px; line-height: 38px; color: var(--br-accent); }
.bg__range { width: 100%; accent-color: var(--br-accent); }
.bg__out { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bg__n { font: var(--text-num-lg); font-size: 28px; color: var(--br-accent); }
.bg__out b { color: var(--color-ink); }

.coll { padding: 20px; border-radius: var(--radius-lg); display: flex; flex-direction: column;
  gap: 12px; }
.coll__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.coll__n { color: var(--br-accent); font: var(--text-num-lg); }
.coll p { margin: 0; font: var(--text-body-sm); }
.coll__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;
  border-top: 1px solid var(--color-line); }
.coll__list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--color-line); }
.coll__list a { font: 600 14px/20px var(--font-sans); color: var(--color-ink); }

.way { padding: 16px; border-radius: var(--radius-md); display: flex; flex-direction: column;
  gap: 6px; }
.way__t { font: 600 15px/20px var(--font-sans); }
.way span:last-child { font: var(--text-body-sm); }

.calc { padding: 20px; border-radius: var(--radius-lg); display: flex; flex-direction: column;
  gap: var(--space-6); }
.calc__ins { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.calc__ins label { display: flex; flex-direction: column; gap: 6px; }
.calc__ins input { min-height: 48px; padding: 0 12px; border-radius: var(--radius-md);
  border: 1px solid var(--color-line-strong); background: var(--color-surface-sunken);
  color: var(--color-ink); font: var(--text-num); }
.calc__outs { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.calc__o { padding: 16px; border-radius: var(--radius-md);
  background: var(--color-surface-sunken); display: flex; flex-direction: column; gap: 4px; }
.calc__o .br-label { color: var(--color-ink-muted); }
.calc__o--win .br-num-lg { color: var(--color-positive); }
.calc__o--lose .br-num-lg { color: var(--color-negative); }
.calc p { margin: 0; }

/* ====================================================== layout D — learn */
.top--learn { align-items: center; gap: 40px 64px; padding-block: clamp(40px, 8vw, 96px); }
.top--learn .top__text { flex: 3 1 460px; gap: var(--space-6); align-items: flex-start; }
.top--learn h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.1; max-width: 16ch; }
.top--learn .top__lede { font-size: 19px; line-height: 32px; max-width: 52ch; }
.top__art { flex: 2 1 280px; min-width: 0; display: flex; justify-content: center; }
.top__art svg { width: 100%; max-width: 380px; height: auto; }
.lp { display: inline-flex; gap: 8px; align-items: center; width: max-content; max-width: 100%;
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong); font: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-ink-muted); }
.top__act { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.top__start { min-height: 56px; padding: 0 28px; border-radius: var(--radius-pill);
  font-size: 18px; }
.top__act .br-faint { max-width: 52ch; }

.pg { position: sticky; top: 64px; z-index: 10; background: var(--color-surface-page);
  padding: 12px 0; border-bottom: 1px solid var(--color-line); display: flex;
  flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.pg__lab { font: 600 16px/22px var(--font-sans); }
.pg__list { flex: 1 1 260px; margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pg__seg { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.pg__bar { display: block; height: 6px; border-radius: 999px;
  background: var(--color-line-strong); }
.pg__seg.is-done .pg__bar { background: var(--br-accent); }
.pg__n { font-size: 12px; color: var(--color-ink-muted); }
.pg__seg.is-done .pg__n { color: var(--color-ink); }

.chap__list { display: flex; flex-direction: column; gap: 16px; }
.chap { border-radius: 24px; background: var(--color-surface-card);
  border: 1px solid var(--color-line); overflow: hidden; scroll-margin-top: calc(var(--hdr-h, 104px) + 36px); }
.chap:has(.chap__body:not([hidden])) { border-color: var(--br-accent); }
.chap__btn { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px; align-items: center; padding: clamp(16px, 3vw, 26px); border: 0;
  background: none; text-align: left; cursor: pointer; color: var(--color-ink); }
.chap__ic { width: 60px; height: 60px; border-radius: 18px;
  border: 1.5px solid var(--color-line-strong); display: grid; place-items: center;
  color: var(--br-accent); font: 700 24px/1 var(--font-mono); }
.chap__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chap__title { font: 700 clamp(20px, 2.4vw, 25px)/1.25 var(--font-sans); }
.chap__teaser { font: var(--text-body-sm); }
.chap__sign { width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--color-line-strong); display: grid; place-items: center;
  font: 500 20px/1 var(--font-mono); color: var(--br-accent); }
.chap__body { padding: 0 clamp(16px, 3vw, 26px) clamp(18px, 3vw, 30px); display: flex;
  flex-direction: column; gap: 20px; border-top: 1px solid var(--color-line); }
.chap__text { padding-top: 20px; display: flex; flex-direction: column; gap: 14px;
  max-width: 70ch; }
.chap__text p { margin: 0; text-wrap: pretty; }
.st2 { display: flex; flex-direction: column; gap: 10px; }
.st2__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  align-items: baseline; }
.st2__t { font: 600 17px/24px var(--font-sans); }
.chap__rem { padding: 16px 20px; border-radius: var(--radius-lg);
  background: var(--color-surface-sunken); display: flex; gap: 12px; align-items: flex-start; }
.chap__rem .br-label { color: var(--br-accent); padding-top: 5px; flex-shrink: 0; }
.chap__nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.chap__next { min-height: 48px; padding: 0 22px; border-radius: var(--radius-pill); }
.chap__lesson { min-height: 48px; display: inline-flex; align-items: center;
  font: 600 16px/20px var(--font-sans); }

.gloss__grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.gloss { min-height: 92px; padding: 18px 20px; border-radius: var(--radius-lg);
  border: 1px solid var(--color-line); background: var(--color-surface-card);
  text-align: left; cursor: pointer; color: var(--color-ink); display: flex;
  flex-direction: column; gap: 8px; align-items: flex-start; }
.gloss[aria-expanded="true"] { border-color: var(--br-accent); }
.gloss__top { display: flex; justify-content: space-between; width: 100%; gap: 8px; }
.gloss__t { font: 700 17px/24px var(--font-sans); }
.gloss__sign { font: 500 18px/24px var(--font-mono); color: var(--br-accent); }
.gloss__d { font: var(--text-body-sm); font-size: 15px; line-height: 24px; text-wrap: pretty; }

.pit__grid { display: grid; gap: 0 48px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.pit { padding: 22px 0; border-top: 1px solid var(--color-line-strong); display: grid;
  grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.pit__n { color: var(--br-accent); }
.pit__b { display: flex; flex-direction: column; gap: 8px; }
.pit__b h3 { font: 700 18px/26px var(--font-sans); }
.pit__b p { margin: 0; font-size: 16px; line-height: 27px; text-wrap: pretty; }

.mn { padding: clamp(20px, 4vw, 44px); border-radius: 28px; display: flex; flex-wrap: wrap;
  gap: 32px 56px; align-items: flex-start; }
.mn__text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column;
  gap: var(--space-4); }
.mn__text p { margin: 0; text-wrap: pretty; }
.mn__link { align-self: flex-start; min-height: 48px; display: inline-flex;
  align-items: center; gap: 8px; padding: 0 20px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--br-accent); color: var(--color-ink); text-decoration: none;
  font: 600 16px/20px var(--font-sans); }
.mn__stats { flex: 1 1 320px; min-width: 0; margin: 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  background: var(--color-line); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); overflow: hidden; }
.mn__stats > div { padding: 18px; background: var(--color-surface-card); display: flex;
  flex-direction: column; gap: 6px; }
.mn__stats dd { margin: 0; }
@media (max-width: 600px) {
  .chap__btn { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  .chap__sign { grid-row: 1; grid-column: 2; justify-self: end; }
  .chap__txt { grid-column: 1 / -1; }
}

/* ------------------------------------------------------- site brand mark */
.topn__logo { display: flex; align-items: center; }
.topn__logo svg { height: 30px; width: auto; display: block; }
/* The lockup's wordmark is dark by design; in the dark theme it has to flip. */
:root[data-theme="dark"] .topn__logo svg text { fill: var(--color-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topn__logo svg text { fill: var(--color-ink); }
}
/* ------------------------------------------------ the drawn mark in the header
   The marks are flat colour on what used to be a white ground. Cut out, most of
   them read on either theme, but a few are slate or near-black and vanish on a dark
   header, and a few pale ones vanish on a light one. Those get a plate behind them -
   the surface they were drawn against - and the plate's shape is spread across the
   network the way every other repeated element is. Measured in data/marks.json. */
.topn__sign { display: flex; align-items: center; flex-shrink: 0; }
.topn__sign img { height: 32px; width: 32px; display: block; }
.topn__sign--p0, .topn__sign--p1, .topn__sign--p2, .topn__sign--p3 {
  background: #fff; padding: 4px; box-shadow: 0 0 0 1px rgba(17, 24, 38, .08); }
.topn__sign--p0 { border-radius: 50%; }
.topn__sign--p1 { border-radius: 26%; }
.topn__sign--p2 { border-radius: 14%; }
.topn__sign--p3 { border-radius: 4px; }

.topn__geo { align-self: center; }
@media (max-width: 520px) { .topn__geo { display: none; } }

/* --------------------------------------------------- header on a phone
   At 393 px the long partner label wrapped onto two lines and squeezed the
   theme button off the row. The label shortens instead of the row breaking. */
.br-btn, .topn__btn { white-space: nowrap; }
.topn__btnshort { display: none; }
/* The long partner label stops fitting well before the phone: at 768 the search
   field is still on the row and the header wrapped to two lines. */
@media (max-width: 900px) {
  .topn__btnlong { display: none; }
  .topn__btnshort { display: inline; }
  .topn__search { max-width: 240px; }
  .topn__partner { display: none; }
}
@media (max-width: 560px) {
  /* The disclosure caption moves above the button instead of standing beside it:
     side by side the two of them take about 195px of a 390px row, stacked they take
     the width of the button alone. The caption has to stay - it is the disclosure -
     so the row gives up width somewhere that costs nothing. */
  .topn__cta { flex-direction: column; align-items: flex-end; gap: 2px; }
  .topn__ctatext { flex-direction: row; align-items: baseline; gap: 4px; }
  .topn__bar { gap: 8px; }
  .topn__btn { padding: 0 14px; }
  .topn__right { gap: 6px; }
  .topn__ctatext { gap: 0; }
  .topn__logo svg { height: 26px; }
  .topn__sign img { height: 26px; width: 26px; }
}
/* Eduard, 15.10.2026: the theme switch belongs beside the burger, not inside the
   menu a reader has to open first. It used to hide below 400px. Order 1 puts it
   after the burger wherever the bar lays its right-hand controls out with flex;
   the one skeleton that kept it on the left now carries it on the right too. */
@media (max-width: 767px) {
  .topn__icon[data-theme-toggle] { order: 1; }
}
@media (max-width: 400px) {
  /* With the switch back in the bar the lockup has one control more to live with.
     A brand that cannot shrink does not wrap - it runs under its neighbour: on four
     sites the partner button sat on top of the site name at 320px. */
  /* Every group of the bar, not only the lockup: a group without min-width:0
     keeps its full size and the one beside it runs underneath. */
  .topn__brand, .topn__names, .topn__lead, .topn__right, .topn__side { min-width: 0; }
  .topn__name { font-size: 13px; line-height: 16px; overflow-wrap: anywhere; }
  .topn__icon { width: 40px; height: 40px; }
  .topn__bar { gap: 6px; }
  /* The two longest brand names in the network ("Licence Check Indonesia") still met
     the button at 320px. The button gives up the last of its padding first. */
  .topn__btn { padding: 0 10px; font-size: 12px; }
}
@media (max-width: 360px) {
  /* At 320px the bar carries a lockup, the partner button with its disclosure, the
     burger and the switch. Something has to go, and it is the brand WORDING - the
     mark stays, the page title and the h1 say the name, and the alternative was
     either hiding the paid button or letting the two overlap, which is what they
     did on the four longest names in the network. */
  .topn__name { display: none; }
  /* The country label under the name goes with it: a mark plus a lone
     "INDONESIA" is not a lockup, it is a leftover. */
  .topn__names .br-label { display: none; }
}


/* icons inside the platform chips: the tick and cross come from the shared bank
   and inherit the chip's colour, so they work in both themes */
.badge { display: inline-flex; align-items: center; gap: 4px; }
.badge svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ==================================================== layout C — registry */
.doc { font: var(--text-doc-h2); font-size: clamp(25px, 2.6vw, 32px); line-height: 1.2; }
.col2__kicker { font: 600 14px/18px var(--font-serif); font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-label); color: var(--color-ink-muted); }
.top--reg { align-items: flex-start; gap: 32px 56px;
  border-bottom: 1px solid var(--color-line-strong); }
.top--reg .top__text { flex: 2 1 480px; }
.top--reg h1 { font: 600 clamp(30px, 4.4vw, 52px)/1.1 var(--font-serif);
  letter-spacing: -0.01em; }
.top--reg .top__lede { font-size: 18px; line-height: 30px; max-width: 64ch;
  color: var(--color-ink); }
.vr { flex: 1 1 260px; min-width: 0; padding: 22px; background: var(--color-surface-card);
  border: 1px solid var(--color-line-strong); outline: 1px solid var(--color-line);
  outline-offset: -7px; display: flex; flex-direction: column; gap: 14px; }
.vr__row { display: flex; flex-direction: column; gap: 4px; padding-top: 12px;
  border-top: 1px solid var(--color-line); }
.vr__row:first-of-type { padding-top: 0; border-top: 0; }
.vr--note p { margin: 0; font: var(--text-body-sm); text-wrap: pretty; }

.col2 { padding: 22px; background: var(--color-surface-card);
  border: 1px solid var(--color-line-strong); outline: 1px solid var(--color-line);
  outline-offset: -7px; display: flex; flex-direction: column; gap: 14px; }
.col2__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.col2__head h3 { font: 600 19px/25px var(--font-serif); }
.col2__n--bad { color: var(--color-negative); }
.col2 p { margin: 0; font: var(--text-body-sm); text-wrap: pretty; }
.col2__list { margin: 0; padding: 12px 0 0; list-style: none;
  border-top: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 8px; }
.col2__list li { display: flex; justify-content: space-between; gap: 12px;
  font: var(--text-body-sm); }
.col2__list a { color: var(--color-ink); font-weight: 600; }
.col2__list .br-faint { text-align: right; }
.col2__empty { font-style: italic; color: var(--color-ink-muted); }

.rtbl { border-top: 2px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); }
.rrec { display: grid; gap: 16px; padding: 14px 8px; align-items: start;
  border-bottom: 1px solid var(--color-line);
  grid-template-columns: 36px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.4fr); }
.rrec--head { border-bottom: 1px solid var(--color-ink); padding-block: 10px; }
.rrec--sponsor { box-shadow: var(--shadow-sponsor); }
.rrec__pos { color: var(--color-ink-muted); }
.rrec__name { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rrec__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rrec__brand a { font: 600 16px/22px var(--font-sans); color: var(--color-ink);
  overflow-wrap: anywhere; }
.rrec__tag { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.rrec__reg, .rrec__jur { font: var(--text-body-sm); }
.rrec__st { display: flex; gap: 8px; align-items: baseline; font: var(--text-body-sm); }
.rrec__stx { display: flex; flex-direction: column; }
.dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%;
  transform: translateY(-1px); }
.dot--ok { background: var(--color-positive); }
.dot--warn { background: var(--color-warning); }
.dot--bad { background: var(--color-negative); }
.dot--muted { background: var(--color-ink-faint); }
.col2__cta { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  border-radius: var(--radius-sm); background: var(--br-accent);
  color: var(--color-on-accent); text-decoration: none; font: 600 13px/16px var(--font-sans); }

.mn4__grid { display: grid; gap: 0 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.mn4 { padding: 18px 0; border-top: 1px solid var(--color-ink); display: flex;
  flex-direction: column; gap: 10px; }
.mn4__n { color: var(--br-accent); }
.mn4 h3 { font: 600 19px/25px var(--font-serif); }
.mn4 p { margin: 0; font: var(--text-body-sm); text-wrap: pretty; }

.zone--split { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-start; }
.zone__left { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column;
  gap: var(--space-4); }
.tl__list { flex: 2 1 460px; min-width: 0; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; }
.tl { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 18px; }
.tl__n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--br-accent); color: var(--br-accent);
  font: 600 12px/1 var(--font-mono); }
.tl__b { padding-bottom: 24px; display: flex; flex-direction: column; gap: 6px; }
.tl__b h3 { font: 600 18px/26px var(--font-sans); }
.tl__b p { margin: 0; font: var(--text-body-sm); text-wrap: pretty; }
@media (max-width: 1000px) {
  .rrec { grid-template-columns: 30px minmax(0, 1fr); row-gap: 8px; }
  .rrec--head { display: none; }
  .rrec__reg, .rrec__jur, .rrec__st { grid-column: 2; }
  .rrec__reg::before { content: "Regulator: "; color: var(--color-ink-muted); }
  .rrec__jur::before { content: "Jurisdiction: "; color: var(--color-ink-muted); }
}

/* --------------------------------------------- partner beside the register */
.rsplit { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1080px) { .rsplit { grid-template-columns: minmax(0, 1fr) 300px; } }
.spot { align-self: start; padding: 20px; background: var(--color-surface-card);
  border: 1px solid var(--color-sponsor); box-shadow: var(--shadow-sponsor);
  display: flex; flex-direction: column; gap: 14px; }
.spot__top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.spot__head { display: flex; gap: 12px; align-items: center; }
.spot__head h3 { font: 600 20px/26px var(--font-serif); }
.spot__facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.spot__facts > div { display: flex; flex-direction: column; gap: 2px; }
.spot__facts dd { margin: 0; }
.spot__cta { justify-content: center; }
.spot__note { margin: 0; }
.spot--wide { border-radius: var(--radius-lg); }
.spot--wide .spot__facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
@media (min-width: 760px) {
  .spot--wide { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 20px; }
  .spot--wide .spot__top { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 2px; }
  .spot--wide .spot__head { grid-column: 2; }
  .spot--wide .spot__facts { grid-column: 1 / -1; }
  .spot--wide .block--cta-block { grid-column: 3; grid-row: 1 / 3; }
}

/* ---------------------------------------------------------------- structure variants
   Five headers, five footers, five table shapes. Which one a site wears is decided by
   _structure.py so that no two sites of one country repeat a shape - they meet in the
   same search result, and an identical skeleton is what gives a network away. */

/* inline navigation, used by the headers that have room for it */
.topn__nav { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topn__nlink { font: var(--text-body-sm); color: var(--color-ink-muted);
  text-decoration: none; white-space: nowrap; }
.topn__nlink:hover { color: var(--br-accent); }
@media (max-width: 1100px) { .topn__nav { display: none; } }

/* v1 - brand in the middle */
.topn--v1 .topn__bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); }
.topn--v1 .topn__side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topn--v1 .topn__side--r { justify-content: flex-end; }
/* The sides had min-width: 0 and the middle did not, so the brand kept its full
   width and the columns overlapped: on a 390px phone the site name was printed on
   top of the "Sponsored" caption. Live on the first batch too, with the SVG lockups,
   which is how it went unnoticed - it only shows at phone widths. */
.topn--v1 .topn__brand { justify-content: center; min-width: 0; }
/* min-width: 0 has to go on every box between the flex item and the text, or the
   name keeps its full width inside a box that was already squeezed and prints over
   whatever stands next to it. */
.topn--v1 .topn__names { min-width: 0; }
.topn--v1 .topn__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  /* Three columns stop fitting well before the phone. The bar becomes a row, and the
     brand gives up the middle rather than the header giving up a line.
     The action side must NOT shrink: justify-content: flex-end means a squeezed
     box spills its contents out to the LEFT, which is how the sponsor caption ended
     up printed against the site name even once the columns themselves no longer
     overlapped. The name is the part that can give way, and it does so with an
     ellipsis. */
  .topn--v1 .topn__bar { display: flex; justify-content: space-between; }
  .topn--v1 .topn__side--l { flex: 0 0 auto; }
  .topn--v1 .topn__side--r { flex: 0 0 auto; }
  .topn--v1 .topn__brand { flex: 0 1 auto; }
}

/* v2 - two storeys */
.topn--v2 .topn__strip { border-top: 1px solid var(--color-line);
  background: var(--color-surface-card); }
.topn--v2 .topn__stripin { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 40px; }
.topn--v2 .topn__checked { font: var(--text-body-sm); white-space: nowrap; }
@media (max-width: 1100px) { .topn--v2 .topn__strip { display: none; } }

/* v3 - compact */
.topn--v3 .topn__bar { min-height: 56px; gap: var(--space-4); }
/* The sections sit between the brand and the action, with the gap of their own, or
   the last link runs under the "Sponsored / Site partner" caption of the button. */
.topn--v3 .topn__nav { margin: 0 auto 0 var(--space-4); gap: 16px; flex-wrap: nowrap;
  overflow: hidden; }
.topn--v3 .topn__right { flex: 0 0 auto; }

/* v4 - brand on the right */
.topn--v4 .topn__lead { display: flex; align-items: center; gap: 18px; margin-right: auto;
  min-width: 0; }
.topn--v4 .topn__right { margin-left: 0; }

/* ----- footers */
.end--v1 .end__top { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.end--v1 .end__ident { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.end--v1 .end__notes { flex: 2 1 420px; display: grid; gap: 14px; }
.end--v1 .end__links { padding-top: var(--space-4); border-top: 1px solid var(--color-line); }

.end__box { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm); background: var(--color-surface-card); }
.end__box--quiet { border-style: dashed; background: none; }

.end--v3 .end__in--split { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.end--v3 .end__half { flex: 1 1 320px; display: flex; flex-direction: column;
  gap: var(--space-4); min-width: 0; }
.end--v3 .end__pair { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.end--v3 .end__half--notes { gap: 16px; }

.end--v4 .end__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.end__strip { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-block: 14px;
  border-block: 1px solid var(--color-line); }
.end__strip a { font: var(--text-body-sm); color: var(--color-ink-muted);
  text-decoration: none; }
.end__strip a:hover { color: var(--br-accent); }

/* ----- tables */
.switches--sel { justify-content: space-between; }
.switches__sel { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.switches__sel select { min-height: 36px; padding: 0 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-line-strong); background: var(--color-surface-card);
  color: var(--color-ink); font: var(--text-body-sm); }

/* v1, v2 - cards. The row keeps its class and its data, only the shape changes. */
.sheet2--v1, .sheet2--v2 { border: 0; border-radius: 0; background: none; }
.sheet2--v1 .sheet2__body, .sheet2--v2 .sheet2__body { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.sheet2--v1 .rec, .sheet2--v2 .rec { display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm); background: var(--color-surface-card); }
.sheet2--v1 .rec__top, .sheet2--v2 .rec__top { display: flex; align-items: center; gap: 10px;
  min-width: 0; }
.sheet2--v1 .rec__link, .sheet2--v2 .rec__link { font: 600 16px/20px var(--font-sans);
  color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.sheet2--v1 .rec__facts, .sheet2--v2 .rec__facts { margin: 0; display: grid; gap: 8px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rec__f { min-width: 0; }
.rec__f dt, .rec__f dd { margin: 0; }
.rec__f dd { font: var(--text-num); font-size: 14px; overflow-wrap: anywhere; }
.sheet2--v1 .rec__details, .sheet2--v2 .rec__details { margin-top: auto; }
.sheet2--v2 .rec { border-left: 3px solid var(--br-accent); }
.sheet2--v2 .rec__pos { font: 600 30px/1 var(--font-mono); color: var(--br-accent); width: auto; }

/* v3 - compact rows: no stripes, tighter leading, dotted separators */
.sheet2--v3 .rec { padding: 8px 14px; border-bottom: 1px dotted var(--color-line-strong); }
.sheet2--v3 .rec:nth-child(even) { background: none; }
.sheet2--v3 .rec__names a { font-size: 14px; }

/* v4 - bands of three */
.sheet2__band { padding: 6px 14px; background: var(--color-surface-sunken);
  border-block: 1px solid var(--color-line); }
/* The band carries no text any more - it is a rule, so it gets its own height.
   min-height alone left it 0px tall on one of the five table shapes, where the
   band is a grid item: it has to span the row and be given a height outright. */
.sheet2__band { height: 10px; min-height: 10px; padding: 0; grid-column: 1 / -1; }

/* ------------------------------------------------------------------ profiles
   The block every in-page broker link lands on. scroll-margin-top is what makes a
   jump land below the sticky header instead of under it. */
.file2__grid { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.file2 { scroll-margin-top: calc(var(--hdr-h, 104px) + 36px); display: flex; flex-direction: column; gap: 14px;
  padding: 18px; border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-surface-card); }
.file2:target { border-color: var(--br-accent); box-shadow: 0 0 0 2px var(--br-accent-weak, transparent); }
.file2--sponsor { border-color: var(--br-accent); }
.file2__head { display: flex; align-items: center; gap: 12px; }
.file2__names { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.file2__names h3 { margin: 0; font-size: 1.05rem; }
/* The broker name carries the link to its review: underlined so it reads as one. */
.file2__name { color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--br-accent); }
.file2__name:hover, .file2__name:focus-visible {
  color: var(--br-accent); text-decoration-color: currentColor; }
.file2__facts { display: grid; gap: 10px; margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.file2__f dt { margin-bottom: 2px; }
.file2__f dd { margin: 0; }
.file2__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.file2__lines li { display: grid; gap: 2px; min-width: 0; }
.file2__lines span { overflow-wrap: anywhere; }
.file2__checked { margin-top: auto; }
.file2__cta a { width: 100%; }
@media (max-width: 480px) {
  .file2__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Anything a link jumps to has to clear the sticky header. Without this the nav
   anchors landed the section's heading underneath it: the page had scrolled, the
   reader saw the middle of a section and no title, so the link read as broken.
   Found by the render gate, not by looking. */
/* 🚨 104px was a guess at the header's height, and the header is not one height:
   it grows with the brand name and with the row of section links, so on two of the
   eight brand sites it stood 106px tall and the anchor landed two pixels under it.
   The real height is measured in site.js into --hdr-h; the constant here is only the
   fallback for the moment before the script runs. */
[id] { scroll-margin-top: calc(var(--hdr-h, 104px) + 12px); }

/* ------------------------------------------------------------ inner pages
   An article page: breadcrumbs, prose, then the same fact blocks the hub uses. */
/* .where carries .wrap too, and a flat `padding` here wiped .wrap's side gutter:
   the trail started 32px left of the header, the kicker and the h1. Only the
   top padding belongs to this rule. */
.where { padding-top: 18px; }
.where__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0;
  padding: 0; font-size: 13px; color: var(--color-ink-muted); }
.where__list li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.where__list a { color: inherit; }
.where__list a:hover { color: var(--br-accent); }
.doc2 { max-width: 760px; }
.doc2__head { padding: 26px 0 8px; display: grid; gap: 12px; }
.doc2__head h1 { margin: 0; }
.doc2__lede { margin: 0; font-size: clamp(1rem, 2.2vw, 1.15rem); color: var(--color-ink-muted); }
.read { padding: 22px 0 4px; }
.read h2 { margin: 0 0 12px; }
.read__body { display: grid; gap: 14px; }
.read__body p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.read__list { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.6; }
.doc2__more { margin: 16px 0 0; }
.near__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.near__list a { overflow-wrap: anywhere; }

/* the interface shot on a review page */
.doc2__shot { margin: var(--space-5) 0; display: grid; gap: 10px; }
.doc2__shot img { width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--color-line); }
.doc2__shot figcaption { font: var(--text-body-sm); display: grid; gap: 2px; }

/* v0 keeps the search box, so its sections sit tighter and give way first */
.topn--v0 .topn__nav { gap: 14px; overflow: hidden; }
@media (max-width: 1280px) { .topn--v0 .topn__nav { display: none; } }
@media (max-width: 1280px) { .topn--v0 .topn__burger { display: grid; } }

/* The kit has no --space-* tokens: a padding written with them resolves to
   nothing and the card shows its text glued to its own border. Plain values. */
/* Layout F - the brand site. One subject, its figures, and the way out.
   Only what this layout adds; everything else comes from the kit stylesheet. */

[data-layout="brand"] .top--brand { display: grid; gap: clamp(24px, 4vw, 40px); align-items: start; }
@media (min-width: 900px) {
  [data-layout="brand"] .top--brand { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* the status line under the lede: a chip, not a sentence lost in the paragraph */
[data-layout="brand"] .bs__chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .8rem; border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill); font-size: .9rem; margin: 0;
  width: fit-content; max-width: 100%; justify-self: start;
}
[data-layout="brand"] .bs__dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--color-warning, var(--br-accent));
}

/* the small card beside the hero: what the figures below were checked against */
[data-layout="brand"] .bf { display: grid; gap: .35rem; padding: 16px; min-width: 0; }
[data-layout="brand"] .bf__name { font-weight: 700; font-size: 1.15rem; margin: 0; }

/* the fact grid: label over figure, two or four across */
[data-layout="brand"] .bf__grid {
  display: grid; gap: 16px; margin: 0;
  padding: clamp(18px, 3vw, 28px); grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { [data-layout="brand"] .bf__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
[data-layout="brand"] .bf__row { display: grid; gap: .25rem; min-width: 0; }
[data-layout="brand"] .bf__row dt { margin: 0; }
[data-layout="brand"] .bf__row dd { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }

/* the four steps */
[data-layout="brand"] .bt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { [data-layout="brand"] .bt__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
[data-layout="brand"] .bt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  padding: 16px; border: 1px solid var(--color-line);
  border-radius: var(--radius-md); background: var(--color-surface-card);
}
[data-layout="brand"] .bt__n { color: var(--br-accent); line-height: 1; }
[data-layout="brand"] .bt__b h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
[data-layout="brand"] .bt__b p { margin: 0 0 .6rem; }
[data-layout="brand"] .bt__more { font-size: .92rem; }

/* the guide cards */
[data-layout="brand"] .bg2__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
[data-layout="brand"] .bg2 {
  display: grid; gap: .35rem; padding: 16px; min-width: 0;
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-surface-card); text-decoration: none; color: inherit;
}
[data-layout="brand"] .bg2:hover { border-color: var(--br-accent); }
[data-layout="brand"] .bg2__t { font-weight: 700; }
[data-layout="brand"] .bg2__d { font-size: .92rem; }

/* the sponsored panel on this layout sits in the page flow, not beside a table */
[data-layout="brand"] .zone .spot { display: grid; gap: clamp(18px, 3vw, 28px); padding: clamp(18px, 3vw, 28px); }
@media (min-width: 900px) {
  [data-layout="brand"] .zone .spot { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
}
[data-layout="brand"] .zone .spot__stats { display: grid; gap: 10px; margin: 0; }
[data-layout="brand"] .zone .spot__stats div { display: grid; gap: .2rem; }
[data-layout="brand"] .zone .spot__stats dd { margin: 0; font-size: 1.05rem; }
[data-layout="brand"] .bs__text p { margin: 0 0 .8rem; }

/* The paid placement is not one of the compared blocks and must not read as one:
   it spans the whole row. Inside, the plank is laid out instead of stacked - the
   name, the three figures and the button share the top line, and the three detail
   lines sit under them across the full width (Eduard, 16.10.2026). */
[data-layout="brand"] .file2__grid .file2--sponsor { grid-column: 1 / -1; }
[data-layout="brand"] .file2--sponsor .file2__checked { display: none; }

@media (min-width: 760px) {
  [data-layout="brand"] .file2__grid .file2--sponsor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
    grid-template-areas: "head facts cta" "lines lines lines";
    column-gap: clamp(20px, 3vw, 44px); row-gap: 18px; align-items: center;
  }
  [data-layout="brand"] .file2--sponsor .file2__head { grid-area: head; margin: 0; }
  [data-layout="brand"] .file2--sponsor .file2__facts {
    grid-area: facts; margin: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  }
  [data-layout="brand"] .file2--sponsor .file2__cta { grid-area: cta; margin: 0; }
  [data-layout="brand"] .file2--sponsor .file2__cta .br-btn { width: auto; white-space: nowrap; }
  [data-layout="brand"] .file2--sponsor .file2__lines {
    grid-area: lines; margin: 0; padding-top: 18px;
    border-top: 1px solid var(--color-line);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px clamp(20px, 3vw, 44px); align-items: start;
  }
  [data-layout="brand"] .file2--sponsor .file2__lines li { display: grid; gap: 2px; }
}