/* Ellohost mobile layout: keep moving strips inside their own viewport, not the document. */
@media(max-width:780px){
 html,body{width:100%;max-width:100%;overflow-x:clip!important}
 body{position:relative}
 .wrap{width:calc(100% - 32px);max-width:calc(100% - 32px);min-width:0}
 section,header,footer{max-width:100%;min-width:0}
 .band.b1,.band.b2,.marquee,.marquee.alt{width:100%;max-width:100%;margin-left:0!important;margin-right:0!important;transform:none!important;overflow:hidden!important;clip-path:inset(0)}
 .band .tr,.marquee .tr{width:max-content;max-width:none;will-change:transform}
 .band .tr>span,.marquee .tr>span{flex:none}
 .stats,.grid,.grid2,.grid3,.grid4{min-width:0}
 .stat{min-width:0}
 .fab{right:12px!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;max-width:min(270px,calc(100vw - 24px));gap:7px!important;padding:7px 12px 7px 7px!important;font-size:12px!important;line-height:1.3;overflow:hidden}
 .fab img{width:29px!important;height:29px;flex:none;object-fit:contain}
 footer{overflow:hidden!important}
 footer .cols{gap:26px;min-width:0}
 footer .cols>div,footer .bot,footer .bot>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
 footer .giant{font-size:clamp(54px,15vw,130px);white-space:nowrap;max-width:100%;overflow:hidden}
 footer .peek{width:62px;right:12px;bottom:100px;opacity:.85}
 nav.main{max-width:100%;top:8px}
 nav.main .in{width:calc(100% - 22px);max-width:calc(100% - 22px);gap:7px;padding:7px;min-width:0}
 nav.main .logo{min-width:0;flex-shrink:1}
 nav.main .logo img{max-width:116px}
 nav.main .act{gap:6px;flex:none}
 nav.main .act .btn{padding:9px 11px;font-size:12px;white-space:nowrap}
 nav.main .burger{width:38px;height:38px;flex:none}
 nav.main.open ul{max-width:100%;left:0;right:0;overflow-x:hidden}
 .phero .grid,.hero .grid{min-width:0}
 #fx,.cursor,.dot{display:none!important}
}
@media(max-width:390px){nav.main .logo img{max-width:98px}nav.main .act .btn{font-size:11px;padding:8px 9px}.fab{max-width:calc(100vw - 24px)}}