/* ==========================================================================
   Brokers Nest — site chrome (header + footer), one stylesheet, every template.

   Source of truth: the Home v2 header/footer. Markup lives in
   template-parts/site-header.php and template-parts/site-footer.php.

   NAMESPACED ON PURPOSE. This file loads alongside style.css on every inner
   page, so:
     - every selector is prefixed .bnh (header) or .bnf (footer);
     - custom properties are --bnh-* and are defined on those wrappers, never
       on :root (style.css owns --bn-* on :root);
     - the "Collision resets" block below neutralises every bare-element rule
       in style.css that reaches the chrome (body, h1-h4, p, a, a:hover, .wrap).
       Explicit resets, not specificity luck.

   Fonts: Jost + Manrope are loaded by the 'brokersnest-fonts' handle, which
   this stylesheet is registered as depending on (functions.php) — so they
   arrive wherever the chrome does, including the Home v2 template.

   Site-wide the header is solid #0A0A0A with no backdrop-filter, so it
   behaves identically over light and dark pages. The homepage's original
   translucent + blur header only read correctly over the dark hero.
   ========================================================================== */

/* ---------- Tokens + base (scoped) ---------- */
.bnh,
.bnf {
  --bnh-ocean: #2785E5;
  --bnh-mint: #26B797;
  --bnh-slate: #8E9296;
  --bnh-obsidian: #0A0A0A;
  --bnh-panel: #111213;
  --bnh-line: rgba(255, 255, 255, .075);
  --bnh-line-strong: rgba(255, 255, 255, .14);
  --bnh-text: #F2F3F3;
  /* One site-wide container width/gutter (2026-09-27) — --bn-container-max/
     -gutter, defined on :root in style.css, aliased here rather than
     duplicated. This CONSUMES a :root token, which doesn't break this
     block's "never define new tokens on :root" rule above (still true —
     --bnh-gut/--bnh-max stay defined here, scoped to .bnh/.bnf, just backed
     by the shared value instead of their own 1320px/64px). Was a second,
     narrower container than .wrap's (1320px + clamp(...,64px) vs.
     .wrap's 1560px + clamp(...,96px)) — the two never actually agreed.

     THE FALLBACKS ARE LOAD-BEARING, not decoration. chrome.css is enqueued on
     every request, but style.css is NOT: page-home-v2.php dequeues it
     ('brokersnest-style', see that file's wp_enqueue_scripts callback), so on
     the homepage these two var() lookups resolved to nothing, the whole
     declaration was dropped as invalid, and the header and footer rendered
     full-bleed against the left edge of the viewport — the one page on the
     site where they did. Fixed 2026-09-30. Keep the fallbacks numerically
     equal to style.css's :root, and never assume style.css is loaded. */
  --bnh-gut: var(--bn-container-gutter, clamp(24px, 2.5vw, 48px));
  /* Header and footer ALIGN WITH THE BODY (Angelos, 2026-10-08, after seeing
     the full-width version on staging): same cap, same gutter, so the logo
     sits on the content's left edge and "Find my broker" on its right. For a
     few hours that day this was `none` and the bar ran to the screen edges on
     screens wider than 1920px; he preferred it aligned. Below 1920px the two
     were always identical. */
  --bnh-max: var(--bn-container-max, 1920px);
  --bnh-radius: 4px;
  --bnh-pill: 999px;

  background: var(--bnh-obsidian);
  color: var(--bnh-text);
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
.bnh,
.bnf,
.bnh *,
.bnh *::before,
.bnh *::after,
.bnf *,
.bnf *::before,
.bnf *::after { box-sizing: border-box; }

/* ---------- Collision resets (style.css bare-element rules) ---------- */
/* style.css: a { color: blue } a:hover { text-decoration: underline } */
.bnh a,
.bnf a { color: inherit; text-decoration: none; }
.bnh a:hover,
.bnh a:focus,
.bnf a:hover,
.bnf a:focus { text-decoration: none; }
/* style.css: p { margin: 0 0 1em } — the homepage this was lifted from uses the UA default */
.bnh p,
.bnf p { margin: 1em 0; }
/* style.css: h1-h4 { weight 500; letter-spacing -.02em; line-height 1.1 } */
.bnh h1, .bnh h2, .bnh h3, .bnh h4,
.bnf h1, .bnf h2, .bnf h3, .bnf h4 {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  letter-spacing: normal;
  line-height: inherit;
  margin: 0;
}
.bnh button,
.bnf button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.bnh svg,
.bnf svg { display: inline-block; }
.bnh ul, .bnf ul { margin: 0; padding: 0; list-style: none; }

/* Shared building blocks (scoped copies of the homepage's page-level ones) */
.bnh .wordmark,
.bnf .wordmark { font-family: 'Jost', sans-serif; font-size: 21px; letter-spacing: -.01em; white-space: nowrap; line-height: 1.7; }
.bnh .wordmark .a, .bnf .wordmark .a { font-weight: 200; }
.bnh .wordmark .b, .bnf .wordmark .b { font-weight: 600; }
.bnh .wordmark .pdot, .bnf .wordmark .pdot { color: var(--bnh-ocean); font-weight: 600; }

.bnf .label {
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bnh-slate);
}
.bnf .foot { font-size: 11px; line-height: 1.6; color: var(--bnh-slate); } /* was #6C7073 (3.8:1) */

