/* =============================================================================
   COMPONENTS — buttons, header/nav, drawer, cards, hero, sections, FAQ, footer.
   Scoped under .bfr. Reads ONLY tokens (zero raw hex/rgb).
   ========================================================================== */

/* ----------------------------- BUTTONS ----------------------------------- */
.bfr .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-heading); font-weight:700; font-size:var(--fs-base);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--btn-radius); border:1px solid transparent;
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease), background var(--dur) var(--ease),
             border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bfr .btn .arrow{ transition:transform var(--dur-fast) var(--ease) }
.bfr .btn:hover .arrow{ transform:translateX(4px) }
.bfr .btn--primary{ background:var(--btn-primary-bg); color:var(--btn-primary-fg) }
.bfr .btn--primary:hover{ background:var(--btn-primary-bg-hover); transform:translateY(-2px); box-shadow:0 12px 30px var(--accent-border) }
.bfr .btn--ghost{ background:var(--btn-ghost-bg); color:var(--btn-ghost-fg); border-color:var(--btn-ghost-border) }
.bfr .btn--ghost:hover{ background:var(--btn-ghost-bg-hover); transform:translateY(-2px) }
.bfr .btn--lg{ font-size:var(--fs-lg); padding:16px 34px }
/* Text link with an arrow — light, boxless secondary action (no heavy outline). */
.bfr .btn--link{
  background:transparent; border-color:transparent; color:var(--text);
  padding:16px 10px; box-shadow:none;
}
.bfr .btn--link .arrow{ transition:transform var(--dur-fast) var(--ease) }
.bfr .btn--link:hover{ background:transparent; transform:none; color:var(--accent) }
.bfr .btn--link .u{ box-shadow:inset 0 -1px 0 currentColor; padding-bottom:1px; transition:box-shadow var(--dur-fast) var(--ease) }
.bfr .btn--link:hover .u{ box-shadow:inset 0 -2px 0 currentColor }

/* ------------------------------ HEADER / NAV ----------------------------- */
/* CRITICAL: nav uses backdrop-filter (becomes containing block for the fixed
   drawer). It MUST stay overflow:visible or the mobile drawer gets clipped
   invisible ("burger does nothing"). Do not set overflow:hidden here. */
.bfr .site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  overflow:visible;
  background:var(--nav-bg);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), padding var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.bfr .site-header.scrolled{
  background:var(--nav-bg-scrolled);
  /* saturate lifts the frosted-glass look (colours behind bleed through richer) */
  -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  border-bottom-color:var(--nav-border);
}
/* LIGHT theme header is a CONSISTENT light frosted glass from the very top (dark nav
   text), so it never jumps from transparent to solid-white on scroll — scrolling only
   deepens the veil slightly and adds the divider. (Dark theme keeps its transparent →
   dark-glass behaviour over the dark hero.) The header is overflow:visible, so this
   backdrop-filter does not clip the fixed mobile drawer. */
:root[data-theme="light"] .bfr .site-header{
  background:rgb(255 255 255 / .5);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:rgb(10 22 40 / .06);
}
:root[data-theme="light"] .bfr .site-header.scrolled{
  background:rgb(255 255 255 / .68);
  border-bottom-color:rgb(10 22 40 / .1);
}

/* Animated theme switch: the new theme reveals as a circle expanding from the toggle
   button (coords + radius set on :root in the toggle handler). Old snapshot stays
   static beneath; the new one wipes in on top. Falls back to an instant swap where
   the View Transitions API is unavailable, where the CSS colour transitions still
   cross-fade the surfaces softly. */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:none }
  ::view-transition-new(root){ animation:theme-reveal .5s cubic-bezier(.4,0,.2,1) both }
  @keyframes theme-reveal{
    from{ clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,0)) }
    to{ clip-path:circle(var(--vt-r,150%) at var(--vt-x,50%) var(--vt-y,0)) }
  }
}
.bfr .nav-inner{
  max-width:var(--container); margin-inline:auto; padding:14px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  min-height:var(--nav-h);
}
.bfr .nav-logo{ display:flex; align-items:center; flex-shrink:0; z-index:2 }
/* logo carries the wordmark + tagline lockup (289x72 source). ~40px tall keeps the
   tagline line legible without crowding the bar. */
.bfr .nav-logo img{ height:40px; width:auto; display:block }
@media (min-width:1024px) and (max-width:1400px){ .bfr .nav-logo img{ height:34px } }
/* theme-swapped logo for the SCROLLED / solid header state:
   white-wordmark lockup on dark, navy-wordmark lockup on light. */
.bfr .logo-dark{ display:block }
.bfr .logo-light{ display:none }
:root[data-theme="light"] .bfr .logo-dark{ display:none }
:root[data-theme="light"] .bfr .logo-light{ display:block }

/* ---- Header chrome OVER THE DARK HERO (un-scrolled) — DARK THEME ONLY ----
   In dark theme the hero is a dark showcase, so the un-scrolled header stays LIGHT
   (white logo + white nav) off the --nav-hero-* tokens. In LIGHT theme the hero is an
   airy light band, so the header instead uses its normal DARK chrome (navy logo + navy
   nav) — hence these are scoped away from light theme. */
:root:not([data-theme="light"]) .bfr-hero-dark .site-header:not(.scrolled) .logo-dark{ display:block }
:root:not([data-theme="light"]) .bfr-hero-dark .site-header:not(.scrolled) .logo-light{ display:none }
:root:not([data-theme="light"]) .bfr-hero-dark .site-header:not(.scrolled) .nav-burger[aria-expanded="false"],
:root:not([data-theme="light"]) .bfr-hero-dark .site-header:not(.scrolled) .theme-toggle{
  color:var(--nav-hero-fg-hover); background:var(--nav-hero-surface); border-color:var(--nav-hero-surface-border);
}
@media (min-width:1024px){
  :root:not([data-theme="light"]) .bfr-hero-dark .site-header:not(.scrolled) .nav-link{ color:var(--nav-hero-fg) }
  :root:not([data-theme="light"]) .bfr-hero-dark .site-header:not(.scrolled) .nav-item:hover .nav-link,
  :root:not([data-theme="light"]) .bfr-hero-dark .site-header:not(.scrolled) .nav-item:focus-within .nav-link,
  :root:not([data-theme="light"]) .bfr-hero-dark .site-header:not(.scrolled) .nav-link:hover{ color:var(--nav-hero-fg-hover) }
}

.bfr .nav-links{ display:flex; align-items:center; gap:var(--space-1) }
.bfr .nav-item{ position:relative }
.bfr .nav-link{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--font-heading); font-size:var(--fs-sm); font-weight:600;
  color:var(--nav-fg); padding:10px 12px; border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* Keep the whole primary nav on ONE row down to 1280: labels never wrap
   (white-space:nowrap above), and between the desktop breakpoint and ~1400px the
   inter-item gap, link padding and CTA are tightened so the six labels + toggle +
   CTA fit beside the logo without stacking. Below 1024 the mobile drawer takes over. */
@media (min-width:1024px) and (max-width:1400px){
  .bfr .nav-links{ gap:0 }
  .bfr .nav-link{ padding:10px 9px; gap:5px; font-size:.82rem }
  .bfr .nav-actions{ gap:var(--space-2); margin-left:var(--space-1) }
  .bfr .nav-cta{ padding:9px 15px; font-size:.82rem }
  .bfr .nav-inner{ gap:var(--space-2) }
}
.bfr .nav-link:hover,.bfr .nav-item:hover .nav-link,.bfr .nav-item:focus-within .nav-link{ color:var(--nav-fg-hover) }
/* SCROLLED / solid header — force the theme veil + theme-appropriate nav in BOTH themes.
   Fixes a leak where the scrolled header stayed transparent with hero-white nav, which in
   LIGHT theme rendered white nav on the white page (invisible). These win over the hero
   chrome once the header is scrolled off the hero. */
:root .bfr .site-header.scrolled{ background:var(--nav-bg-scrolled); }
:root .bfr .site-header.scrolled .nav-link{ color:var(--nav-fg); }
:root .bfr .site-header.scrolled .nav-item:hover .nav-link,
:root .bfr .site-header.scrolled .nav-item:focus-within .nav-link,
:root .bfr .site-header.scrolled .nav-link:hover{ color:var(--nav-fg-hover); }
/* Scrolled/sticky header shows exactly ONE theme-appropriate logo. Explicit for BOTH
   themes — the dark-scrolled state had no explicit rule and rendered BOTH lockups. */
