@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,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 amber - type plexbarlow - geometry blade. Generated per site by _skin.py. */
:root {
  --color-accent-apps: #9a6508;
  --color-accent-money: #9a6508;
  --color-accent-registry: #9a6508;
  --color-accent-learn: #9a6508;
  --color-accent-terminal: #9a6508;
  --font-sans: "IBM Plex Sans", 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;
  --font-display: "Barlow Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-pill: 2px;
  --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: #e8a33d;
  --color-accent-money: #e8a33d;
  --color-accent-registry: #e8a33d;
  --color-accent-learn: #e8a33d;
  --color-accent-terminal: #e8a33d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --color-accent-apps: #e8a33d;
  --color-accent-money: #e8a33d;
  --color-accent-registry: #e8a33d;
  --color-accent-learn: #e8a33d;
  --color-accent-terminal: #e8a33d;
  }
}

/* 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(.app2__btn):not(.mn__link):hover {
  color: var(--color-ink);
}
.br-btn:hover, .mast__btn:hover, .ent__open:hover, .grp2__cta:hover, .wn__btn:hover,
.bar2__btn:hover, .pane__btn:hover, .lesson__next:hover, .intro__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 */
.mast { position: sticky; top: 0; z-index: 30; background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-line-strong); }
.mast__bar { display: flex; align-items: center; gap: var(--space-4);
  padding-block: 10px; }
.mast__brand { display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--color-ink); flex-shrink: 0; }
.mast__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); }
.mast__names { display: flex; flex-direction: column; gap: 2px; }
.mast__name { font: 700 15px/18px var(--font-sans); }
.mast__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); }
.mast__search span { font: 500 13px/1 var(--font-mono); }
.mast__search input { flex: 1; min-width: 0; border: 0; background: transparent;
  outline: none; color: var(--color-ink); font: var(--text-body-sm); }
.mast__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mast__cta { display: flex; align-items: center; gap: 10px; }
.mast__ctatext { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mast__btn { min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm);
  font: 600 14px/18px var(--font-sans); }
.mast__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; }
.mast__burger { display: none; }

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

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

.sel2 { flex: 1 1 380px; min-width: 0; padding: 20px; border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--space-4); }
.sel2__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); }
.sel2__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; }
.sel2__tab[aria-selected="true"] { background: var(--br-accent); color: var(--color-on-accent); }
.sel2__count { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sel2__num { font: 600 56px/1 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--br-accent); }
.sel2__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sel2__chip { padding: 3px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-line-strong); font: var(--text-body-sm); font-size: 13px; }
.sel2__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--color-line); }
.sel2__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 */
.part { padding-block: clamp(32px, 4vw, 48px); display: flex; flex-direction: column;
  gap: var(--space-4); }
.part__head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-4); flex-wrap: wrap; }
.part__meta { font: var(--text-body-sm); }
.part__meta b { font: var(--text-num); font-size: 14px; color: var(--color-ink); }

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

.lst { border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  overflow: hidden; }
.lst__head, .ent { 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)); }
.lst__head { background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-line-strong); }
.colh { 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); }
.colh:disabled { cursor: default; }
.colh[aria-sort="ascending"], .colh[aria-sort="descending"] { color: var(--br-accent); }
.colh__arrow { font: 500 11px/1 var(--font-mono); }
.ent { padding: 12px 14px; align-items: center; border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-card); }
.ent:nth-child(even) { background: var(--color-surface-sunken); }
.ent:last-child { border-bottom: 0; }
.ent--sponsor { box-shadow: var(--shadow-sponsor); position: relative; }
.ent__c { min-width: 0; }
.ent__name { display: flex; gap: 10px; align-items: center; }
.ent__pos { font-size: 13px; color: var(--color-ink-muted); width: 22px; flex-shrink: 0; }
.ent__names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ent__names a { font: 600 15px/20px var(--font-sans); color: var(--color-ink);
  text-decoration: none; overflow-wrap: anywhere; }
