/* ==========================================================================
   96M.today — responsive.css
   Mobile-first breakpoints: 480 / 768 / 1024 / 1280
   ========================================================================== */

/* Very small phones */
@media (max-width: 359px) {
  .container { padding: 0 16px; }
  .hero-bonus-strip { flex-wrap: wrap; row-gap: 12px; }
  .nav-logo img { width: 104px; }
}

@media (max-width: 767px) {
  .rating-bars li { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .rating-bars .bar { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 479px) {
  .page-hero-actions a { flex: 1 1 100%; }
  .hero-actions a { flex: 1 1 100%; }
  .cta-band-inner .btn-primary { justify-self: stretch; }
  .hero-float { padding: 10px 12px; }
  .hero-float-winner { left: -4px; }
  .hero-float-speed { right: -4px; }
  .provider-card { flex-direction: column; }
  .step { padding: 74px 20px 20px; }
  .step::before { top: 18px; left: 20px; }
}

/* Large mobile */
@media (min-width: 480px) {
  .topbar-hide-sm { display: inline; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2.grid-keep-1 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-strip { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet */
@media (min-width: 768px) {
  :root { --section-v: 80px; }
  .container { padding: 0 32px; }
  .header-topbar .container { justify-content: space-between; }
  .topbar-right { display: flex; }
  .page-hero { padding: 44px 0 72px; }
  .hero { padding: 56px 0 80px; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .hero-stats:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .pros-cons { grid-template-columns: 1fr 1fr; }
  .rating-box { grid-template-columns: 200px 1fr; align-items: center; padding: 36px; }
  .rating-overall { border-right: 1px solid var(--border-gold); padding-right: 28px; }
  .cta-band-inner { grid-template-columns: 1fr auto; padding: 44px 48px; }
  .cta-band-inner .btn-primary { justify-self: end; white-space: nowrap; }
  .step-cards { grid-template-columns: repeat(3, 1fr); }
  .steps-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .steps-row .step { padding: 80px 22px 24px; }
  .footer-certs { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { grid-template-columns: 1fr; }
  .back-to-top { right: 24px; bottom: 24px; }
}

/* Desktop */
@media (min-width: 1024px) {
  :root { --section-v: 96px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  .nav-links { display: flex; align-items: center; gap: 0; margin: 0 auto; }
  .nav-cta-group { display: flex; gap: 10px; flex-shrink: 0; }
  .hamburger-btn { display: none; }
  .nav-logo img { width: 140px; }

  .split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; }
  .split-reverse > :first-child { order: 2; }
  .split-aside { position: sticky; top: calc(var(--header-h) + 24px); }

  .hero-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 40px; }
  .hero-visual { justify-self: end; width: 380px; }
  .phone-mockup { width: 280px; }
  .hero-float-winner { left: -40px; }
  .hero-float-speed { right: -10px; }
  .hero-actions .btn-primary, .hero-actions .btn-secondary { flex: 0 0 auto; }

  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-certs { grid-template-columns: repeat(4, auto); justify-content: space-between; }
}

/* Tablet only — split is single column, so stats can sit in one row */
@media (min-width: 768px) and (max-width: 1023px) {
  .trusted-stats { grid-template-columns: repeat(4, 1fr); }
}

/* Mid desktop — tighten nav so it fits */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-link { padding: 0 8px; font-size: 0.875rem; }
  .nav-link::after { left: 8px; right: 8px; }
  .navbar .container { gap: 12px; }
  .nav-cta-group .btn-ghost { display: none; }
}

/* Large desktop */
@media (min-width: 1280px) {
  .container { padding: 0 40px; }
  .hero { padding: 72px 0 96px; }
  .page-hero { padding: 48px 0 80px; }
}

/* Touch devices: dropdown opens via tap/JS, not hover */
@media (hover: none) {
  .card:hover { transform: none; }
}

/* Print */
@media print {
  .site-header, .site-footer, .cta-band, .back-to-top, .hero-visual, .page-hero-actions { display: none !important; }
  body { background: #fff; color: #000; }
  p, li, td { color: #000 !important; }
  .js .faq-a { max-height: none !important; }
}