.bfr .site-header.scrolled .logo-dark{ display:block !important }
.bfr .site-header.scrolled .logo-light{ display:none !important }
:root[data-theme="light"] .bfr .site-header.scrolled .logo-dark{ display:none !important }
:root[data-theme="light"] .bfr .site-header.scrolled .logo-light{ display:block !important }
.bfr .nav-link.has-caret::after{
  content:""; width:7px; height:7px; margin-left:2px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--dur-fast) var(--ease);
}
.bfr .nav-item:hover .nav-link.has-caret::after,
.bfr .nav-item:focus-within .nav-link.has-caret::after{ transform:translateY(0) rotate(225deg) }

/* Dropdown panel.
   Each panel carries the `hidden` HTML attribute as a pre-CSS / no-JS guard: the
   UA rule [hidden]{display:none} keeps it closed even before this stylesheet loads
   (prevents the flash of open menus). This author rule sets display:block to take
   over once loaded, then manages the closed/open state via opacity+visibility. */
.bfr .nav-panel{
  display:block; position:absolute; z-index:1100; padding:18px;
  background:var(--nav-panel-bg); border:1px solid var(--nav-panel-border);
  border-radius:18px; box-shadow:var(--nav-panel-shadow);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
/* Hover-gap bridge: keeps :hover alive as the cursor crosses the trigger→panel gap.
   The wide mega-panels sit ~31px below the (vertically-centered) trigger link because
   they anchor off the taller header bar, so the bridge must span that full gap — a
   short 16px bridge left a dead zone where the cursor dropped :hover and the panel
   closed. 36px covers the largest gap; on the tighter 1-col panels it simply overlaps
   the trigger harmlessly. */
.bfr .nav-item > .nav-panel::before{ content:""; position:absolute; left:0; right:0; top:-34px; height:36px }

/* 1-col panels anchor to their trigger item (left- or right-aligned) */
.bfr .nav-mega-1col{ width:min(460px,94vw); top:calc(100% + 8px); transform:translateY(10px) }
.bfr .nav-anchor-left{ left:0; right:auto }
.bfr .nav-anchor-right{ left:auto; right:0 }
.bfr .nav-item:hover > .nav-mega-1col,
.bfr .nav-item:focus-within > .nav-mega-1col{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) }

/* Wide panels (2/3-col): trigger item goes static so the absolute panel centers on
   the fixed full-width header rather than the narrow item (no side overflow). */
.bfr .nav-item:has(.nav-mega-2col),
.bfr .nav-item:has(.nav-mega-3col){ position:static }
.bfr .nav-mega-2col,.bfr .nav-mega-3col{ left:50%; top:calc(100% + 6px); transform:translateX(-50%) translateY(10px) }
.bfr .nav-mega-2col{ width:min(760px,94vw) }
.bfr .nav-mega-3col{ width:min(1140px,95vw) }
.bfr .nav-item:hover > .nav-mega-2col,.bfr .nav-item:focus-within > .nav-mega-2col,
.bfr .nav-item:hover > .nav-mega-3col,.bfr .nav-item:focus-within > .nav-mega-3col{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) }

/* Featured "Start here" card */
.bfr .nav-mega-featured{
  display:block; position:relative; overflow:hidden; text-decoration:none;
  background:linear-gradient(135deg, rgb(var(--ch-emerald) / .18) 0%, rgb(var(--ch-emerald) / .05) 72%);
  border:1px solid var(--accent-border); border-radius:14px; padding:16px 18px; margin-bottom:14px;
  transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.bfr .nav-mega-featured::after{ content:""; position:absolute; top:-30%; right:-8%; width:52%; height:150%;
  background:radial-gradient(circle, rgb(var(--ch-mint) / .16), transparent 62%); pointer-events:none }
.bfr .nav-mega-featured:hover{ border-color:var(--accent); transform:translateY(-1px); box-shadow:0 12px 30px rgb(var(--ch-emerald) / .18) }
.bfr .nav-mega-featured .featured-eyebrow{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); margin-bottom:6px }
.bfr .nav-mega-featured .featured-eyebrow::before{ content:"\2605"; font-size:11px }
.bfr .nav-mega-featured h4{ font-family:var(--font-heading); font-size:1.05rem; font-weight:800; color:var(--text); letter-spacing:-.01em; margin-bottom:5px }
.bfr .nav-mega-featured p{ font-size:var(--fs-xs); color:var(--text-muted); line-height:1.5; margin-bottom:12px; max-width:54ch }
.bfr .nav-mega-featured .featured-cta{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-sm); background:var(--primary); color:var(--primary-fg); font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em }
.bfr .nav-mega-featured .featured-cta .fa{ transition:transform var(--dur-fast) var(--ease) }
.bfr .nav-mega-featured:hover .featured-cta{ background:var(--primary-hover) }
.bfr .nav-mega-featured:hover .featured-cta .fa{ transform:translateX(3px) }

/* Item grids + single-column lists */
.bfr .nav-mega-grid{ display:grid; gap:16px }
.bfr .nav-mega-grid--2{ grid-template-columns:1fr 1fr }
.bfr .nav-mega-grid--3{ grid-template-columns:1fr 1fr 1fr }
.bfr .nav-mega-col{ min-width:0 }
.bfr .nav-mega-list{ display:flex; flex-direction:column; gap:2px }
.bfr .nav-mega-secondary-title{ font-size:10px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-subtle); margin:0 0 8px 12px }

/* Individual mega items: icon tile + title + one-line subtitle */
.bfr .mega-item{ display:flex; gap:12px; align-items:flex-start; padding:9px 12px; border-radius:10px; text-decoration:none; transition:background var(--dur-fast) var(--ease) }
.bfr .mega-item:hover{ background:var(--surface-hover) }
.bfr .mega-item .mi-icon{ flex-shrink:0; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); transition:background var(--dur-fast) var(--ease) }
.bfr .mega-item:hover .mi-icon{ background:rgb(var(--ch-emerald) / .22) }
.bfr .mega-item .mi-icon svg{ width:19px; height:19px }
.bfr .mega-item .mi-text{ min-width:0 }
.bfr .mega-item h4{ font-size:var(--fs-sm); font-weight:700; color:var(--text); line-height:1.25 }
.bfr .mega-item p{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; line-height:1.45 }
/* accent variant for the "compare all / explore all / guide" bottom links */
.bfr .mega-item--accent .mi-icon{ background:rgb(var(--ch-blue) / .16); color:var(--c-blue-400) }
:root[data-theme="light"] .bfr .mega-item--accent .mi-icon{ color:var(--c-blue-700) }
.bfr .mega-item--accent h4{ color:var(--accent) }

/* --- Mega dropdown = DARK showcase panel in BOTH themes, matching the live homepage. ---
   The panel hangs off the header over the dark hero, so it must stay dark navy rather than
   follow the theme surface (which turned it white/cream in light theme and read wrong). */
:root .bfr .nav-panel{
  background:rgb(var(--ch-navy)); color:rgb(255 255 255 / .9);
  border:1px solid rgb(255 255 255 / .09); box-shadow:0 24px 60px rgb(0 0 0 / .5);
}
:root .bfr .nav-mega-featured h4,
:root .bfr .mega-item h4{ color:rgb(255 255 255 / .96) }
:root .bfr .nav-mega-featured p,
:root .bfr .mega-item p{ color:rgb(255 255 255 / .66) }
:root .bfr .nav-mega-secondary-title{ color:rgb(255 255 255 / .42) }
:root .bfr .mega-item:hover{ background:rgb(255 255 255 / .06) }
:root .bfr .mega-item .mi-icon{ background:rgb(var(--ch-emerald) / .16); color:rgb(var(--ch-emerald)) }
:root .bfr .mega-item--accent .mi-icon{ background:rgb(var(--ch-blue) / .18); color:rgb(var(--ch-blue)) }

.bfr .nav-actions{ display:flex; align-items:center; gap:var(--space-3); flex-shrink:0 }
.bfr .nav-cta{ padding:10px 20px; font-size:var(--fs-sm) }

/* Theme toggle */
.bfr .theme-toggle{
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); color:var(--text); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.bfr .theme-toggle:hover{ background:var(--surface-hover); transform:translateY(-1px) }
.bfr .theme-toggle svg{ width:18px; height:18px }
.bfr .theme-toggle .icon-moon{ display:none }
:root[data-theme="light"] .bfr .theme-toggle .icon-sun{ display:none }
:root[data-theme="light"] .bfr .theme-toggle .icon-moon{ display:block }

/* Burger */
.bfr .nav-burger{
  display:none; width:44px; height:44px; place-items:center;
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); color:var(--text); cursor:pointer;
  /* Sit ABOVE the open drawer (z-index:1100) so the close control stays visible
     and tappable while the drawer is open. Both live in the .site-header stacking
     context, so 1200 > 1100 keeps the burger/X on top. */
  position:relative; z-index:1200;
}
.bfr .nav-burger svg{ width:22px; height:22px }
/* Icon swap: hamburger when closed, X when the drawer is open. */
.bfr .nav-burger .icon-close{ display:none }
.bfr .nav-burger[aria-expanded="true"] .icon-burger{ display:none }
.bfr .nav-burger[aria-expanded="true"] .icon-close{ display:block }
.bfr .drawer-backdrop{ display:none }

