/* ── desktop / tablet ──────────────────────────────────────────────────────────────
   The header and the wordmark are NOT here — they travel with the shared header card
   (app/shared/css/header.css), so a breakpoint cannot resize them behind its back. */
@media (min-width: 769px) {
  main { padding: 2rem 7% 3rem; }
  .section-title { font-size: 1.7rem; letter-spacing: 0.12em; }
  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); flex-direction: row; }
  .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); flex-direction: row; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); flex-direction: row; }
  .tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}