/*
Theme Name: BrokersNest
Theme URI: https://brokersnest.com
Description: Custom theme for BrokersNest — broker comparison and rankings site. Built from the Claude Design visual identity export, with WCAG-corrected contrast, self-hosted runtime scripts, and AdSense wired in.
Author: Marketing Nest
Version: 1.21.1
Text Domain: brokersnest
*/

/*
Design tokens — ONE theme: dark, Identity v1.0. There is no light palette, no
day/night switching and no manual toggle; every visitor gets this, whatever
their OS colour scheme says (color-scheme: dark below is what keeps native
controls, scrollbars and form widgets dark too).

Values are the Identity v1.0 swatches: Obsidian #0A0A0A, the near-Obsidian
panel #131416 and hairline #1F2123 (checked against Brokers Nest
Identity.dc.html and the Website / Media Kit exports), plus Ocean and Mint.

Text vs fill — the two variants exist for a reason, keep them straight:
  --bn-primary / --bn-secondary            Ocean / Mint as TEXT, links, accents,
                                           borders on dark. AA on --bn-bg and
                                           --bn-surface.
  --bn-primary-fill / --bn-secondary-fill  Ocean / Mint darkened, used ONLY as a
                                           FILL behind a white label (buttons,
                                           bars, pagination). Do not use them as
                                           text colour: they fail contrast on dark.
*/
:root {
  color-scheme: dark;

  --bn-ink: #FFFFFF;          /* body text */
  --bn-bg: #0A0A0A;           /* page background (Obsidian) */
  --bn-bg-2: #131416;         /* raised panel */
  --bn-surface: #131416;      /* cards */
  --bn-line: #1F2123;         /* hairlines */
  --bn-white: #FFFFFF;        /* label on a filled button */
  --bn-slate: #B4B9BD;        /* muted text */
  --bn-nav-link: #B4B9BD;

  --bn-primary: #2785E5;      /* Ocean — text, links, accents */
  --bn-primary-fill: #1D6BC0; /* Ocean, darkened — fill behind white text only */
  --bn-secondary: #26B797;    /* Mint — text, accents */
  --bn-secondary-fill: #0B6B57; /* Mint, darkened — fill behind white text only */

  /* One site-wide container, defined once (2026-09-27). Was two separate
     values: header/footer used --bnh-max:1320px + a clamp(20,5vw,64px)
     gutter (assets/css/chrome.css), while .wrap / .bn-nav-utility-grid used
     1560px + clamp(20,5vw,96px) directly. 1560px wins because it's the
     dimension actually tied to a source (matches the Claude Design export's
     container width — see .wrap below); chrome.css's --bnh-max/--bnh-gut now
     just alias these two instead of carrying their own values. */
  /* FULL-WIDTH FRAME, 2026-10-08 (Angelos, after tradingview.com). The page
     runs edge to edge with a small fluid gutter: 24px on phones, 36px on a
     1440px screen, 48px from 1920px up. The content column therefore fills
     the screen up to 1920px wide (1824px of content) and is capped there on
     larger screens; the header and footer are capped WITH it and share its
     gutter, so they line up with the content (chrome.css).
     History: this was nominally 1560px with gutters up to 96px, which left
     only 1296px of content on a 1440px screen and 1368px on a 1920px one; a
     1536px/48px version (1440px of content) was built the same day and never
     deployed.
     What does NOT stretch: running text, held to about 75 characters by the
     rules marked "measure" below; and ad slots, which keep their fixed sizes
     and stay centred. */
  --bn-container-max: 1920px;
  --bn-container-gutter: clamp(24px, 2.5vw, 48px);
  /* The gap under a hero H1, and under the hero intro paragraph. One token so
     the two can't drift: on /blog/ the intro and the category pills were
     touching, because the pills had a bottom margin and no top one. */
  --bn-hero-gap: 36px;
  /* Eyebrow-to-content gap. Already the value the Markets section eyebrow used
     inline; named here so every small uppercase label sits the same distance
     from what it introduces. */
  --bn-eyebrow-gap: clamp(24px, 2.8vw, 36px);

  /* Space under a .bn-filter-pill tab/pill row (Compare's category tabs,
     Learn's lesson pills, Markets' tab bar) before whatever follows it. */
  --bn-tab-gap: 28px;

  /* Legacy "always-dark panel" names. The whole site is dark now, so these are
     plain aliases — one set of values to maintain. */
  --bn-invert-bg: var(--bn-bg);
  --bn-invert-surface: var(--bn-surface);
  --bn-invert-line: var(--bn-line);
  --bn-invert-text: var(--bn-ink);
  --bn-invert-text-dim: var(--bn-slate);
}

/* ==========================================================================
   Base / reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bn-bg);
  color: var(--bn-ink);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: 'Jost', 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

p { margin: 0 0 1em; }

a {
  color: var(--bn-primary); /* Ocean as text on dark */
  text-decoration: none;
}
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--bn-container-max); /* matches the Claude Design export's container width */
  margin: 0 auto;
  /* Was a flat 20px — confirmed by computed-style diff against
     Brokers Nest Markets.dc.html that the export uses a responsive
     clamp(20px,5vw,96px) gutter (78px at the 1560px design width, not
     20px). Sitewide fix, not Markets-specific: every page using .wrap
     was rendering ~58px narrower a side gutter than the reference. */
  padding: 0 var(--bn-container-gutter);
}

.bn-eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bn-slate); /* muted text: AA on --bn-bg and --bn-surface */
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.bn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  padding: 18px 28px; /* matches the export's CTA buttons (was 14px 28px) */
  min-height: 56px;   /* was 48px */
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* Solid fill + white label: always the *-fill variant (verified 5.36:1). */
.bn-btn-primary {
  background: var(--bn-primary-fill);
  color: var(--bn-white);
}
.bn-btn-primary:hover { background: color-mix(in srgb, var(--bn-primary-fill) 85%, black); color: var(--bn-white); text-decoration: none; }

.bn-btn-outline {
  background: transparent;
  border-color: var(--bn-line);
  color: var(--bn-ink);
}
.bn-btn-outline:hover { border-color: var(--bn-slate); text-decoration: none; }

/* For use on the fixed-dark "invert" surface. */
.bn-btn-outline-invert {
  background: transparent;
  border-color: var(--bn-invert-line);
  color: var(--bn-invert-text);
}
.bn-btn-outline-invert:hover { border-color: var(--bn-invert-text-dim); text-decoration: none; }

/* ==========================================================================
   Header / nav
   ========================================================================== */

.bn-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bn-surface) 90%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--bn-line);
}

.bn-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(20px, 5vw, 96px);
}

/* Wordmark — confirmed against the real Identity spec (section 01, "Two
   weights, one word") and cross-checked against the actual header markup
   on every other exported page: Jost only, "brokers" at 200 and "nest" at
   600 — the weight contrast IS the mark, per the spec's own "Never set
   both words in one weight" rule. Ageone is called out explicitly there as
   print/campaign-only, not a web face — not used here. There's no separate
   compact/mobile mark either; the same lockup runs at every width via the
   clamp() below, confirmed by the reference rendering unchanged at 390px. */
.bn-logo {
  display: flex;
  align-items: baseline;
  font-family: 'Jost', sans-serif;
  font-size: clamp(22px, 1.8vw, 27px);
  letter-spacing: -0.025em;
  color: var(--bn-ink);
  white-space: nowrap;
}
.bn-logo-brokers { font-weight: 200; }
.bn-logo-nest { font-weight: 600; }
.bn-logo-dot { width: 0.19em; height: 0.19em; border-radius: 50%; background: var(--bn-primary); display: inline-block; margin-left: 0.06em; }

.bn-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
}
.bn-nav-links a { color: var(--bn-nav-link); }

.bn-nav-actions { display: flex; align-items: center; gap: 20px; }

.bn-nav-cta {
  display: inline-flex;
  align-items: center;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--bn-white);
  background: var(--bn-primary-fill);
  border-radius: 999px;
  padding: 13px 28px;
  white-space: nowrap;
}
.bn-nav-cta:hover { background: color-mix(in srgb, var(--bn-primary-fill) 85%, black); color: var(--bn-white); text-decoration: none; }

.bn-hamburger {
  display: flex;
  width: 48px;
  height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
  margin-right: -8px;
}
.bn-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--bn-ink);
  transition: transform 200ms ease, opacity 200ms ease;
}
.bn-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bn-hamburger.open span:nth-child(2) { opacity: 0; }
.bn-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Secondary utility menu (Brokers/Research/Trust/Display) — always
   available, at every viewport width; see header.php's docblock comment
   on this element for the reference confirmation. Replaces what used to
   be a plain mobile-only duplicate of the primary nav. */
.bn-nav-utility {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--bn-line);
  background: var(--bn-surface);
  z-index: 50;
}
.bn-nav-utility.open { display: block; }
.bn-nav-utility-grid {
  max-width: var(--bn-container-max);
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 48px) var(--bn-container-gutter) clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.bn-nav-utility-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bn-slate);
  margin-bottom: 20px;
}
.bn-nav-utility-links { display: flex; flex-direction: column; gap: 14px; }
.bn-nav-utility-links a { font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 400; color: var(--bn-ink); }
.bn-nav-utility-col:last-child { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.bn-nav-utility-cta { align-self: flex-start; }


@media (max-width: 860px) {
  .bn-nav-links { display: none; }
  .bn-nav-actions .bn-nav-cta { display: none; }
  .bn-nav-utility { position: static; border-top: 0; }
  .bn-nav-utility-grid { padding: 20px var(--bn-container-gutter); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.bn-footer {
  background: var(--bn-invert-bg);
  color: var(--bn-invert-text);
  margin-top: clamp(64px, 8vw, 120px);
}

/* Top row: brand/stats block + newsletter module, side by side — matches
   Brokers Nest Website.dc.html's own footer grid exactly (same breakpoint,
   same 320px minmax), see footer.php's docblock. */
.bn-footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 4vw, 80px);
  align-items: start;
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--bn-invert-line);
}
/* Same brokers/nest/dot markup as the header logo (.bn-logo-brokers etc.
   set their own font/size, so only the color needs overriding here for the
   dark footer surface — --bn-primary is the verified-4.81:1-on-invert-bg
   variant already, no separate "on dark" token needed for the dot). */
.bn-logo--footer { color: var(--bn-invert-text); margin-bottom: 10px; }
.bn-footer-tag { color: var(--bn-invert-text-dim); max-width: 32em; }
.bn-footer-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 24px; }
.bn-footer-stat-v { font-family: 'Jost', sans-serif; font-size: 28px; font-weight: 400; letter-spacing: -0.02em; color: var(--bn-invert-text); }
.bn-footer-stat-k { font-size: 12px; color: var(--bn-invert-text-dim); margin-top: 6px; }

.bn-footer-newsletter { background: var(--bn-invert-surface); padding: clamp(28px, 3vw, 44px); }
.bn-footer-newsletter .bn-eyebrow { color: var(--bn-invert-text-dim); margin-bottom: 18px; }
.bn-footer-newsletter-headline { font-family: 'Jost', sans-serif; font-size: clamp(23px, 2vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px; }
.bn-footer-newsletter p { font-size: 14px; line-height: 1.7; color: var(--bn-invert-text-dim); margin: 0 0 26px; max-width: 32em; }
.bn-footer-newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; }
.bn-footer-newsletter-form input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  color: var(--bn-invert-text);
  background: transparent;
  border: 1px solid var(--bn-invert-line);
  border-radius: 999px;
  padding: 15px 22px;
  min-height: 52px;
  outline: none;
}
.bn-footer-newsletter-form input[type="email"]:focus { border-color: var(--bn-primary); }
.bn-btn-invert-solid { background: var(--bn-invert-text); color: var(--bn-invert-bg); }
.bn-btn-invert-solid:hover { background: color-mix(in srgb, var(--bn-invert-text) 80%, var(--bn-primary)); text-decoration: none; }
.bn-footer-newsletter-fineprint { font-size: 11px; line-height: 1.6; color: var(--bn-invert-text-dim); margin-top: 14px; max-width: 34em; }

