/* ======================================================================
   WLF v80 — BPF website font structure + clean palette button
   Purpose: match the cleaner BPF public website typography scale and stop
   over-broad theme rules from putting boxes/borders around text elements.
   ====================================================================== */
:root{
  --bpf-font-ui: Barlow, Arial, sans-serif;
  --bpf-font-display: 'Barlow Condensed', Impact, sans-serif;
}

html,body{
  max-width:100%;
  overflow-x:hidden!important;
  font-size:16px!important;
  text-rendering:optimizeLegibility!important;
  -webkit-font-smoothing:antialiased!important;
}
body{
  font-family:var(--bpf-font-display)!important;
  line-height:1.5!important;
}

/* Exact BPF public-site scale for primary navigation and hero content. */
.bn{font-size:15px!important;line-height:1.1!important;letter-spacing:.04em!important;font-weight:800!important;}
.bs{font-size:9px!important;letter-spacing:.05em!important;}
.nav-links a,.navlinks a:not(.btn){font-size:14px!important;line-height:1.05!important;letter-spacing:.07em!important;font-weight:700!important;}
.tb-cta{font-size:12px!important;line-height:1.05!important;padding:8px 16px!important;border-radius:7px!important;}

.page-title,.hero-title,h1.title,.funnel-title{
  font-family:var(--bpf-font-display)!important;
  font-size:clamp(42px,7vw,88px)!important;
  line-height:.90!important;
  letter-spacing:-.035em!important;
  font-weight:900!important;
  text-transform:uppercase!important;
}
.hero-sub,.lead,.sectionLead,.section-lead,.funnel-copy,.private-hub-copy,.topic-intro-copy{
  font-size:16px!important;
  line-height:1.5!important;
  font-weight:500!important;
}
.eyebrow,.hero-eyebrow,.section-kicker,.sec-label,.kicker{
  font-size:10px!important;
  line-height:1.35!important;
  letter-spacing:.14em!important;
  font-weight:800!important;
}
.btn-or,.btn-ghost,.prog-cta,.upsell-btn,.btn,.button,a.btn,a.button,button[class*="btn"]{
  font-family:var(--bpf-font-display)!important;
  font-size:12px!important;
  line-height:1.05!important;
  font-weight:850!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
.btn-or,.btn-ghost{font-size:14px!important;padding:12px 22px!important;border-radius:9px!important;}
.prog-card-title,.tool-title,.hub-card-title,.offer-card strong,.hub-feature strong{
  font-size:15px!important;
  line-height:1.1!important;
  letter-spacing:.04em!important;
  font-weight:850!important;
}
.prog-card-desc,.tool-desc,.hub-feature span,.offer-card span,.card p,.panel p{
  font-size:12px!important;
  line-height:1.55!important;
}
.hs-val,.ti-n{font-size:22px!important;line-height:1!important;font-weight:900!important;}
.hs-lbl,.ti-l{font-size:10px!important;line-height:1.2!important;letter-spacing:.07em!important;}

/* Repair the over-broad dark-theme selectors that were styling anything with
   "hero", "section", or "card" in the class name as if it were a container. */
.hero-title,.hero-sub,.hero-eyebrow,.hero-btns,.hero-ctas,.hero-stats,.hero-stat,.hs-val,.hs-lbl,
.section-title,.section-lead,.sectionLead,.section-copy,.section-kicker,.funnel-title,.funnel-copy,
.card-title,.prog-card-title,.hub-card-title,.tool-title,.tool-desc,.price-title,.metric-label,
.page-title,.lead,.copy,.desc,.description,.fine,.fine-print{
  background:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  border-width:0!important;
  box-shadow:none!important;
  outline:0!important;
}
.hero-sub,.section-lead,.sectionLead,.funnel-copy,.tool-desc,.prog-card-desc,.card p,.panel p,li,small{
  color:#D7E6F7!important;
  -webkit-text-fill-color:#D7E6F7!important;
  opacity:1!important;
}
.page-title,.hero-title,.section-title,.funnel-title,.card-title,.prog-card-title,.tool-title,.hub-card-title,h1,h2,h3,h4,strong,b{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  opacity:1!important;
}
.page-title .hl,.hero-title .hl,.hero-title span,.page-title span,.accent,.eyebrow,.hero-eyebrow,.section-kicker,.kicker{
  color:#38BDF8!important;
  -webkit-text-fill-color:#38BDF8!important;
}

/* Keep true layout containers/panels, but do not let the whole page become one
   giant bordered box. */
body .hero{
  width:min(100%,1160px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border-radius:24px!important;
}
body .section-outer,body .page-section,body section{
  max-width:100%!important;
}

/* Fix desktop header crowding without changing the information architecture. */
@media(min-width:901px){
  .topbar-inner,.navin{width:min(100%,1280px)!important;max-width:1280px!important;}
  .nav-links,.navlinks{gap:12px!important;}
}

@media(max-width:900px){
  .nav-links a,.navlinks a:not(.btn){font-size:12px!important;}
  .page-title,.hero-title,h1.title,.funnel-title{
    font-size:clamp(36px,12vw,56px)!important;
    line-height:.92!important;
  }
  .hero-sub,.lead,.sectionLead,.section-lead,.funnel-copy{font-size:15px!important;line-height:1.55!important;}
}
@media(max-width:520px){
  .page-title,.hero-title,h1.title,.funnel-title{font-size:clamp(34px,13vw,50px)!important;}
  .btn-or,.btn-ghost,.prog-cta,.upsell-btn,.btn,.button,a.btn,a.button{font-size:12px!important;}
}

/* Clean website palette button: bottom-right icon, never clipped. */
#wlf-switch-footer.wlf-palette-docked,
.wlf-palette-docked#wlf-switch-footer{
  position:fixed!important;
  left:auto!important;
  right:max(18px,env(safe-area-inset-right,0px))!important;
  bottom:max(18px,env(safe-area-inset-bottom,0px))!important;
  top:auto!important;
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  max-width:52px!important;
  max-height:52px!important;
  padding:0!important;
  margin:0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  background:linear-gradient(145deg,#0B1B33,#061226)!important;
  border:1px solid rgba(56,189,248,.58)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08)!important;
  z-index:2147483000!important;
  cursor:pointer!important;
}
#wlf-switch-footer.wlf-palette-docked::before{
  content:'🎨';
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  font-size:21px!important;
  line-height:1!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
#wlf-switch-footer.wlf-palette-docked > *{display:none!important;}
#wlf-switch-footer.wlf-palette-docked.wlf-palette-open{
  width:min(320px,calc(100vw - 28px))!important;
  height:auto!important;
  min-height:0!important;
  max-width:min(320px,calc(100vw - 28px))!important;
  max-height:min(72vh,560px)!important;
  padding:14px!important;
  border-radius:20px!important;
  overflow:auto!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
}
#wlf-switch-footer.wlf-palette-docked.wlf-palette-open::before{
  content:'Color Palette';
  flex:1 0 100%!important;
  width:auto!important;
  height:auto!important;
  margin:0 0 2px!important;
  font-family:var(--bpf-font-display)!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}
#wlf-switch-footer.wlf-palette-docked.wlf-palette-open > *{display:inline-flex!important;}
#wlf-switch-footer.wlf-palette-docked.wlf-palette-open span:first-child,
#wlf-switch-footer.wlf-palette-docked.wlf-palette-open > span:not([style*="background"]){
  flex:1 0 100%!important;
  justify-content:center!important;
  text-align:center!important;
  color:#D7E6F7!important;
  -webkit-text-fill-color:#D7E6F7!important;
  font-size:12px!important;
  font-weight:800!important;
}
#wlf-switch-footer.wlf-palette-docked.wlf-palette-open button[data-key]{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  padding:0!important;
  border-radius:999px!important;
  flex:0 0 28px!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.12)!important;
}
#wlf-switch-panel{right:18px!important;bottom:84px!important;}
@media(max-width:620px){
  #wlf-switch-footer.wlf-palette-docked{right:14px!important;bottom:14px!important;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;}
  #wlf-switch-footer.wlf-palette-docked.wlf-palette-open{right:14px!important;bottom:14px!important;width:calc(100vw - 28px)!important;max-width:calc(100vw - 28px)!important;}
}