@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Figtree:wght@400;500;600;800&family=IBM+Plex+Mono:wght@400;500&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 indigo - type figtreenews - geometry folio. Generated per site by _skin.py. */
:root {
  --color-accent-apps: #3a46b8;
  --color-accent-money: #3a46b8;
  --color-accent-registry: #3a46b8;
  --color-accent-learn: #3a46b8;
  --color-accent-terminal: #3a46b8;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-display: "Newsreader", "Figtree", system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 9px;
  --space-3: 13px;
  --space-4: 17px;
  --space-6: 26px;
  --space-8: 35px;
  --space-12: 52px;
  --space-20: 86px;
}
:root[data-theme="dark"] {
  --color-accent-apps: #8f9bf0;
  --color-accent-money: #8f9bf0;
  --color-accent-registry: #8f9bf0;
  --color-accent-learn: #8f9bf0;
  --color-accent-terminal: #8f9bf0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --color-accent-apps: #8f9bf0;
  --color-accent-money: #8f9bf0;
  --color-accent-registry: #8f9bf0;
  --color-accent-learn: #8f9bf0;
  --color-accent-terminal: #8f9bf0;
  }
}

/* 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(.ac__btn):not(.mn__link):hover {
  color: var(--color-ink);
}
.br-btn:hover, .hd__btn:hover, .rw__open:hover, .rg__cta:hover, .wn__btn:hover,
.sticky__btn:hover, .mnav__btn:hover, .sp__next:hover, .hero__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 */
.hd { position: sticky; top: 0; z-index: 30; background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-line-strong); }
.hd__bar { display: flex; align-items: center; gap: var(--space-4);
  padding-block: 10px; }
.hd__brand { display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--color-ink); flex-shrink: 0; }
.hd__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); }
.hd__names { display: flex; flex-direction: column; gap: 2px; }
.hd__name { font: 700 15px/18px var(--font-sans); }
.hd__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); }
.hd__search span { font: 500 13px/1 var(--font-mono); }
.hd__search input { flex: 1; min-width: 0; border: 0; background: transparent;
  outline: none; color: var(--color-ink); font: var(--text-body-sm); }
.hd__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hd__cta { display: flex; align-items: center; gap: 10px; }
.hd__ctatext { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hd__btn { min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm);
  font: 600 14px/18px var(--font-sans); }
.hd__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; }
.hd__burger { display: none; }

.mnav { border-top: 1px solid var(--color-line); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4); }
.mnav__links { display: flex; flex-direction: column; }
.mnav__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); }
.mnav__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); }
.mnav__ctatop { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mnav__btn { justify-content: center; min-height: 48px; }

/* ----------------------------------------------------------------- hero */
.hero { 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); }
.hero__text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column;
  gap: var(--space-4); }
.hero h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; text-wrap: balance; }
.hero__lede { margin: 0; max-width: 60ch; }

.pv { flex: 1 1 380px; min-width: 0; padding: 20px; border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--space-4); }
.pv__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); }
.pv__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; }
.pv__tab[aria-selected="true"] { background: var(--br-accent); color: var(--color-on-accent); }
.pv__count { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pv__num { font: 600 56px/1 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--br-accent); }
.pv__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pv__chip { padding: 3px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-line-strong); font: var(--text-body-sm); font-size: 13px; }
.pv__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--color-line); }
.pv__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 */
.sec { padding-block: clamp(32px, 4vw, 48px); display: flex; flex-direction: column;
  gap: var(--space-4); }
.sec__head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-4); flex-wrap: wrap; }
.sec__meta { font: var(--text-body-sm); }
.sec__meta b { font: var(--text-num); font-size: 14px; color: var(--color-ink); }

/* ----------------------------------------------------------------- table */
.cols { 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); }
.cols__item { display: flex; align-items: center; gap: 6px; min-height: 36px;
  font: var(--text-body-sm); cursor: pointer; }
.cols__item input { width: 16px; height: 16px; margin: 0; }
.cols__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; }

.tbl { border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  overflow: hidden; }
.tbl__head, .rw { 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)); }
.tbl__head { background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-line-strong); }
.th { 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); }
.th:disabled { cursor: default; }
.th[aria-sort="ascending"], .th[aria-sort="descending"] { color: var(--br-accent); }
.th__arrow { font: 500 11px/1 var(--font-mono); }
.rw { padding: 12px 14px; align-items: center; border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-card); }
.rw:nth-child(even) { background: var(--color-surface-sunken); }
.rw:last-child { border-bottom: 0; }
.rw--sponsor { box-shadow: var(--shadow-sponsor); position: relative; }
.rw__c { min-width: 0; }
.rw__name { display: flex; gap: 10px; align-items: center; }
.rw__pos { font-size: 13px; color: var(--color-ink-muted); width: 22px; flex-shrink: 0; }
.rw__names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rw__names a { font: 600 15px/20px var(--font-sans); color: var(--color-ink);
  text-decoration: none; overflow-wrap: anywhere; }