/* Second row: the four link columns. */
.bn-footer-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--bn-invert-line);
}
.bn-footer-link-col-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bn-invert-text-dim); margin-bottom: 24px; }
.bn-footer-link-col-links { display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.bn-footer-link-col-links a { color: var(--bn-invert-text-dim); }
.bn-footer-link-col-links a:hover { color: var(--bn-invert-text); }

.bn-risk-note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--bn-invert-text-dim);
  max-width: 78em;
  margin: 24px 0 0;
}

/* ==========================================================================
   Broker profile (single-broker.php)
   ========================================================================== */

.bn-main { padding: 40px 0 0; }

.bn-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bn-slate);
  margin-bottom: 32px;
}
.bn-breadcrumb a { color: var(--bn-slate); }
.bn-breadcrumb span[aria-current] { color: var(--bn-ink); }

.bn-broker-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .bn-broker-hero { grid-template-columns: 1fr; }
}

.bn-broker-id {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.bn-broker-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #fff; /* one logo-tile treatment site-wide — see .bn-directory-logo's comment */
  border-radius: 12px;
  padding: 4px;
  flex: 0 0 auto;
}
.bn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 14px;
}
.bn-pill-mint { color: var(--bn-secondary); background: color-mix(in srgb, var(--bn-secondary) 16%, var(--bn-surface)); }
.bn-pill-blue { color: var(--bn-primary); background: color-mix(in srgb, var(--bn-primary) 8%, var(--bn-surface)); }
.bn-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bn-secondary); }

/* Hero H1 + tagline sizes match the export (clamp(44,6.4vw,104) / 0.92 line-height;
   clamp(20,2.1vw,32) tagline) — previously scaled down well below the reference. */
.bn-broker-hero h1 { font-size: clamp(44px, 6.4vw, 104px); line-height: 0.92; margin-bottom: 16px; }
.bn-broker-tagline {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(20px, 2.1vw, 32px);
  line-height: 1.3;
  color: var(--bn-slate);
  max-width: 34em;
  margin-bottom: 32px;
}

.bn-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--bn-line);
}
.bn-stat-strip > div {
  background: var(--bn-bg-2);
  padding: 20px clamp(20px, 5vw, 96px);
  flex: 1 1 140px;
}
.bn-stat-strip .bn-stat-v {
  font-family: 'Jost', sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
}
.bn-stat-strip .bn-stat-k { font-size: 12px; color: var(--bn-slate); margin-top: 6px; }

.bn-score-card {
  background: var(--bn-invert-bg);
  color: var(--bn-invert-text);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bn-score-card .bn-score-num {
  font-family: 'Jost', sans-serif;
  font-size: clamp(48px, 4.6vw, 72px); /* matches export's conversion-card score size */
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}
.bn-score-card .bn-score-of { font-size: 12px; font-weight: 600; color: var(--bn-invert-text-dim); }
.bn-score-card .bn-score-rank { font-size: 13px; color: var(--bn-invert-text-dim); margin-top: 8px; }
.bn-score-card p { font-size: 11px; line-height: 1.6; color: var(--bn-invert-text-dim); margin: 0; }
.bn-score-card .bn-btn { width: 100%; }

/* Sub-score breakdown — now its own full-width section (bn-subscore-card),
   not tucked inside the hero score card. */
.bn-subscore-card { display: flex; flex-direction: column; }
.bn-subscore-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.bn-subscore-head span:first-child { font-size: 14px; font-weight: 600; color: var(--bn-ink); }
.bn-subscore-head span:last-child { font-family: 'Jost', sans-serif; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.bn-subscore-track { height: 3px; background: var(--bn-line); }
.bn-subscore-fill { height: 3px; background: var(--bn-primary-fill); }

/* Section head / body copy sizes matched to the export. */
.bn-section { padding: clamp(88px, 11vw, 200px) 0 0; } /* was clamp(56px,8vw,120px) */
.bn-section-head {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}
@media (max-width: 760px) {
  .bn-section-head { grid-template-columns: 1fr; }
}
.bn-section-head h2 { font-size: clamp(34px, 4.6vw, 72px); line-height: 0.98; margin-bottom: 20px; } /* was clamp(28,4vw,48) */
.bn-section-head p { font-size: clamp(17px, 1.3vw, 19px); color: var(--bn-slate); max-width: 38em; } /* was static 17px */

.bn-grid {
  display: grid;
  gap: 2px;
  background: var(--bn-line);
}
.bn-grid > * { background: var(--bn-bg-2); padding: 24px; }
.bn-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.bn-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bn-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

.bn-pros { background: var(--bn-bg-2) !important; }
.bn-cons { background: var(--bn-invert-bg) !important; color: var(--bn-invert-text); }
.bn-pros-cons-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.bn-pros-cons-item:last-child { margin-bottom: 0; }
.bn-pros-cons-item .bn-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--bn-secondary); flex: 0 0 auto; margin-top: 3px; }
.bn-pros-cons-item .bn-dash { width: 18px; height: 2px; background: var(--bn-invert-text-dim); flex: 0 0 auto; margin-top: 11px; }
.bn-pros-cons-item strong { display: block; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 18px; margin-bottom: 6px; }
.bn-pros-cons-item p { font-size: 14px; margin: 0; }
.bn-cons p { color: var(--bn-invert-text-dim); }

.bn-fact-list { display: flex; flex-direction: column; gap: 12px; }
.bn-fact-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bn-line); font-size: 14px; }
.bn-fact-list dt { color: var(--bn-slate); }
.bn-fact-list dd { margin: 0; font-weight: 600; text-align: right; }

.bn-suits-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bn-suits-list li { display: flex; gap: 12px; font-size: 15px; }
.bn-suits-list li::before { content: '→'; color: var(--bn-primary); flex: 0 0 auto; }

.bn-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-tag { font-size: 13px; font-weight: 600; color: var(--bn-ink); background: var(--bn-bg-2); border: 1px solid var(--bn-line); border-radius: 999px; padding: 6px 14px; }

/* Account tabs (CSS-only — no client-side templating). Structure required:
   inputs first, then a .bn-acct-tab-labels wrapper, then a
   .bn-acct-tab-panels wrapper — all siblings of the inputs. Position is
   matched structurally via nth-of-type/nth-child, not per-post IDs, so this
   one ruleset works for every broker's tab group. Supports up to 4 accounts. */
.bn-acct-tabs { margin-bottom: 2px; }
.bn-acct-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.bn-acct-tab-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2px; }
.bn-acct-tab-label {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  padding: 10px 20px;
  background: var(--bn-bg-2);
  color: var(--bn-ink);
  cursor: pointer;
  border: 1px solid var(--bn-line);
}
.bn-acct-tab-panel { display: none; }
.bn-acct-tab-input:nth-of-type(1):checked ~ .bn-acct-tab-labels .bn-acct-tab-label:nth-child(1),
.bn-acct-tab-input:nth-of-type(2):checked ~ .bn-acct-tab-labels .bn-acct-tab-label:nth-child(2),
.bn-acct-tab-input:nth-of-type(3):checked ~ .bn-acct-tab-labels .bn-acct-tab-label:nth-child(3),
.bn-acct-tab-input:nth-of-type(4):checked ~ .bn-acct-tab-labels .bn-acct-tab-label:nth-child(4) {
  background: var(--bn-primary-fill);
  color: var(--bn-white);
  border-color: transparent;
}
.bn-acct-tab-input:nth-of-type(1):checked ~ .bn-acct-tab-panels .bn-acct-tab-panel:nth-child(1),
.bn-acct-tab-input:nth-of-type(2):checked ~ .bn-acct-tab-panels .bn-acct-tab-panel:nth-child(2),
.bn-acct-tab-input:nth-of-type(3):checked ~ .bn-acct-tab-panels .bn-acct-tab-panel:nth-child(3),
.bn-acct-tab-input:nth-of-type(4):checked ~ .bn-acct-tab-panels .bn-acct-tab-panel:nth-child(4) {
  display: block;
}

/* Cost-comparison bar chart — real data across all published brokers'
   all_in_cost, not the export's illustrative sample bars. */
.bn-cost-compare { display: flex; flex-direction: column; gap: 16px; }
.bn-cost-compare-row { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 74px; gap: clamp(12px, 1.6vw, 24px); align-items: center; }
.bn-cost-compare-name { font-size: 14px; font-weight: 600; color: var(--bn-ink); min-width: 0; overflow-wrap: break-word; }
.bn-cost-compare-row.is-you .bn-cost-compare-name { color: var(--bn-primary); }
.bn-cost-compare-track { height: 14px; background: var(--bn-line); }
.bn-cost-compare-fill { height: 14px; background: var(--bn-slate); }
.bn-cost-compare-row.is-you .bn-cost-compare-fill { background: var(--bn-primary-fill); }
/* No `display` on the gate-driven flag ([data-bn-note]): whether it shows is
   decided by the region gate's own rules in <head>, which this would override. */
.bn-cost-compare-flag { font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--bn-slate); }
.bn-cmp-flag { margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--bn-slate); }
.bn-cost-compare-flag:not([data-bn-note]) { display: block; margin-top: 4px; }
.bn-cost-compare-value { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; text-align: right; }

/* Broker roster / archive (archive-broker.php) — one row per broker, ranked
   by score. Reuses .bn-broker-logo, .bn-pill, .bn-stat-v/-k and .bn-tag from
   single-broker.php rather than defining parallel versions. */
.bn-roster {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bn-line);
}
.bn-roster-card {
  background: var(--bn-surface);
  padding: 24px;
  display: grid;
  grid-template-columns: 40px minmax(220px, 1.6fr) minmax(0, 1.4fr) auto auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 900px) {
  .bn-roster-card { grid-template-columns: 1fr; }
}
.bn-roster-rank {
  font-family: 'Jost', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--bn-slate);
}
.bn-roster-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bn-roster-name { font-size: 18px; margin-bottom: 4px; }
.bn-roster-name a { color: var(--bn-ink); }
.bn-roster-tagline { font-size: 13px; color: var(--bn-slate); margin: 0 0 6px; }
.bn-roster-stats { display: flex; flex-wrap: wrap; gap: 20px; }
.bn-roster-platforms { min-width: 0; }
.bn-roster-score { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
@media (max-width: 900px) {
  .bn-roster-score { align-items: flex-start; }
}
.bn-roster-score-num { font-family: 'Jost', sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.bn-roster-score-of { font-size: 12px; color: var(--bn-slate); }

.bn-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 32px; }
.bn-pagination a,
.bn-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--bn-line);
  color: var(--bn-ink);
}
.bn-pagination a:hover { border-color: var(--bn-primary-fill); text-decoration: none; }
.bn-pagination .current { background: var(--bn-primary-fill); border-color: transparent; color: var(--bn-white); }

/* Compare Brokers directory (page-compare.php) — card grid, rebuilt against
   the real reference (Brokers Nest Brokers.html #directory), measured from
   its rendered inline styles rather than guessed. Colors use this theme's
   existing WCAG-corrected tokens, not the reference's raw grays — see the
   docblock at the top of page-compare.php. Sort/filter interactivity is
   assets/js/compare.js; these rules just need stable hooks (.bn-sort-btn,
   [hidden] on cards) to work against. */
.bn-directory-hero { padding: clamp(56px, 7vw, 120px) 0 0; }
/* This page-level hero eyebrow tracks wider (0.18em) than the shared
   .bn-eyebrow default (0.14em, correct for the smaller .bn-section-head
   contexts elsewhere) — confirmed against the reference computed style,
   scoped here rather than changed globally so those other sections don't
   drift. Spacing also corrected: the eyebrow→h1 gap belongs on the
   eyebrow's own margin-bottom, not the h1's (h1 has none in the
   reference); h1→subhead is a fixed 36px, not responsive. */