.bnh .pulse, .bnf .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--bnh-mint); flex: none; position: relative;
}
.bnh .pulse::after, .bnf .pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--bnh-mint); opacity: .55; animation: bnh-ping 2s ease-out infinite;
}
.bnh .pulse.static::after, .bnf .pulse.static::after { display: none; }
@keyframes bnh-ping { 0% { transform: scale(.6); opacity: .6; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bnh .pulse::after, .bnf .pulse::after { animation: none; } }

.bnh .btn-primary {
  background: var(--bnh-ocean); color: #fff; font-weight: 500; font-size: 15px;
  padding: 11px 22px; border-radius: var(--bnh-pill); white-space: nowrap; transition: .18s; display: inline-block; line-height: 1.7;
}
.bnh .btn-primary:hover { filter: brightness(1.1); }
.bnh .icon-btn {
  width: 38px; height: 38px; border-radius: var(--bnh-pill); display: grid; place-items: center; color: #D7D9DA; flex: none;
}
.bnh .icon-btn:hover { background: rgba(255, 255, 255, .06); color: #fff; }

/* Keyboard focus, everywhere in the chrome */
.bnh a:focus-visible,
.bnh summary:focus-visible,
.bnh .bnh-search-form input:focus-visible,
.bnh .bnh-search-form button:focus-visible,
.bnh .bnh-toggle:focus-visible ~ .nav .bnh-burger,
.bnf a:focus-visible,
.bnf input:focus-visible,
.bnf button:focus-visible { outline: 2px solid var(--bnh-ocean); outline-offset: 2px; }

/* ---------- Header ---------- */
.bnh { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--bnh-line); }
.admin-bar .bnh { top: 32px; }
@media (max-width: 782px) { .admin-bar .bnh { top: 46px; } }

/* Skip link: off-screen until focused */
.bnh .bnh-skip {
  position: absolute; left: var(--bnh-gut); top: 0; z-index: 80;
  transform: translateY(-120%); transition: transform .15s;
  background: #1D6BC0; color: #fff; font-size: 14px; font-weight: 500;
  padding: 10px 16px; border-radius: 0 0 8px 8px; line-height: 1.4;
}
.bnh .bnh-skip:focus { transform: none; }

.bnh .nav {
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
  height: 74px; max-width: var(--bnh-max); margin: 0 auto; padding: 0 var(--bnh-gut);
}
.bnh .nav-links { display: flex; gap: clamp(12px, 1.7vw, 26px); margin-left: 18px; align-self: stretch; }
.bnh .nav-item { position: relative; display: flex; align-items: center; }
.bnh .nav-item > a {
  display: inline-flex; align-items: center; gap: 6px; height: 100%;
  font-size: 15px; color: #D7D9DA; font-weight: 400;
}
.bnh .nav-item > a:hover,
.bnh .nav-item:hover > a,
.bnh .nav-item:focus-within > a,
.bnh .nav-item > a[aria-current] { color: #fff; }
.bnh .nav-item .caret { color: var(--bnh-slate); transition: transform .18s; }
.bnh .nav-item:hover .caret,
.bnh .nav-item:focus-within .caret { transform: rotate(180deg); color: #fff; }

/* CSS-only dropdown: hover OR keyboard focus, no JavaScript */
.bnh .submenu {
  position: absolute; top: 100%; left: -14px; min-width: 248px;
  background: var(--bnh-panel); border: 1px solid var(--bnh-line-strong); border-radius: 12px; padding: 6px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .6); z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.bnh .nav-item:hover .submenu,
.bnh .nav-item:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.bnh .submenu a {
  display: block; padding: 10px 14px; border-radius: 8px; font-size: 15px;
  color: #E3E5E6; font-weight: 500; line-height: 1.35;
}
.bnh .submenu a:hover,
.bnh .submenu a[aria-current] { background: rgba(255, 255, 255, .06); color: #fff; }
.bnh .submenu .sm-desc { display: block; font-size: 12px; font-weight: 300; color: var(--bnh-slate); margin-top: 3px; }

.bnh .nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Search: a <details> whose <summary> is the icon. Opens with no JavaScript;
   assets/js/search-widget.js adds focus, Esc, outside click and the live
   results. The panel hangs from .bnh itself (sticky, so it is the containing
   block): full width under the bar, its contents on the same cap and gutter
   as .nav. Above the mobile menu panel, so the two never sit side by side.
   Ocean is on the submit button only. */
.bnh .bnh-search { display: block; flex: none; }
.bnh .bnh-search > summary { list-style: none; cursor: pointer; }
.bnh .bnh-search > summary::-webkit-details-marker { display: none; }
.bnh .bnh-search[open] > summary { background: rgba(255, 255, 255, .08); color: #fff; }
.bnh .bnh-search-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 75;
  background: var(--bnh-obsidian);
  border-top: 1px solid var(--bnh-line); border-bottom: 1px solid var(--bnh-line);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .6);
}
.bnh .bnh-search-inner { max-width: var(--bnh-max); margin: 0 auto; padding: 16px var(--bnh-gut); }
.bnh .bnh-search-form { display: flex; gap: 12px; margin: 0; }
.bnh .bnh-search-form input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 20px;
  background: var(--bnh-panel); border: 1px solid var(--bnh-line-strong); border-radius: var(--bnh-pill);
  color: #fff; font: inherit; font-size: 16px; font-weight: 400; line-height: 1.2;
  -webkit-appearance: none; appearance: none;
}
.bnh .bnh-search-form input::placeholder { color: var(--bnh-slate); opacity: 1; }
.bnh .bnh-search-form input:focus { border-color: rgba(255, 255, 255, .4); }
.bnh .bnh-search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bnh .bnh-search-submit {
  flex: none; height: 48px; padding: 0 26px; border-radius: var(--bnh-pill);
  background: var(--bnh-ocean); color: #fff; font-size: 15px; font-weight: 500; transition: .18s;
}
.bnh .bnh-search-submit:hover { filter: brightness(1.1); }
.bnh .bnh-search-live { max-height: min(60vh, 520px); overflow-y: auto; }
.bnh .bnh-search-live:not(:empty) { margin-top: 10px; }
.bnh .bnh-sr { display: block; padding: 11px 14px; border-radius: 8px; line-height: 1.4; }
.bnh .bnh-sr:hover,
.bnh .bnh-sr:focus-visible { background: rgba(255, 255, 255, .06); }
.bnh .bnh-sr-type { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bnh-slate); }
.bnh .bnh-sr-title { display: block; font-family: 'Jost', sans-serif; font-size: 17px; font-weight: 500; color: #fff; margin-top: 2px; }
.bnh .bnh-sr-snip { display: block; font-size: 13px; color: var(--bnh-slate); margin-top: 2px; }
.bnh .bnh-sr-empty { padding: 12px 14px; font-size: 14px; color: var(--bnh-slate); }
@media (max-width: 560px) {
  .bnh .bnh-search-inner { padding-top: 12px; padding-bottom: 12px; }
  .bnh .bnh-search-form { gap: 8px; }
  .bnh .bnh-search-form input { padding: 0 16px; }
  .bnh .bnh-search-submit { padding: 0 18px; }
}

/* Mobile disclosure: hidden checkbox + label + :checked. No JavaScript.
   The checkbox is the focusable, named control; the label is its visual. */
.bnh .bnh-toggle {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); border: 0; opacity: 0;
}
.bnh .bnh-burger { cursor: pointer; }
.bnh .bnh-panel-cta { display: none; }

@media (min-width: 1081px) {
  .bnh .bnh-toggle,
  .bnh .bnh-burger { display: none; }

  /* A taller bar on desktop (Angelos, 2026-10-08): 74px -> 90px, about 22%
     more, with everything in it scaled up a little less than that so the bar
     gains air as well as size. Wordmark 21 -> 25px, menu 15 -> 17px, search
     38 -> 44px, button 15 -> 17px. Brand styles untouched: same faces,
     weights, colours and pill.
     DESKTOP ONLY. Below 1081px the bar keeps its 74px (66px on phones) and
     its sizes: a fifth more height there would come straight out of the page,
     and the burger panel's max-height is computed from those two numbers.
     .bn-mkt-tabs-bar in style.css sticks directly under this bar and carries
     the same 90px; change both together. */
  .bnh .nav { height: 90px; }
  .bnh .wordmark { font-size: 25px; }
  .bnh .nav-links { margin-left: 22px; }
  .bnh .nav-item > a { font-size: 17px; }
  .bnh .nav-item .caret { width: 14px; height: 14px; }
  .bnh .submenu a { font-size: 16px; }
  .bnh .submenu .sm-desc { font-size: 13px; }
  .bnh .nav-right { gap: 16px; }
  .bnh .icon-btn { width: 44px; height: 44px; }
  .bnh .icon-btn svg { width: 21px; height: 21px; }
  .bnh .btn-primary { font-size: 17px; padding: 13px 26px; }
}

@media (max-width: 1080px) {
  /* Nav collapses into a panel under the bar instead of vanishing. */
  .bnh .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; gap: 0;
    flex-direction: column; align-self: auto;
    background: var(--bnh-obsidian); border-bottom: 1px solid var(--bnh-line);
    padding: 6px var(--bnh-gut) 22px; max-height: calc(100vh - 74px); overflow-y: auto;
  }
  .bnh .bnh-toggle:checked ~ .nav .nav-links { display: flex; }
  /* Without JavaScript both panels can be open at once (the script closes one
     when the other opens). The menu then starts below the search bar, whose
     height is its padding + the 48px field + two hairlines. */
  .bnh:has(.bnh-search[open]) .nav-links { top: calc(100% + 82px); max-height: calc(100vh - 74px - 82px); }
  .bnh .nav-item { display: block; border-top: 1px solid var(--bnh-line); padding: 6px 0; }
  .bnh .nav-item:first-child { border-top: 0; }
  .bnh .nav-item > a { height: auto; padding: 10px 0; font-size: 17px; color: #fff; }
  .bnh .nav-item .caret { display: none; }
  /* Dropdown items are listed inline under their parent — no hover on touch. */
  .bnh .submenu {
    position: static; min-width: 0; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none; padding: 0 0 6px 14px;
  }
  .bnh .submenu a { padding: 8px 0; border-radius: 0; }
  .bnh .submenu a:hover { background: none; }
  .bnh .bnh-toggle:checked ~ .nav .bnh-burger { background: rgba(255, 255, 255, .08); color: #fff; }
}

@media (max-width: 560px) {
  .bnh .nav { gap: 8px; height: 66px; }
  .bnh .nav-links { max-height: calc(100vh - 66px); }
  .bnh:has(.bnh-search[open]) .nav-links { top: calc(100% + 74px); max-height: calc(100vh - 66px - 74px); }
  .bnh .nav-right { gap: 6px; }
  .bnh .wordmark { font-size: 19px; }
  .bnh .btn-primary { padding: 10px 16px; font-size: 14px; }
}
@media (max-width: 400px) {
  .bnh .wordmark { font-size: 18px; }
  .bnh .btn-primary { padding: 9px 12px; font-size: 13px; }
  .bnh .icon-btn { width: 36px; height: 36px; }
}
/* Very narrow phones: the header CTA moves into the panel so the bar can't overflow. */
@media (max-width: 359px) {
  .bnh .nav-right .btn-primary { display: none; }
  .bnh .bnh-panel-cta { display: block; padding: 14px 0 0; }
  .bnh .bnh-panel-cta .btn-primary { display: inline-block; }
}

/* ---------- Back to top ---------- */
/* Fixed to the viewport, bottom right, ABOVE the CookieScript badge. The
   badge's numbers are CookieScript's own (read from its loader 2026-10-11):
   right 10px, bottom 10px, 46px tall (36px on small screens). So this starts
   at 68px: the badge's top edge plus a 12px gap. Its right edge is 11px so
   the two 44/46px circles share a centre line. If the badge is ever moved or
   resized in CookieScript, change these with it.
   env(safe-area-inset-bottom) keeps it off the phone's home bar.
   Below the header (z-index 60) and far below the badge and banner.
   With JavaScript (.bnf-top-js) it is hidden until scrolled a screen down. */
.bnf .bnf-top {
  position: fixed; right: 11px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 55;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bnh-obsidian); border: 1px solid var(--bnh-line-strong); color: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
  transition: opacity .2s, visibility .2s, background-color .18s;
}
.bnf .bnf-top:hover { background: #1A1B1C; color: #fff; }
.bnf .bnf-top.bnf-top-js { opacity: 0; visibility: hidden; }
.bnf .bnf-top.bnf-top-js.is-visible { opacity: 1; visibility: visible; }
.bnh:focus { outline: 0; } /* the header receives focus after "Back to top" */
@media (prefers-reduced-motion: reduce) { .bnf .bnf-top { transition: none; } }
@media print { .bnf .bnf-top { display: none; } }

/* ---------- Footer ---------- */
.bnf { padding: clamp(50px, 7vw, 96px) 0 0; }
.bnf .bnf-wrap { max-width: var(--bnh-max); margin: 0 auto; padding: 0 var(--bnh-gut); }
.bnf .f-top { display: grid; grid-template-columns: 1fr minmax(320px, .85fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .bnf .f-top { grid-template-columns: 1fr; } }
.bnf .f-brand .wordmark { font-size: 26px; }
.bnf .f-tag { font-family: 'Jost', sans-serif; font-weight: 200; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; margin: 22px 0 0; }
.bnf .f-tag b { font-weight: 600; }
.bnf .f-social { display: flex; gap: 4px; margin: 18px 0 0 -9px; }
.bnf .f-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--bnh-slate); transition: color .15s; }
.bnf .f-social a:hover,
.bnf .f-social a:focus-visible { color: #fff; }
.bnf .f-social a:focus-visible { outline: 2px solid var(--bnh-ocean); outline-offset: -2px; border-radius: 4px; }
.bnf .f-social svg { width: 18px; height: 18px; display: block; }
.bnf .f-figs { display: flex; gap: 56px; margin-top: 40px; }
.bnf .f-figs .n { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.bnf .f-figs .k { margin-top: 8px; font-size: 12px; color: var(--bnh-slate); }
.bnf .note-card { background: var(--bnh-panel); border: 1px solid var(--bnh-line); padding: clamp(24px, 2.6vw, 34px); border-radius: var(--bnh-radius); }
.bnf .note-card .label { font-size: 11px; }
.bnf .note-card h3 { font-size: 21px; margin: 18px 0 12px; }
.bnf .note-card p { margin: 0; font-size: 14.5px; color: #A9ADAF; line-height: 1.6; }
.bnf .note-card p.foot { font-size: 11px; line-height: 1.6; color: var(--bnh-slate); }
.bnf .sub-form { display: flex; gap: 12px; margin: 26px 0 14px; flex-wrap: wrap; }
.bnf .sub-form input {
  flex: 1 1 200px; min-width: 0; background: transparent; border: 1px solid var(--bnh-line-strong);
  border-radius: var(--bnh-pill); padding: 14px 20px; color: #fff; font: inherit; font-size: 15px;
}
.bnf .sub-form input::placeholder { color: #6C7073; }
.bnf .sub-form input:focus { outline: 0; border-color: rgba(255, 255, 255, .4); }
.bnf .sub-form button {
  background: var(--bnh-obsidian); border: 1px solid var(--bnh-line-strong); color: #fff;
  padding: 14px 30px; border-radius: var(--bnh-pill); font-size: 15px; font-weight: 500; transition: .18s;
}
.bnf .sub-form button:hover { background: #1A1B1C; }
/* Honeypot: off-screen, not display:none/visibility:hidden — some scrapers
   skip fields hidden that way but still fill an off-screen one. Also
   unreachable by keyboard (tabindex="-1" in the markup) and hidden from
   screen readers (aria-hidden on the wrapper), so no assistive-tech visitor
   is ever told to fill in a field meant only to catch a bot. */
.bnf .bn-nl-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bnf .bn-nl-msg { font-size: 13px; margin: 0 0 4px; }
.bnf .bn-nl-msg-ok { color: var(--bnh-mint); }
.bnf .bn-nl-msg-error { color: var(--bnh-text); }
.bnf .f-links {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(46px, 6vw, 80px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--bnh-line);
}
@media (max-width: 760px) { .bnf .f-links { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
.bnf .f-col .label { font-size: 11px; margin-bottom: 22px; display: block; }
.bnf .f-col a { display: block; font-size: 15px; color: #B6BABC; padding: 7px 0; }
.bnf .f-col a:hover { color: #fff; }
/* Static, site-wide risk note (the homepage keeps its own region-switched section above the footer) */
.bnf .risk-note { margin: clamp(32px, 4vw, 48px) 0 0; font-size: 12px; line-height: 1.75; color: #84888B; max-width: 96ch; }
.bnf .f-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 64px); padding: 28px 0 40px; border-top: 1px solid var(--bnh-line);
}
.bnf .f-bottom .foot { max-width: 56ch; }
.bnf .f-bottom .right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.bnf .verified {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: var(--bnh-pill);
  border: 1px solid rgba(38, 183, 151, .24); background: rgba(38, 183, 151, .07); font-size: 12.5px; color: #8FDDC9;
}
.bnf .f-bottom .right a { font-size: 12.5px; color: var(--bnh-slate); }
.bnf .f-bottom .right a:hover { color: #fff; }