.rw__tag { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.rw__plat { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pl { padding: 2px 6px; border-radius: var(--radius-sm);
  font: 600 11px/16px var(--font-mono); }
.pl--on { border: 1px solid var(--color-line-strong); color: var(--color-ink); }
.pl--off { border: 1px dashed var(--color-line); color: var(--color-ink-muted); }
.rw__n { font: var(--text-num); font-variant-numeric: tabular-nums; text-align: right; }
.rw__reg { font: var(--text-num); font-size: 13px; overflow-wrap: anywhere; }
.rw__open, .rw__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; }
.rw__open { background: var(--br-accent); color: var(--color-on-accent); }
.rw__details { border: 1px solid var(--color-line-strong); color: var(--color-ink); }
.rw__details:hover { border-color: var(--br-accent); }

/* ---------------------------------------------------------------- versus */
.vs { display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-md); }
.vs__head, .vs__row { display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.vs__head { padding: 12px 14px; background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-line-strong); font: 600 13px/16px var(--font-mono); }
.vs__row { padding: 10px 14px; border-bottom: 1px solid var(--color-line); }
.vs__row:nth-child(even) { background: var(--color-surface-sunken); }
.vs__row span:first-child { font: var(--text-body-sm); color: var(--color-ink-muted); }
.vs__row .br-num { font-size: 14px; }
.vs__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 */
.mt { 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; }
.mt__item { padding: 18px; background: var(--color-surface-card); display: flex;
  flex-direction: column; gap: 8px; }
.mt__n { color: var(--br-accent); }
.mt__t { font: 600 16px/22px var(--font-sans); }
.mt__item span:last-child { font: var(--text-body-sm); text-wrap: pretty; }

/* ------------------------------------------------------------------- faq */
.sec--faq { display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px 48px;
  align-items: flex-start; padding-bottom: clamp(56px, 7vw, 88px); }
.sec--faq h2 { flex: 1 1 240px; }
.fq { flex: 3 1 520px; min-width: 0; max-width: 100%;
  border-top: 1px solid var(--color-line-strong); }
.fq__item { border-bottom: 1px solid var(--color-line); }
.fq__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; }
.fq__sign { font: 500 16px/1 var(--font-mono); color: var(--br-accent); }
.fq__a p { margin: 0; padding: 0 32px 18px 0; color: var(--color-ink-muted);
  text-wrap: pretty; }

/* ---------------------------------------------------------------- footer */
.ft { border-top: 1px solid var(--color-line-strong);
  background: var(--color-surface-sunken); }
.ft__in { display: flex; flex-direction: column; gap: 28px; padding-block: 40px; }
.ft .grid { gap: 28px; }
.ft__col { display: flex; flex-direction: column; gap: 8px; }
.ft__col a { color: var(--color-ink); text-decoration: none; font: var(--text-body-sm); }
.ft__brand { font: 700 15px/18px var(--font-sans); }
.ft__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; }
.ft__note .br-label { color: var(--color-ink); }

/* ---------------------------------------------------------------- sticky */
.sticky { 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; }
.sticky__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sticky__name { font: 600 15px/20px var(--font-sans); }
.sticky__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) {
  .tbl__head, .rw { --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. */
  .tbl__head { display: none; }
  .rw { grid-template-columns: 1fr auto; row-gap: 10px; padding: 14px;
    align-items: start; }
  .rw__name { grid-column: 1 / -1; }
  .rw__plat { grid-column: 1 / -1; }
  /* In card mode every figure is labelled; a bare "$10" on its own told the
     reader nothing. */
  .rw__n[data-col="dep"], .rw__n[data-col="trade"], .rw__n[data-col="pay"], .rw__reg {
    grid-column: 1 / -1; text-align: left; display: flex; gap: 8px; }
  .rw__n[data-col="dep"]::before { content: "Min deposit"; }
  .rw__n[data-col="trade"]::before { content: "Min trade"; }
  .rw__n[data-col="pay"]::before { content: "Payout"; }
  .rw__reg::before { content: "Regulator"; }
  .rw__n::before, .rw__reg::before { font: var(--text-label);
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--color-ink-muted); min-width: 92px; }
  .rw__act { grid-column: 1 / -1; }
  .rw__open, .rw__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. */
  .hd__burger { display: grid; }
}
@media (max-width: 767px) {
  .hd__search { display: none; }
  .hd__partner { display: none; }
  .hd__btn { padding: 0 12px; }
  .sec--faq h2 { flex-basis: 100%; }
  .ft__in { padding-bottom: 96px; }
}
@media (min-width: 768px) {
  .mnav { display: none; }
}

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