/* ---- Mobile drawer (< 1024px) ---- */
@media (max-width:1023.98px){
  .bfr .nav-links{
    position:fixed; top:0; right:0;
    width:min(88vw, 380px); height:100dvh;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:calc(var(--nav-h) + 16px) 18px 32px;
    background:var(--nav-panel-bg); border-left:1px solid var(--nav-panel-border);
    box-shadow:var(--shadow-lg);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); transition:transform var(--dur) var(--ease);
    z-index:1100;
  }
  .bfr .nav-links.open{ transform:translateX(0) }

  .bfr .nav-item{ border-bottom:1px solid var(--border) }
  .bfr .nav-link{ width:100%; justify-content:space-between; padding:16px 8px; font-size:var(--fs-base) }
  .bfr .nav-link.has-caret::after{ margin-left:auto }

  /* accordion panels: collapsed by default, expand on .nav-item.open.
     Wide mega panels flatten to a single stacked column inside the drawer. */
  .bfr .nav-links .nav-panel{
    position:static; opacity:1; visibility:visible; transform:none; left:auto; right:auto;
    width:auto; min-width:0; box-shadow:none; border:0; background:transparent;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    padding:0 0 8px; border-radius:0;
    max-height:0; overflow:hidden;
    transition:max-height var(--dur) var(--ease);
  }
  .bfr .nav-panel::before{ display:none }
  .bfr .nav-item.open > .nav-panel{ max-height:2400px; opacity:1; visibility:visible; pointer-events:auto }
  /* multi-column grids become one stacked column in the drawer */
  .bfr .nav-mega-grid{ display:block }
  .bfr .nav-mega-secondary-title{ margin:14px 0 6px 8px }
  .bfr .nav-mega-featured{ margin:6px 0 8px }
  .bfr .nav-mega-featured p{ max-width:none }
  .bfr .mega-item{ padding:8px }
  .bfr .nav-item.open > .nav-link.has-caret::after{ transform:rotate(225deg) }
  /* do not let desktop :hover expand accordions on touch */
  .bfr .nav-item:hover > .nav-panel{ max-height:0 }
  .bfr .nav-item.open:hover > .nav-panel{ max-height:1400px }

  .bfr .nav-actions{ margin-top:18px; flex-direction:row; justify-content:space-between }
  .bfr .nav-cta{ flex:1 }
  .bfr .nav-burger{ display:grid }

  /* Backdrop must sit BELOW the header (z-index:1000) so the drawer, which lives
     inside the header's stacking context, stays above it and clickable. It still
     covers all page content (which is below the header). */
  .bfr .drawer-backdrop{
    display:block; position:fixed; inset:0; z-index:990;
    background:var(--backdrop);
    opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .bfr .drawer-backdrop.open{ opacity:1; visibility:visible }
}

/* body scroll-lock (class applied to html AND body by JS) */
.bfr-lock{ overflow:hidden!important; touch-action:none }

/* ------------------------------ HERO ------------------------------------- */
/* The hero is theme-aware and VIDEO-FREE: the animated mesh + grid + aurora +
   bokeh layers ARE the background — airy/light in the light theme, themed dark
   in the dark theme. It layers, back-to-front: mesh -> grid -> aurora -> bokeh ->
   scrim -> particles -> content. isolation:isolate keeps the z-index stack local. */
.bfr .hero{
  position:relative; overflow:hidden; overflow-x:clip; isolation:isolate;
  padding:calc(var(--nav-h) + clamp(44px,8vw,80px)) 0 clamp(56px,8vw,88px);
  background:var(--hero-base); color:var(--hero-fg);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bfr .hero > .container{ position:relative; z-index:3 }

/* ---- Hero background layers ---- */
/* mesh + grid are OVERSCANNED (inset:-8%) so gentle parallax translation never
   reveals an edge; both are clipped by the hero's overflow so they add no page width. */
.bfr .hero-mesh{ position:absolute; inset:-8%; z-index:0; background:var(--hero-mesh); background-size:400% 400%; animation:meshShift 25s ease infinite; will-change:background-position,transform }
@keyframes meshShift{0%{background-position:0% 0%}25%{background-position:100% 50%}50%{background-position:50% 100%}75%{background-position:0% 50%}100%{background-position:0% 0%}}
.bfr .hero-grid{ position:absolute; inset:-8%; z-index:0; pointer-events:none; will-change:transform;
  background-image:linear-gradient(var(--hero-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid-line) 1px,transparent 1px);
  background-size:60px 60px }
.bfr .aurora{ position:absolute; top:-30%; left:-20%; width:140%; height:80%; z-index:0; pointer-events:none; opacity:var(--aurora-opacity) }
.bfr .aurora-band{ position:absolute; width:100%; border-radius:50%; filter:blur(80px); will-change:transform,opacity }
.bfr .aurora-band:nth-child(1){ top:10%; height:200px; background:var(--aurora-band-1); animation:auroraWave 18s ease-in-out infinite }
.bfr .aurora-band:nth-child(2){ top:35%; height:160px; background:var(--aurora-band-2); animation:auroraWave 22s ease-in-out infinite reverse }
.bfr .aurora-band:nth-child(3){ top:55%; height:120px; background:var(--aurora-band-3); animation:auroraWave 26s ease-in-out infinite 3s }
@keyframes auroraWave{0%,100%{transform:translateX(-8%) scaleY(1);opacity:.3}25%{transform:translateX(5%) scaleY(1.3);opacity:.6}50%{transform:translateX(8%) scaleY(.8);opacity:.4}75%{transform:translateX(-3%) scaleY(1.1);opacity:.55}}
.bfr .bokeh{ position:absolute; border-radius:50%; z-index:0; pointer-events:none; will-change:transform }
.bfr .bokeh-1{ width:400px; height:400px; top:5%; right:-5%; background:var(--bokeh-1); filter:blur(60px); animation:bokeh1 28s ease-in-out infinite }
.bfr .bokeh-2{ width:500px; height:500px; bottom:-10%; left:-8%; background:var(--bokeh-2); filter:blur(80px); animation:bokeh2 34s ease-in-out infinite }
.bfr .bokeh-3{ width:300px; height:300px; top:30%; left:20%; background:var(--bokeh-3); filter:blur(70px); animation:bokeh3 22s ease-in-out infinite }
.bfr .bokeh-4{ width:250px; height:250px; top:60%; right:15%; background:var(--bokeh-4); filter:blur(60px); animation:bokeh1 30s ease-in-out infinite 5s }
.bfr .bokeh-5{ width:350px; height:350px; top:10%; left:50%; background:var(--bokeh-5); filter:blur(75px); animation:bokeh3 26s ease-in-out infinite 8s }
@keyframes bokeh1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.15)}66%{transform:translate(-20px,40px) scale(.9)}}
@keyframes bokeh2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-30px,-40px) scale(1.1)}66%{transform:translate(50px,20px) scale(.85)}}
@keyframes bokeh3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(25px,35px) scale(1.2)}66%{transform:translate(-35px,-15px) scale(.95)}}

/* Rising particles (JS-created dots) + CSS box-shadow starfield */
.bfr .particles-layer{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none }
.bfr .particles-layer::before,.bfr .particles-layer::after{ content:''; position:absolute; width:2px; height:2px; border-radius:50%; top:0; left:0; will-change:transform }
.bfr .particles-layer::before{
  box-shadow:120px 80px 0 var(--particle-a),280px 150px 0 var(--particle-a),450px 60px 0 var(--particle-b),600px 200px 0 var(--particle-c),750px 100px 0 var(--particle-a),900px 180px 0 var(--particle-b),1050px 50px 0 var(--particle-a),1200px 160px 0 var(--particle-c),150px 300px 0 var(--particle-b),350px 350px 0 var(--particle-a),550px 400px 0 var(--particle-c),700px 320px 0 var(--particle-a),850px 380px 0 var(--particle-b),1000px 300px 0 var(--particle-a),1150px 360px 0 var(--particle-c);
  animation:particleDrift 40s linear infinite }
