/* v178 / v28 — approved rendering translated to real HTML/CSS.
   Mobile only. Existing desktop financing presentation remains untouched.
*/
.mobile-financing-overlay-v172{display:none;}

@media (max-width:640px){
  body.jb-financing-page main > section.hero,
  body.jb-financing-page main > section.hero.va-hero{
    position:relative!important;
    display:block!important;
    width:100%!important;
    min-height:calc(100svh - 68px)!important;
    height:calc(100svh - 68px)!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    border:0!important;
    box-sizing:border-box!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center center!important;
  }

  body.page-financing-overview main > section.hero{background-image:url('images/financing-overview-rendered-v160.webp')!important;}
  body.page-homepurchase:not(.page-va) main > section.hero{background-image:url('images/home-purchase-rendered-v160.webp')!important;}
  body.page-va main > section.hero{background-image:url('images/va-loans-rendered-v160.webp')!important;}
  body.page-jumbo main > section.hero{background-image:url('images/jumbo-loans-rendered-v160.webp')!important;}
  body.page-nonqm main > section.hero{background-image:url('images/non-qm-rendered-v160.webp')!important;}
  body.page-refinance main > section.hero{background-image:url('images/refinance-rendered-v160.webp')!important;}
  body.page-homeequity main > section.hero{background-image:url('images/home-equity-rendered-v160.webp')!important;}
  body.page-heloc main > section.hero{background-image:url('images/heloc-rendered-v160.webp')!important;}
  body.page-commercial main > section.hero{background-image:url('images/commercial-financing-rendered-v160.webp')!important;}

  /* The approved rendering is bright; keep the wash subtle instead of graying out the photo. */
  body.jb-financing-page main > section.hero::before,
  body.jb-financing-page main > section.hero.va-hero::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:rgba(255,255,255,.12)!important;
  }
  body.jb-financing-page main > section.hero::after,
  body.jb-financing-page main > section.hero.va-hero::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 64%,rgba(255,255,255,.04) 100%)!important;
  }

  /* Legacy hero content remains for desktop but never participates in the mobile layout. */
  body.jb-financing-page main > section.hero > .section-inner.hero-inner,
  body.jb-financing-page main > section.hero.va-hero > .section-inner.hero-inner,
  body.jb-financing-page .mobile-hero-render{
    display:none!important;
  }

  /* Clean mobile HTML layer modeled directly on the approved rendering. */
  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172{
    display:flex!important;
    position:absolute!important;
    isolation:isolate!important;
    z-index:5!important;
    top:112px!important;
    left:50%!important;
    right:auto!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
    width:calc(100% - 44px)!important;
    max-width:410px!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }
  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172::before{
    content:""!important;
    position:absolute!important;
    inset:-150px -88px -120px!important;
    z-index:-1!important;
    border-radius:0!important;
    background:
      radial-gradient(ellipse at 50% 32%,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.82) 24%,
        rgba(255,255,255,.62) 48%,
        rgba(255,255,255,.34) 65%,
        rgba(255,255,255,0) 82%)!important;
    -webkit-backdrop-filter:blur(16px) saturate(112%)!important;
    backdrop-filter:blur(16px) saturate(112%)!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-eyebrow-v172{
    display:block!important;
    width:100%!important;
    margin:0 0 24px!important;
    padding:0!important;
    color:#082f52!important;
    -webkit-text-fill-color:#082f52!important;
    text-shadow:none!important;
    font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif!important;
    font-size:12px!important;
    line-height:1.2!important;
    letter-spacing:.24em!important;
    font-weight:600!important;
    text-transform:uppercase!important;
    text-align:center!important;
    transform:none!important;
  }

  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172 > h1.mobile-financing-title-v172{
    display:block!important;
    position:static!important;
    width:100%!important;
    max-width:390px!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    color:#062d50!important;
    -webkit-text-fill-color:#062d50!important;
    text-shadow:none!important;
    font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif!important;
    font-size:42px!important;
    line-height:1.02!important;
    letter-spacing:-.035em!important;
    font-weight:600!important;
    text-align:center!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    transform:none!important;
  }

  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-body-v172{
    display:block!important;
    position:static!important;
    width:100%!important;
    max-width:355px!important;
    margin:28px 0 0!important;
    padding:0!important;
    color:#12395d!important;
    -webkit-text-fill-color:#12395d!important;
    text-shadow:none!important;
    font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif!important;
    font-size:18px!important;
    line-height:1.38!important;
    font-weight:500!important;
    text-align:center!important;
    transform:none!important;
  }

  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-see-v172{
    display:flex!important;
    position:static!important;
    width:100%!important;
    max-width:355px!important;
    margin:30px 0 0!important;
    padding:0!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    color:#12395d!important;
    -webkit-text-fill-color:#12395d!important;
    text-shadow:none!important;
    font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif!important;
    font-size:16px!important;
    line-height:1.35!important;
    font-weight:500!important;
    text-align:center!important;
    transform:none!important;
  }

  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-see-v172 > span{
    display:block!important;
    margin-top:16px!important;
    color:#082f52!important;
    -webkit-text-fill-color:#082f52!important;
    font-size:28px!important;
    line-height:1!important;
    font-weight:400!important;
  }
}

