/* BrokerOption v1.9.6 — one seamless MOBILE hero background.
   The decorative asset is the hero's actual CSS background, never an
   HTML illustration positioned below the CTA. Desktop styles unchanged. */
@media (max-width: 650px) {
  .front-stage .hero {
    box-sizing:border-box!important;
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
    background-color:#071a30!important;
    background-image:
      linear-gradient(180deg,
        rgba(4,17,33,.96) 0%,
        rgba(4,19,36,.93) 22%,
        rgba(5,21,40,.89) 41%,
        rgba(5,22,41,.77) 66%,
        rgba(5,21,39,.65) 88%,
        #071b30 100%),
      url('../img/hero-brokeroption.webp')!important;
    background-size:cover, auto 100%!important;
    background-position:center center, 69% center!important;
    background-repeat:no-repeat,no-repeat!important;
    border:0!important;
  }
  /* Reset desktop artwork layers: no second copy of the scene. */
  .front-stage .hero::before {display:none!important;content:none!important;}
  .front-stage .hero::after {
    content:''!important;
    pointer-events:none!important;
    position:absolute!important;
    inset:auto 0 0!important;
    height:32px!important;
    background:linear-gradient(to bottom,transparent,#071b30)!important;
    z-index:1!important;
  }
  .front-stage .hero-glow{display:none!important;}
  .front-stage .hero-content{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    min-height:0!important;
    height:auto!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .front-stage .hero-copy{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:540px!important;
    padding:24px 0 27px!important;
    margin:0 auto!important;
    text-align:center!important;
  }
  .front-stage .hero .eyebrow{
    display:flex!important;justify-content:center!important;align-items:center!important;
    gap:7px!important;margin:0 auto 12px!important;text-align:center!important;
  }
  .front-stage .hero h1,
  .front-stage .hero h1 em {text-align:center!important;margin-left:auto!important;margin-right:auto!important;}
  .front-stage .hero h1{
    font-size:clamp(30px,8.4vw,39px)!important;
    line-height:1.13!important;
    letter-spacing:-1.25px!important;
  }
  .front-stage .hero .hero-lead{
    max-width:440px!important;
    margin:13px auto 15px!important;
    font-size:13.5px!important;
    line-height:1.55!important;
    text-align:center!important;
  }
  .front-stage .hero-actions{
    width:100%!important;max-width:375px!important;
    margin:0 auto!important;display:flex!important;
    flex-wrap:nowrap!important;justify-content:center!important;gap:8px!important;
  }
  .front-stage .hero-actions .btn{
    flex:1 1 0!important;min-width:0!important;min-height:44px!important;
    padding:9px 11px!important;gap:7px!important;font-size:11px!important;
  }
  .front-stage .hero-small{
    max-width:410px!important;margin:12px auto 0!important;
    font-size:9px!important;line-height:1.45!important;text-align:center!important;
  }
  .front-stage .hero-evidence{display:none!important;}
  .bo-action-band{margin-top:0!important;padding-top:0!important;padding-bottom:10px!important;}
  .section-top,.section-heading,.faq-intro{text-align:center!important;}
  .section-top>div,.section-top>p{width:100%!important;max-width:none!important;}
  .section-top h2,.section-heading h2,.focus-layout h2,.learn-layout h2,.method-layout h2,.faq-intro h2{
    text-align:center!important;text-wrap:balance!important;
  }
  .bo-find-controls{justify-content:center!important;}
}
@media (max-width:370px){
  .front-stage .hero h1{font-size:30px!important;}
  .front-stage .hero-actions .btn{padding:9px 7px!important;font-size:10.5px!important;}
}