/* ======================================================= layout A — apps */
.bi--md { width: 56px; height: 56px; border-radius: var(--radius-md); font-size: 20px; }
.bi--lg { width: 72px; height: 72px; border-radius: 20px; font-size: 28px; }
.hero--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 */
.hero--m1 { flex-direction: column; align-items: stretch; }
.hero--m1 .hero__text, .hero--m1 .bg { flex: 1 1 auto; }
.hero--m2 { flex-direction: row-reverse; align-items: center; }
.hero--m2 .hero__text { text-align: right; }
@media (max-width: 860px) {
  .hero--m2 { flex-direction: column; }
  .hero--m2 .hero__text { text-align: left; }
}
/* learn: the artwork swaps sides, or the opening centres and the art sits under it */
.hero--l1 { flex-direction: row-reverse; }
.hero--l2 { flex-direction: column; align-items: center; text-align: center; }
.hero--l2 .hero__text { align-items: center; }
.hero--l2 .hero__act { justify-content: center; }
/* registry: the opening stacks, or reverses */
.hero--r1 { flex-direction: column; align-items: stretch; }
.hero--r2 { flex-direction: row-reverse; }
@media (max-width: 860px) {
  .hero--l1, .hero--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. */
.hero--a1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--space-6) var(--space-8); align-items: start; }
.hero--a1 .hero__kicker, .hero--a1 h1, .hero--a1 .hero__lede { grid-column: 1; }
.hero--a1 .st__row { grid-column: 2; grid-row: 1 / span 3; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.hero--a2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-8); align-items: end; }
.hero--a2 .hero__kicker { grid-column: 1 / -1; }
.hero--a2 h1 { grid-column: 1; font-size: clamp(34px, 6vw, 68px); max-width: 14ch; }
.hero--a2 .hero__lede { grid-column: 2; max-width: 46ch; }
.hero--a2 .st__row { grid-column: 1 / -1; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--color-line); }
.hero--a2 .st { 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; }
.hero--a2 .st:last-child { border-right: 0; }
@media (max-width: 860px) {
  .hero--a1, .hero--a2 { grid-template-columns: minmax(0, 1fr); }
  .hero--a1 .st__row, .hero--a2 h1, .hero--a2 .hero__lede, .hero--a2 .st__row {
    grid-column: 1; grid-row: auto; }
  .hero--a2 .st__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero--a2 .st: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. */
.hero--t1 { flex-direction: column; align-items: stretch; }
.hero--t1 .hero__text { flex: 1 1 auto; }
.hero--t1 .pv { flex: 1 1 auto; }
.hero--t1 .pv__tabs { grid-template-columns: repeat(3, minmax(0, 180px)); }
.hero--t2 { flex-direction: column; align-items: center; text-align: center; }
.hero--t2 .hero__text { align-items: center; flex: 1 1 auto; }
.hero--t2 .hero__lede { max-width: 56ch; }
.hero--t2 .pv { 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; }
.hero--t2 .pv__tabs { grid-column: 1; }
.hero--t2 .pv__count { grid-column: 2; grid-row: 1; }
.hero--t2 .pv__chips, .hero--t2 .pv__foot { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .hero--t2 .pv { grid-template-columns: minmax(0, 1fr); }
  .hero--t2 .pv__count, .hero--t2 .pv__tabs { grid-column: 1; grid-row: auto; }
}

.hero__kicker { color: var(--br-accent); }
.hero--apps h1 { font-size: clamp(32px, 5.2vw, 60px); line-height: 1.05; max-width: 17ch; }
.st__row { display: grid; gap: 12px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.st { padding: 20px; border-radius: var(--radius-lg); display: flex;
  flex-direction: column; gap: 8px; }
.st__n { font-size: 30px; line-height: 34px; }
.sec__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; }

.ac__grid { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ac { padding: 20px; border-radius: 20px; display: flex; flex-direction: column;
  gap: 16px; }
.ac__head { display: flex; gap: 14px; align-items: flex-start; }
.ac__names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ac__title { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ac__title h3 { overflow-wrap: anywhere; }
.ac__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font: var(--text-body-sm); }
.ac__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); }
.ac__facts > div { padding: 10px 12px; background: var(--color-surface-sunken);
  display: flex; flex-direction: column; gap: 4px; }
.ac__facts dd { margin: 0; font: var(--text-body-sm); color: var(--color-ink); }
.ac__wide { grid-column: 1 / -1; }
.ac__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); }
.ac__btn:hover { background: var(--color-surface-sunken); color: var(--br-accent); }
.ac__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; }
  .ac__facts { grid-template-columns: 1fr; }
}

/* ====================================================== layout B — money */
.hero--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); }

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

.pm { padding: 16px; border-radius: var(--radius-md); display: flex; flex-direction: column;
  gap: 6px; }
.pm__t { font: 600 15px/20px var(--font-sans); }
.pm 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 */
.hero--learn { align-items: center; gap: 40px 64px; padding-block: clamp(40px, 8vw, 96px); }
.hero--learn .hero__text { flex: 3 1 460px; gap: var(--space-6); align-items: flex-start; }
.hero--learn h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.1; max-width: 16ch; }
.hero--learn .hero__lede { font-size: 19px; line-height: 32px; max-width: 52ch; }
.hero__art { flex: 2 1 280px; min-width: 0; display: flex; justify-content: center; }
.hero__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); }
.hero__act { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hero__start { min-height: 56px; padding: 0 28px; border-radius: var(--radius-pill);
  font-size: 18px; }
.hero__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); }

.sp__list { display: flex; flex-direction: column; gap: 16px; }
.sp { border-radius: 24px; background: var(--color-surface-card);
  border: 1px solid var(--color-line); overflow: hidden; scroll-margin-top: 140px; }
.sp:has(.sp__body:not([hidden])) { border-color: var(--br-accent); }
.sp__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); }
.sp__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); }
.sp__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp__title { font: 700 clamp(20px, 2.4vw, 25px)/1.25 var(--font-sans); }
.sp__teaser { font: var(--text-body-sm); }
.sp__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); }
.sp__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); }
.sp__text { padding-top: 20px; display: flex; flex-direction: column; gap: 14px;
  max-width: 70ch; }
.sp__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); }
.sp__rem { padding: 16px 20px; border-radius: var(--radius-lg);
  background: var(--color-surface-sunken); display: flex; gap: 12px; align-items: flex-start; }
.sp__rem .br-label { color: var(--br-accent); padding-top: 5px; flex-shrink: 0; }
.sp__nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sp__next { min-height: 48px; padding: 0 22px; border-radius: var(--radius-pill); }
.sp__lesson { min-height: 48px; display: inline-flex; align-items: center;
  font: 600 16px/20px var(--font-sans); }