.ent__tag { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.ent__plat { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chipp { padding: 2px 6px; border-radius: var(--radius-sm);
  font: 600 11px/16px var(--font-mono); }
.chipp--on { border: 1px solid var(--color-line-strong); color: var(--color-ink); }
.chipp--off { border: 1px dashed var(--color-line); color: var(--color-ink-muted); }
.ent__n { font: var(--text-num); font-variant-numeric: tabular-nums; text-align: right; }
.ent__reg { font: var(--text-num); font-size: 13px; overflow-wrap: anywhere; }
.ent__open, .ent__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; }
.ent__open { background: var(--br-accent); color: var(--color-on-accent); }
.ent__details { border: 1px solid var(--color-line-strong); color: var(--color-ink); }
.ent__details:hover { border-color: var(--br-accent); }

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

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

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

/* ---------------------------------------------------------------- sticky */
.bar2 { 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; }
.bar2__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bar2__name { font: 600 15px/20px var(--font-sans); }
.bar2__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) {
  .lst__head, .ent { --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. */
  .lst__head { display: none; }
  .ent { grid-template-columns: 1fr auto; row-gap: 10px; padding: 14px;
    align-items: start; }
  .ent__name { grid-column: 1 / -1; }
  .ent__plat { grid-column: 1 / -1; }
  /* In card mode every figure is labelled; a bare "$10" on its own told the
     reader nothing. */
  .ent__n[data-col="dep"], .ent__n[data-col="trade"], .ent__n[data-col="pay"], .ent__reg {
    grid-column: 1 / -1; text-align: left; display: flex; gap: 8px; }
  .ent__n[data-col="dep"]::before { content: "Min deposit"; }
  .ent__n[data-col="trade"]::before { content: "Min trade"; }
  .ent__n[data-col="pay"]::before { content: "Payout"; }
  .ent__reg::before { content: "Regulator"; }
  .ent__n::before, .ent__reg::before { font: var(--text-label);
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--color-ink-muted); min-width: 92px; }
  .ent__act { grid-column: 1 / -1; }
  .ent__open, .ent__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. */
  .mast__burger { display: grid; }
}
@media (max-width: 767px) {
  .mast__search { display: none; }
  .mast__partner { display: none; }
  .mast__btn { padding: 0 12px; }
  .part--faq h2 { flex-basis: 100%; }
  .base__in { padding-bottom: 96px; }
}
@media (min-width: 768px) {
  .pane { display: none; }
}

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

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

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

.app2__grid { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.app2 { padding: 20px; border-radius: 20px; display: flex; flex-direction: column;
  gap: 16px; }
.app2__head { display: flex; gap: 14px; align-items: flex-start; }
.app2__names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.app2__title { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.app2__title h3 { overflow-wrap: anywhere; }
.app2__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font: var(--text-body-sm); }
.app2__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); }
.app2__facts > div { padding: 10px 12px; background: var(--color-surface-sunken);
  display: flex; flex-direction: column; gap: 4px; }
.app2__facts dd { margin: 0; font: var(--text-body-sm); color: var(--color-ink); }
.app2__wide { grid-column: 1 / -1; }
.app2__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); }
.app2__btn:hover { background: var(--color-surface-sunken); color: var(--br-accent); }
.app2__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; }
  .app2__facts { grid-template-columns: 1fr; }
}

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

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

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

.lesson__list { display: flex; flex-direction: column; gap: 16px; }
.lesson { border-radius: 24px; background: var(--color-surface-card);
  border: 1px solid var(--color-line); overflow: hidden; scroll-margin-top: 140px; }
.lesson:has(.lesson__body:not([hidden])) { border-color: var(--br-accent); }
.lesson__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); }
.lesson__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); }
.lesson__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lesson__title { font: 700 clamp(20px, 2.4vw, 25px)/1.25 var(--font-sans); }
.lesson__teaser { font: var(--text-body-sm); }
.lesson__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); }
.lesson__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); }
.lesson__text { padding-top: 20px; display: flex; flex-direction: column; gap: 14px;
  max-width: 70ch; }
.lesson__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); }
.lesson__rem { padding: 16px 20px; border-radius: var(--radius-lg);
  background: var(--color-surface-sunken); display: flex; gap: 12px; align-items: flex-start; }