.bn-directory-hero .bn-eyebrow { letter-spacing: 0.18em; margin-bottom: clamp(28px, 3.4vw, 40px); }
.bn-directory-hero h1 { font-family: 'Jost', sans-serif; font-weight: 600; font-size: clamp(46px, 7.1vw, 112px); line-height: 0.92; letter-spacing: -0.04em; margin: 0; max-width: 16em; }
.bn-directory-hero > p { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(21px, 2.2vw, 34px); line-height: 1.25; letter-spacing: -0.02em; color: var(--bn-slate); max-width: 26em; margin: var(--bn-hero-gap) 0 0; }
/* Same gap above the filter pills as below the H1. Fixed at the class level,
   not on /blog/ alone: six templates use this exact hero -> intro -> pills
   structure (blog, learn, glossary, category-guides, promotions,
   brokers-by-country) and the pills touched the intro on every one of them.
   Compare's and Markets' pill rows sit outside a hero and are unaffected. */
.bn-directory-hero .bn-filter-pills { margin-top: var(--bn-hero-gap); }
.bn-compare-intro { max-width: 75ch; /* measure */ margin-top: 24px; }

.bn-directory-toolbar { display: flex; flex-direction: column; gap: 20px; padding: clamp(40px, 5vw, 56px) 0 28px; border-bottom: 1px solid var(--bn-line); margin-bottom: 2px; }
.bn-directory-toolbar-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.bn-directory-search { position: relative; flex: 1 1 280px; max-width: 420px; }
/* Filled background + larger type/padding than the shared .bn-select
   (which is right for the dropdowns below) — confirmed against the
   reference, which treats the search field as its own distinct control. */
.bn-directory-search-input { width: 100%; min-width: 0; }
/* Compound selector, not a second class on .bn-directory-search-input alone
   — needs to out-specificity .bn-select (defined right below, same 0,1,0
   specificity, later in source would otherwise win) rather than reach for
   !important. */
.bn-directory-search .bn-directory-search-input { font-size: 16px; padding: 14px 20px; background: var(--bn-bg-2); }

.bn-select {
  font: inherit;
  font-size: 14px;
  color: var(--bn-ink);
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  border-radius: 999px;
  padding: 12px 18px;
  min-height: 44px;
  min-width: 180px;
}
.bn-compare-filter-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--bn-slate); }
.bn-compare-count { font-size: 13px; color: var(--bn-slate); white-space: nowrap; }

/* One-row /brokers toolbar (2026-09-27) — search, Country, Products, Sort
   grouped on the left (wraps as a unit on narrow viewports via the flex-wrap
   already on .bn-directory-toolbar-row), Reset + the result count pinned to
   the right on wide viewports, dropping under the controls group once it
   wraps. */
.bn-directory-toolbar-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; flex: 1 1 auto; }
/* min-width:0 override: a flex item's default min-width is auto (its own
   content size), which can stop it shrinking below that even inside a
   wrapping flex row — the actual cause of a sideways scroll on a narrow
   phone otherwise, not the wrap behaviour itself, which already works.
   Each control also gets its own max-width:100% so it can never be wider
   than the row it just wrapped onto. */
.bn-directory-toolbar-controls > * { min-width: 0; max-width: 100%; }
.bn-directory-toolbar-end { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; margin-left: auto; }
/* 860px matches this file's existing breakpoint (see .bn-nav-utility above).
   Organic flex-wrap on .bn-directory-toolbar-controls already prevents any
   sideways scroll on its own (every child gets min-width:0 above) — this
   just makes the stack intentional rather than an uneven wrap: each control
   goes full-width, Reset+count drop under the controls group instead of
   trying to share a row with whatever wrapped last. */
@media (max-width: 860px) {
  .bn-directory-toolbar-row { flex-direction: column; align-items: stretch; }
  .bn-directory-toolbar-controls { flex-direction: column; align-items: stretch; }
  .bn-directory-toolbar-controls > * { width: 100%; }
  .bn-directory-toolbar-end { width: 100%; margin-left: 0; justify-content: space-between; }
}
.bn-text-link {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--bn-slate);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.bn-text-link:hover { color: var(--bn-ink); }

.bn-sort-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bn-sort-pills-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bn-slate); margin-right: 4px; }
.bn-sort-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: transparent;
  color: var(--bn-slate);
  border: 1px solid var(--bn-line);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bn-sort-btn.is-active { background: color-mix(in srgb, var(--bn-primary) 8%, var(--bn-surface)); color: var(--bn-primary); border-color: transparent; }

/* Asset-class filter pills — scrolls horizontally on one line rather than
   wrapping, matching the reference's .bn-scroll treatment. */
.bn-scroll { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
/* Wraps inside the container instead of scrolling past its right edge —
   .bn-scroll's overflow-x is right for the Markets tab bar (a sticky strip
   where a long tab list is meant to scroll) but wrong for Learn's lesson
   pills, which are anchor links into the page and ran past the container's
   right edge on staging. Overrides .bn-scroll, so it goes after it. */
.bn-filter-pills-wrap { flex-wrap: wrap; overflow-x: visible; }
/* Space below every .bn-filter-pill tab/pill row before whatever follows it
   — was 0 (2026-09-27 finding): Compare's category tabs sat flush against
   .bn-cmp-sheet's top border, and Compare/Learn were both missing the
   .bn-scroll class above entirely (only archive-broker.php's now-retired
   asset pills had it), so gap/overflow behaviour was undefined for them too.
   Fixed at the .bn-filter-pills level (one named token, --bn-tab-gap, not a
   bare literal — same value everywhere the class is used) so it applies
   everywhere the pattern is used (Compare's tabs, Learn's lesson pills,
   Markets' tab bar) rather than patching each page separately. */
.bn-filter-pills { margin-bottom: var(--bn-tab-gap); }
.bn-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: transparent;
  color: var(--bn-slate);
  border: 1px solid var(--bn-line);
  border-radius: 999px;
  padding: 11px 18px;
  min-height: 44px;
  cursor: pointer;
  transition: 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bn-filter-pill-count { font-size: 12px; font-weight: 600; opacity: 0.5; }
.bn-filter-pill.is-active { background: var(--bn-ink); color: var(--bn-bg); border-color: transparent; }

.bn-directory-grid { margin-bottom: 2px; }
.bn-directory-card { padding: clamp(28px, 2.6vw, 40px) !important; display: flex; flex-direction: column; min-width: 0; }
/* "Missing a broker?" tile — sits in the same grid as .bn-directory-card
   (inherits .bn-grid > *'s tile background/seam automatically), styled as an
   invite rather than a result: centred content, a dashed border standing in
   for a "add yours" affordance instead of the solid rank/score chrome every
   real card has. */
.bn-directory-missing-card {
  padding: clamp(28px, 2.6vw, 40px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--bn-line);
}
/* compare.js filters by setting card.hidden = true. The UA stylesheet's
   [hidden]{display:none} is an author-vs-UA loss against .bn-directory-card's
   own display:flex above, so a "hidden" card kept rendering — filtering only
   appeared to work because nothing had checked it closely. Explicit author
   rule, so hidden really is hidden. */
.bn-directory-card[hidden] { display: none; }

.bn-directory-missing-card-inner { text-align: center; max-width: 26em; }
.bn-directory-missing-card-inner .bn-eyebrow { margin-bottom: 14px; }
.bn-directory-missing-card-inner h3 { font-family: 'Jost', sans-serif; font-size: clamp(22px, 2vw, 28px); font-weight: 500; margin: 0 0 10px; }
.bn-directory-missing-card-inner p { color: var(--bn-slate); margin: 0 0 22px; }
.bn-directory-missing-card-inner .bn-btn { display: inline-flex; }
.bn-directory-missing-card-secondary { display: block; margin-top: 14px; font-size: 13px; color: var(--bn-slate); text-decoration: underline; text-underline-offset: 3px; }
.bn-directory-missing-card-secondary:hover { color: var(--bn-ink); }

.bn-directory-rank-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.bn-directory-rank { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bn-slate); }
.bn-directory-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bn-primary); text-align: right; }
.bn-directory-badge-muted { color: var(--bn-slate); }

.bn-directory-id { display: flex; align-items: center; gap: 14px; min-width: 0; margin-bottom: 24px; }
.bn-directory-id-text { min-width: 0; }
/* One logo-tile treatment site-wide (2026-09-27): white plate, contained,
   centred. Was var(--bn-surface) (a dark card colour) here and on
   .bn-index-logo/.bn-broker-logo below — inconsistent with .blogo
   (page-home-v2.php's pick cards/wall/index cells), which was already white
   for logo legibility (see the Vantage/FXTM/Axi fix, 2026-09-25). #0A0A0A on
   the placeholder/letter-mark is hardcoded, matching .blogo::before, because
   neither --bn-ink (white — body text on this dark-only site) nor
   --bn-slate (light grey) reads on a white tile; this is the one place on
   the site that isn't dark. */
/* Tile padding is ~7.5% of the tile, written in PIXELS, not percent.
   Percentage padding on a replaced element resolves against the CONTAINING
   BLOCK's width, not the element's own — so `padding: 7.5%` on a 56px logo
   inside the wide .bn-broker-id flex row became ~45px a side, the content
   box collapsed to nothing, and the profile hero rendered as a blank white
   tile (found on staging 2026-09-29). The grid's parent is narrower, so the
   same rule degraded there instead of vanishing.

   .blogo img in page-home-v2.php keeps its percentage: its containing block
   is the fixed-size .blogo span itself, so there the percentage resolves
   against the tile, which is what was intended.

   The per-logo sizing is baked into each PNG's own square canvas rather than
   split across CSS classes (see assets/img/brokers/README.md): a square
   SYMBOL sits at ~82% of its canvas so it lands at ~70% of the tile, a
   WORDMARK spans its full canvas width so it lands at ~85% of the tile
   width. object-fit:contain, never cover — a logo is letterboxed, never
   cropped. */
