/* =====================================================================
   SNmarry.com — responsive rules
   ===================================================================== */

@media (max-width:1024px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .plan-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .story-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .hero-search form{grid-template-columns:1fr 1fr}
  .hero-search form .btn{grid-column:1/-1}
}

@media (max-width:860px){
  /* mobile nav */
  .nav-toggle{display:flex}
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(82vw,330px);background:#fff;
    flex-direction:column;align-items:flex-start;gap:4px;padding:88px 24px 24px;
    box-shadow:var(--shadow-lg);transform:translateX(100%);transition:.32s;z-index:70}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{width:100%;padding:.7rem 0;border-bottom:1px solid var(--line)}
  .nav-links a.active::after{display:none}
  .nav-overlay{position:fixed;inset:0;background:rgba(40,10,20,.4);z-index:65;opacity:0;visibility:hidden;transition:.3s}
  .nav-overlay.open{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}

  .auth-wrap{grid-template-columns:1fr}
  .auth-aside{display:none}
  .pd-head{grid-template-columns:1fr}
  .pd-photo{max-width:320px;margin:0 auto}
  .dl{grid-template-columns:1fr}
  .dash{grid-template-columns:1fr}
  .dash-side{position:static;display:flex;flex-direction:column}
  .dash-nav{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .band{padding:36px 26px}
  .section{padding:52px 0}
}

@media (max-width:560px){
  body{font-size:15px}
  .topbar .tb-l{display:none}
  .feature-grid,.steps,.story-grid,.stat-row{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .hero-search form{grid-template-columns:1fr}
  .hero-stats{gap:22px}
  .foot-grid{grid-template-columns:1fr}
  .dash-nav{grid-template-columns:1fr}
  .panel{padding:22px}
  .band{padding:28px 20px}
  .hero-inner{padding:64px 0 76px}
  .foot-bottom{flex-direction:column}
}