.gl__grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.gl { 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; }
.gl[aria-expanded="true"] { border-color: var(--br-accent); }
.gl__top { display: flex; justify-content: space-between; width: 100%; gap: 8px; }
.gl__t { font: 700 17px/24px var(--font-sans); }
.gl__sign { font: 500 18px/24px var(--font-mono); color: var(--br-accent); }
.gl__d { font: var(--text-body-sm); font-size: 15px; line-height: 24px; text-wrap: pretty; }

.ms__grid { display: grid; gap: 0 48px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ms { padding: 22px 0; border-top: 1px solid var(--color-line-strong); display: grid;
  grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.ms__n { color: var(--br-accent); }
.ms__b { display: flex; flex-direction: column; gap: 8px; }
.ms__b h3 { font: 700 18px/26px var(--font-sans); }
.ms__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) {
  .sp__btn { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  .sp__sign { grid-row: 1; grid-column: 2; justify-self: end; }
  .sp__txt { grid-column: 1 / -1; }
}

/* ------------------------------------------------------- site brand mark */
.hd__logo { display: flex; align-items: center; }
.hd__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"] .hd__logo svg text { fill: var(--color-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hd__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. */
.hd__sign { display: flex; align-items: center; flex-shrink: 0; }
.hd__sign img { height: 32px; width: 32px; display: block; }
.hd__sign--p0, .hd__sign--p1, .hd__sign--p2, .hd__sign--p3 {
  background: #fff; padding: 4px; box-shadow: 0 0 0 1px rgba(17, 24, 38, .08); }
.hd__sign--p0 { border-radius: 50%; }
.hd__sign--p1 { border-radius: 26%; }
.hd__sign--p2 { border-radius: 14%; }
.hd__sign--p3 { border-radius: 4px; }

.hd__geo { align-self: center; }
@media (max-width: 520px) { .hd__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, .hd__btn { white-space: nowrap; }
.hd__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) {
  .hd__btnlong { display: none; }
  .hd__btnshort { display: inline; }
  .hd__search { max-width: 240px; }
  .hd__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. */
  .hd__cta { flex-direction: column; align-items: flex-end; gap: 2px; }
  .hd__ctatext { flex-direction: row; align-items: baseline; gap: 4px; }
  .hd__bar { gap: 8px; }
  .hd__btn { padding: 0 14px; }
  .hd__right { gap: 6px; }
  .hd__ctatext { gap: 0; }
  .hd__logo svg { height: 26px; }
  .hd__sign img { height: 26px; width: 26px; }
}
@media (max-width: 400px) {
  /* Three controls plus a lockup do not fit; the theme switch is the one a
     reader needs least on the first screen, and it stays in the menu. */
  .hd__icon[data-theme-toggle] { display: none; }
  .mnav .hd__icon[data-theme-toggle] { display: grid; }
}
.mnav__theme { align-self: flex-start; }
@media (min-width: 401px) { .mnav__theme { 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 */
.pl { display: inline-flex; align-items: center; gap: 4px; }
.pl 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; }
.rg__kicker { font: 600 14px/18px var(--font-serif); font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-label); color: var(--color-ink-muted); }
.hero--reg { align-items: flex-start; gap: 32px 56px;
  border-bottom: 1px solid var(--color-line-strong); }
.hero--reg .hero__text { flex: 2 1 480px; }
.hero--reg h1 { font: 600 clamp(30px, 4.4vw, 52px)/1.1 var(--font-serif);
  letter-spacing: -0.01em; }
.hero--reg .hero__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; }

.rg { 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; }
.rg__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rg__head h3 { font: 600 19px/25px var(--font-serif); }
.rg__n--bad { color: var(--color-negative); }
.rg p { margin: 0; font: var(--text-body-sm); text-wrap: pretty; }
.rg__list { margin: 0; padding: 12px 0 0; list-style: none;
  border-top: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 8px; }
.rg__list li { display: flex; justify-content: space-between; gap: 12px;
  font: var(--text-body-sm); }
.rg__list a { color: var(--color-ink); font-weight: 600; }
.rg__list .br-faint { text-align: right; }
.rg__empty { font-style: italic; color: var(--color-ink-muted); }

.rtbl { border-top: 2px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); }
.rr { 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); }
.rr--head { border-bottom: 1px solid var(--color-ink); padding-block: 10px; }
.rr--sponsor { box-shadow: var(--shadow-sponsor); }
.rr__pos { color: var(--color-ink-muted); }
.rr__name { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rr__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rr__brand a { font: 600 16px/22px var(--font-sans); color: var(--color-ink);
  overflow-wrap: anywhere; }
.rr__tag { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.rr__reg, .rr__jur { font: var(--text-body-sm); }
.rr__st { display: flex; gap: 8px; align-items: baseline; font: var(--text-body-sm); }
.rr__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); }
.rg__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; }

.sec--split { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-start; }
.sec__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) {
  .rr { grid-template-columns: 30px minmax(0, 1fr); row-gap: 8px; }
  .rr--head { display: none; }
  .rr__reg, .rr__jur, .rr__st { grid-column: 2; }
  .rr__reg::before { content: "Regulator: "; color: var(--color-ink-muted); }
  .rr__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; } }
