/* ── Mobile responsive (≤640px) — fix "page too big" on phones ── */
@media(max-width:640px){
  .wrap{padding-inline:16px}

  /* Stack two-column layouts */
  .hero{grid-template-columns:1fr;gap:32px;padding-block:60px 40px;align-items:flex-start}
  .hero-copy{max-width:none}
  .hero-copy p{font-size:18px}

  .feature{grid-template-columns:1fr;gap:24px;padding:32px 0 40px}
  .feature p{max-width:none}

  .read-grid{grid-template-columns:1fr}
  .read-grid .read-item{grid-template-columns:auto 1fr;gap:12px;padding:14px 0}
  .read-grid .read-num{font-size:12px;min-width:24px}
  .read-grid .read-text{font-size:16px}

  /* Reduce band padding */
  .band{padding:48px 0}
  .band h2{margin-top:24px}

  /* Full-width slideouts and constrained sections */
  .band-slideout{max-width:none}
  .visual-panel{grid-template-columns:1fr;text-align:center;gap:16px;padding:24px}
  .visual-panel img{margin:0 auto}
  .about-copy{font-size:16px}
  .blog-intro{padding:32px 0}
  .contact-hero{padding:40px 0}
  .services-intro{padding:32px 0}

  /* Nav adjustments */
  .navlinks{gap:14px;font-size:13px}
  .nav-cta{font-size:12px;padding:9px 13px}
  .nav{min-height:64px;gap:16px}
  .brand{font-size:22px}

  /* Footer: restore link spacing on mobile (was lost in column flex) */
  footer .wrap{flex-direction:column;align-items:flex-start;gap:10px}
  footer .copy a{margin-inline-end:1em;font-size:13px}
  footer .copy a:last-child{margin-inline-end:0}

  /* Footer links: add spacing (was missing, caused "BlogAboutCommunityContact" mash) */
  .footer-links{display:flex;gap:0.8em;flex-wrap:wrap}
  .footer-links a{font-size:13px}

  /* Icon row */
  .icon-row{gap:16px;flex-wrap:wrap}

  /* Community list */
  .community-list{grid-template-columns:1fr}
  .community-item{padding:16px 0;border-bottom:1px solid var(--line)}

  /* Post grid */
  .post-grid{grid-template-columns:1fr}
  .post{padding:20px 0}

  /* Services grid */
  .services-grid{grid-template-columns:1fr}
  .service-card{padding:20px 0;border-bottom:1px solid var(--line)}
  .service-card:last-child{border-bottom:0}

  /* Steps grid */
  .steps-grid{grid-template-columns:1fr}

  /* Signal bar */
  .signal{flex-wrap:wrap;gap:8px}
}