.lesson__rem .br-label { color: var(--br-accent); padding-top: 5px; flex-shrink: 0; }
.lesson__nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lesson__next { min-height: 48px; padding: 0 22px; border-radius: var(--radius-pill); }
.lesson__lesson { min-height: 48px; display: inline-flex; align-items: center;
  font: 600 16px/20px var(--font-sans); }

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

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

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

.mast__geo { align-self: center; }
@media (max-width: 520px) { .mast__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, .mast__btn { white-space: nowrap; }
.mast__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) {
  .mast__btnlong { display: none; }
  .mast__btnshort { display: inline; }
  .mast__search { max-width: 240px; }
  .mast__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. */
  .mast__cta { flex-direction: column; align-items: flex-end; gap: 2px; }
  .mast__ctatext { flex-direction: row; align-items: baseline; gap: 4px; }
  .mast__bar { gap: 8px; }
  .mast__btn { padding: 0 14px; }
  .mast__right { gap: 6px; }
  .mast__ctatext { gap: 0; }
  .mast__logo svg { height: 26px; }
  .mast__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. */
  .mast__icon[data-theme-toggle] { display: none; }
  .pane .mast__icon[data-theme-toggle] { display: grid; }
}
.pane__theme { align-self: flex-start; }
@media (min-width: 401px) { .pane__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 */
.chipp { display: inline-flex; align-items: center; gap: 4px; }
.chipp 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; }
.grp2__kicker { font: 600 14px/18px var(--font-serif); font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-label); color: var(--color-ink-muted); }
.intro--reg { align-items: flex-start; gap: 32px 56px;
  border-bottom: 1px solid var(--color-line-strong); }
.intro--reg .intro__text { flex: 2 1 480px; }
.intro--reg h1 { font: 600 clamp(30px, 4.4vw, 52px)/1.1 var(--font-serif);
  letter-spacing: -0.01em; }
.intro--reg .intro__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; }

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

.rtbl { border-top: 2px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); }
.rent { 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); }
.rent--head { border-bottom: 1px solid var(--color-ink); padding-block: 10px; }
.rent--sponsor { box-shadow: var(--shadow-sponsor); }
.rent__pos { color: var(--color-ink-muted); }
.rent__name { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rent__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rent__brand a { font: 600 16px/22px var(--font-sans); color: var(--color-ink);
  overflow-wrap: anywhere; }
.rent__tag { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.rent__reg, .rent__jur { font: var(--text-body-sm); }
.rent__st { display: flex; gap: 8px; align-items: baseline; font: var(--text-body-sm); }
.rent__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); }
.grp2__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; }

.part--split { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-start; }
.part__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) {
  .rent { grid-template-columns: 30px minmax(0, 1fr); row-gap: 8px; }
  .rent--head { display: none; }
  .rent__reg, .rent__jur, .rent__st { grid-column: 2; }
  .rent__reg::before { content: "Regulator: "; color: var(--color-ink-muted); }
  .rent__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; } }
.prt { 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; }
.prt__top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.prt__head { display: flex; gap: 12px; align-items: center; }
.prt__head h3 { font: 600 20px/26px var(--font-serif); }
.prt__facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.prt__facts > div { display: flex; flex-direction: column; gap: 2px; }
.prt__facts dd { margin: 0; }
.prt__cta { justify-content: center; }
.prt__note { margin: 0; }
.prt--wide { border-radius: var(--radius-lg); }
.prt--wide .prt__facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
@media (min-width: 760px) {
  .prt--wide { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 20px; }
  .prt--wide .prt__top { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 2px; }
  .prt--wide .prt__head { grid-column: 2; }
  .prt--wide .prt__facts { grid-column: 1 / -1; }
  .prt--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 */
.mast__nav { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mast__nlink { font: var(--text-body-sm); color: var(--color-ink-muted);
  text-decoration: none; white-space: nowrap; }
.mast__nlink:hover { color: var(--br-accent); }
@media (max-width: 1100px) { .mast__nav { display: none; } }

/* v1 - brand in the middle */
.mast--v1 .mast__bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); }
.mast--v1 .mast__side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mast--v1 .mast__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. */
.mast--v1 .mast__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. */
.mast--v1 .mast__names { min-width: 0; }
.mast--v1 .mast__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. */
  .mast--v1 .mast__bar { display: flex; justify-content: space-between; }
  .mast--v1 .mast__side--l { flex: 0 0 auto; }
  .mast--v1 .mast__side--r { flex: 0 0 auto; }
  .mast--v1 .mast__brand { flex: 0 1 auto; }
}

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

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

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

