/* ============================================================
   WellServe — responsive.css
   Loaded last so these rules win. Three deliberate tiers rather
   than hoping the auto-fit grids collapse nicely on their own:
     Laptop  ≤1200px
     Tablet  ≤900px
     Mobile  ≤600px
   The one exception is the nav toggle breakpoint (760px), kept
   where it already was tuned to the header's actual content width.
   ============================================================ */

/* ---------- Laptop (≤1200px) ---------- */
@media (max-width: 1200px){
  .pub-feature::after{ font-size: 6rem; }
}

/* ---------- Tablet (≤900px) ---------- */
@media (max-width: 900px){
  .product-grid{ grid-template-columns: 1fr; }
  .spec-box{ position: static; }
  section{ padding: var(--space-8) 0; }
  .hero.hero-xl .container.hero-flex{ flex-direction: column; align-items: flex-start; gap: 40px; }
  .pub-fan{ width: 192px; height: 192px; align-self: center; }
  .pub-fan-card{ width: 96px; height: 144px; }
  .pub-fan-card-2{ left: 25px; top: 15px; }
  .pub-fan-card-3{ left: 50px; top: 30px; }
}

/* ---------- Nav toggle (≤760px) ---------- */
@media (max-width: 760px){
  nav.links{
    position: fixed; inset: 64px 0 auto 0; background: var(--navy);
    flex-direction: column; align-items: flex-start; padding: 18px 6%; gap: 18px;
    display: none; border-bottom: 1px solid var(--rule-dark);
  }
  nav.links.open{ display: flex; }
  .nav-toggle{ display: block; background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; line-height: 1; }
}

/* ---------- Mobile (≤600px) ---------- */
@media (max-width: 600px){
  .hero{ padding: 56px 0 48px; }
  section{ padding: var(--space-7) 0; }
  .stat-row{ gap: 20px; }
  .journey-step{ gap: 14px; padding: 22px 0; }
  .journey-step .step-num{ min-width: 38px; font-size: 1.5rem; }
  .pub-feature{ padding: 28px 22px; }
  .pub-feature::after{ display: none; }
  .foot-cols{ gap: 32px; }
  .pub-fan{ display: none; }
}

/* ---------- New components (look-inside, lead band) ---------- */
@media (max-width: 900px){
  .look-inside{ grid-template-columns: 1fr; gap: 30px; }
  .lead-band{ grid-template-columns: 1fr; gap: 26px; }
  .lead-thumb{ max-width: 170px; }
}