@media (max-width: 1024px){
  .level-nav{display:none;}
  .level-nav.mobile-open{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; padding:16px; background:var(--bg-1);
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
  }
  .menu-toggle{display:block;}
  .vs-stage{grid-template-columns:1fr;}
  .vs-divider{flex-direction:row; justify-content:center;}
  .grid-3{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  #app-header{padding:12px 16px; flex-wrap:wrap;}
  .brand-text h1{font-size:15px;}
  .brand-text p{display:none;}
  #app-main{padding:16px;}
  .grid-3, .grid-2{grid-template-columns:1fr;}
  .ability-header h2{font-size:18px;}
  .hero-panel{padding:24px;}
  .hero-panel h2{font-size:22px;}
}