.bfr .particles-layer::after{
  box-shadow:200px 500px 0 var(--particle-a),380px 550px 0 var(--particle-b),520px 480px 0 var(--particle-c),680px 560px 0 var(--particle-a),830px 510px 0 var(--particle-b),980px 580px 0 var(--particle-a),1100px 500px 0 var(--particle-c),100px 650px 0 var(--particle-b),300px 700px 0 var(--particle-a),500px 680px 0 var(--particle-c),700px 720px 0 var(--particle-a),900px 660px 0 var(--particle-b),1080px 700px 0 var(--particle-a),250px 800px 0 var(--particle-c),650px 850px 0 var(--particle-a);
  animation:particleDrift 50s linear infinite reverse }
@keyframes particleDrift{0%{transform:translate(0,0)}25%{transform:translate(-20px,-30px)}50%{transform:translate(15px,-10px)}75%{transform:translate(-10px,20px)}100%{transform:translate(0,0)}}
.bfr #particles{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none }
.bfr .particle{ position:absolute; width:2px; height:2px; border-radius:50%; background:var(--particle-a); animation:particleRise linear infinite; pointer-events:none }
.bfr .particle.p-b{ background:var(--particle-b) }
.bfr .particle.p-c{ background:var(--particle-c) }
@keyframes particleRise{0%{transform:translateY(100vh) translateX(0) scale(1);opacity:0}10%{opacity:1}50%{transform:translateY(50vh) translateX(30px) scale(1.2)}90%{opacity:.6}100%{transform:translateY(-10vh) translateX(-20px) scale(.8);opacity:0}}

/* Soft theme-aware scrim keeps the headline copy AA over the mesh (light veil in
   the airy light hero, dark veil in the dark hero). No video layer. */
.bfr .hero-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--hero-scrim) }

/* ---- Hero content: two-column (copy + chart) on desktop ---- */
.bfr .hero-inner{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,56px); align-items:center;
}
.bfr .hero-copy{ text-align:left; min-width:0 }
.bfr .hero .badge{ margin-inline:0; color:var(--hero-accent); background:rgb(var(--ch-emerald) / .12); border-color:rgb(var(--ch-emerald) / .3) }
.bfr .hero h1{
  font-family:var(--font-display); font-weight:800; color:var(--hero-fg);
  font-size:clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing:-.03em; line-height:1.06;
  margin-top:var(--space-5);
}
.bfr .hero .grad-text{ background:var(--hero-grad); background-size:200% 200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:gradText 6s ease infinite }
.bfr .hero .lede{ margin:var(--space-5) 0 0; max-width:560px; font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--hero-fg-muted) }
.bfr .hero .lede strong{ color:var(--hero-fg); font-weight:600 }
.bfr .hero-cta{ display:flex; gap:10px 18px; align-items:center; justify-content:flex-start; flex-wrap:wrap; margin-top:var(--space-8) }
/* secondary hero action = boxless text link + arrow, pinned to the hero fg so it
   reads on the dark hero (white) AND the airy light hero (navy). */
.bfr .hero .btn--link{ color:var(--hero-fg) }
.bfr .hero .btn--link:hover{ color:var(--hero-accent) }
/* legacy: any ghost that still lands on the hero stays legible in both themes */
.bfr .hero .btn--ghost{ color:var(--hero-fg); border-color:var(--hero-surface-border); background:var(--hero-surface) }
.bfr .hero .btn--ghost:hover{ background:rgb(var(--ch-white) / .12); border-color:rgb(var(--ch-white) / .28) }
.bfr .hero-visual{ width:100%; min-width:0 }

/* ============================================================================
   HERO — VIDEO SHOWCASE (matches the live homepage: self-hosted b-roll behind a
   dark gradient scrim). Pinned DARK in BOTH themes; only the video variant swaps.
   ========================================================================== */
.bfr .hero-people-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
  /* Fade the video out before the hero's bottom edge so it dissolves into the base
     instead of being hard-cut by the hero's overflow (the seam behind the dashboard). */
  -webkit-mask-image:linear-gradient(to bottom, #000 46%, rgba(0,0,0,0) 88%);
  mask-image:linear-gradient(to bottom, #000 46%, rgba(0,0,0,0) 88%) }
.bfr .hero-video{
  position:absolute; left:50%; bottom:0; top:auto; width:auto; height:118%; min-width:100%;
  transform:translateX(-50%); object-fit:cover; object-position:center bottom;
  opacity:var(--hero-video-opacity); filter:var(--hero-video-filter);
}
/* dark gradient scrim OVER the video → headline legibility + premium depth */
.bfr .hero-people-bg::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:var(--hero-video-scrim) }
/* per-theme video swap (only the matching theme's video paints) */
.bfr .hero-video-light{ display:none }
:root[data-theme="light"] .bfr .hero-video-dark{ display:none }
:root[data-theme="light"] .bfr .hero-video-light{ display:block }
@media(max-width:600px){ .bfr .hero-video{ object-position:32% 88%; height:130% } }
/* Smooth the hero's bottom into the page background (navy-950 -> navy-900 / light -> white),
   removing the visible cut where the video ends behind the overlapping dashboard card. */
.bfr .hero::after{ content:''; position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none;
  /* Kept SHORT so the fade lives in the hero's bottom padding, BELOW the CTA — a taller
     fade in light theme washed the hero to white behind the ghost CTA and broke its text. */
  height:clamp(44px,6vh,76px); background:linear-gradient(to bottom, transparent, var(--bg)) }

/* The homepage hero is a DARK showcase in DARK theme (deep navy base, white copy).
   In LIGHT theme it stays an AIRY LIGHT band with DARK copy — so this override is
   scoped to dark only; light theme inherits the light hero tokens from :root[data-theme=light]. */
:root:not([data-theme="light"]) .bfr .hero--video{
  --hero-base:var(--c-navy-950);
  --hero-fg:var(--c-white);
  --hero-fg-muted:rgb(255 255 255 / .82);
  --hero-fg-subtle:rgb(255 255 255 / .58);
  --hero-accent:var(--c-emerald-400);
  --hero-grad:linear-gradient(135deg,var(--c-emerald-300),var(--c-emerald-400) 45%,var(--c-teal-400));
  --hero-surface:rgb(255 255 255 / .05);
  --hero-surface-border:rgb(255 255 255 / .10);
  /* Atmosphere pinned DARK too — otherwise in light theme the LIGHT mesh/grid/particles
     (z0) show through wherever the video layer is thin or masked out (lower hero), which
     brightened the background behind the pillars and the ghost CTA and killed the white
     text. A dark-showcase hero must own its atmosphere in both themes, not just its base. */
  --hero-mesh:linear-gradient(135deg,var(--c-navy-900) 0%,var(--c-navy-mesh-a) 20%,var(--c-navy-900) 35%,var(--c-navy-mesh-b) 50%,var(--c-navy-900) 65%,var(--c-navy-mesh-c) 80%,var(--c-navy-900) 100%);
  --hero-grid-line:rgb(255 255 255 / .015);
  --aurora-opacity:.4;
  --particle-a:rgb(var(--ch-mint) / .35);
  --particle-b:rgb(var(--ch-blue) / .25);
  --particle-c:rgb(var(--ch-violet) / .2);
}
.bfr .hero--video .badge{ color:var(--c-emerald-400); background:rgb(var(--ch-emerald) / .12); border-color:rgb(var(--ch-emerald) / .3) }
/* LIGHT theme: bright emerald-400 badge text fails on the light hero — use the darker
   emerald-700 so it clears 5:1 on the pale green pill. */
:root[data-theme="light"] .bfr .hero--video .badge{ color:var(--c-emerald-800); background:rgb(var(--ch-emerald) / .08); border-color:rgb(var(--ch-emerald) / .34) }

/* ---- Centered single-column hero content (matches live layout) ---- */
.bfr .hero-content{ position:relative; z-index:3; max-width:1080px; margin:0 auto; text-align:center }
.bfr .hero-content .badge{ margin-bottom:var(--space-6) }
.bfr .hero-content h1{
  font-family:var(--font-display); font-weight:800; color:var(--hero-fg);
  font-size:clamp(2.2rem,5.4vw,4.05rem); letter-spacing:-.03em; line-height:1.06;
  /* Wider column + balanced wrapping: spread the headline across the space instead
     of boxing it into a narrow 5-line stack. text-wrap:balance evens the line lengths. */
  max-width:24ch; margin-inline:auto; text-wrap:balance;
}
.bfr .hero-content .grad-text{ background:var(--hero-grad); background-size:200% 200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:gradText 6s ease infinite }
.bfr .hero-content .lede{ margin:var(--space-5) auto 0; max-width:620px; font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--hero-fg-muted); line-height:1.6 }
.bfr .hero-content .lede .hero-payoff{ display:inline-block; margin-top:10px; color:var(--hero-fg); font-weight:600 }
.bfr .hero-content .pillars{ max-width:1080px; margin-inline:auto }
.bfr .hero-content .hero-cta{ display:flex; gap:12px 18px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:clamp(30px,4vw,44px) }

