/* ── TABLET (max 960px) ── */
@media (max-width: 960px) {
  #navbar { padding: 0 28px; }
  .nav-links { display: none; }

  #hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-right { height: 380px; }
  .hero-left  { padding: 60px 36px 52px; }

  .about-section   { grid-template-columns: 1fr; }
  .about-img-side  { min-height: 440px; }
  .about-content-side { padding: 60px 36px; }

  section,
  #how,
  #treatments,
  #testimonials,
  #faq,
  #cta { padding: 72px 36px; }

  #footer { padding: 32px 36px; }

  .steps-list { grid-template-columns: 1fr 1fr; }
  .step-item  { border-right: none; border-bottom: 1px solid var(--border); }
  .step-item:last-child { border-bottom: none; }
}

/* ── MOBILE (max 580px) ── */
@media (max-width: 580px) {
  #navbar { padding: 0 20px; }

  .hero-right { height: 280px; }
  .hero-left  { padding: 44px 24px 40px; }

  section,
  #how,
  #treatments,
  #testimonials,
  #faq,
  #cta { padding: 60px 24px; }

  #footer { padding: 24px; }
  .footer-links { display: none; }

  .steps-list { grid-template-columns: 1fr; }

  .options-grid--2col { grid-template-columns: 1fr; }

  .result-meta-grid { grid-template-columns: 1fr; }
}