.bn-directory-logo { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; flex: 0 0 auto; }
.bn-directory-logo-placeholder { display: flex; align-items: center; justify-content: center; color: #0A0A0A; font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 500; }
.bn-directory-name { display: block; font-family: 'Jost', sans-serif; font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; color: var(--bn-ink); overflow-wrap: break-word; }
.bn-directory-meta { font-size: 12px; color: var(--bn-slate); margin-top: 4px; }

.bn-directory-score-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.bn-directory-score { font-family: 'Jost', sans-serif; font-size: clamp(38px, 3.6vw, 56px); font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.bn-directory-score-of { font-size: 12px; font-weight: 600; color: var(--bn-slate); letter-spacing: 0.06em; }
.bn-directory-score-track { height: 3px; background: var(--bn-line); margin-bottom: 28px; }
.bn-directory-score-fill { height: 3px; background: var(--bn-primary); }

.bn-fact-list-plain > div { border-bottom: none; padding: 0; align-items: baseline; }
.bn-directory-facts { gap: 12px; margin-bottom: 24px; }
/* The three cost lines are hidden by compare.js where a broker has no verified
   figure for the chosen country; the row is a flex box, which beats [hidden]. */
.bn-directory-spread[hidden], .bn-directory-comm[hidden], .bn-directory-cost[hidden] { display: none; }
/* The account a spread belongs to (Razor, Standard, Zero), small beside it. */
.bn-directory-acct { font-size: 0.8em; font-weight: 400; color: var(--bn-slate); margin-left: 4px; white-space: nowrap; }
.bn-directory-acct:empty { display: none; }

.bn-directory-regulated { margin-top: 8px; }
.bn-tag-outline { background: none; border: 1px solid var(--bn-line); padding: 5px 13px; }
/* "+N more" — visually quieter still than a real tag (dashed edge) so it
   reads as a count, not another value competing with the ones shown. */
.bn-tag-more { border-style: dashed; }

.bn-directory-cta { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bn-directory-review-link { font-size: 14px; font-weight: 600; color: var(--bn-primary); padding: 12px 4px; }

.bn-compare-pending { font-size: 13px; font-style: italic; color: var(--bn-slate); line-height: 1.6; margin-bottom: 24px; }
.bn-compare-empty { text-align: center; color: var(--bn-slate); padding: 32px 0; }
.bn-directory-card[hidden] { display: none; }

.bn-final-cta {
  background: var(--bn-invert-bg);
  color: var(--bn-invert-text);
  margin-top: clamp(56px, 8vw, 120px);
  padding: clamp(56px, 8vw, 120px) 0;
}
.bn-final-cta h2 { font-size: clamp(30px, 4.5vw, 56px); margin-bottom: 20px; }
.bn-final-cta p { color: var(--bn-invert-text-dim); }
.bn-final-cta .bn-btn-primary { margin-top: 8px; }
.bn-final-cta .bn-disclosure { font-size: 11px; line-height: 1.6; color: var(--bn-invert-text-dim); margin-top: 14px; }

/* ==========================================================================
   Compare (page-compare.php) — head-to-head comparator
   ========================================================================== */

.bn-cmp-h2 { font-weight: 600; font-size: clamp(34px, 4.6vw, 72px); line-height: 0.98; letter-spacing: -0.035em; margin: 0 0 28px; }
.bn-cmp-lede { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: var(--bn-slate); max-width: 38em; margin: 0; }
.bn-cmp-against { font-weight: 200; color: var(--bn-slate); }

/* Selector cards */
.bn-cmp-selectors { margin-bottom: 2px; }
.bn-cmp-selector { padding: clamp(26px, 2.6vw, 44px) !important; display: flex; flex-direction: column; background: var(--bn-bg-2); color: var(--bn-ink); }
.bn-cmp-selector-dark { background: var(--bn-invert-bg); color: var(--bn-invert-text); }
.bn-cmp-selector-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.bn-cmp-selector .bn-directory-id { margin-bottom: 24px; }
.bn-cmp-logo { width: 56px; height: 56px; }
.bn-cmp-name { font-family: 'Jost', sans-serif; font-size: clamp(26px, 2.4vw, 38px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; overflow-wrap: break-word; }
.bn-cmp-stats { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 26px; }
.bn-cmp-stat-v { font-family: 'Jost', sans-serif; font-size: clamp(28px, 2.6vw, 40px); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.bn-cmp-stat-k { font-size: 12px; color: var(--bn-slate); margin-top: 7px; }
.bn-cmp-selector-dark .bn-cmp-stat-k, .bn-cmp-selector-dark .bn-directory-meta { color: var(--bn-invert-text-dim); }
.bn-cmp-picker { margin-top: auto; }
.bn-cmp-picker label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bn-slate); margin-bottom: 12px; }
.bn-cmp-selector-dark .bn-cmp-picker label { color: var(--bn-invert-text-dim); }
.bn-cmp-select {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--bn-ink);
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  border-radius: 10px;
  padding: 15px 18px;
  min-height: 52px;
  cursor: pointer;
}
.bn-cmp-selector-dark .bn-cmp-select { color: var(--bn-invert-text); background: var(--bn-invert-surface); border-color: var(--bn-invert-line); }

/* Verdict */
.bn-cmp-verdict-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.bn-cmp-verdict-card { padding: clamp(26px, 2.4vw, 40px) !important; display: flex; flex-direction: column; background: var(--bn-bg-2); color: var(--bn-ink); }
.bn-cmp-verdict-card-dark { background: var(--bn-invert-bg); color: var(--bn-invert-text); }
.bn-cmp-verdict-card .bn-directory-badge { margin-bottom: 22px; }
.bn-cmp-verdict-name { font-family: 'Jost', sans-serif; font-size: clamp(24px, 2.2vw, 34px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 14px; }
.bn-cmp-verdict-card p { font-size: 15px; line-height: 1.75; color: var(--bn-slate); margin: 0; }
.bn-cmp-verdict-card-dark p { color: var(--bn-invert-text-dim); }

/* Cost calculator */
.bn-cmp-calc { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.4fr); gap: 2px; align-items: start; background: var(--bn-line); }
@media (max-width: 760px) { .bn-cmp-calc { grid-template-columns: 1fr; } }
.bn-cmp-calc-controls { background: var(--bn-bg-2); padding: clamp(26px, 2.6vw, 42px); min-width: 0; }
.bn-cmp-slider-row { margin-bottom: 32px; }
.bn-cmp-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.bn-cmp-slider-head label, .bn-cmp-slider-head > span:first-child { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bn-slate); }
.bn-cmp-slider-head span[id$="-out"] { font-family: 'Jost', sans-serif; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bn-cmp-calc input[type="range"] { width: 100%; accent-color: var(--bn-primary); min-height: 44px; }
.bn-cmp-calc-note { font-size: 13px; line-height: 1.7; color: var(--bn-slate); margin: 18px 0 0; max-width: 32em; }
.bn-cmp-calc-results { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bn-cmp-calc-card { background: var(--bn-bg-2); color: var(--bn-ink); padding: clamp(26px, 2.6vw, 40px); }
.bn-cmp-calc-card-dark { background: var(--bn-invert-bg); color: var(--bn-invert-text); }
.bn-cmp-calc-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.bn-cmp-calc-card-head > span:first-child { font-family: 'Jost', sans-serif; font-size: clamp(21px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.025em; }
.bn-cmp-calc-winner { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bn-secondary); }
.bn-cmp-calc-card-dark .bn-cmp-calc-winner { color: var(--bn-secondary); }
.bn-cmp-calc-amount { font-family: 'Jost', sans-serif; font-size: clamp(38px, 4.4vw, 68px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; margin-bottom: 8px; }
.bn-cmp-calc-caption { font-size: 13px; color: var(--bn-slate); }
.bn-cmp-calc-card-dark .bn-cmp-calc-caption { color: var(--bn-invert-text-dim); }
.bn-cmp-calc-disclaimer { font-size: 12px; color: var(--bn-slate); margin-top: 16px; max-width: 75ch; /* measure */ }

/* Metric sheet */
.bn-cmp-sheet { border-top: 1px solid var(--bn-ink); }
.bn-cmp-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(16px, 2vw, 32px); align-items: center; padding: clamp(18px, 1.8vw, 24px) 0; border-bottom: 1px solid var(--bn-line); }
.bn-cmp-row-head { padding: 18px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bn-slate); }
.bn-cmp-row-head > div:first-child { color: var(--bn-slate); }
.bn-cmp-row-head > div:nth-child(2), .bn-cmp-row-head > div:nth-child(3) { color: var(--bn-ink); }
.bn-cmp-row-name { font-size: 15px; font-weight: 600; color: var(--bn-ink); }
.bn-cmp-row-cat { font-size: 12px; color: var(--bn-slate); margin-top: 5px; }
.bn-cmp-row-val { font-size: 15px; font-weight: 500; color: var(--bn-ink); text-align: center; min-width: 0; overflow-wrap: break-word; border-radius: 6px; padding: 4px; }
.bn-cmp-row-val.is-winner { background: color-mix(in srgb, var(--bn-secondary) 16%, var(--bn-surface)); color: var(--bn-secondary); font-weight: 700; }
/* "Not available in your region", where a figure would be: quieter than one. */
.bn-cmp-row-na { font-size: 13px; font-weight: 400; color: var(--bn-slate); }
.bn-cmp-row-why { font-size: 13px; line-height: 1.65; color: var(--bn-slate); text-align: right; min-width: 0; }
.bn-cmp-row[hidden] { display: none; }

/* CTA cards */
.bn-cmp-cta-grid { margin-bottom: 2px; }
.bn-cmp-cta-card { padding: clamp(28px, 2.8vw, 48px) !important; display: flex; flex-direction: column; background: var(--bn-bg-2); color: var(--bn-ink); }
.bn-cmp-cta-card-dark { background: var(--bn-invert-bg); color: var(--bn-invert-text); }
.bn-cmp-reasons { display: flex; flex-direction: column; margin: 24px 0 0; }
.bn-cmp-reason { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--bn-line); }
.bn-cmp-reason:first-child { border-top: 0; }
.bn-cmp-cta-card-dark .bn-cmp-reason { border-top-color: var(--bn-invert-line); }
.bn-cmp-reason-arrow { font-family: 'Jost', sans-serif; font-size: 17px; font-weight: 500; color: var(--bn-primary); line-height: 1.5; flex: 0 0 auto; }
.bn-cmp-cta-card-dark .bn-cmp-reason-arrow { color: var(--bn-secondary); }
.bn-cmp-reason p { font-size: 15px; line-height: 1.7; color: var(--bn-slate); margin: 0; }
.bn-cmp-cta-card-dark .bn-cmp-reason p { color: var(--bn-invert-text-dim); }

/* Related pairs */
.bn-cmp-related-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bn-cmp-related-card { padding: 24px; background: var(--bn-bg-2); color: var(--bn-ink); }
.bn-cmp-related-card:hover { background: color-mix(in srgb, var(--bn-bg-2) 60%, var(--bn-primary) 8%); text-decoration: none; }

/* ==========================================================================
   Markets (page-markets.php) — a trading-terminal page built on the plain
   --bn-* tokens. (It used to be the one permanently-dark page; the whole
   site is dark now, so nothing about it is special-cased any more.)
   ========================================================================== */

/* Ticker strip: TradingView's ticker-tape widget renders at a fixed,
   non-overridable 46px regardless of container height (a platform
   constant, not something CSS can stretch) — confirmed by computed-style
   diff against Brokers Nest Markets.dc.html, which wraps it in a 52px box.
   3px top+bottom padding here reaches that same 52px total without
   leaving the widget itself mis-sized. Side padding is 0 (not inherited
   from .wrap) because the reference's ticker sits edge-to-edge inside its
   1560px frame, unlike every other section on this page. */
/* Restyled 2026-09-27 to read like the homepage's "From our index" ticker
   strip (page-home-v2.php's .ticker/.ticker-tag/.pulse — that page doesn't
   load style.css, so these are new rules matching its visual language, not
   a literal shared class). No border here or below: this data-source note
   is IMPORTANT — the widget itself was already borderless (assets/js/
   tv-widget.js forces isTransparent:false + an explicit #0A0A0A background
   in dark mode, deliberately, so it doesn't fall back to a white iframe
   canvas — background already matches --bn-bg exactly, so nothing to strip
   here). This only adds the "LIVE MARKETS" tag and lays it out next to the
   widget the same way the homepage lays its tag next to its ticker; it does
   NOT touch assets/js/tv-widget.js's PRESETS.ticker config (still real,
   live TradingView data — loaded from TradingView's embed CDN,
   embed-widget-ticker-tape.js, 8 real symbols: EUR/USD, GBP/USD, USD/JPY,
   AUD/USD, Gold, WTI, S&P 500, BTC/USD, see that file for the exact config
   — untouched by this change). */
/* ---------------------------------------------------------------------------
   Markets: the Overview 2/3 + 1/3 split.

   Everything that once sat between the hero lead and the stats row is gone —
   the ported homepage ticker, the server-side rate fetcher and the Market
   Quotes block each had a turn there. The page runs hero -> stats -> tabs
   again, as it did originally.
   No border/background/box-shadow on this wrapper: the widgets are
   transparent and the consent placeholders are borderless, so anything here
   would put back the box several rounds of work removed.
   ------------------------------------------------------------------------ */
/* 2/3 + 1/3. One column below 860px, news under the chart — source order
   already puts it there, so no ordering rule is needed. */
.bn-mkt-overview-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-bottom: 2px;
}
@media (max-width: 860px) {
  .bn-mkt-overview-grid { grid-template-columns: 1fr; }
}
.bn-mkt-eyebrow { color: var(--bn-slate); }
.bn-mkt-h1 { font-family: 'Jost', sans-serif; font-weight: 600; font-size: clamp(42px, 6.4vw, 104px); line-height: 0.92; letter-spacing: -0.04em; margin: 0; max-width: 16em; }
.bn-mkt-lede { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(20px, 2.1vw, 32px); line-height: 1.25; letter-spacing: -0.02em; color: var(--bn-slate); max-width: 26em; margin: 34px 0 0; }
.bn-mkt-lede-sm { font-size: clamp(17px, 1.3vw, 19px); }
.bn-mkt-h2 { color: var(--bn-ink); }

