@media (max-width: 1180px){
  .topbar{grid-template-columns:1fr;align-items:stretch}
  .topbar-actions{justify-content:flex-start}
  .hero,.feature-inner,.two-col,.compare-grid,.card-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 980px){
  :root{--sidebar-w:min(92vw,380px);--topbar-h:72px}
  .mobile-only{display:inline-grid}
  .topbar{
    grid-template-columns:1fr;
    padding:12px 12px 10px;
  }
  .searchbar{height:44px}
  .topbar-actions{display:none}
  .main-shell{grid-template-columns:1fr;padding:12px}
  .sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    width:var(--sidebar-w);
    max-height:none;
    transform:translateX(-102%);
    transition:transform .24s ease;
    z-index:70;
    padding:12px;
    background:color-mix(in srgb, var(--surface) 96%, transparent);
    border-right:1px solid var(--line);
    box-shadow:var(--shadow);
    overflow:auto;
  }
  body.sidebar-open .sidebar{transform:translateX(0)}
  .view{gap:12px}
  .hero{padding:14px}
  .feature-inner{padding:14px}
  .banner{min-height:220px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-grid,.metrics-grid{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr}
  .bar-row{grid-template-columns:82px minmax(0,1fr) 44px}
  .bottom-nav{display:flex}
  .section-tabs{display:none}
  .sticky-head{top:12px}
  .timeline-item{grid-template-columns:74px 1fr}
}
@media (max-width: 560px){
  .brand-mark{width:44px;height:44px;border-radius:14px}
  .brand h1{font-size:18px}
  .subcopy{font-size:12px}
  .hero-copy h2{font-size:26px}
  .stats{grid-template-columns:1fr}
  .field-grid{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:1fr}
  .banner-score{min-width:50px;min-height:50px;font-size:18px}
  .thumb-topic{font-size:19px}
  .card-title{font-size:15px}
}