@media (max-width:380px){
  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172{
    top:100px!important;
    width:calc(100% - 34px)!important;
  }
  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172 > h1.mobile-financing-title-v172{
    font-size:38px!important;
  }
  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-body-v172{
    font-size:16px!important;
  }
}

/* v177 / v27 — mobile financing stability + spacing correction */
@media (max-width:980px){
  /* Neutralize malformed legacy selectors that can fix the entire BODY and make pages appear blank. */
  body.jb-financing-page{
    position:static!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
  }
}

@media (max-width:640px){
  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172{
    top:140px!important;
  }
}

@media (max-width:380px){
  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172{
    top:124px!important;
  }
}


/* v178 — VA Loans mobile hero matched to approved reference image */
@media (max-width:640px){
  body.page-va main > section.hero > div.mobile-financing-overlay-v172{
    top:108px!important;
    left:0!important;
    right:0!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    align-items:stretch!important;
    text-align:left!important;
  }
  body.page-va main > section.hero > div.mobile-financing-overlay-v172::before{
    inset:-110px 8px -90px 18px!important;
    background:
      radial-gradient(ellipse at 34% 30%,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.84) 22%,
        rgba(255,255,255,.64) 46%,
        rgba(255,255,255,.34) 66%,
        rgba(255,255,255,0) 84%)!important;
  }

  body.page-va main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-eyebrow-v172{
    width:auto!important;
    margin:0 0 22px clamp(56px,15vw,74px)!important;
    color:#082f52!important;
    -webkit-text-fill-color:#082f52!important;
    text-align:left!important;
    font-size:12px!important;
    line-height:1.2!important;
    letter-spacing:.24em!important;
    font-weight:600!important;
  }

  body.page-va main > section.hero > div.mobile-financing-overlay-v172 > h1.mobile-financing-title-v172{
    width:auto!important;
    max-width:305px!important;
    margin:0 28px 0 clamp(56px,15vw,74px)!important;
    color:#062d50!important;
    -webkit-text-fill-color:#062d50!important;
    text-align:left!important;
    font-size:40px!important;
    line-height:1.03!important;
    letter-spacing:-.035em!important;
    font-weight:600!important;
  }

  body.page-va main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-body-v172{
    width:auto!important;
    max-width:330px!important;
    margin:26px 28px 0 clamp(56px,15vw,74px)!important;
    color:#12395d!important;
    -webkit-text-fill-color:#12395d!important;
    text-align:left!important;
    font-size:18px!important;
    line-height:1.38!important;
    font-weight:500!important;
  }

  body.page-va main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-see-v172{
    width:100%!important;
    max-width:none!important;
    margin:28px 0 0!important;
    color:#12395d!important;
    -webkit-text-fill-color:#12395d!important;
    text-align:center!important;
    align-items:center!important;
    font-size:16px!important;
    line-height:1.35!important;
    font-weight:500!important;
  }

  body.page-va main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-see-v172 > span{
    margin-top:14px!important;
    color:#082f52!important;
    -webkit-text-fill-color:#082f52!important;
    font-size:28px!important;
    font-weight:400!important;
  }
}

@media (max-width:380px){
  body.page-va main > section.hero > div.mobile-financing-overlay-v172{
    top:96px!important;
  }
  body.page-va main > section.hero > div.mobile-financing-overlay-v172 > h1.mobile-financing-title-v172{
    max-width:275px!important;
    font-size:36px!important;
  }
  body.page-va main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-body-v172{
    max-width:290px!important;
    font-size:16px!important;
  }
}


@media (max-width:640px){
  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-eyebrow-v172,
  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172 > h1.mobile-financing-title-v172,
  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-body-v172,
  body.jb-financing-page main > section.hero > div.mobile-financing-overlay-v172 > div.mobile-financing-see-v172{
    text-rendering:optimizeLegibility!important;
    -webkit-font-smoothing:antialiased!important;
    -moz-osx-font-smoothing:grayscale!important;
  }
  body.page-jumbo main > section.hero > div.mobile-financing-overlay-v172{
    top:53.25%!important;
    transform:translate(-50%,-50%)!important;
  }
}
@media (max-width:380px){
  body.page-jumbo main > section.hero > div.mobile-financing-overlay-v172{
    top:51.5%!important;
  }
}