.bn-mkt-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin: clamp(40px, 5vw, 56px) 0 0; }
.bn-mkt-stats > * { padding: clamp(20px, 2vw, 30px) clamp(22px, 2.2vw, 34px) !important; }
/* The reference deliberately contrasts this one card (solid black/white in
   its light-mode source) against its three plain siblings — lost when this
   whole page moved to the plain --bn-* tokens (see note above this block),
   since those resolve to the same --bn-bg-2 as the siblings once dark mode
   is forced. --bn-invert-* restores that contrast; same pattern already
   used for this exact purpose in .bn-cmp-verdict-card-dark. */
.bn-mkt-stat-clock { grid-column: span 1; background: var(--bn-invert-bg); color: var(--bn-invert-text); }
.bn-mkt-stat-clock .bn-mkt-status,
.bn-mkt-stat-clock .bn-mkt-clock-date { color: var(--bn-invert-text-dim); }
.bn-mkt-status { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bn-slate); margin-bottom: 14px; }
.bn-mkt-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bn-slate); flex: 0 0 auto; }
.bn-mkt-status-dot.is-open { background: var(--bn-secondary); animation: bn-pulse 2.4s ease-in-out infinite; }
.bn-mkt-clock-time { font-family: 'Jost', sans-serif; font-size: clamp(28px, 2.8vw, 44px); font-weight: 400; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.bn-mkt-clock-date { font-size: 13px; color: var(--bn-slate); margin-top: 8px; }
.bn-mkt-stat-v { font-family: 'Jost', sans-serif; font-size: clamp(28px, 2.8vw, 44px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.bn-mkt-stat-k { font-size: 13px; color: var(--bn-slate); margin-top: 8px; }

.bn-mkt-tabs-bar { position: sticky; top: 74px; z-index: 40; background: color-mix(in srgb, var(--bn-bg) 94%, transparent); backdrop-filter: saturate(180%) blur(20px); margin: clamp(48px, 6vw, 80px) 0 0; border-bottom: 1px solid var(--bn-line); }
@media (max-width: 560px) { .bn-mkt-tabs-bar { top: 66px; } } /* = site header height, assets/css/chrome.css */
@media (min-width: 1081px) { .bn-mkt-tabs-bar { top: 90px; } } /* the taller desktop header, 2026-10-08 */
/* #bn-mkt-tabs also carries the .wrap class, but this ID's own padding
   shorthand overrides .wrap's entirely (higher specificity) — so the
   responsive gutter has to be repeated here directly to match the
   reference's effective horizontal inset (its tab row has no side padding
   of its own; the clamp comes from its ancestor wrapper instead). */
/* Not the new .bn-filter-pills margin-bottom below — this bar's own
   border-bottom already closes it off; the 12px padding above is the
   correct gap to the sticky bar's edge, not 28px. */
#bn-mkt-tabs { padding: 12px var(--bn-container-gutter); margin-bottom: 0; }

.bn-mkt-widget-box { border: 1px solid var(--bn-line); background: var(--bn-surface); }
/* Widget labels sit OUTSIDE their panel, flush with its left edge, with the
   same eyebrow-to-content gap used everywhere else. They used to be inside the
   box on a padding shorthand that indented them 20px from the panel edge
   and left almost no air above or below. */
.bn-mkt-labelled { margin-top: var(--bn-eyebrow-gap); }
.bn-mkt-widget-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bn-slate);
  margin: 0 0 var(--bn-eyebrow-gap);
  padding: 0;
}
.bn-mkt-note { font-size: 13px; line-height: 1.7; color: var(--bn-slate); margin-top: 20px; max-width: 75ch; /* measure */ }

/* Session hours — real UTC math rendered client-side by markets.js. */
.bn-mkt-sessions-list { display: flex; flex-direction: column; gap: 2px; background: var(--bn-line); }
.bn-mkt-session-row { background: var(--bn-surface); padding: clamp(20px, 2vw, 28px); }
.bn-mkt-session-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.bn-mkt-session-name { font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 500; }
.bn-mkt-session-hours { font-size: 13px; color: var(--bn-slate); font-variant-numeric: tabular-nums; }
.bn-mkt-session-badge { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bn-slate); background: var(--bn-bg-2); border-radius: 999px; padding: 5px 12px; }
.bn-mkt-session-badge.is-open { color: var(--bn-secondary); background: color-mix(in srgb, var(--bn-secondary) 16%, var(--bn-surface)); }
.bn-mkt-session-track { position: relative; height: 6px; background: var(--bn-bg-2); border-radius: 999px; overflow: visible; }
.bn-mkt-session-fill { position: absolute; top: 0; height: 6px; background: var(--bn-line); border-radius: 999px; }
.bn-mkt-session-now { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--bn-primary); }

.bn-mkt-leader-card { }
.bn-mkt-leader-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.bn-mkt-leader-rank { font-family: 'Jost', sans-serif; font-size: clamp(34px, 3.4vw, 50px); font-weight: 200; letter-spacing: -0.04em; line-height: 1; color: var(--bn-slate); }
.bn-mkt-leader-logo { width: 48px; height: 48px; }
.bn-mkt-leader-cost-k { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bn-slate); margin-bottom: 10px; }
.bn-mkt-leader-cost-v { font-family: 'Jost', sans-serif; font-size: clamp(30px, 3vw, 44px); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.bn-mkt-leader-why { font-size: 15px; line-height: 1.7; color: var(--bn-slate); margin: 0 0 26px; }

@keyframes bn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ==========================================================================
   Media Kit / Media Kit Deck (page-media-kit.php, page-media-kit-deck.php)
   ========================================================================== */

/* Prevents a flash of unstyled content before doc-page.js/deck-stage.js
   upgrade the custom elements — carried over from each export's own
   <helmet> <style> block (Brokers Nest Media Kit.dc.html /
   Media Kit Deck.dc.html), which isn't included when deploying outside
   Claude Design's infrastructure. */
.page-template-page-media-kit-php doc-page:not(:defined),
.page-template-page-media-kit-deck-php deck-stage:not(:defined) {
  visibility: hidden;
}

.bn-doc-main { padding: 0; }
/* The Media Kit and its Deck are self-contained advertiser documents with their
   own light "paper" pages. They set their own colours explicitly where they
   need light-on-dark, but their body copy and headlines inherit `color`, which
   is white site-wide. Keep the inherited text colour dark (Obsidian) inside
   them so it reads on their pages. Scoped: nothing else on the site changes. */
.bn-doc-main { color: #0A0A0A; }

/* ==========================================================================
   Homepage (front-page.php)
   ========================================================================== */

.bn-home-hero { padding-bottom: clamp(48px, 6vw, 88px); }

.bn-home-region-picker { margin-top: clamp(28px, 3vw, 40px); }
.bn-home-region-picker-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bn-slate); margin-bottom: 12px; }

.bn-home-hero-stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 3.5vw, 64px); margin-top: clamp(40px, 5vw, 56px); }
.bn-home-hero-stat-v { font-family: 'Jost', sans-serif; font-size: clamp(33px, 3.4vw, 52px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.bn-home-hero-stat-k { font-size: 13px; color: var(--bn-slate); margin-top: 8px; }

.bn-home-lane-grid { margin-bottom: clamp(32px, 3.4vw, 48px); }
.bn-home-lane-tile {
  text-align: left;
  background: var(--bn-bg-2);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background 240ms cubic-bezier(.2,.7,.2,1), color 240ms cubic-bezier(.2,.7,.2,1);
}
.bn-home-lane-tile.is-active { background: var(--bn-invert-bg); color: var(--bn-invert-text); }
.bn-home-lane-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; margin-bottom: 20px; }
.bn-home-lane-title { font-family: 'Jost', sans-serif; font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 16px; }
.bn-home-lane-tile p { font-size: 15px; line-height: 1.65; opacity: 0.85; margin: 0; }

.bn-home-lane-panel[hidden] { display: none; }
.bn-home-lane-cta { margin-top: clamp(20px, 2vw, 28px); display: inline-flex; }
.bn-home-lane-stat-v { font-family: 'Jost', sans-serif; font-size: clamp(30px, 3vw, 44px); font-weight: 400; letter-spacing: -0.03em; line-height: 1; margin: 12px 0 4px; }

/* ==========================================================================
   "Where the edge leaks" (front-page.php, pro lane) — real licence-count
   and leverage-cap comparison, replacing the reference's fabricated
   "measured on live accounts we fund ourselves" claim.
   ========================================================================== */
.bn-edge-leaks { margin-top: clamp(48px, 5vw, 72px); }
.bn-edge-grid { align-items: stretch; margin-top: 8px; }
.bn-edge-panel { display: flex; flex-direction: column; }
.bn-edge-panel-invert { background: var(--bn-invert-bg); color: var(--bn-invert-text); }
.bn-edge-panel .bn-eyebrow { margin-bottom: 8px; }
.bn-edge-panel-invert .bn-eyebrow { color: var(--bn-invert-text-dim); }
.bn-edge-note { font-size: 12px; line-height: 1.6; color: var(--bn-slate); margin-bottom: 28px; }
.bn-edge-panel-invert .bn-edge-note { color: var(--bn-invert-text-dim); }

.bn-edge-bar-row { display: grid; grid-template-columns: clamp(80px, 20%, 130px) minmax(0, 1fr) clamp(56px, 16%, 84px); gap: 16px; align-items: center; margin-bottom: 14px; }
.bn-edge-bar-label { font-size: 13px; font-weight: 600; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-edge-bar-track { position: relative; height: 20px; background: var(--bn-line); border-radius: 4px; overflow: visible; }
.bn-edge-panel-invert .bn-edge-bar-track { background: var(--bn-invert-line); }
.bn-edge-bar-fill { height: 100%; border-radius: 4px; background: var(--bn-primary); }
.bn-edge-bar-fill-invert { background: var(--bn-secondary); }
.bn-edge-bar-value { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500; text-align: right; white-space: nowrap; }
.bn-edge-cap-line { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--bn-invert-text); z-index: 1; }

.bn-home-country-tile {
  display: block;
  background: var(--bn-bg-2);
  padding: 24px;
  color: inherit;
  transition: background 240ms cubic-bezier(.2,.7,.2,1);
}
.bn-home-country-tile:hover { background: color-mix(in srgb, var(--bn-primary) 10%, var(--bn-bg-2)); text-decoration: none; }
.bn-home-country-tile.is-active { background: var(--bn-invert-bg); color: var(--bn-invert-text); }
.bn-home-country-tile-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 500; }
.bn-home-country-tile-count { font-size: 26px; font-weight: 300; }
.bn-home-country-tile-authority { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin-top: 16px; }

.bn-home-finePrint { font-size: 11px; line-height: 1.6; color: var(--bn-slate); margin-top: 20px; max-width: 75ch; /* measure */ }

.bn-home-risk-section { background: var(--bn-bg-2); margin-top: clamp(88px, 11vw, 200px); border-top: 1px solid var(--bn-line); padding: 56px 0; }
.bn-home-risk-authority { font-size: 12px; font-weight: 600; color: var(--bn-primary); margin-top: 8px; }

/* ==========================================================================
   Brokers by country (page-brokers-by-country.php) — contained per-region
   risk-warning panel. Same tokens as .bn-home-risk-section but a bounded
   card (border-radius, no full-bleed background) since this repeats once
   per region section rather than once at the page's own bottom edge.
   ========================================================================== */
.bn-country-risk { background: var(--bn-bg-2); border: 1px solid var(--bn-line); border-radius: 12px; padding: clamp(24px, 3vw, 40px); margin-top: 32px; }
/* Fixed 3 columns rather than the shared .bn-grid-3's auto-fit (tuned for
   narrower 220px cards) — these full directory cards (rank, logo, facts
   list, dual CTAs) render 6-across at desktop widths under the shared
   class, wrapping broker names mid-word. Background is also overridden
   to transparent: real region roster sizes (6/9/13/16 today, and they'll
   keep changing as brokers are added) will rarely divide evenly by 3, and
   .bn-grid's own line-colored background otherwise shows through any
   unfilled trailing cell as a solid, card-shaped blank box. */