.pp { 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; }
.pp__top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pp__head { display: flex; gap: 12px; align-items: center; }
.pp__head h3 { font: 600 20px/26px var(--font-serif); }
.pp__facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.pp__facts > div { display: flex; flex-direction: column; gap: 2px; }
.pp__facts dd { margin: 0; }
.pp__cta { justify-content: center; }
.pp__note { margin: 0; }
.pp--wide { border-radius: var(--radius-lg); }
.pp--wide .pp__facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
@media (min-width: 760px) {
  .pp--wide { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 20px; }
  .pp--wide .pp__top { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 2px; }
  .pp--wide .pp__head { grid-column: 2; }
  .pp--wide .pp__facts { grid-column: 1 / -1; }
  .pp--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 */
.hd__nav { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hd__nlink { font: var(--text-body-sm); color: var(--color-ink-muted);
  text-decoration: none; white-space: nowrap; }
.hd__nlink:hover { color: var(--br-accent); }
@media (max-width: 1100px) { .hd__nav { display: none; } }

/* v1 - brand in the middle */
.hd--v1 .hd__bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); }
.hd--v1 .hd__side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hd--v1 .hd__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. */
.hd--v1 .hd__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. */
.hd--v1 .hd__names { min-width: 0; }
.hd--v1 .hd__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. */
  .hd--v1 .hd__bar { display: flex; justify-content: space-between; }
  .hd--v1 .hd__side--l { flex: 0 0 auto; }
  .hd--v1 .hd__side--r { flex: 0 0 auto; }
  .hd--v1 .hd__brand { flex: 0 1 auto; }
}

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

/* v3 - compact */
.hd--v3 .hd__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. */
.hd--v3 .hd__nav { margin: 0 auto 0 var(--space-4); gap: 16px; flex-wrap: nowrap;
  overflow: hidden; }
.hd--v3 .hd__right { flex: 0 0 auto; }

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

