/* ==========================================================================
   Responsive — breakpoints layer on top of layout/components
   ========================================================================== */

@media (max-width: 1080px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .product-hero { grid-template-columns: 1fr; }
  .purchase-panel { position: static; }
  .meta-list { grid-template-columns: 1fr; }
  .review-summary { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .hero__visual { order: -1; aspect-ratio: 16/9; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip .container { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 780px) {
  .card-grid,
  .feature-grid,
  .pricing-grid,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card--popular { transform: none; }

  .newsletter { flex-direction: column; text-align: center; }
  .newsletter form { max-width: 100%; }

  section { padding-block: var(--space-8); }
}

@media (max-width: 520px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
}