.bn-country-directory-grid { align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); background: transparent; }
@media (max-width: 1100px) { .bn-country-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bn-country-directory-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Blog (page-blog.php)
   ========================================================================== */
.bn-blog-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  background: var(--bn-bg-2);
  border: 1px solid var(--bn-line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 760px) { .bn-blog-featured { grid-template-columns: 1fr; } }
.bn-blog-featured-image { aspect-ratio: 16 / 11; overflow: hidden; }
.bn-blog-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-blog-featured-body { padding: clamp(28px, 3vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.bn-blog-featured-body .bn-eyebrow { margin-bottom: 14px; }
.bn-blog-card-cat { display: inline-block; width: fit-content; margin-bottom: 14px; }
.bn-blog-featured-title { font-family: 'Jost', sans-serif; font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 14px; }
.bn-blog-featured-excerpt { color: var(--bn-slate); line-height: 1.6; margin: 0 0 20px; }

.bn-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.bn-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--bn-bg-2);
  border: 1px solid var(--bn-line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.bn-blog-card-image { aspect-ratio: 16 / 10; overflow: hidden; }
.bn-blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A flat surface-colour block reads as a broken/missing image, not a
   deliberate design — give it a faint brand-tinted gradient plus a centred
   dot (echoes the wordmark's own dot) so it's legible as "no image yet". */
.bn-blog-card-image-placeholder {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bn-primary) 18%, transparent) 0%, transparent 60%),
    var(--bn-surface);
  position: relative;
}
.bn-blog-card-image-placeholder::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bn-primary);
  transform: translate(-50%, -50%);
}
.bn-blog-card-body { padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; flex: 1; }
.bn-blog-card-title { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 10px; }
.bn-blog-card-excerpt { color: var(--bn-slate); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }

.bn-blog-meta { font-size: 12px; color: var(--bn-slate); display: flex; gap: 8px; align-items: center; margin-top: auto; }

.bn-blog-pagination { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.bn-blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--bn-line);
  color: var(--bn-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.bn-blog-pagination .page-numbers.current { background: var(--bn-primary-fill); border-color: var(--bn-primary-fill); color: var(--bn-white); }
.bn-blog-pagination .page-numbers.dots { border: 0; }

/* ==========================================================================
   Advertise (page-advertise.php)
   ========================================================================== */

.bn-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3vw, 40px); }

.bn-firewall-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 640px) { .bn-firewall-grid { grid-template-columns: 1fr; } }
.bn-firewall-item { background: var(--bn-bg-2); padding: 24px; border-radius: 12px; border-top: 3px solid var(--bn-slate); }
.bn-firewall-item.bn-firewall-yes { border-top-color: var(--bn-secondary); }
.bn-firewall-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bn-slate); margin-bottom: 10px; }
.bn-firewall-yes .bn-firewall-label { color: var(--bn-secondary); }
.bn-firewall-item p { font-size: 13.5px; line-height: 1.65; color: var(--bn-ink); margin: 0; }

.bn-price-grid { align-items: stretch; }
.bn-price-card { display: flex; flex-direction: column; border-radius: 16px; }
.bn-price-card-featured { background: var(--bn-invert-bg); color: var(--bn-invert-text); }
.bn-price-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.bn-price-card-tier { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bn-primary); }
.bn-price-card-tier-featured { color: var(--bn-secondary); }
.bn-price-card-name { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 24px; letter-spacing: -0.02em; margin-bottom: 12px; }
.bn-price-value { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(30px, 2.6vw, 38px); letter-spacing: -0.03em; margin-bottom: 6px; }
.bn-price-cadence { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; color: var(--bn-slate); }
.bn-price-card-featured .bn-price-cadence { color: var(--bn-invert-text-dim); }
.bn-price-impressions { font-size: 12px; color: var(--bn-slate); margin-bottom: 20px; }
.bn-price-card-featured .bn-price-impressions { color: var(--bn-invert-text-dim); }
.bn-price-features { list-style: none; margin: 0 0 24px; padding: 16px 0 0; border-top: 1px solid var(--bn-line); display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.6; flex: 1; }
.bn-price-card-featured .bn-price-features { border-top-color: var(--bn-invert-line); }
.bn-price-cta { margin-top: auto; width: 100%; }
.bn-price-card-featured .bn-btn-outline { background: transparent; border-color: var(--bn-invert-line); color: var(--bn-invert-text); }
.bn-price-card-featured .bn-btn-outline:hover { border-color: var(--bn-invert-text-dim); }

.bn-term-discounts { margin-top: clamp(40px, 4vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--bn-line); }
.bn-term-discounts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 16px; margin: 20px 0 16px; }
.bn-term-discount { background: var(--bn-bg-2); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.bn-term-discount-len { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 500; }
.bn-term-discount-pct { font-size: 12px; font-weight: 600; color: var(--bn-secondary); }

.bn-advertise-closing { margin-top: clamp(56px, 7vw, 100px); padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--bn-line); }

/* ==========================================================================
   Legal (page-legal.php)
   ========================================================================== */

.bn-legal-notice { border: 2px solid var(--bn-ink); border-radius: 12px; padding: clamp(20px, 2.4vw, 28px); margin-top: clamp(28px, 3vw, 40px); max-width: 46em; }
.bn-legal-notice-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.bn-legal-notice p { font-size: 13.5px; line-height: 1.65; color: var(--bn-slate); margin: 0; }

.bn-legal-prose { max-width: 52em; }
.bn-legal-prose h3 { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; margin: 28px 0 10px; }
.bn-legal-prose h3:first-child { margin-top: 0; }
.bn-legal-prose p { font-size: 14.5px; line-height: 1.7; color: var(--bn-ink); margin: 0 0 14px; }
.bn-legal-prose ul { margin: 0 0 14px; padding-left: 1.2em; font-size: 14.5px; line-height: 1.7; color: var(--bn-ink); }
.bn-legal-prose ul li { margin-bottom: 8px; }
.bn-legal-prose .bn-fact-list { margin: 20px 0; }

/* ==========================================================================
   Generic page fallback (page.php) — arbitrary editor content, so this
   covers the block editor's own default heading level (h2) in addition to
   h3, unlike .bn-legal-prose above (hand-written, h3-only sections).
   ========================================================================== */
/* single.php — one blog post. */
.bn-year-cost { margin: 10px 0 0; color: var(--bn-slate); }
.bn-year-cost b { color: var(--bn-ink); font-weight: 600; }
.bn-yc-input {
  width: 5.5ch; padding: 2px 6px; margin: 0 2px;
  font: inherit; color: var(--bn-ink); background: var(--bn-bg-2);
  border: 1px solid var(--bn-line); border-radius: 6px; text-align: center;
  -moz-appearance: textfield;
}
.bn-yc-input::-webkit-outer-spin-button, .bn-yc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bn-yc-input:focus { outline: 2px solid var(--bn-primary); outline-offset: 1px; }

.bn-post { padding: clamp(32px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); max-width: 52em; }
.bn-post-header { margin-bottom: clamp(24px, 3vw, 40px); }
.bn-post-cat { margin-bottom: 16px; }
.bn-post-title { font-family: 'Jost', sans-serif; font-weight: 600; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 16px; }
.bn-post-meta { font-size: 14px; color: var(--bn-slate); display: flex; gap: 8px; align-items: center; }
.bn-post-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bn-post-meta a:hover { color: var(--bn-ink); }
.bn-post-hero { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.bn-post-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-post-content { max-width: none; }

.bn-page-prose { max-width: 52em; }
/* measure: running text at about 75 characters, site-wide (2026-10-08). The
   containers above stay 52em so tables, images and fact lists keep that
   width; only the paragraphs and list items are held to the measure. */
.bn-page-prose p, .bn-page-prose li, .bn-page-prose blockquote,
.bn-legal-prose p, .bn-legal-prose li { max-width: 75ch; }
.bn-page-prose h2 { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; margin: 40px 0 14px; }
.bn-page-prose h2:first-child { margin-top: 0; }
.bn-page-prose h3 { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; margin: 28px 0 10px; }
.bn-page-prose p { font-size: 15px; line-height: 1.7; color: var(--bn-ink); margin: 0 0 14px; }
.bn-page-prose ul, .bn-page-prose ol { margin: 0 0 14px; padding-left: 1.2em; font-size: 15px; line-height: 1.7; color: var(--bn-ink); }
.bn-page-prose li { margin-bottom: 8px; }
.bn-page-prose a { text-decoration: underline; text-underline-offset: 2px; }

/* Archived-broker-review notice (single-liquid-portfolio.php) — a callout,
   not body copy, so it needs to read as distinct from .bn-page-prose's own
   paragraphs even though it lives inside that block. */
.bn-archived-notice { background: var(--bn-bg-2); border: 1px solid var(--bn-line); border-left: 3px solid var(--bn-secondary); border-radius: 8px; padding: 14px 18px; font-size: 14px; line-height: 1.6; color: var(--bn-slate); margin: 0 0 28px; }
.bn-archived-notice a { color: var(--bn-secondary); }

.bn-legal-placeholder {
  color: var(--bn-primary) !important;
  font-weight: 600 !important;
  text-align: left !important;
  background: color-mix(in srgb, var(--bn-primary) 10%, transparent);
  border: 1px dashed var(--bn-primary);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px !important;
  line-height: 1.6;
}
p.bn-legal-placeholder { font-style: normal; }

.bn-legal-risk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.bn-legal-risk-card { background: var(--bn-bg-2); border: 1px solid var(--bn-line); border-radius: 12px; padding: clamp(20px, 2.4vw, 28px); }
.bn-legal-risk-card .bn-eyebrow { margin-bottom: 6px; }
.bn-legal-risk-card .bn-home-risk-authority { margin-bottom: 12px; }
.bn-legal-risk-card p { font-size: 13.5px; line-height: 1.65; color: var(--bn-slate); margin: 0; }

.bn-legal-footer-note { margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--bn-line); }

/* ==========================================================================
   Category guides (page-category-guides.php)
   ========================================================================== */
.bn-category-see-all { margin-top: clamp(20px, 2vw, 28px); display: inline-flex; }

/* ==========================================================================
   Regulators (page-regulators.php)
   ========================================================================== */
.bn-regulator-grid { align-items: stretch; }
.bn-regulator-card { display: flex; flex-direction: column; border-radius: 16px; }
.bn-regulator-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.bn-regulator-name { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 26px; letter-spacing: -0.02em; }
.bn-regulator-count { font-size: 12px; font-weight: 600; color: var(--bn-slate); }
.bn-regulator-jurisdiction { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bn-primary); margin-bottom: 16px; }
.bn-regulator-card p { font-size: 13.5px; line-height: 1.65; color: var(--bn-ink); margin: 0 0 18px; flex: 1; }
.bn-regulator-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-top: 1px solid var(--bn-line); margin-bottom: 16px; font-size: 12.5px; }
.bn-regulator-fact span { color: var(--bn-slate); }
.bn-regulator-fact strong { text-align: right; }

.bn-regulator-table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.bn-regulator-table { width: 100%; min-width: 640px; border-collapse: collapse; font-family: 'Manrope', sans-serif; }
.bn-regulator-table th { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bn-slate); text-align: left; padding: 0 16px 14px 0; white-space: nowrap; }
.bn-regulator-table td { padding: 16px 16px 16px 0; font-size: 13.5px; line-height: 1.55; color: var(--bn-ink); vertical-align: top; border-top: 1px solid var(--bn-line); }
.bn-regulator-table-code { font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 500; white-space: nowrap; }
.bn-regulator-table td:last-child, .bn-regulator-table th:last-child { white-space: nowrap; }

/* ==========================================================================
   Glossary (page-glossary.php)
   ========================================================================== */
.bn-glossary-letter {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bn-primary);
  padding-top: clamp(32px, 4vw, 48px);
  margin-bottom: 4px;
  border-top: 1px solid var(--bn-line);
}
.bn-glossary-letter:first-child { padding-top: 0; border-top: 0; }
.bn-glossary h3 { margin-top: 20px; margin-bottom: 6px; }

/* ==========================================================================
   Homepage — sortable index table (front-page.php, "Today's top ranked")
   ========================================================================== */

