@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: repeat(2, 1fr); }
  .survey-page { padding-top: 2rem; }
}

@media (min-width: 768px) {
  .site-nav { display: flex; }
  .mobile-menu-button { display: none; }
  .brand-wordmark { font-size: 1.5rem; }
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
  .chart-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .badge-section { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: center; }
}

@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
  .health-map-layout { grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .category-grid .category-card:nth-child(n+5) { grid-column: span 1; }
  .step-grid { grid-template-columns: repeat(3, 1fr); }
  .result-hero { grid-template-columns: auto 1fr; align-items: center; }
  .plan-grid { grid-template-columns: repeat(3, 1fr); }
  .survey-shell { grid-template-columns: minmax(0, 900px); justify-content: center; }
}

@media (min-width: 1280px) {
  .category-grid { grid-template-columns: repeat(7, 1fr); }
  .category-card { padding: 1.35rem; }
}

@media (max-width: 639px) {
  :root { --header-height: 80px; }
  .brand-copy small { display: none; }
  .brand-logo { height: 64px; }
  .header-inner .btn { font-size: 0.84rem; min-height: 56px; padding: 0.55rem 0.8rem; }
  .hero-actions .btn { width: 100%; }
  .survey-actions { align-items: stretch; flex-direction: column-reverse; }
  .survey-actions .btn { width: 100%; }
  .score-ring { height: 142px; width: 142px; }
  .score-ring::before { height: 112px; width: 112px; }
  .score-value strong { font-size: 3rem; }
  .button-row .btn, .share-actions .btn { width: 100%; }
  .health-heptagon-card { padding: 0.65rem; }
  .heptagon-label { display: none; }
  .heptagon-center { height: 92px; width: 92px; }
  .heptagon-center strong { font-size: 0.86rem; }
  .health-dimension { grid-template-columns: 1fr; }
}