/* ============================================================================
   OUTCOMES STRIP — the animated M1→M12 dashboard as its own band under the hero
   ========================================================================== */
.bfr .outcomes-strip{ position:relative; z-index:4; padding:0 0 clamp(48px,7vw,80px); margin-top:clamp(-72px,-6vw,-40px) }
.bfr .outcomes-inner{ max-width:920px; margin:0 auto; padding-inline:var(--gutter) }

/* ============================================================================
   PATHS — three product cards (the translucent dark rounded service blocks).
   Per-card brand accent (emerald / blue / violet) via tokens; surfaces shared.
   ========================================================================== */
.bfr .paths{ position:relative; z-index:2; padding:0 0 clamp(84px,10vw,120px) }
.bfr .paths-grid{ max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,28px); align-items:stretch }
.bfr .path-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  background:var(--path-card-bg); border:1px solid var(--path-card-border); border-radius:var(--radius-xl);
  padding:clamp(28px,3vw,40px) clamp(24px,2.6vw,32px) clamp(26px,3vw,36px);
  color:inherit; text-decoration:none;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:transform var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease);
}
.bfr .path-card::before{ content:''; position:absolute; inset:0; z-index:0; border-radius:inherit; opacity:0; transition:opacity var(--dur-slow) var(--ease); pointer-events:none; background:linear-gradient(135deg, var(--pc-soft), transparent 62%) }
.bfr .path-card:hover{ transform:translateY(-8px); border-color:var(--pc-border); box-shadow:0 26px 70px rgb(var(--ch-navy) / .5), 0 0 0 1px var(--pc-border), 0 0 42px var(--pc-glow) }
.bfr .path-card:hover::before{ opacity:1 }
.bfr .path-card .glass-shine{ position:absolute; inset:-50%; width:200%; height:200%; z-index:0; pointer-events:none; opacity:0; transition:opacity var(--dur) var(--ease); background:radial-gradient(circle at 50% 0%, rgb(var(--ch-white) / .06), transparent 55%) }
.bfr .path-card:hover .glass-shine{ opacity:1 }
.bfr .path-card > *:not(.glass-shine):not(.path-card-overlay){ position:relative; z-index:1 }
.bfr .path-card.benefits{ --pc-accent:var(--path-benefits-accent); --pc-soft:var(--path-benefits-soft); --pc-border:var(--path-benefits-border); --pc-glow:var(--path-benefits-glow) }
.bfr .path-card.saas{ --pc-accent:var(--path-saas-accent); --pc-soft:var(--path-saas-soft); --pc-border:var(--path-saas-border); --pc-glow:var(--path-saas-glow) }
.bfr .path-card.broker{ --pc-accent:var(--path-broker-accent); --pc-soft:var(--path-broker-soft); --pc-border:var(--path-broker-border); --pc-glow:var(--path-broker-glow) }
.bfr .path-icon{ width:60px; height:60px; border-radius:var(--radius); display:grid; place-items:center; margin-bottom:var(--space-6); background:var(--pc-soft); color:var(--pc-accent) }
.bfr .path-icon svg{ width:28px; height:28px }
.bfr .path-title{ font-family:var(--font-heading); font-size:var(--fs-2xl); font-weight:800; letter-spacing:-.02em; margin-bottom:var(--space-3); color:var(--text) }
.bfr .path-desc{ font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7; margin-bottom:var(--space-5) }
.bfr .path-value-tile{ margin:0 0 var(--space-3); padding:14px 16px; border-radius:var(--radius-sm); font-size:var(--fs-sm); line-height:1.55; color:var(--text); background:var(--pc-soft); border:1px solid var(--pc-border); font-weight:500 }
.bfr .path-value-tile strong{ font-weight:700; color:var(--pc-accent) }
.bfr .path-proof-line{ margin:0 0 var(--space-5); font-size:var(--fs-xs); line-height:1.55; color:var(--text-subtle) }
.bfr .path-proof-line strong{ color:var(--text); font-weight:700 }
.bfr .path-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:var(--fs-sm); color:var(--pc-accent); margin-top:auto }
.bfr .path-link-block{ align-self:flex-start }
.bfr .path-arrow{ transition:transform var(--dur-fast) var(--ease) }
.bfr .path-card:hover .path-arrow{ transform:translateX(6px) }
/* 16-tool grid inside the SaaS card */
.bfr .path-tools-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:0 0 var(--space-4) }
.bfr .ptg-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; min-height:48px; border-radius:var(--radius-sm); background:var(--path-tile-bg); border:1px solid var(--path-tile-border); font-size:9.5px; line-height:1.1; color:var(--text-muted); text-align:center; font-weight:600; letter-spacing:.005em }
.bfr .ptg-tile svg{ width:14px; height:14px; color:var(--pc-accent); flex-shrink:0 }
.bfr .ptg-tile span{ display:block }
/* Industry selector inside the broker card (block-link overlay pattern) */
.bfr .path-card-overlay{ position:absolute; inset:0; z-index:1; display:block }
.bfr .pillar-ip{ position:relative; z-index:2; margin:0 0 var(--space-5) }
.bfr .pillar-ip-head{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-subtle); margin-bottom:8px }
.bfr .pillar-ip-select{
  width:100%; padding:10px 40px 10px 12px; font-size:var(--fs-sm); font-family:inherit;
  color:var(--text); background-color:var(--path-tile-bg); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); font-weight:600; cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.bfr .pillar-ip-select:focus{ outline:none; border-color:var(--pc-accent); box-shadow:0 0 0 3px var(--pc-soft) }
.bfr .pillar-ip-select option{ color:#0a1628; background:#fff }
.bfr .pillar-ip-result{ margin-top:10px; padding:10px 12px; background:var(--path-tile-bg); border-radius:var(--radius-sm); border-left:3px solid var(--border-strong); display:none }
.bfr .pillar-ip-result.show{ display:block; animation:pillar-ip-fade .25s ease-out }
@keyframes pillar-ip-fade{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.bfr .pillar-ip-tier{ display:flex; align-items:center; gap:7px; font-family:var(--font-heading); font-size:var(--fs-sm); font-weight:800; color:var(--text); margin-bottom:6px }
.bfr .pillar-ip-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--text-subtle) }
.bfr .pillar-ip-row{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:3px 0; font-size:var(--fs-xs) }
.bfr .pillar-ip-row span{ color:var(--text-muted) }
.bfr .pillar-ip-row strong{ color:var(--text); font-weight:700 }

/* Badge / pill */
.bfr .badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:var(--radius-pill);
  background:var(--badge-bg); border:1px solid var(--badge-border); color:var(--badge-fg);
  font-family:var(--font-heading); font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em;
}
.bfr .badge svg{ width:14px; height:14px }

/* ----------------------- PILLAR GRID (3 up, inside the dark hero) --------- */
.bfr .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-top:clamp(44px,6vw,64px) }
.bfr .pillar{
  position:relative; display:flex; flex-direction:column; gap:var(--space-3);
  text-align:left; padding:var(--space-8);
  /* darker frosted fill than the bare glass token: gives the white card copy a
     guaranteed dark backing over the video so titles clear 5:1 with margin (was ~5.0
     on the bright video patches), in both themes. */
  background:rgb(10 22 40 / .34); border:1px solid var(--hero-surface-border); border-radius:var(--card-radius);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bfr a.pillar:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--card-glow-hover); background:var(--hero-surface) }
.bfr .pillar .p-icon{ width:48px; height:48px; border-radius:var(--radius-sm); display:grid; place-items:center; background:rgb(var(--ch-emerald) / .14); color:var(--hero-accent) }
.bfr .pillar .p-icon svg{ width:24px; height:24px }
.bfr .pillar h3{ font-size:var(--fs-xl); font-weight:800; color:var(--hero-fg) }
.bfr .pillar p{ color:var(--hero-fg-muted); font-size:var(--fs-sm) }
.bfr .pillar .p-stat{ margin-top:auto; padding-top:var(--space-4); border-top:1px solid var(--hero-surface-border); color:var(--hero-fg-subtle); font-size:var(--fs-xs); font-weight:600 }
.bfr .pillar .p-link{ color:var(--hero-accent); font-weight:700; font-size:var(--fs-sm); display:inline-flex; gap:6px; align-items:center }
/* LIGHT theme: airy hero → light frosted cards (dark copy sits on white, not navy). */
:root[data-theme="light"] .bfr .pillar{ background:rgb(255 255 255 / .74); border-color:rgb(10 22 40 / .1); box-shadow:0 10px 26px rgb(10 22 40 / .07) }
:root[data-theme="light"] .bfr a.pillar:hover{ background:rgb(255 255 255 / .9) }