.bn-index-table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.bn-index-table { width: 100%; min-width: 660px; border-collapse: collapse; font-family: 'Manrope', sans-serif; }
.bn-index-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bn-slate);
  text-align: left;
  padding: 0 0 16px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.bn-index-table th.is-active { color: var(--bn-ink); }
.bn-index-table th:not(:first-child) { text-align: right; }
.bn-index-sort-arrow { display: inline-block; margin-left: 6px; font-size: 10px; }
.bn-index-table tbody tr { border-top: 1px solid var(--bn-line); transition: background 240ms cubic-bezier(.2,.7,.2,1); }
.bn-index-table tbody tr:hover { background: color-mix(in srgb, var(--bn-primary) 8%, transparent); }
.bn-index-table td { padding: 18px 0; font-size: 14px; color: var(--bn-ink); }
.bn-index-table td:not(:first-child) { text-align: right; }
.bn-index-broker { display: flex; align-items: center; gap: 14px; }
.bn-index-logo { width: 32px; height: 32px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; flex: 0 0 auto; }
.bn-index-broker a { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 500; color: var(--bn-ink); }
.bn-index-score { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 500; }
.bn-index-score-of { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; color: var(--bn-slate); }

/* ==========================================================================
   Promotions (page-promotions.php)
   ========================================================================== */
/* Fixed 2 columns rather than the shared .bn-grid-2's auto-fit (which,
   like the checks grid above, fits 3-across at typical desktop widths
   instead of the intended 2) — these cards carry enough content (chips,
   an expandable terms list, two CTAs) to want the extra width. */
.bn-promo-grid { align-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .bn-promo-grid { grid-template-columns: 1fr; } }
/* Fixed 3 columns for exactly 6 cards — the previous auto-fit minmax
   here was tuned for a 1400px assumption and actually renders 4-across
   at this page's real 1560px container, splitting 6 items 4+2 and
   exposing .bn-grid's own background as two blank cells in row 2 (the
   grid container is styled with a visible background for its hairline
   gaps, so an unfilled track isn't just empty space — it's a visible
   solid box). */
.bn-promo-checks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .bn-promo-checks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bn-promo-checks-grid { grid-template-columns: 1fr; } }
.bn-promo-empty { background: var(--bn-bg-2); border-radius: 16px; padding: clamp(32px, 4vw, 56px); max-width: 44em; }
.bn-promo-empty h2 { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 12px; }
.bn-promo-empty p { font-size: 15px; line-height: 1.7; color: var(--bn-slate); margin: 0; }

.bn-promo-check { background: var(--bn-bg-2); padding: clamp(26px, 2.4vw, 38px); display: flex; flex-direction: column; min-height: 210px; border-radius: 12px; }
.bn-promo-check-n { font-family: 'Jost', sans-serif; font-size: clamp(28px, 2.6vw, 40px); font-weight: 200; letter-spacing: -0.04em; line-height: 1; color: var(--bn-line); margin-bottom: 22px; }
.bn-promo-check-q { font-family: 'Jost', sans-serif; font-size: clamp(19px, 1.6vw, 23px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 10px; }
.bn-promo-check p { font-size: 14px; line-height: 1.7; color: var(--bn-slate); margin: 0; }

.bn-promo-arithmetic, .bn-promo-why { padding: clamp(28px, 3vw, 48px); border-radius: 16px; display: flex; flex-direction: column; }
.bn-promo-arithmetic { background: var(--bn-invert-bg); color: var(--bn-invert-text); }
.bn-promo-arithmetic .bn-eyebrow { color: var(--bn-secondary); margin-bottom: 20px; }
.bn-promo-arithmetic h2 { font-family: 'Jost', sans-serif; font-weight: 500; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; }
.bn-promo-arithmetic p { font-size: 14px; line-height: 1.7; color: var(--bn-invert-text-dim); margin: 0 0 24px; }
.bn-promo-arithmetic .bn-fact-list { margin-bottom: 24px; }
.bn-promo-arithmetic .bn-fact-list > div { border-bottom-color: var(--bn-invert-line); }
.bn-promo-arithmetic .bn-fact-list dt { color: var(--bn-invert-text-dim); }
.bn-promo-arithmetic .bn-btn { margin-top: auto; align-self: flex-start; }

.bn-promo-why { background: var(--bn-bg-2); border-top: 3px solid var(--bn-slate); }
.bn-promo-why .bn-eyebrow { margin-bottom: 20px; }
.bn-promo-why h2 { font-family: 'Jost', sans-serif; font-weight: 500; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; }
.bn-promo-why p { font-size: 14px; line-height: 1.7; color: var(--bn-ink); margin: 0 0 18px; }
.bn-promo-why .bn-btn { margin-top: auto; align-self: flex-start; }

.bn-promo-ended { border-top: 1px solid var(--bn-line); }
.bn-promo-ended-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr) minmax(0, 0.6fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: baseline;
  padding: clamp(20px, 2.2vw, 30px) 0;
  border-bottom: 1px solid var(--bn-line);
}
@media (max-width: 760px) { .bn-promo-ended-row { grid-template-columns: 1fr; gap: 6px; } }
.bn-promo-ended-broker { font-family: 'Jost', sans-serif; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -0.02em; }
.bn-promo-ended-type { font-size: 12px; color: var(--bn-slate); margin-top: 4px; }
.bn-promo-ended-what { font-size: 14px; line-height: 1.6; color: var(--bn-ink); }
.bn-promo-ended-when { font-size: 12px; font-weight: 600; color: var(--bn-slate); white-space: nowrap; text-align: right; }
@media (max-width: 760px) { .bn-promo-ended-when { text-align: left; } }

.bn-promo-card { display: flex; flex-direction: column; padding: clamp(28px, 2.6vw, 44px); border-radius: 16px; }
.bn-promo-card-lead { background: var(--bn-invert-bg); color: var(--bn-invert-text); }
.bn-promo-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.bn-promo-card-type { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bn-primary); }
.bn-promo-card-lead .bn-promo-card-type { color: var(--bn-secondary); }
.bn-promo-card-avail { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bn-slate); text-align: right; max-width: 11em; }
.bn-promo-card-size { font-family: 'Jost', sans-serif; font-size: clamp(28px, 2.8vw, 40px); font-weight: 400; letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px; }
.bn-promo-card-headline { font-family: 'Jost', sans-serif; font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 12px; }
.bn-promo-card-what { font-size: 14.5px; line-height: 1.65; margin: 0 0 22px; color: var(--bn-slate); }
.bn-promo-card-lead .bn-promo-card-what { color: var(--bn-invert-text-dim); }
.bn-promo-card-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.bn-promo-card-terms { margin-bottom: 4px; }
.bn-promo-card-terms summary { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; padding: 10px 0; }
.bn-promo-card-lead .bn-promo-card-terms summary { color: var(--bn-invert-text); }
.bn-promo-card-terms .bn-fact-list dd { text-align: left; }
.bn-promo-card-lead .bn-promo-card-terms .bn-fact-list > div { border-bottom-color: var(--bn-invert-line); }
.bn-promo-card-lead .bn-promo-card-terms .bn-fact-list dt { color: var(--bn-invert-text-dim); }
.bn-promo-card-source { font-size: 11px; line-height: 1.6; color: var(--bn-slate); margin: 16px 0 0; }
.bn-promo-card-lead .bn-promo-card-source { color: var(--bn-invert-text-dim); }
.bn-promo-card-lead .bn-directory-review-link { color: var(--bn-secondary); }

/* ==========================================================================
   About (page-about.php)
   ========================================================================== */
.bn-about-refusals { border-top: 1px solid var(--bn-line); max-width: 52em; }
.bn-about-refusal-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--bn-line); }
.bn-about-refusal-dash { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 500; color: var(--bn-primary); line-height: 1.5; }
.bn-about-refusal-row p { font-size: 16px; line-height: 1.7; color: var(--bn-ink); margin: 0; max-width: 75ch; /* measure */ }

/* ==========================================================================
   How We Rank (page-how-we-rank.php)
   ========================================================================== */
.bn-how-rank-pillars { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.bn-how-rank-pillar { background: var(--bn-bg-2); padding: clamp(22px, 2.4vw, 34px); border-radius: 12px; }
.bn-how-rank-pillar-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.bn-how-rank-pillar-weight { font-family: 'Jost', sans-serif; font-size: clamp(28px, 2.6vw, 38px); font-weight: 400; letter-spacing: -0.03em; }
.bn-how-rank-pillar-name { font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 500; }
.bn-how-rank-pillar-track { height: 8px; background: var(--bn-line); border-radius: 4px; margin-bottom: 16px; }
.bn-how-rank-pillar-fill { height: 100%; border-radius: 4px; background: var(--bn-primary); }
.bn-how-rank-pillar-summary { font-size: 14px; line-height: 1.65; color: var(--bn-slate); margin: 0 0 16px; max-width: 75ch; /* measure */ }
.bn-how-rank-pillar-inputs { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bn-how-rank-pillar-inputs li { font-size: 14px; color: var(--bn-ink); padding: 10px 0; border-top: 1px solid var(--bn-line); }
.bn-how-rank-pillar-inputs li:first-child { border-top: none; padding-top: 0; }
/* Fixed 3 columns for exactly 3 "how we're paid" cards — the shared
   .bn-grid-3's auto-fit minimum fits 4-across at typical desktop widths,
   stranding an uneven split instead of a clean 3. */
.bn-how-rank-paid-grid { align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .bn-how-rank-paid-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Site-wide AI chat assistant (assets/js/chat-widget.js)
   ========================================================================== */
.bn-chat-root { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 9999; }

.bn-chat-bubble {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bn-primary-fill); color: var(--bn-white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transition: background 160ms ease, transform 160ms ease;
}
.bn-chat-bubble:hover { background: color-mix(in srgb, var(--bn-primary-fill) 85%, black); transform: translateY(-1px); }

.bn-chat-panel {
  position: absolute; right: 0; bottom: 76px;
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 140px));
  background: var(--bn-surface); border: 1px solid var(--bn-line); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  display: flex; flex-direction: column; overflow: hidden;
}
/* Author styles always beat the UA stylesheet's [hidden]{display:none},
   even at equal specificity — so the display:flex above would otherwise
   keep this panel visible regardless of the hidden attribute the JS
   toggles. Needs its own, more specific override. */
.bn-chat-panel[hidden] { display: none; }

.bn-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--bn-line); flex: 0 0 auto;
}
.bn-chat-head-title { font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 500; color: var(--bn-ink); }
.bn-chat-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--bn-slate); cursor: pointer; padding: 0 4px; }

/* Persistent, visible on every screen of the widget — not just relying on
   the page's own risk-warning banner, per this feature's own guardrail. */
.bn-chat-disclaimer {
  font-size: 11px; line-height: 1.5; color: var(--bn-slate); background: var(--bn-bg-2);
  padding: 10px 18px; flex: 0 0 auto; border-bottom: 1px solid var(--bn-line);
}

.bn-chat-messages { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }

.bn-chat-msg { display: flex; flex-direction: column; max-width: 88%; }
.bn-chat-msg-user { align-self: flex-end; align-items: flex-end; }
.bn-chat-msg-assistant { align-self: flex-start; align-items: flex-start; }

.bn-chat-bubble-text { font-size: 13.5px; line-height: 1.55; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; }
.bn-chat-msg-user .bn-chat-bubble-text { background: var(--bn-primary-fill); color: var(--bn-white); border-bottom-right-radius: 4px; }
.bn-chat-msg-assistant .bn-chat-bubble-text { background: var(--bn-bg-2); color: var(--bn-ink); border-bottom-left-radius: 4px; }

