/* Only the mobile hero: equal visible body frame independent of PNG padding. */
.mobile-hero-frame {display:none}
@media(max-width:760px){
  .hero-stage:has(#heroPhoneWrap[data-mobile-normalized="true"]){
    height:clamp(320px,86vw,380px)!important;
    display:grid!important;place-items:center!important;
  }
  #heroPhoneWrap[data-gallery-mode="hero"][data-mobile-normalized="true"]{
    position:relative!important;
    top:52px!important;
    width:clamp(140px,40vw,170px)!important;
    height:clamp(280px,80vw,340px)!important;
    overflow:visible!important;
  }
  #heroPhoneWrap[data-gallery-mode="hero"][data-mobile-normalized="true"] #heroImage{
    position:absolute!important;opacity:0!important;pointer-events:none!important;
  }
  #heroPhoneWrap[data-mobile-normalized="true"]::before,
  #heroPhoneWrap[data-mobile-normalized="true"]::after{display:none!important}
  #heroPhoneWrap[data-mobile-normalized="true"] .mobile-hero-frame{
    display:block!important;position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;overflow:hidden!important;
    border-radius:14% / 7%!important;transform:none!important;
    pointer-events:none!important;transition:opacity 300ms ease!important;
    filter:none!important;
  }
  #heroPhoneWrap[data-mobile-normalized="true"] .mobile-hero-photo{
    position:absolute!important;max-width:none!important;max-height:none!important;
    object-fit:fill!important;transform:none!important;filter:none!important;
    padding:0!important;margin:0!important;border:0!important;
  }
  .hero-visual-column:has(#heroPhoneWrap[data-mobile-normalized="true"]) .hero-config{
    position:relative!important;z-index:5!important;margin-top:-20px!important;
  }
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  #heroPhoneWrap[data-mobile-normalized="true"]{animation:oblakoMobileFrameFloat 5.2s ease-in-out infinite!important}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  #heroPhoneWrap[data-mobile-normalized="true"]{animation:none!important;transform:none!important}
  #heroPhoneWrap[data-mobile-normalized="true"] .mobile-hero-frame{transition:none!important}
}
@keyframes oblakoMobileFrameFloat{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}