@keyframes gradText{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }

/* Subtle pulse on the primary highlight CTAs */
.bfr .btn--glow{ animation:ctaPulse 3.4s ease-in-out infinite }
@keyframes ctaPulse{ 0%,100%{ box-shadow:0 8px 24px rgb(var(--ch-emerald) / .18) } 50%{ box-shadow:0 10px 34px var(--cta-glow) } }

/* ----------------------- HERO METRICS CHART PANEL ------------------------ */
.bfr .hd{
  position:relative; background:var(--hd-panel-bg); border:1px solid var(--hd-panel-border);
  border-radius:var(--radius-lg); padding:20px 20px 16px; overflow:hidden; color:var(--hd-panel-fg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:var(--shadow-lg);
}
.bfr .hd::before{ content:''; position:absolute; top:-30%; right:-15%; width:55%; height:140%; background:var(--hd-panel-glow); pointer-events:none }
.bfr .hd-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; position:relative; z-index:1; font-family:var(--font-heading) }
.bfr .hd-title{ font-size:var(--fs-xs); font-weight:700; color:var(--hd-panel-fg); letter-spacing:.02em; display:inline-flex; align-items:center }
.bfr .hd-dot{ width:6px; height:6px; border-radius:50%; background:var(--hd-livedot); margin-right:7px; animation:hd-livedot 1.6s ease-in-out infinite; box-shadow:0 0 6px var(--hd-livedot) }
@keyframes hd-livedot{ 0%,100%{ opacity:.6 } 50%{ opacity:1 } }
.bfr .hd-period{ font-size:10px; font-weight:600; color:var(--hd-panel-fg-muted); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap }
.bfr .hd-row{ display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:center; padding:11px 0; border-top:1px solid var(--hd-panel-border); position:relative; z-index:1 }
.bfr .hd-row:first-of-type{ border-top:none; padding-top:6px }
.bfr .hd-meta{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.bfr .hd-meta .label{ font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--hd-panel-fg-muted) }
.bfr .hd-meta .value{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap }
.bfr .hd-num{ font-size:24px; font-weight:800; letter-spacing:-.5px; color:var(--hd-panel-fg); font-variant-numeric:tabular-nums; min-width:88px }
.bfr .hd-chip{ font-size:10px; font-weight:700; padding:1px 7px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:3px; white-space:nowrap }
.bfr .hd-chip svg{ width:8px; height:8px; flex-shrink:0 }
.bfr .hd-graph{ position:relative; height:46px }
.bfr .hd-graph svg{ width:100%; height:100%; display:block; overflow:visible }
/* faint horizontal gridlines (token stroke, non-scaling so they stay hairline) */
.bfr .hd-graph .hd-grid{ stroke:var(--hd-gridline); stroke-width:1; vector-effect:non-scaling-stroke }
.bfr .hd-graph .line{ fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; will-change:stroke-dashoffset }
/* soft gradient area fill follows the curve, fades to transparent at the bottom
   (gradient defined per-row in the SVG using currentColor => token-driven). */
.bfr .hd-graph .area{ stroke:none }
.bfr .hd-graph .a-top{ stop-opacity:var(--chart-area-opacity) }
/* static node dot at each month point */
.bfr .hd-graph .hd-pt{ fill:currentColor; r:2.4; opacity:.9 }
/* animated LEADING dot that traces the line (JS-driven; hidden until it runs) */
.bfr .hd-graph .dot{ r:3.6; fill:currentColor; filter:drop-shadow(0 0 5px currentColor); opacity:0; will-change:transform }
.bfr .hd-cash{ color:var(--chart-cash) }
.bfr .hd-cash .hd-chip{ color:var(--chip-good-fg); background:var(--chip-good-bg); border:1px solid var(--chip-good-border) }
.bfr .hd-turnover{ color:var(--chart-turnover) }
.bfr .hd-turnover .hd-chip{ color:var(--chip-good-fg); background:var(--chip-good-bg); border:1px solid var(--chip-good-border) }
.bfr .hd-clients{ color:var(--chart-clients) }
.bfr .hd-clients .hd-chip{ color:var(--chip-info-fg); background:var(--chip-info-bg); border:1px solid var(--chip-info-border) }
/* Axis ticks positioned to sit DIRECTLY under the plotted month points. The plot
   maps month m -> x = (m-1)/11 (0..1). Ticks carry that same fraction as inline
   left:%, so M1/M3/M6/M9/M12 align exactly with the series points above. The
   left offset (166px) equals the meta column (150px) + row gap (16px). */
.bfr .hd-axis{ position:relative; height:12px; margin:9px 0 2px 166px; font-size:9px; font-weight:600; color:var(--hd-panel-fg-muted); letter-spacing:.06em; z-index:1 }
/* every tick CENTERED on its month point; edge labels stay inside the panel's
   20px padding gutter so nothing clips, while their centres align with the points. */
.bfr .hd-axis span{ position:absolute; top:0; white-space:nowrap; transform:translateX(-50%) }

/* The line-draw, leading-dot trace and count-up are all driven together in JS
   (index.html) so the numbers LAND exactly as each line completes. No CSS
   keyframes here — the base render shows the full static line/area/points, and
   JS enhances with the reveal-triggered draw. */

/* ----------------------- TRUST / STATS BAR ------------------------------- */
.bfr .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); text-align:center }
.bfr .stat .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4vw,2.75rem); background:var(--grad-brand-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
.bfr .stat .lbl{ margin-top:6px; color:var(--text-muted); font-size:var(--fs-sm) }

.bfr .trust-logos{ display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center; align-items:center; margin-top:var(--space-6) }
.bfr .trust-logos .chip{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--text-muted); font-size:var(--fs-sm); font-weight:600;
  padding:8px 14px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface);
}
.bfr .trust-logos .chip svg{ width:16px; height:16px; color:var(--accent) }

/* ----------------------- VALUE / WHY CARDS ------------------------------- */
.bfr .cards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5) }
.bfr .cards-grid--3{ grid-template-columns:repeat(3,1fr) }
.bfr .vcard{
  padding:var(--space-6); background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--card-radius); transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bfr .vcard{ position:relative }
.bfr .vcard:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--card-glow-hover); background:var(--card-bg-hover) }
.bfr .vcard .v-icon{ width:46px; height:46px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); margin-bottom:var(--space-4) }
.bfr .vcard .v-icon svg{ width:22px; height:22px }
.bfr .vcard h3{ font-size:var(--fs-lg); font-weight:700; margin-bottom:6px }
.bfr .vcard p{ color:var(--text-muted); font-size:var(--fs-sm) }

/* ---- Card TREATMENT variants (Task 3: adjacent bands must not look identical) --
   OUTLINE = airy, transparent, clear border (Why band).
   FEATURE = elevated solid surface + resting shadow + filled gradient icon tile
             (Solutions band). The two treatments sit on alternating tones so no
             two neighbouring sections read the same. */
.bfr .cards-grid--outline .vcard{ background:transparent; border-color:var(--border-strong) }

.bfr .cards-grid--feature .vcard{
  background:var(--card-feature-bg); border-color:var(--card-feature-border);
  box-shadow:var(--card-feature-shadow); padding:var(--space-8); overflow:hidden;
}
.bfr .cards-grid--feature .vcard::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--card-feature-sheen); pointer-events:none;
}
.bfr .cards-grid--feature .vcard > *{ position:relative; z-index:1 }
.bfr .cards-grid--feature .v-icon{
  width:52px; height:52px; background:var(--icon-tile-grad); color:var(--icon-tile-grad-fg);
  box-shadow:0 8px 20px rgb(var(--ch-emerald) / .28);
}
.bfr .cards-grid--feature .v-icon svg{ width:24px; height:24px }
.bfr .cards-grid--feature .vcard h3{ font-size:var(--fs-xl) }
.bfr .cards-grid--feature .vcard p{ font-size:var(--fs-base) }

/* ----------------------- SEVEN FUNDING PATHS ----------------------------- */
.bfr .funding-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5) }
.bfr .funding-card{
  position:relative; display:flex; flex-direction:column; gap:var(--space-2);
  padding:var(--space-6); background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bfr .funding-card:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--card-glow-hover); background:var(--card-bg-hover) }