.bn-chat-source { font-size: 10.5px; margin-top: 4px; padding: 0 2px; color: var(--bn-slate); }
.bn-chat-source-general { color: #B8860B; }
.bn-chat-source-decline { color: var(--bn-slate); font-style: italic; }

.bn-chat-typing .bn-chat-bubble-text { display: flex; gap: 4px; align-items: center; padding: 14px; }
.bn-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--bn-slate); opacity: .5; animation: bnChatTyping 1.1s infinite ease-in-out; }
.bn-chat-typing span:nth-child(2) { animation-delay: .15s; }
.bn-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bnChatTyping { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

.bn-chat-limit { font-size: 12px; color: var(--bn-slate); background: var(--bn-bg-2); padding: 10px 18px; border-top: 1px solid var(--bn-line); flex: 0 0 auto; }

.bn-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--bn-line); flex: 0 0 auto; }
.bn-chat-input {
  flex: 1 1 auto; border: 1px solid var(--bn-line); border-radius: 999px; padding: 10px 16px;
  font-size: 13.5px; background: var(--bn-bg); color: var(--bn-ink); min-width: 0;
}
.bn-chat-input:disabled { opacity: .6; }
.bn-chat-send {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; flex: 0 0 auto;
  background: var(--bn-primary-fill); color: var(--bn-white); font-size: 16px;
}
.bn-chat-send:disabled { opacity: .5; cursor: default; }

@media (max-width: 480px) {
  .bn-chat-panel { width: calc(100vw - 24px); height: calc(100vh - 110px); right: -8px; }
}

/* ==========================================================================
   Site-wide search (assets/js/search-widget.js, search.php)
   ========================================================================== */

/* The header's search bar and its live results are styled in
   assets/css/chrome.css (.bnh-search*), not here: the homepage does not load
   this file. The overlay this section used to style was replaced by that bar
   on 2026-10-11. What is left is search.php. */

/* search.php with no term: the search field on the page itself. */
.bn-search-page-form { display: flex; gap: 12px; max-width: 44em; margin: var(--bn-hero-gap) 0 0; }
.bn-search-page-form input {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 22px;
  background: var(--bn-bg-2); border: 1px solid var(--bn-line); border-radius: 999px;
  color: var(--bn-ink); font: inherit; font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
.bn-search-page-form input::placeholder { color: var(--bn-slate); opacity: 1; }
.bn-search-page-form input:focus-visible,
.bn-search-page-form button:focus-visible { outline: 2px solid var(--bn-primary); outline-offset: 2px; }
.bn-search-page-form button {
  flex: none; height: 52px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bn-primary-fill); color: var(--bn-white); font: inherit; font-size: 15px; font-weight: 600;
}
.bn-directory-hero > p.bn-search-page-hint { font-family: inherit; font-size: 15px; line-height: 1.7; letter-spacing: normal; margin-top: 18px; }

.bn-search-result { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: inherit; }
.bn-search-result:hover { background: var(--bn-bg-2); text-decoration: none; }
.bn-search-result-type { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bn-primary); margin-bottom: 4px; }
.bn-search-result-title { font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 500; color: var(--bn-ink); }
.bn-search-result-snippet { font-size: 12.5px; color: var(--bn-slate); margin: 4px 0 0; line-height: 1.5; }

/* Full-query fallback page (search.php) — same result-card look, laid out
   as a hairline-separated list rather than a compact dropdown. */
.bn-search-results { display: flex; flex-direction: column; gap: 2px; background: var(--bn-line); border-radius: 12px; overflow: hidden; }
.bn-search-results .bn-search-result { background: var(--bn-bg-2); border-radius: 0; padding: 20px clamp(20px, 2.4vw, 32px); }

/* ---------------------------------------------------------------------------
   /get-listed/ — the broker submission form (2026-09-29).

   No JavaScript on this page at all: every Continue and "Add another entity"
   is a server POST, so there is no hidden/shown state to style. The rail is a
   label, not a control — it carries no click targets, because a step you
   haven't filled in yet has nothing to show you.
   ------------------------------------------------------------------------ */

.bn-gl-points { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 32px); grid-template-columns: repeat(3, 1fr); }
.bn-gl-points li { border-top: 1px solid var(--bn-line); padding-top: 18px; }
.bn-gl-points h2 { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; margin: 0 0 8px; }
.bn-gl-points p { margin: 0; color: var(--bn-slate); font-size: 15px; line-height: 1.5; }

.bn-gl-link { display: inline-block; margin-top: clamp(24px, 2.6vw, 36px); color: var(--bn-primary); text-decoration: none; font-weight: 600; font-size: 15px; }
.bn-gl-link:hover { text-decoration: underline; }

.bn-gl { margin: clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 120px); max-width: 720px; }
.bn-gl-h2 { font-family: 'Jost', sans-serif; font-weight: 600; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 20px; }
.bn-gl-of { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bn-slate); margin-bottom: 10px; }
.bn-gl-help { color: var(--bn-slate); font-size: 15px; line-height: 1.55; margin: 0 0 28px; max-width: 75ch; /* measure */ }

/* The rail. Numbers stay legible when it wraps on a phone. */
.bn-gl-rail { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 clamp(28px, 3vw, 44px); padding: 0; }
.bn-gl-rail-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bn-slate); }
.bn-gl-rail-item .n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--bn-line); font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.bn-gl-rail-item.is-now { color: var(--bn-ink); font-weight: 600; }
.bn-gl-rail-item.is-now .n { background: var(--bn-primary-fill); border-color: var(--bn-primary-fill); color: var(--bn-white); }
.bn-gl-rail-item.is-done .n { border-color: var(--bn-secondary); color: var(--bn-secondary); }

.bn-gl-field { margin: 0 0 22px; }
.bn-gl-field label,
.bn-gl-group legend { display: block; font-size: 14px; font-weight: 600; margin: 0 0 7px; }
.bn-gl-field .req { color: var(--bn-primary); }
.bn-gl-field input[type="text"],
.bn-gl-field input[type="email"],
.bn-gl-field input[type="url"],
.bn-gl-field input[type="number"],
.bn-gl-field select,
.bn-gl-field textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 15px;
  color: var(--bn-ink); background: var(--bn-bg-2); border: 1px solid var(--bn-line); border-radius: 8px;
}
.bn-gl-field input:focus-visible,
.bn-gl-field select:focus-visible,
.bn-gl-field textarea:focus-visible { outline: 2px solid var(--bn-primary); outline-offset: 1px; border-color: var(--bn-primary); }
.bn-gl-field.is-error input,
.bn-gl-field.is-error select { border-color: #E5534B; }
.bn-gl-err { color: #FF9B94; font-size: 13.5px; margin: 7px 0 0; }
/* Sits between the label and the control, so it's read before the field is
   filled in rather than after it's been got wrong. */
.bn-gl-hint { color: var(--bn-slate); font-size: 13px; line-height: 1.45; margin: -2px 0 7px; }

.bn-gl-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 15px; line-height: 1.45; margin: 0 0 10px; }
.bn-gl-check input { margin-top: 3px; flex: 0 0 auto; }
.bn-gl-group { border: 0; margin: 0 0 6px; padding: 0; }

.bn-gl-entity { border: 1px solid var(--bn-line); border-radius: 12px; padding: 22px clamp(16px, 2vw, 26px); margin: 0 0 20px; }
.bn-gl-entity legend { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; padding: 0 8px; }

.bn-gl-add { background: none; border: 1px dashed var(--bn-line); color: var(--bn-ink); border-radius: 10px; padding: 12px 20px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; margin: 0 0 8px; }
.bn-gl-add:hover { border-color: var(--bn-primary); color: var(--bn-primary); }

.bn-gl-nav { display: flex; align-items: center; gap: 20px; margin: 32px 0 0; flex-wrap: wrap; }
.bn-gl-back { color: var(--bn-slate); text-decoration: none; font-size: 14px; font-weight: 600; }
.bn-gl-back:hover { color: var(--bn-ink); text-decoration: underline; }
.bn-gl-submit { background: var(--bn-primary-fill); color: var(--bn-white); border: 0; border-radius: 10px; padding: 14px 30px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.bn-gl-submit:hover { filter: brightness(1.1); }

.bn-gl-fine { color: var(--bn-slate); font-size: 13px; line-height: 1.55; margin: 22px 0 0; }
.bn-gl-fine a { color: var(--bn-primary); }

.bn-gl-notice { border-left: 3px solid var(--bn-secondary); background: var(--bn-bg-2); padding: 14px 18px; margin: 28px 0 0; font-size: 15px; }
.bn-gl-notice-error { border-left-color: #E5534B; }
.bn-gl-notice a { color: var(--bn-primary); }

.bn-gl-review-block { border-top: 1px solid var(--bn-line); padding: 22px 0 6px; }
.bn-gl-review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.bn-gl-review-head h3 { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 18px; margin: 0 0 12px; }
.bn-gl-review-head a { color: var(--bn-primary); font-size: 14px; font-weight: 600; text-decoration: none; }
.bn-gl-review-head a:hover { text-decoration: underline; }
.bn-gl-review-list { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; gap: 6px 20px; margin: 0; font-size: 14.5px; }
.bn-gl-review-list dt { color: var(--bn-slate); }
.bn-gl-review-list dd { margin: 0; overflow-wrap: anywhere; }
.bn-gl-rownum { color: var(--bn-slate); }

/* The honeypot: off-canvas rather than display:none, so a bot that skips
   hidden fields still fills it in. Same trick as the /book/ form. */
.bn-gl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 760px) {
  .bn-gl-points { grid-template-columns: 1fr; }
  .bn-gl-review-list { grid-template-columns: 1fr; gap: 2px 0; }
  .bn-gl-review-list dd { margin: 0 0 10px; }
}


/* ---------------------------------------------------------------------------
   Ad slots — every template EXCEPT the homepage.

   page-home-v2.php dequeues this stylesheet and carries its own copy of these
   rules inline. Same class names, same geometry; keep the two in step.
   Markup comes from brokersnest_ad_slot() in functions.php, which is also what
   decides whether anything renders at all.
   ------------------------------------------------------------------------ */
.ad { margin-top: clamp(34px, 4vw, 54px); }
.ad-inner { max-width: 970px; margin: 0 auto; }
.ad-box .ad-inner { max-width: 300px; margin: 0; }
.ad-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.ad-head .label {
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: #8E9296;
}
.ad-slot {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--bn-line);
  background: linear-gradient(160deg, #141517 0%, #0E0F10 100%);
  display: grid; place-items: center; text-align: center; padding: 26px;
}
.ad-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-slot.lead { aspect-ratio: 970 / 250; }
.ad-slot.box  { aspect-ratio: 300 / 250; }

/* Staging-only placeholder. Dashed, no painted fill, so it reads as a marked
   space rather than as content. */
.ad-slot.is-empty { border: 1px dashed rgba(255, 255, 255, .28); background: none; gap: 6px; }
.ad-slot.is-empty .ad-empty-id {
  font-family: 'Jost', sans-serif; font-size: 17px; font-weight: 500; color: #C9CCCE;
}
.ad-slot.is-empty .ad-empty-size {
  font-family: 'Manrope', sans-serif; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bn-slate);
}


/* Revive iframe: the ad server draws the whole unit, so the slot is a bare
   box of exactly the banner's size -- no border, radius, gradient or padding,
   and nothing that can clip or squeeze the iframe.

   Found on staging 2026-10-05: BN-03 showed its banner pushed right and down
   inside a frame with the right and bottom edges cut off. That was the base
   .ad-slot rule above (26px padding, border, overflow:hidden) with nothing
   overriding it. Two things here must not come back:
     - overflow:hidden on the slot, which is what cuts the edges, and
     - max-width:100% on the iframe. An ad frame is a fixed-size document; it
       does not reflow, so narrowing the iframe only crops the banner.

   The 300x250 box centres itself with a margin that goes negative when its
   parent is narrower than 300px -- the profile rail's card has 28px padding,
   which on a phone leaves less than 300 -- so it borrows from that padding
   instead of being cropped. */
.ad-slot.is-revive {
  border: 0; border-radius: 0; background: none; padding: 0; aspect-ratio: auto;
  display: block; line-height: 0; overflow: visible; height: 250px;
}
.ad-slot.is-revive::before { display: none; }
.ad-slot.box.is-revive { width: 300px; margin-inline: calc(50% - 150px); }
.ad-slot.is-revive iframe { display: block; margin: 0 auto; max-width: none; border: 0; }
@media (max-width: 860px) {
  .ad-slot.lead { aspect-ratio: 300 / 250; }
  .ad-lead .ad-inner { max-width: 300px; }
}