/* ----- footers */
.base--v1 .base__top { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.base--v1 .base__ident { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.base--v1 .base__notes { flex: 2 1 420px; display: grid; gap: 14px; }
.base--v1 .base__links { padding-top: var(--space-4); border-top: 1px solid var(--color-line); }

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

.base--v3 .base__in--split { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.base--v3 .base__half { flex: 1 1 320px; display: flex; flex-direction: column;
  gap: var(--space-4); min-width: 0; }
.base--v3 .base__pair { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.base--v3 .base__half--notes { gap: 16px; }

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

/* ----- tables */
.toggles--sel { justify-content: space-between; }
.toggles__sel { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.toggles__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. */
.lst--v1, .lst--v2 { border: 0; border-radius: 0; background: none; }
.lst--v1 .lst__body, .lst--v2 .lst__body { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.lst--v1 .ent, .lst--v2 .ent { 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); }
.lst--v1 .ent__top, .lst--v2 .ent__top { display: flex; align-items: center; gap: 10px;
  min-width: 0; }
.lst--v1 .ent__link, .lst--v2 .ent__link { font: 600 16px/20px var(--font-sans);
  color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.lst--v1 .ent__facts, .lst--v2 .ent__facts { margin: 0; display: grid; gap: 8px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ent__f { min-width: 0; }
.ent__f dt, .ent__f dd { margin: 0; }
.ent__f dd { font: var(--text-num); font-size: 14px; overflow-wrap: anywhere; }
.lst--v1 .ent__details, .lst--v2 .ent__details { margin-top: auto; }
.lst--v2 .ent { border-left: 3px solid var(--br-accent); }
.lst--v2 .ent__pos { font: 600 30px/1 var(--font-mono); color: var(--br-accent); width: auto; }

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

/* v4 - bands of three */
.lst__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. */
.lst__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. */
.pfl__grid { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.pfl { 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); }
.pfl:target { border-color: var(--br-accent); box-shadow: 0 0 0 2px var(--br-accent-weak, transparent); }
.pfl--sponsor { border-color: var(--br-accent); }
.pfl__head { display: flex; align-items: center; gap: 12px; }
.pfl__names { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pfl__names h3 { margin: 0; font-size: 1.05rem; }
/* The broker name carries the link to its review: underlined so it reads as one. */
.pfl__name { color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--br-accent); }
.pfl__name:hover, .pfl__name:focus-visible {
  color: var(--br-accent); text-decoration-color: currentColor; }
.pfl__facts { display: grid; gap: 10px; margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pfl__f dt { margin-bottom: 2px; }
.pfl__f dd { margin: 0; }
.pfl__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pfl__lines li { display: grid; gap: 2px; min-width: 0; }
.pfl__lines span { overflow-wrap: anywhere; }
.pfl__checked { margin-top: auto; }
.pfl__cta a { width: 100%; }
@media (max-width: 480px) {
  .pfl__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. */
.path2 { padding: 18px 0 0; }
.path2__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0;
  padding: 0; font-size: 13px; color: var(--color-ink-muted); }
.path2__list li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.path2__list a { color: inherit; }
.path2__list a:hover { color: var(--br-accent); }
.piece { max-width: 760px; }
.piece__head { padding: 26px 0 8px; display: grid; gap: 12px; }
.piece__head h1 { margin: 0; }
.piece__lede { margin: 0; font-size: clamp(1rem, 2.2vw, 1.15rem); color: var(--color-ink-muted); }
.txt { padding: 22px 0 4px; }
.txt h2 { margin: 0 0 12px; }
.txt__body { display: grid; gap: 14px; }
.txt__body p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.txt__list { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.6; }
.piece__more { margin: 16px 0 0; }
.next2__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.next2__list a { overflow-wrap: anywhere; }

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

/* Layout "desk" - the trading terminal of topbinarykenya.com.
   Source: Claude Design, Home.dc.html + topbinary.css (14.10.2026). This file carries
   that design onto the kit's own class vocabulary; it ships only on sites whose layout
   is "desk" and is appended after kit/site.css, so it may restate a kit rule.

   Everything is scoped to [data-layout="desk"] so a stray rule cannot reach the other
   twenty sites, and the palette is written three times over - light, the dark
   attribute and the dark media query - because the kit supports all three. */

/* ------------------------------------------------------------------ palette */
:root[data-layout="desk"] {
  /* Warm paper instead of the design system's cool grey. */
  --color-surface-page: #f6f5f2;
  --color-surface-card: #ffffff;
  --color-surface-sunken: #ecebe6;
  --color-ink: #0b0e13;
  --color-ink-muted: #4a5462;
  --color-ink-faint: #5e6878;
  --color-line: #d8d5ce;
  --color-line-strong: #a9a49c;
  --desk-zebra: #efeee9;
  --desk-tint: #fbf3e2;
  /* The signature amber block. It is a fill, never text: as text it would sit at
     2:1 on paper, which is why the skin's accent (a deeper amber) stays the text
     colour and this pair is used only where it is painted behind dark ink. */
  --desk-fill: #f59e0b;
  --desk-on-fill: #0b0e13;
  --desk-grid: 1px;
}
:root[data-layout="desk"][data-theme="dark"] {
  --color-surface-page: #0b0e13;
  --color-surface-card: #11151c;
  --color-surface-sunken: #0a0c10;
  --color-ink: #e7eaef;
  --color-ink-muted: #9aa6b8;
  --color-ink-faint: #7f8b9c;
  --color-line: #232b37;
  --color-line-strong: #3a4557;
  --desk-zebra: #10141b;
  --desk-tint: #15110a;
}
@media (prefers-color-scheme: dark) {
  :root[data-layout="desk"]:not([data-theme="light"]) {
    --color-surface-page: #0b0e13;
    --color-surface-card: #11151c;
    --color-surface-sunken: #0a0c10;
    --color-ink: #e7eaef;
    --color-ink-muted: #9aa6b8;
    --color-ink-faint: #7f8b9c;
    --color-line: #232b37;
    --color-line-strong: #3a4557;
    --desk-zebra: #10141b;
    --desk-tint: #15110a;
  }
}
/* The design system wires --br-accent per layout and knows nothing of this one. */
[data-layout="desk"] { --br-accent: var(--color-accent-terminal); }

/* --------------------------------------------------------------- typography */
[data-layout="desk"] .wrap { max-width: 1240px; }
[data-layout="desk"] .br h1,
[data-layout="desk"] .br h2,
[data-layout="desk"] .br h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
[data-layout="desk"] .br h1 { font-size: clamp(34px, 6vw, 68px); line-height: 1.02; }
[data-layout="desk"] .br h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; }
[data-layout="desk"] .br h3 { font-size: clamp(18px, 2vw, 22px); line-height: 1.1; }
[data-layout="desk"] .br-label { font-family: var(--font-mono); font-weight: 500; }
[data-layout="desk"] .br-btn,
[data-layout="desk"] .ent__details,
[data-layout="desk"] .mast__btn,
[data-layout="desk"] .bar2__btn { border-radius: var(--radius-sm); }
/* An amber fill always carries dark ink, hover included - the kit's generic hover
   sets the label to --color-on-accent, which is white on the light theme. */
[data-layout="desk"] .br-btn,
[data-layout="desk"] .br-btn:hover,
[data-layout="desk"] .ent__open,
[data-layout="desk"] .ent__open:hover,
[data-layout="desk"] .mast__btn:hover,
[data-layout="desk"] .bar2__btn:hover,
[data-layout="desk"] .pane__btn:hover {
  background: var(--desk-fill);
  color: var(--desk-on-fill);
}

/* ------------------------------------------------------------------- header */
[data-layout="desk"] .mast {
  background: var(--color-surface-page);
  border-bottom: 1px solid var(--color-line);
}
[data-layout="desk"] .mast__bar { gap: 12px; padding-block: 6px; min-height: 64px; }
[data-layout="desk"] .mast__sign { border-radius: 2px; }
[data-layout="desk"] .mast__name {
  font: 700 clamp(17px, 1.2vw, 22px)/1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* The country reads as a terminal badge rather than a subtitle. */
[data-layout="desk"] .mast__names .br-label {
  align-self: flex-start;
  padding: 3px 5px;
  border: 1px solid var(--color-line-strong);
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}
[data-layout="desk"] .mast__nav { gap: 2px; margin-left: 20px; }
[data-layout="desk"] .mast__nlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--color-ink-muted);
  font: 500 14px/1 var(--font-sans);
}
[data-layout="desk"] .mast__nlink:hover {
  color: var(--color-ink);
  background: var(--color-surface-sunken);
  border-bottom-color: var(--br-accent);
}
[data-layout="desk"] .mast__icon { border-radius: 2px; }
[data-layout="desk"] .mast__ctatext { gap: 1px; }
[data-layout="desk"] .mast__partner { font: 400 11px/1.2 var(--font-mono); }

/* The drawer numbers its sections, the way the mockup sheet does. */
[data-layout="desk"] .pane--desk .pane__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0;
  font: 700 clamp(19px, 5vw, 24px)/1 var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
[data-layout="desk"] .pane__no { font: 400 12px/1 var(--font-mono); color: var(--color-ink-faint); }

/* --------------------------------------------------------------------- hero */
[data-layout="desk"] .intro--desk {
  display: block;
  padding: clamp(32px, 5vw, 64px) 0 clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--color-line);
}
[data-layout="desk"] .intro__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--br-accent);
  letter-spacing: 0.08em;
}
[data-layout="desk"] .intro__kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--desk-fill);
}
[data-layout="desk"] .intro__h1 { margin: 16px 0 0; }
[data-layout="desk"] .intro__line { display: block; }
[data-layout="desk"] .intro__line--quiet { color: var(--color-ink-muted); }
[data-layout="desk"] .intro__lede {
  max-width: 62ch;
  margin: 20px 0 0;
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.5;
  color: var(--color-ink-muted);
}
/* Four figures as one strip divided by hairlines - the grid gap IS the rule. */
[data-layout="desk"] .kpi__row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--desk-grid);
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
  background: var(--color-line);
  border-top: 1px solid var(--color-line-strong);
  border-bottom: 1px solid var(--color-line);
}
/* Rows, not flex-end: the caption sits on the last row of every tile, so four tiles
   whose numbers are of different heights still read as one line of captions. */