.bfr .funding-card .f-tag{
  display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:var(--space-2);
  border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent);
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-sm); letter-spacing:0;
}
.bfr .funding-card .f-icon{ width:34px; height:34px; margin-bottom:var(--space-2); display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent) }
.bfr .funding-card .f-icon svg{ width:20px; height:20px }
.bfr .funding-card h3{ font-size:var(--fs-lg); font-weight:700; display:flex; align-items:center; gap:8px }
.bfr .funding-card p{ color:var(--text-muted); font-size:var(--fs-sm) }
.bfr .funding-card .f-fit{
  margin-top:auto; padding-top:var(--space-3); border-top:1px solid var(--border);
  color:var(--text-subtle); font-size:var(--fs-xs); font-weight:600;
}
/* the "compare all seven" card reads as the primary next action */
.bfr .funding-card--compare{ background:var(--grad-cta); border-color:var(--accent-border) }
.bfr .funding-card--compare:hover{ background:var(--grad-cta) }
.bfr .funding-card--compare h3{ color:var(--accent) }

/* ----------------------------- FREE TOOLS -------------------------------- */
.bfr .tools-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5) }
.bfr .tool-card{
  position:relative; display:flex; flex-direction:column; gap:var(--space-2);
  padding:var(--space-6); background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bfr .tool-card:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--card-glow-hover); background:var(--card-bg-hover) }
.bfr .tool-card .tool-icon{ width:44px; height:44px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); margin-bottom:var(--space-2) }
.bfr .tool-card .tool-icon svg{ width:22px; height:22px }
.bfr .tool-card .tool-meta{ display:flex; flex-wrap:wrap; gap:6px }
.bfr .tool-card .tool-tag{
  font-family:var(--font-heading); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-subtle); background:var(--surface-2); border:1px solid var(--border);
  padding:3px 9px; border-radius:var(--radius-pill);
}
.bfr .tool-card h3{ font-size:var(--fs-lg); font-weight:700; margin-top:2px }
.bfr .tool-card p{ color:var(--text-muted); font-size:var(--fs-sm) }
.bfr .tools-cta{ text-align:center; margin-top:clamp(28px,4vw,40px) }

/* ----------------------- HOW IT WORKS (steps) ---------------------------- */
/* Reads as a numbered PATH: a connecting line threads the three numbered nodes.
   The number rings punch through the line with a matching-bg ring so the line
   appears to connect node-to-node. */
.bfr .steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8) var(--space-6); counter-reset:step }
.bfr .steps::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:22px; left:16.66%; right:16.66%; height:2px; background:var(--step-line);
}
.bfr .step{ position:relative; z-index:1; text-align:center; padding:0 var(--space-4) }
.bfr .step .s-num{
  width:46px; height:46px; border-radius:var(--radius-pill); display:grid; place-items:center;
  background:var(--primary); color:var(--primary-fg); font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg);
  margin:0 auto var(--space-5); box-shadow:0 0 0 8px var(--step-num-ring), var(--shadow-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bfr .step:hover .s-num{ transform:translateY(-3px) scale(1.05); box-shadow:0 0 0 8px var(--step-num-ring), 0 10px 24px rgb(var(--ch-emerald) / .3) }
.bfr .step h3{ font-size:var(--fs-lg); font-weight:700; margin-bottom:6px }
.bfr .step p{ color:var(--text-muted); font-size:var(--fs-sm); max-width:34ch; margin-inline:auto }

/* ------------------------------ FAQ -------------------------------------- */
.bfr .faq{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:var(--space-3) }
.bfr .faq details{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius);
  overflow:hidden; transition:border-color var(--dur) var(--ease);
}
.bfr .faq details[open]{ border-color:var(--accent-border) }
.bfr .faq summary{
  list-style:none; cursor:pointer; padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-heading); font-weight:700; font-size:var(--fs-base); color:var(--text);
}
.bfr .faq summary::-webkit-details-marker{ display:none }
.bfr .faq summary .chev{ flex-shrink:0; width:12px; height:12px; border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted); transform:rotate(45deg); transition:transform var(--dur-fast) var(--ease) }
.bfr .faq details[open] summary .chev{ transform:rotate(-135deg) }
.bfr .faq .faq-body{ padding:0 22px 20px; color:var(--text-muted); font-size:var(--fs-sm) }

/* ------------------------------ GOOGLE REVIEWS --------------------------- */
/* Aggregate header (big 5.0 + gold stars + "from 47 Google reviews") on the left,
   a "See all on Google" pill on the right. Sits inside the shared 1360 .container
   like every other band, so its edges line up with the sibling sections. */
.bfr .reviews-agg{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 28px; margin-bottom:clamp(32px,5vw,44px);
}
.bfr .rev-agg-l{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.bfr .rev-score{
  font-family:var(--font-display); font-size:clamp(2.6rem,5vw,3.4rem); line-height:1;
  font-weight:800; letter-spacing:-.02em; color:var(--rev-score-fg);
}
.bfr .rev-stars{ display:inline-flex; gap:3px }
.bfr .rev-stars .rev-star{ width:24px; height:24px }
.bfr .rev-count{ color:var(--text-muted); font-size:var(--fs-base) }
.bfr .rev-count strong{ color:var(--text); font-weight:700 }
.bfr .rev-seeall{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-heading); font-size:var(--fs-sm); font-weight:700;
  color:var(--rev-seeall-fg); background:var(--rev-seeall-bg);
  border:1px solid var(--rev-seeall-border); padding:11px 18px; border-radius:var(--radius-pill);
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.bfr .rev-seeall:hover{ background:var(--rev-seeall-bg-hover); transform:translateY(-1px) }
.bfr .rev-seeall .rev-g{ width:18px; height:18px; flex:0 0 auto }
.bfr .rev-seeall .arrow{ transition:transform var(--dur-fast) var(--ease) }
.bfr .rev-seeall:hover .arrow{ transform:translateX(3px) }

.bfr .rev-star-fill{ fill:var(--star-fill) }
.bfr .rev-star-empty{ fill:var(--star-empty) }

.bfr .reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5) }
.bfr .review-card{
  display:flex; flex-direction:column; gap:var(--space-4);
  padding:var(--space-6); background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--card-radius); box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bfr .review-card:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--card-glow-hover); background:var(--card-bg-hover) }
.bfr .rev-top{ display:flex; align-items:center; gap:13px }
.bfr .rev-avatar{
  width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; color:var(--rev-avatar-fg);
  font-family:var(--font-heading); font-weight:700; font-size:var(--fs-base);
  background:var(--rev-avatar-1);
}
.bfr .review-card:nth-child(3n+2) .rev-avatar{ background:var(--rev-avatar-2) }
.bfr .review-card:nth-child(3n+3) .rev-avatar{ background:var(--rev-avatar-3) }
.bfr .rev-meta{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.bfr .rev-name{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-base); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bfr .rev-sub{ display:flex; align-items:center; gap:8px }
.bfr .rev-cardstars{ display:inline-flex; gap:2px }
.bfr .rev-cardstars .rev-star{ width:14px; height:14px }
.bfr .rev-time{ color:var(--text-subtle); font-size:var(--fs-xs) }
.bfr .rev-body{ color:var(--text-muted); font-size:var(--fs-sm); line-height:1.62 }
.bfr .rev-gmark{ display:inline-flex; align-items:center; gap:7px; margin-top:auto; color:var(--text-subtle); font-size:var(--fs-xs); font-weight:600 }
.bfr .rev-gmark .rev-g{ width:15px; height:15px; flex:0 0 auto }

/* ------------------------------ CTA BAND --------------------------------- */
.bfr .cta-band{ position:relative; text-align:center; border-radius:var(--radius-xl); padding:clamp(48px,7vw,72px) var(--gutter); background:var(--grad-cta); border:1px solid var(--accent-border); overflow:hidden }
.bfr .cta-band h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.75rem,4vw,2.5rem); letter-spacing:-.02em }
.bfr .cta-band p{ margin:var(--space-4) auto 0; max-width:560px; color:var(--text-muted); font-size:var(--fs-lg) }
/* CTA band is centered (text-align:center), so its buttons must center too — the base
   .hero-cta is justify-content:flex-start (for the left-aligned hero), which left-aligned
   these buttons under the centered heading. Center them here. */
.bfr .cta-band .hero-cta{ margin-top:var(--space-8); justify-content:center }