/* ----- footers */
.ft--v1 .ft__top { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.ft--v1 .ft__ident { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.ft--v1 .ft__notes { flex: 2 1 420px; display: grid; gap: 14px; }
.ft--v1 .ft__links { padding-top: var(--space-4); border-top: 1px solid var(--color-line); }

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

.ft--v3 .ft__in--split { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.ft--v3 .ft__half { flex: 1 1 320px; display: flex; flex-direction: column;
  gap: var(--space-4); min-width: 0; }
.ft--v3 .ft__pair { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.ft--v3 .ft__half--notes { gap: 16px; }

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

/* ----- tables */
.cols--sel { justify-content: space-between; }
.cols__sel { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.cols__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. */
.tbl--v1, .tbl--v2 { border: 0; border-radius: 0; background: none; }
.tbl--v1 .tbl__body, .tbl--v2 .tbl__body { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tbl--v1 .rw, .tbl--v2 .rw { 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); }
.tbl--v1 .rw__top, .tbl--v2 .rw__top { display: flex; align-items: center; gap: 10px;
  min-width: 0; }
.tbl--v1 .rw__link, .tbl--v2 .rw__link { font: 600 16px/20px var(--font-sans);
  color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.tbl--v1 .rw__facts, .tbl--v2 .rw__facts { margin: 0; display: grid; gap: 8px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rw__f { min-width: 0; }
.rw__f dt, .rw__f dd { margin: 0; }
.rw__f dd { font: var(--text-num); font-size: 14px; overflow-wrap: anywhere; }
.tbl--v1 .rw__details, .tbl--v2 .rw__details { margin-top: auto; }
.tbl--v2 .rw { border-left: 3px solid var(--br-accent); }
.tbl--v2 .rw__pos { font: 600 30px/1 var(--font-mono); color: var(--br-accent); width: auto; }

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

/* v4 - bands of three */
.tbl__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. */
.tbl__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. */
.prof__grid { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.prof { scroll-margin-top: 140px; 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); }
.prof:target { border-color: var(--br-accent); box-shadow: 0 0 0 2px var(--br-accent-weak, transparent); }
.prof--sponsor { border-color: var(--br-accent); }
.prof__head { display: flex; align-items: center; gap: 12px; }
.prof__names { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.prof__names h3 { margin: 0; font-size: 1.05rem; }
/* The broker name carries the link to its review: underlined so it reads as one. */
.prof__name { color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--br-accent); }
.prof__name:hover, .prof__name:focus-visible {
  color: var(--br-accent); text-decoration-color: currentColor; }
.prof__facts { display: grid; gap: 10px; margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prof__f dt { margin-bottom: 2px; }
.prof__f dd { margin: 0; }
.prof__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prof__lines li { display: grid; gap: 2px; min-width: 0; }
.prof__lines span { overflow-wrap: anywhere; }
.prof__checked { margin-top: auto; }
.prof__cta a { width: 100%; }
@media (max-width: 480px) {
  .prof__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. */
[id] { scroll-margin-top: 104px; }

/* ------------------------------------------------------------ inner pages
   An article page: breadcrumbs, prose, then the same fact blocks the hub uses. */
.bc { padding: 18px 0 0; }
.bc__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0;
  padding: 0; font-size: 13px; color: var(--color-ink-muted); }
.bc__list li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.bc__list a { color: inherit; }
.bc__list a:hover { color: var(--br-accent); }
.art { max-width: 760px; }
.art__head { padding: 26px 0 8px; display: grid; gap: 12px; }
.art__head h1 { margin: 0; }
.art__lede { margin: 0; font-size: clamp(1rem, 2.2vw, 1.15rem); color: var(--color-ink-muted); }
.pr { padding: 22px 0 4px; }
.pr h2 { margin: 0 0 12px; }
.pr__body { display: grid; gap: 14px; }
.pr__body p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.pr__list { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.6; }
.art__more { margin: 16px 0 0; }
.rel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rel__list a { overflow-wrap: anywhere; }

/* the interface shot on a review page */
.art__shot { margin: var(--space-5) 0; display: grid; gap: 10px; }
.art__shot img { width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--color-line); }
.art__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 */
.hd--v0 .hd__nav { gap: 14px; overflow: hidden; }
@media (max-width: 1280px) { .hd--v0 .hd__nav { display: none; } }
@media (max-width: 1280px) { .hd--v0 .hd__burger { display: grid; } }

/* Layout "folio" - the light app catalogue of topforexindia.com.
   Source: Claude Design, TopForex-Home.dc.html + topforex.css (14.10.2026), carried
   onto the kit's class vocabulary. Ships only where layout is "folio" and is appended
   after kit/site.css, so it may restate a kit rule.

   Scoped to [data-layout="folio"] throughout: a rule that escaped this file would
   land on the twenty live sites. Unlike "desk" this design keeps the kit's accent
   contract (a saturated fill under white ink in the light theme, a pale fill under
   dark ink in the dark one), so no second colour pair is needed. */

/* ------------------------------------------------------------------ palette */
:root[data-layout="folio"] {
  --color-surface-page: #ffffff;
  --color-surface-card: #ffffff;
  /* The warm band. In this design it is a section background, not a sunken panel. */
  --color-surface-sunken: #f5f3ef;
  --color-ink: #18171c;
  --color-ink-muted: #5a5966;
  --color-ink-faint: #6b6a78;
  --color-line: #e6e3dd;
  --color-line-strong: #cfcbc3;
  --folio-soft: #eceefb;
  --folio-soft: color-mix(in oklab, var(--br-accent) 8%, var(--color-surface-card));
  --folio-edge: #c9cdf0;
  --folio-edge: color-mix(in oklab, var(--br-accent) 35%, var(--color-line));
  --radius-card: 16px;
  --measure: 72ch;
}
:root[data-layout="folio"][data-theme="dark"] {
  --color-surface-page: #121216;
  --color-surface-card: #18181d;
  --color-surface-sunken: #1d1c1a;
  --color-ink: #ecebe7;
  --color-ink-muted: #a9a8b4;
  --color-ink-faint: #9796a4;
  --color-line: #2c2c33;
  --color-line-strong: #43434c;
  --folio-soft: #24243a;
  --folio-soft: color-mix(in oklab, var(--br-accent) 16%, var(--color-surface-card));
  --folio-edge: #3d3f66;
  --folio-edge: color-mix(in oklab, var(--br-accent) 35%, var(--color-line));
}
@media (prefers-color-scheme: dark) {
  :root[data-layout="folio"]:not([data-theme="light"]) {
    --color-surface-page: #121216;
    --color-surface-card: #18181d;
    --color-surface-sunken: #1d1c1a;
    --color-ink: #ecebe7;
    --color-ink-muted: #a9a8b4;
    --color-ink-faint: #9796a4;
    --color-line: #2c2c33;
    --color-line-strong: #43434c;
    --folio-soft: #24243a;
    --folio-soft: color-mix(in oklab, var(--br-accent) 16%, var(--color-surface-card));
    --folio-edge: #3d3f66;
    --folio-edge: color-mix(in oklab, var(--br-accent) 35%, var(--color-line));
  }
}
/* No accent token for this layout exists in the design system. */
[data-layout="folio"] { --br-accent: var(--color-accent-registry); }

/* --------------------------------------------------------------- typography */
[data-layout="folio"] .wrap { max-width: 1200px; }
[data-layout="folio"] .br h1,
[data-layout="folio"] .br h2,
[data-layout="folio"] .br h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
[data-layout="folio"] .br h1 { font-size: clamp(32px, 5.4vw, 64px); }
[data-layout="folio"] .br h2 { font-size: clamp(26px, 3vw, 44px); }
[data-layout="folio"] .br h3 { font-size: clamp(19px, 1.6vw, 26px); }
[data-layout="folio"] .br-label { font-weight: 600; }
[data-layout="folio"] .br-btn,
[data-layout="folio"] .rw__details,
[data-layout="folio"] .rw__open,
[data-layout="folio"] .hd__btn,
[data-layout="folio"] .sticky__btn,
[data-layout="folio"] .hd__icon { border-radius: var(--radius-md); }
[data-layout="folio"] .br-card,
[data-layout="folio"] .prof { border-radius: var(--radius-card); box-shadow: none; }

/* ------------------------------------------------------------------- header */
[data-layout="folio"] .hd {
  background: var(--color-surface-page);
  border-bottom: 1px solid var(--color-line);
}
[data-layout="folio"] .hd__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding-block: 8px;
}
[data-layout="folio"] .hd__brand { min-width: 0; }
[data-layout="folio"] .hd__sign { border-radius: 8px; }
[data-layout="folio"] .hd__name {
  font: 600 clamp(17px, 1.3vw, 21px)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-layout="folio"] .hd__nav { gap: 4px; justify-content: center; }
[data-layout="folio"] .hd__nlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
  font: 500 14px/1 var(--font-sans);
}
[data-layout="folio"] .hd__nlink:hover { color: var(--color-ink); background: var(--color-surface-sunken); }
[data-layout="folio"] .hd__right { flex: none; min-width: max-content; }
@media (max-width: 1100px) {
  [data-layout="folio"] .hd__bar { grid-template-columns: minmax(0, 1fr) max-content; }
}
[data-layout="folio"] .mnav__link { font-family: var(--font-display); font-size: clamp(19px, 5vw, 24px); }

/* --------------------------------------------------------------------- hero */
[data-layout="folio"] .hero--folio {
  display: block;
  /* The section below opens with its own air; adding the mockup's full hero
     padding on top of it left a hand's width of empty page between them. */
  padding: clamp(28px, 4vw, 56px) 0 clamp(16px, 2vw, 32px);
  border-bottom: 0;
}
[data-layout="folio"] .hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
[data-layout="folio"] .hero__text { display: flex; flex-direction: column; gap: 0; }
[data-layout="folio"] .hero__kicker { margin: 0; color: var(--color-ink-muted); letter-spacing: 0.08em; }
[data-layout="folio"] .hero--folio h1 { margin-top: 16px; }
[data-layout="folio"] .hero__lede {
  max-width: var(--measure);
  margin: 20px 0 0;
  font-size: clamp(17px, 1.2vw, 21px);
  color: var(--color-ink-muted);
}
[data-layout="folio"] .hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
}
[data-layout="folio"] .hero__facts li { display: flex; align-items: center; gap: 8px; }
[data-layout="folio"] .hero__facts li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--br-accent);
}
@media (max-width: 980px) {
  [data-layout="folio"] .hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- partner in rail */
/* The kit draws .pp as a bordered, purple-haloed box. Here the card inside it is
   the drawn object, so the outer block is stripped back to a label and a card. */
[data-layout="folio"] .pp--card {
  display: grid;
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
[data-layout="folio"] .pp__box {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--folio-soft);
  border: 1px solid var(--folio-edge);
  border-radius: var(--radius-card);
}
[data-layout="folio"] .pp__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-layout="folio"] .pp__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin: 0;
}
[data-layout="folio"] .pp__f { display: grid; gap: 2px; min-width: 0; }
[data-layout="folio"] .pp__f dt { font-size: 12px; font-weight: 500; color: var(--color-ink-muted); }
[data-layout="folio"] .pp__f dd {
  margin: 0;
  font: 600 clamp(15px, 1.1vw, 19px)/1.25 var(--font-sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
[data-layout="folio"] .pp__cta { width: 100%; justify-content: center; min-height: 48px; }
[data-layout="folio"] .pp__note { margin: 0; font-size: 14px; color: var(--color-ink-muted); }

/* ----------------------------------------------------------------- sections */
[data-layout="folio"] .sec { padding-block: clamp(40px, 5vw, 88px); }
/* Bands alternate down the page, so the air between sections reads as structure
   rather than as a hole. Chosen by position and not by a class: _variation shuffles
   the section order, so a class would band whichever section the shuffle happened to
   put under it, and two banded sections could end up side by side. */
[data-layout="folio"] main > .sec:nth-child(even),
[data-layout="folio"] .sec--band { background: var(--color-surface-sunken); }
[data-layout="folio"] .sec__intro { gap: 12px; max-width: var(--measure); margin-bottom: clamp(24px, 3vw, 44px); }
[data-layout="folio"] .sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
}
[data-layout="folio"] .sec__head .sec__intro { margin-bottom: 0; }
[data-layout="folio"] .sec__meta { font-size: 14px; }
[data-layout="folio"] .sec__note { margin-top: 12px; max-width: 80ch; }

/* ------------------------------------------------------------- broker cards */
[data-layout="folio"] .ac__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  [data-layout="folio"] .ac__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  [data-layout="folio"] .ac__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
[data-layout="folio"] .ac {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 18px;
  padding: clamp(18px, 2vw, 24px);
  background: var(--color-surface-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
[data-layout="folio"] .ac__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-layout="folio"] .ac__head h3 { min-width: 0; overflow-wrap: anywhere; }
[data-layout="folio"] .ac__rank { margin-left: auto; font-size: 12px; color: var(--color-ink-muted); }
[data-layout="folio"] .ac__figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin: 0;
  padding-block: 16px;
  border-block: 1px solid var(--color-line);
}
[data-layout="folio"] .ac__f { display: grid; gap: 2px; min-width: 0; }
[data-layout="folio"] .ac__f--wide { grid-column: 1 / -1; }
[data-layout="folio"] .ac__f dt { font-size: 12px; font-weight: 500; color: var(--color-ink-muted); }
[data-layout="folio"] .ac__f dd {
  margin: 0;
  font: 600 16px/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
[data-layout="folio"] .ac__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: flex-start;
}
[data-layout="folio"] .ac__tags .pl {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--color-surface-sunken);
  color: var(--color-ink);
  font: 600 12px/1.4 var(--font-sans);
}
/* The broker name is the link into its review: underlined so it reads as one. */
[data-layout="folio"] .ac__name {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  /* The sand edge measured 2.2:1 against the card - too faint to read as a link.
     Same accent as the profile names below, so both lists speak one language. */
  text-decoration-color: var(--br-accent);
}
[data-layout="folio"] .ac__name:hover {
  color: var(--br-accent);
  text-decoration-color: currentColor;
}

/* -------------------------------------------------------- comparison table */
[data-layout="folio"] .tbl--v6 {
  background: var(--color-surface-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
[data-layout="folio"] .tbl--v6 .tbl__head {
  background: none;
  border-bottom: 1px solid var(--color-line-strong);
}
[data-layout="folio"] .tbl--v6 .th { font-size: 12px; letter-spacing: 0.02em; text-transform: none; }
[data-layout="folio"] .tbl--v6 .rw { background: none; border-bottom: 1px solid var(--color-line); }
[data-layout="folio"] .tbl--v6 .rw:nth-child(even) { background: none; }
[data-layout="folio"] .tbl--v6 .rw:hover { background: var(--color-surface-sunken); }
[data-layout="folio"] .tbl--v6 .rw__names a { font-weight: 600; }

/* ---------------------------------------------------------------- shortlists */
[data-layout="folio"] .cl__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-layout="folio"] .cl {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--color-surface-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
[data-layout="folio"] .cl__list {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
  list-style: none;
  counter-reset: folio;
}
[data-layout="folio"] .cl__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  counter-increment: folio;
  font-weight: 600;
}
[data-layout="folio"] .cl__list li::before {
  content: counter(folio);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: var(--folio-soft);
  color: var(--br-accent);
  font: 600 12px/1 var(--font-sans);
}
[data-layout="folio"] .cl__list a { text-decoration: none; color: var(--color-ink); }
[data-layout="folio"] .cl__list a:hover { color: var(--br-accent); text-decoration: underline; }
[data-layout="folio"] .cl__list .br-faint { margin-left: auto; text-align: right; }
@media (max-width: 920px) {
  [data-layout="folio"] .cl__row { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- the checks */
[data-layout="folio"] .mt {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-layout="folio"] .mt__item {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(18px, 2vw, 24px);
  background: var(--color-surface-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
[data-layout="folio"] .mt__n {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--folio-soft);
  color: var(--br-accent);
  font: 700 14px/1 var(--font-sans);
}
[data-layout="folio"] .mt__t { font: 500 clamp(18px, 1.4vw, 22px)/1.15 var(--font-display); }
@media (max-width: 1100px) {
  [data-layout="folio"] .mt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  [data-layout="folio"] .mt { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------- FAQ */
[data-layout="folio"] .fq { max-width: 92ch; }
[data-layout="folio"] .fq__item { border-bottom: 1px solid var(--color-line); }
[data-layout="folio"] .fq__q { min-height: 64px; font: 600 17px/1.4 var(--font-sans); }
[data-layout="folio"] .fq__sign {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--br-accent);
  font: 500 18px/1 var(--font-sans);
}
[data-layout="folio"] .fq__a { max-width: var(--measure); color: var(--color-ink-muted); }

/* ------------------------------------------------------------------- footer */
[data-layout="folio"] .ft--folio {
  padding-block: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 36px);
  background: var(--color-surface-sunken);
  border-top: 0;
}
[data-layout="folio"] .ft__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: clamp(24px, 3vw, 40px) 20px;
}
[data-layout="folio"] .ft__col { display: flex; flex-direction: column; gap: 2px; }
[data-layout="folio"] .ft__col .br-label { margin-bottom: 6px; color: var(--color-ink-muted); }
[data-layout="folio"] .ft__col a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 14px;
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1.3;
}
[data-layout="folio"] .ft__col a:hover { color: var(--br-accent); text-decoration: underline; }
[data-layout="folio"] .ft__panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(18px, 2vw, 24px);
  background: var(--color-surface-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
[data-layout="folio"] .ft__note { margin: 0; font-size: 13px; color: var(--color-ink-muted); }
[data-layout="folio"] .ft__note .br-label { color: var(--color-ink); }
[data-layout="folio"] .ft__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(24px, 3vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--color-line-strong);
  font-size: 13px;
  color: var(--color-ink-muted);
}
[data-layout="folio"] .ft__brand { font: 600 18px/1.2 var(--font-display); }
@media (max-width: 1023px) {
  [data-layout="folio"] .ft__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-layout="folio"] .ft__panel { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  [data-layout="folio"] .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------- inner pages */
[data-layout="folio"] .art__lede { max-width: var(--measure); color: var(--color-ink-muted); }
[data-layout="folio"] .pr__body { max-width: var(--measure); }
[data-layout="folio"] .rel__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 12px 20px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}
[data-layout="folio"] .rel__list a:hover { border-color: var(--folio-edge); background: var(--folio-soft); }

/* The contents rail of an article (built by _pages.toc for this layout only). */
[data-layout="folio"] .art__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 17rem);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
[data-layout="folio"] .art__main { min-width: 0; }
[data-layout="folio"] .art__toc {
  position: sticky;
  top: calc(72px + 20px);
  display: grid;
  gap: 8px;
  padding: clamp(16px, 2vw, 22px);
  background: var(--color-surface-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
[data-layout="folio"] .art__toclist {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
[data-layout="folio"] .art__toclist a {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-ink);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}
[data-layout="folio"] .art__toclist a:hover { color: var(--br-accent); }
@media (max-width: 1023px) {
  [data-layout="folio"] .art__grid { grid-template-columns: minmax(0, 1fr); }
  [data-layout="folio"] .art__toc { position: static; order: -1; }
}

/* The check date in the bar: one line per page instead of one per profile card. It
   steps aside before the bar gets tight - the footer carries the same date always. */
[data-layout="folio"] .hd__checked {
  font-size: 12px;
  color: var(--color-ink-faint);
  white-space: nowrap;
}
@media (max-width: 1259px) {
  [data-layout="folio"] .hd__checked { display: none; }
}