/* ==========================================================================
   RESPONSIVE — consolidated breakpoint overrides
   Breakpoints: sm:640px | md:768px | lg:1024px | xl:1280px
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE FIRST — global tweaks < 640px
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  /* Hero */
  .poster-wall {
    grid-template-columns: repeat(2, 1fr);
    width: 100vw;
    left: 0;
  }

  /* Pricing grid - single col */
  #pricing-grid { display: none !important; }
  #mobile-pricing-grid { display: grid; }

  /* Testimonials - full width cards */
  .testimonial-card-mobile { width: 90vw; }

  /* How It Works step cards  */
  .step-card-inner { padding: 1.5rem; }

  /* Contact cards */
  .contact-card { padding: 1.5rem; }

  /* Final CTA headline */
  .final-cta h2 { font-size: 2rem; }

  /* Comparison table font */
  .comparison-table td,
  .comparison-table th { font-size: 0.65rem; }
}

/* --------------------------------------------------------------------------
   sm: 640px
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  /* Hero CTA row */
  .hero-ctas { flex-direction: row; }

  /* Pricing toggle - more padding */
  .package-toggle { padding: 1rem 1.5rem; }

  /* Testimonials mobile cards */
  .testimonial-card-mobile { width: 50vw; }

  /* CTA button rows go horizontal */
  .why-cta .cta-btns,
  .categories-cta .cta-btns,
  .devices-cta .cta-btns,
  .testimonials-cta .cta-btns,
  .hiw-cta .cta-btns,
  .final-cta .cta-btns,
  .reseller-hero .cta-group { flex-direction: row; }

  .why-cta .btn-white,
  .why-cta .btn-primary-cta,
  .btn-std-devices, .btn-pre-devices,
  .btn-std-testi, .btn-pre-testi,
  .btn-std-hiw, .btn-pre-hiw,
  .final-cta-btn-primary, .final-cta-btn-trial { width: auto; }

  /* Footer bottom row */
  .comparison-footer-btns { flex-direction: row; width: auto; }
  #choose-standard-btn, #choose-premium-btn { padding: 0.5rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   md: 768px
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Hero padding */
  #home { padding-top: 9rem; }

  /* Section header sizes */
  .pricing-header h2 { font-size: 2.25rem; }
  #features .section-header h2 { font-size: 3rem; }
  .channel-categories .section-header h2 { font-size: 2.25rem; }
  .device-compat .section-header h2 { font-size: 2.25rem; }
  .testimonials .section-header h2 { font-size: 3rem; }
  .how-it-works .section-header h2 { font-size: 3rem; }
  #faq .section-header h2 { font-size: 3rem; }
  #contact .section-header h2 { font-size: 3.75rem; }
  .final-cta h2 { font-size: 4.5rem; }

  /* Pricing grid - 2 col  */
  #pricing-grid { display: grid; }
  #mobile-pricing-grid { display: none; }

  /* Device tabs */
  .device-tabs-desktop { display: flex; }
  .device-tabs-mobile  { display: none; }

  /* Contact cards — 3 col */
  .contact-cards { grid-template-columns: repeat(3, 1fr); }

  /* Footer grid */
  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  /* Comparison footer */
  .comparison-footer-inner { flex-direction: row; }
  .comparison-footer p { text-align: left; }

  /* Reseller compare footer */
  .rp-compare-footer { flex-direction: row; }

  /* Steps grid */
  .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 4rem; }

  /* Feature cards */
  .features-grid { grid-template-columns: repeat(2, 1fr); }

  /* Categories grid */
  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

  /* Devices grid */
  .devices-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

  /* Reseller grid */
  #rp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   lg: 1024px
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Hero padding */
  #home { padding-top: 10rem; }

  /* Desktop nav */
  .header-nav  { display: flex; }
  .header-right { display: flex; }
  .mobile-menu-btn { display: none; }

  /* Pricing grid - 3 col */
  #pricing-grid { grid-template-columns: repeat(3, 1fr); }

  /* Testimonials grid */
  .testimonials-grid { display: grid; }
  .testimonials-slider { display: none; }

  /* Feature cards - 3 col */
  .features-grid { grid-template-columns: repeat(3, 1fr); }

  /* Categories - 3 col */
  .categories-grid { grid-template-columns: repeat(3, 1fr); }

  /* Devices - 4 col */
  .devices-grid { grid-template-columns: repeat(4, 1fr); }

  /* Footer - 2 wide col */
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Reseller grid - 4 col */
  #rp-grid { grid-template-columns: repeat(4, 1fr); }

  /* Reseller hero poster wall */
  .reseller-hero .poster-wall { grid-template-columns: repeat(8, 1fr); }
}

/* --------------------------------------------------------------------------
   xl: 1280px
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  /* Pricing grid — full 6 col */
  #pricing-grid { grid-template-columns: repeat(6, 1fr); }

  /* Devices — 6 col */
  .devices-grid { grid-template-columns: repeat(6, 1fr); }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .strip { animation: none !important; }
  .animate-slide-up { animation: none !important; opacity: 1 !important; }
  .animate-pulse { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .hero-bg,
  .poster-wall,
  .final-cta .orb-tl,
  .final-cta .orb-br { display: none; }

  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}