@media(max-width:760px){
 .header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand login" "nav nav";align-items:center;gap:12px 8px;padding:12px 3px 8px;width:100%;min-width:0}
 .header .brand{grid-area:brand;min-width:0;font-size:25px;gap:7px}
 .header .brand img{width:29px;height:36px;flex-shrink:0}
 .header .brand small{font-size:6px!important;letter-spacing:.5px;white-space:nowrap}
 .header .login{grid-area:login;margin:0;font-size:11px;padding:9px 11px;white-space:nowrap}
 .header .nav{grid-area:nav;order:initial;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;min-width:0;max-width:100%;flex:none;gap:0;padding:3px;overflow:visible;border-radius:12px}
 .header .nav a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:40px;padding:7px 2px;font-size:12px;line-height:1.4;white-space:nowrap}
 .header .nav a[href="#/teams"]{display:flex}
 .header .nav a[href="#/guide"]{display:none}
 .header .nav a.active{text-underline-offset:5px}
 .hero{display:block;height:auto!important;min-height:0!important;margin:5px 0 12px;padding:0 12px 12px;overflow:hidden}
 .hero>div{width:100%;max-width:none}
 .hero:after{inset:0 0 auto;height:190px;background-size:cover;background-position:60% center;mask-image:linear-gradient(to bottom,#000 85%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 85%,transparent)}
 .hero:before{inset:0 0 auto;height:190px;background:linear-gradient(90deg,#fffdf3f5 0%,#fffdf3e8 30%,#fffdf38a 49%,transparent 75%);mask-image:linear-gradient(to bottom,#000 85%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 85%,transparent)}
 .hero h1{min-height:190px;max-width:57%;padding-top:15px;font-size:24px;line-height:1.35!important;letter-spacing:-.5px}
 .hero h1 strong{display:inline-block;font-size:40px;line-height:1.25!important;white-space:nowrap;letter-spacing:-1px}
 .hero h1 em{display:block;white-space:nowrap}
 .hero h1>br{display:none}
 .hero p{max-width:none;font-size:13px!important;line-height:1.65!important;margin:7px 0 13px!important;padding:0!important}
 .hero button{font-size:14px;padding:9px 14px}
 .hero-caption{display:block;max-width:none;font-size:10px!important;line-height:1.6!important;margin-top:8px}
}
@media(max-width:360px){
 .header .brand{font-size:22px}.header .brand img{width:25px}.header .login{font-size:10px;padding:8px 9px}.header .nav a{font-size:11px}
 .hero h1{font-size:21px;max-width:60%}.hero h1 strong{font-size:35px}
}