/* v6.3.18 — Mobile hero + footer rescue
   User QA focus:
   1) Hero text/image mismatch still visible on mobile.
      Solution: pull the text block onto the lower part of the hero visual with a dark overlay card.
   2) Footer should not collapse into one endless column on mobile.
      Solution: force a compact two-column footer grid while keeping brand/newsletter full-width.
*/

@media (max-width: 720px) {
  /* =========================
     HERO — make text and visual feel intentional together
     ========================= */
  body.bt-hybrid-pro-v620 .hp-signature-slider.shell{
    width:calc(100% - 20px)!important;
    margin:0 auto!important;
  }
  body.bt-hybrid-pro-v620 .hp-signature-slider{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
  }
  body.bt-hybrid-pro-v620 .hp-signature-viewport{
    order:1!important;
    position:relative!important;
    overflow:hidden!important;
    border-radius:24px!important;
    background:#f6efe7!important;
  }
  body.bt-hybrid-pro-v620 .hp-signature-viewport::after{
    content:""!important;
    position:absolute!important;
    inset:auto 0 0 0!important;
    height:45%!important;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.66) 100%)!important;
    pointer-events:none!important;
    z-index:1!important;
  }
  body.bt-hybrid-pro-v620 .hp-signature-track,
  body.bt-hybrid-pro-v620 .hp-signature-slide,
  body.bt-hybrid-pro-v620 .hp-signature-slide picture,
  body.bt-hybrid-pro-v620 .hp-signature-slide img{
    display:block!important;
    width:100%!important;
  }
  body.bt-hybrid-pro-v620 .hp-signature-slide.is-signature img{
    height:clamp(285px,74vw,350px)!important;
    object-fit:cover!important;
    object-position:center 100%!important;
    transform:scale(1.045)!important;
    transform-origin:center bottom!important;
    border-radius:24px!important;
  }
  body.bt-hybrid-pro-v620 .hp-slider-a11y{
    order:2!important;
    position:relative!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    margin:-116px 12px 0!important;
    padding:16px 16px 14px!important;
    overflow:visible!important;
    clip:auto!important;
    clip-path:none!important;
    white-space:normal!important;
    border-radius:18px!important;
    background:linear-gradient(180deg, rgba(12,12,12,.18) 0%, rgba(12,12,12,.86) 28%, rgba(12,12,12,.94) 100%)!important;
    backdrop-filter:blur(2px)!important;
    box-shadow:0 12px 26px rgba(0,0,0,.18)!important;
    z-index:3!important;
  }
  body.bt-hybrid-pro-v620 .hp-slider-a11y h1{
    margin:0 0 8px!important;
    font-size:clamp(28px,8.8vw,42px)!important;
    line-height:.96!important;
    letter-spacing:-.05em!important;
    color:#fff!important;
    text-wrap:balance!important;
  }
  body.bt-hybrid-pro-v620 .hp-slider-a11y p{
    margin:0!important;
    font-size:13px!important;
    line-height:1.5!important;
    color:rgba(255,255,255,.9)!important;
  }
  body.bt-hybrid-pro-v620 .hp-slider-mobile-actions{
    order:3!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-top:16px!important;
  }
  body.bt-hybrid-pro-v620 .hp-slider-mobile-actions .hp-btn{
    width:100%!important;
    min-height:54px!important;
    justify-content:center!important;
  }

  /* =========================
     FOOTER — compact 2-column mobile structure
     ========================= */
  body.bt-hybrid-pro-v620 .hp-footer-inner{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  body.bt-hybrid-pro-v620 .hp-footer-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:18px 16px!important;
    align-items:start!important;
  }
  body.bt-hybrid-pro-v620 .hp-footer-grid > *{
    min-width:0!important;
  }
  body.bt-hybrid-pro-v620 .hp-footer-grid > .hp-footer-brand,
  body.bt-hybrid-pro-v620 .hp-footer-grid > .hp-newsletter{
    grid-column:1 / -1!important;
  }
  body.bt-hybrid-pro-v620 .hp-footer-grid > div:not(.hp-footer-brand):not(.hp-newsletter){
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  body.bt-hybrid-pro-v620 .hp-footer-grid strong{
    display:block!important;
    margin-bottom:4px!important;
  }
  body.bt-hybrid-pro-v620 .hp-footer-brand p,
  body.bt-hybrid-pro-v620 .hp-newsletter p{
    margin:8px 0 0!important;
  }
  body.bt-hybrid-pro-v620 .hp-footer-grid a{
    display:block!important;
    font-size:13px!important;
    line-height:1.35!important;
  }
  body.bt-hybrid-pro-v620 .hp-newsletter form{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:center!important;
  }
  body.bt-hybrid-pro-v620 .hp-newsletter input{
    min-width:0!important;
  }
  body.bt-hybrid-pro-v620 .hp-footer-bottom{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:12px 16px!important;
    align-items:start!important;
  }
  body.bt-hybrid-pro-v620 .hp-footer-bottom > span{
    grid-column:1 / -1!important;
  }
  body.bt-hybrid-pro-v620 .hp-footer-bottom nav{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px 14px!important;
    align-content:start!important;
  }
  body.bt-hybrid-pro-v620 .hp-footer-bottom nav a{
    font-size:12px!important;
    line-height:1.3!important;
  }
  body.bt-hybrid-pro-v620 .hp-security{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    justify-content:flex-start!important;
  }
}

@media (max-width: 420px) {
  body.bt-hybrid-pro-v620 .hp-slider-a11y{
    margin:-106px 10px 0!important;
    padding:15px 14px 13px!important;
  }
  body.bt-hybrid-pro-v620 .hp-signature-slide.is-signature img{
    height:300px!important;
  }
  body.bt-hybrid-pro-v620 .hp-footer-grid,
  body.bt-hybrid-pro-v620 .hp-footer-bottom{
    gap:16px 12px!important;
  }
}