/* ------------------------------ FOOTER ----------------------------------- */
.bfr .site-footer{ border-top:1px solid var(--border); background:var(--bg-2); padding:clamp(48px,7vw,72px) 0 32px }
.bfr .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-8) }
.bfr .footer-brand img{ height:30px; width:auto; margin-bottom:var(--space-4) }
.bfr .footer-brand p{ color:var(--text-muted); font-size:var(--fs-sm); max-width:300px }
.bfr .footer-social{ display:flex; gap:10px; margin-top:var(--space-5) }
.bfr .footer-social a{ width:36px; height:36px; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease) }
.bfr .footer-social a:hover{ background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent); transform:translateY(-1px) }
.bfr .footer-social svg{ width:18px; height:18px }
.bfr .footer-col h4{ font-family:var(--font-heading); font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text); margin-bottom:var(--space-4) }
.bfr .footer-col a{ display:block; padding:5px 0; color:var(--text-muted); font-size:var(--fs-sm); transition:color var(--dur-fast) var(--ease) }
.bfr .footer-col a:hover{ color:var(--accent) }
.bfr .footer-trust{ display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:center; margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid var(--border); color:var(--text-muted); font-size:var(--fs-xs) }
.bfr .footer-trust .ti{ display:inline-flex; align-items:center; gap:7px }
.bfr .footer-trust .ti svg{ width:15px; height:15px; color:var(--accent) }
.bfr .footer-trust .ti a{ color:inherit }
.bfr .footer-bottom{ max-width:var(--container); margin:var(--space-6) auto 0; padding:var(--space-5) var(--gutter) 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--text-subtle); font-size:var(--fs-xs) }

/* ------------------------- SCROLL REVEAL --------------------------------- */
/* Progressive enhancement: only HIDE for reveal when JS is active (html.js).
   With JS off, content stays fully visible — never a blank page. */
:root.js .bfr .reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease) }
:root.js .bfr .reveal.in{ opacity:1; transform:none }

/* STAGGERED reveal: the container stays visible and its children rise in
   SEQUENCE with incremental easing delays (still IO-triggered via .reveal). */
:root.js .bfr .reveal--stagger{ opacity:1; transform:none }
:root.js .bfr .reveal--stagger > *{ opacity:0; transform:translateY(22px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease) }
:root.js .bfr .reveal--stagger.in > *{ opacity:1; transform:none }
:root.js .bfr .reveal--stagger.in > *:nth-child(1){ transition-delay:.04s }
:root.js .bfr .reveal--stagger.in > *:nth-child(2){ transition-delay:.12s }
:root.js .bfr .reveal--stagger.in > *:nth-child(3){ transition-delay:.20s }
:root.js .bfr .reveal--stagger.in > *:nth-child(4){ transition-delay:.28s }
:root.js .bfr .reveal--stagger.in > *:nth-child(5){ transition-delay:.36s }
:root.js .bfr .reveal--stagger.in > *:nth-child(6){ transition-delay:.44s }
:root.js .bfr .reveal--stagger.in > *:nth-child(7){ transition-delay:.52s }
/* The stagger end-state pins children to transform:none (0,4,0) which would
   otherwise out-specify the card hover LIFT (.vcard:hover = 0,3,0) and kill it —
   the shadow/border still change but the card wouldn't rise. Restore the lift for
   interactive cards that live inside a staggered grid, with higher specificity. */
:root.js .bfr .reveal--stagger.in > .vcard:hover,
:root.js .bfr .reveal--stagger.in > a.pillar:hover{ transform:translateY(-6px) }

/* --------------------- HERO ENTRANCE (on load) --------------------------- */
/* Above-the-fold copy rises in once on first paint (not scroll-triggered). Only
   gated by :root.js so no-JS shows everything; `both` fill keeps the end state.
   Under reduced-motion the animation is killed (base.css) → elements show their
   natural, fully-visible state. The pillars use the existing scroll-reveal stagger. */
@keyframes heroRise{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
:root.js .bfr .hero-content .badge{ animation:heroRise .7s var(--ease) .02s both }
:root.js .bfr .hero-content > h1{ animation:heroRise .7s var(--ease) .10s both }
:root.js .bfr .hero-content > .lede{ animation:heroRise .7s var(--ease) .18s both }
:root.js .bfr .hero-content > .hero-cta{ animation:heroRise .7s var(--ease) .30s both }

/* ------------------- REDUCED MOTION — freeze to FINAL state --------------- */
/* base.css already kills all animation/transition under reduce; here we pin
   every animated element to its END state so nothing moves AND nothing is left
   mid-flight: reveals shown, chart line fully drawn, dots at the axis end. */
@media (prefers-reduced-motion:reduce){
  :root.js .bfr .reveal{ opacity:1; transform:none }
  :root.js .bfr .reveal--stagger > *{ opacity:1!important; transform:none!important; transition:none!important }
  :root.js .bfr .hero-content .badge,
  :root.js .bfr .hero-content > h1,
  :root.js .bfr .hero-content > .lede,
  :root.js .bfr .hero-content > .hero-cta{ animation:none!important; opacity:1!important; transform:none!important }
  /* chart frozen to FINAL state: line fully drawn, no dash offset, node points
     shown; the JS also pins the leading dot to the last point under reduce. */
  .bfr .hd-graph .line{ stroke-dasharray:none!important; stroke-dashoffset:0!important }
  .bfr .hero .grad-text,.bfr .grad-text{ background-position:0% 50% }
}

/* ------------------------- RESPONSIVE ------------------------------------ */
@media (max-width:1279.98px){
  .bfr .funding-grid,.bfr .tools-grid{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:1023.98px){
  .bfr .cards-grid{ grid-template-columns:repeat(2,1fr) }
  .bfr .funding-grid,.bfr .tools-grid,.bfr .reviews-grid{ grid-template-columns:repeat(2,1fr) }
  /* hero collapses to one centered column; chart stacks below the copy */
  .bfr .hero-inner{ grid-template-columns:1fr; gap:36px; text-align:center }
  .bfr .hero-copy{ text-align:center }
  .bfr .hero .badge{ margin-inline:auto }
  .bfr .hero .lede{ margin-inline:auto }
  .bfr .hero-cta{ justify-content:center }
  .bfr .hero-visual{ max-width:560px; margin-inline:auto }
}
@media (max-width:767.98px){
  .bfr .pillars{ grid-template-columns:1fr }
  .bfr .stats{ grid-template-columns:repeat(2,1fr); gap:var(--space-8) }
  .bfr .cards-grid,.bfr .cards-grid--3,.bfr .steps{ grid-template-columns:1fr }
  .bfr .funding-grid,.bfr .tools-grid,.bfr .reviews-grid{ grid-template-columns:1fr }
  /* Stacked footer: one tidy CENTERED column below md — brand block, then each link
     group (white heading + centered links) stacked and centered. Cleaner and more
     intentional than a lopsided 2-col grid that orphans the 3rd group on its own row. */
  .bfr .footer-grid{ grid-template-columns:1fr; gap:var(--space-8); text-align:center }
  .bfr .footer-brand{ grid-column:1 / -1 }
  .bfr .footer-brand img{ margin-inline:auto }
  .bfr .footer-brand p{ margin-inline:auto }
  .bfr .footer-social{ justify-content:center }
  .bfr .footer-bottom{ justify-content:center; text-align:center }
  /* Each link group runs INLINE (not one-per-line) so it fills the horizontal space
     and stays short: white heading on its own row, then the links flow centered and
     wrap, divided by a thin "|" separator. */
  .bfr .footer-col{ display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; row-gap:6px }
  .bfr .footer-col h4{ flex:0 0 100%; margin-bottom:var(--space-3) }
  .bfr .footer-col a{ display:inline; padding:0 }
  .bfr .footer-col a:not(:last-of-type)::after{ content:"|"; margin:0 10px; color:var(--text-subtle); pointer-events:none; font-weight:400 }
  /* steps become a VERTICAL stepper: number on the left, connector down the left */
  .bfr .steps{ gap:var(--space-6) }
  .bfr .steps::before{ top:23px; bottom:23px; left:23px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, transparent, var(--accent-border) 8%, var(--accent-border) 92%, transparent) }
  .bfr .step{ text-align:left; padding:0 0 0 66px; min-height:46px }
  .bfr .step .s-num{ position:absolute; left:0; top:0; margin:0 }
  .bfr .step h3{ margin-top:4px }
  .bfr .step p{ margin-inline:0; max-width:none }
}
@media (max-width:600px){
  /* long CTA labels can't fit as nowrap buttons at phone widths — stack them
     full-width and let the text wrap, so nothing forces the hero past the gutter */
  .bfr .hero-cta{ flex-direction:column; align-items:stretch }
  .bfr .hero-cta .btn{ width:100%; white-space:normal }
  .bfr .hd{ padding:16px 16px 12px }
  .bfr .hd-row{ grid-template-columns:118px 1fr; gap:10px; padding:9px 0 }
  .bfr .hd-num{ font-size:20px; min-width:72px }
  .bfr .hd-graph{ height:40px }
  .bfr .hd-axis{ margin-left:128px; font-size:8px }
  .bfr .hd-title{ font-size:11px }
}
@media (max-width:479.98px){
  .bfr .stats{ grid-template-columns:1fr }
}

/* ---- PATHS responsive: dense cards stack to one column on tablet/phone ---- */
@media (max-width:1023.98px){
  .bfr .paths-grid{ grid-template-columns:1fr; max-width:560px }
}