[data-layout="desk"] .kpi {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 20px 16px 16px;
  border-radius: 0;
  background: var(--color-surface-page);
}
[data-layout="desk"] .kpi__n { align-self: end; }
[data-layout="desk"] .kpi__n {
  font: 500 clamp(24px, 3vw, 44px)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
[data-layout="desk"] .kpi__c { font-size: 14px; line-height: 1.35; color: var(--color-ink-muted); }
@media (max-width: 860px) {
  [data-layout="desk"] .kpi__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  [data-layout="desk"] .kpi__row { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ section */
[data-layout="desk"] .part {
  padding-block: clamp(44px, 6vw, 96px);
  border-bottom: 1px solid var(--color-line);
}
[data-layout="desk"] .part--faq { border-bottom: 0; }
[data-layout="desk"] .part__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 40px;
  margin-bottom: clamp(20px, 3vw, 36px);
}
[data-layout="desk"] .part__intro { gap: 12px; }
[data-layout="desk"] .part__intro p { max-width: 56ch; }
[data-layout="desk"] .part__meta { font: 400 13px/1.4 var(--font-mono); }
[data-layout="desk"] .part__note { margin-top: 14px; max-width: 80ch; }

/* ---------------------------------------------------------- partner panel */
[data-layout="desk"] .part--sponsor { padding-block: clamp(28px, 3.5vw, 48px); }
[data-layout="desk"] .prt--panel {
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  grid-template-areas: "top top top" "name facts cta" "note note note";
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(16px, 2vw, 28px);
  background: var(--desk-tint);
  border: 1px solid var(--desk-fill);
  border-radius: var(--radius-sm);
}
[data-layout="desk"] .prt__top {
  grid-area: top;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
[data-layout="desk"] .prt__tag {
  padding: 3px 8px;
  background: var(--desk-fill);
  color: var(--desk-on-fill);
  border-radius: 2px;
}
[data-layout="desk"] .prt__kind { font: 400 12px/1.3 var(--font-mono); color: var(--color-ink-muted); }
[data-layout="desk"] .prt__head { grid-area: name; display: flex; align-items: center; gap: 12px; }
[data-layout="desk"] .prt__names { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[data-layout="desk"] .prt__names p { margin: 0; font-size: 14px; }
[data-layout="desk"] .prt__facts {
  grid-area: facts;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--desk-grid);
  margin: 0;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
[data-layout="desk"] .prt__f { display: grid; gap: 6px; padding: 12px; background: var(--desk-tint); }
[data-layout="desk"] .prt__f dt { color: var(--color-ink-muted); letter-spacing: 0.06em; }
[data-layout="desk"] .prt__f dd {
  margin: 0;
  font: 500 clamp(15px, 1.1vw, 19px)/1.1 var(--font-mono);
  overflow-wrap: anywhere;
}
[data-layout="desk"] .prt__act { grid-area: cta; }
[data-layout="desk"] .prt__note {
  grid-area: note;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
  font-size: 14px;
}
@media (max-width: 1080px) {
  [data-layout="desk"] .prt--panel {
  box-shadow: none;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "top top" "name cta" "facts facts" "note note";
  }
}
@media (max-width: 620px) {
  [data-layout="desk"] .prt--panel {
  box-shadow: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "name" "facts" "cta" "note";
  }
  [data-layout="desk"] .prt__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-layout="desk"] .prt__act .br-btn { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------- table */
[data-layout="desk"] .toggles {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-surface-sunken);
  border-color: var(--color-line-strong);
  border-bottom: 0;
  font-family: var(--font-mono);
}
[data-layout="desk"] .toggles__item { font: 400 13px/1.2 var(--font-mono); }
[data-layout="desk"] .lst--v5 { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
[data-layout="desk"] .lst--v5 .lst__head {
  position: sticky;
  top: 64px;
  z-index: 2;
  background: var(--color-surface-sunken);
}
[data-layout="desk"] .lst--v5 .colh {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
}
[data-layout="desk"] .lst--v5 .ent { background: var(--color-surface-page); }
[data-layout="desk"] .lst--v5 .ent:nth-child(even) { background: var(--desk-zebra); }
[data-layout="desk"] .lst--v5 .ent:hover { background: var(--color-surface-sunken); }
[data-layout="desk"] .lst--v5 .ent__names a { font-weight: 600; }
[data-layout="desk"] .lst--v5 .ent__pos { font-family: var(--font-mono); }
[data-layout="desk"] .lst--v5 .lst__band { background: var(--color-surface-sunken); }
[data-layout="desk"] .chipp { border-radius: 2px; }

/* ------------------------------------------------------- platform picker */
[data-layout="desk"] .sel2 {
  display: grid;
  gap: 0;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-card);
}
[data-layout="desk"] .sel2__tabs {
  display: flex;
  border-bottom: 1px solid var(--color-line-strong);
}
[data-layout="desk"] .sel2__tab {
  flex: 1;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-left: 1px solid var(--color-line-strong);
  border-radius: 0;
  background: none;
  color: var(--color-ink-muted);
  font: 600 14px/1 var(--font-mono);
  cursor: pointer;
}
[data-layout="desk"] .sel2__tab:first-child { border-left: 0; }
[data-layout="desk"] .sel2__tab[aria-selected="true"] {
  background: var(--desk-fill);
  color: var(--desk-on-fill);
}
[data-layout="desk"] .sel2__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 20px 40px;
  padding: clamp(16px, 2vw, 28px);
}
[data-layout="desk"] .sel2__count { margin: 0; }
[data-layout="desk"] .sel2__num {
  font: 500 clamp(28px, 3vw, 40px)/1.1 var(--font-mono);
  color: var(--br-accent);
}
[data-layout="desk"] .sel2__chips { align-content: flex-start; }
[data-layout="desk"] .sel2__chip { border-radius: 2px; font-family: var(--font-mono); }
[data-layout="desk"] .sel2__foot {
  padding: 12px clamp(16px, 2vw, 28px);
  border-top: 1px solid var(--color-line);
  background: var(--color-surface-sunken);
}
[data-layout="desk"] .sel2__filter { border-radius: 2px; font-family: var(--font-mono); }
@media (max-width: 760px) {
  [data-layout="desk"] .sel2__body { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------ method, tasks, versus */
[data-layout="desk"] .proc {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--desk-grid);
  background: var(--color-line);
  border-top: 1px solid var(--color-line-strong);
  border-bottom: 1px solid var(--color-line);
}
[data-layout="desk"] .proc__item {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px 20px 28px 16px;
  background: var(--color-surface-page);
  border: 0;
}
[data-layout="desk"] .proc__n { color: var(--br-accent); font-family: var(--font-mono); }
[data-layout="desk"] .proc__t {
  font: 700 clamp(17px, 1.4vw, 21px)/1.1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
@media (max-width: 1080px) {
  [data-layout="desk"] .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  [data-layout="desk"] .proc { grid-template-columns: minmax(0, 1fr); }
}
[data-layout="desk"] .pair2,
[data-layout="desk"] .tk,
[data-layout="desk"] .rq,
[data-layout="desk"] .pfl,
[data-layout="desk"] .br-card {
  border-radius: var(--radius-sm);
  box-shadow: none;
}
[data-layout="desk"] .pair2__verdict { font-family: var(--font-mono); font-size: 13px; }

/* ---------------------------------------------------------------------- FAQ */
[data-layout="desk"] .ask__q {
  min-height: 56px;
  font: 600 clamp(15px, 1.1vw, 17px)/1.35 var(--font-sans);
  text-transform: none;
}
[data-layout="desk"] .ask__sign {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid var(--color-line-strong);
  border-radius: 2px;
  font: 500 16px/1 var(--font-mono);
  color: var(--br-accent);
}
[data-layout="desk"] .ask__q[aria-expanded="true"] .ask__sign {
  background: var(--desk-fill);
  border-color: var(--desk-fill);
  color: var(--desk-on-fill);
}

/* ------------------------------------------------------------------- footer */
[data-layout="desk"] .base--desk {
  padding-block: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 40px);
  background: var(--color-surface-card);
  border-top: 1px solid var(--color-line);
}
[data-layout="desk"] .base__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px) 20px;
}
[data-layout="desk"] .base__col { display: flex; flex-direction: column; gap: 2px; }
[data-layout="desk"] .base__col .br-label {
  margin-bottom: 6px;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}
[data-layout="desk"] .base__col a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 14px;
  text-decoration: none;
  color: var(--color-ink);
}
[data-layout="desk"] .base__col a:hover { color: var(--br-accent); }
[data-layout="desk"] .base__brand {
  font: 700 18px/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
[data-layout="desk"] .base__base {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px 40px;
  margin-top: clamp(28px, 4vw, 52px);
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}
[data-layout="desk"] .base__notes { display: grid; gap: 14px; }
[data-layout="desk"] .base__note { margin: 0; font-size: 13px; color: var(--color-ink-muted); }
[data-layout="desk"] .base__note .br-label { color: var(--br-accent); }
[data-layout="desk"] .base__meta { display: grid; gap: 8px; align-content: start; }
[data-layout="desk"] .base__date { font-family: var(--font-mono); }
@media (max-width: 900px) {
  [data-layout="desk"] .base__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-layout="desk"] .base__base { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- inner pages */
[data-layout="desk"] .path2__list { font: 400 12px/1.2 var(--font-mono); }
[data-layout="desk"] .piece__head { border-bottom: 1px solid var(--color-line); }
[data-layout="desk"] .piece__lede { max-width: 62ch; color: var(--color-ink-muted); }
[data-layout="desk"] .txt h2 {
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}
[data-layout="desk"] .txt__body { max-width: 72ch; }
[data-layout="desk"] .piece__shot figcaption { font: 400 12px/1.5 var(--font-mono); }
[data-layout="desk"] .next2__list a { font-family: var(--font-display); text-transform: uppercase; }

/* 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="desk"] .mast__checked {
  font: 400 11px/1.3 var(--font-mono);
  color: var(--color-ink-faint);
  white-space: nowrap;
}
@media (max-width: 1259px) {
  [data-layout="desk"] .mast__checked { display: none; }
}