/* واکنش‌گراییِ واقعیِ سایتِ عمومی — مستقل از قابِ دستگاهِ موکاپ (.device-frame).
   از مقادیرِ طراحیِ موبایل استخراج و در media query واقعی اعمال شده است. */
@media (max-width: 880px){
  .pagination{justify-content:center}
  .pagination-summary{width:100%;text-align:center;order:2}
  .form-grid{grid-template-columns:1fr}
  .site-footer-link{padding:7px 0}
  .field>span{font-size:12px;margin-bottom:6px}
  .field-hint{font-size:12px;line-height:1.7}
  .site-wrap{padding-inline:16px}
  .site-nav-inner{height:58px;gap:8px}
  .site-nav-toggle{display:grid;order:3}
  .site-brand{margin-inline-end:auto}
  .site-login{order:2;padding:9px 13px}
  .site-nav-links{position:absolute;top:calc(100% + 1px);inset-inline:0;flex-direction:column;gap:3px;background:#fff;border-top:1px solid #e4e6ea;box-shadow:0 18px 32px rgba(28,35,51,.14);padding:9px;margin:0;display:none;z-index:25}
  .site-nav.is-open .site-nav-links{display:flex}
  .site-nav-link{width:100%;text-align:right;padding:13px 14px;font-size:13.5px;border-radius:10px}
  .site-hero-inner{grid-template-columns:1fr;padding-block:30px;gap:26px}
  .site-hero-text{text-align:center}
  .site-hero-text h1{font-size:27px}
  .site-hero-text p{margin-inline:auto}
  .site-hero-cta{flex-direction:column;align-items:stretch}
  .site-hero-cta>button{width:100%;justify-content:center}
  .site-hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 12px;margin-top:4px}
  .feature-grid, .steps-grid, .vid-grid, .about-stats{grid-template-columns:1fr 1fr}
  .about-grid, .legal-layout, .contact-grid{grid-template-columns:1fr}
  .site-showcase{grid-template-columns:1fr;gap:26px}
  .site-showcase--reverse .site-showcase-text{order:2}
  .site-showcase--reverse .site-showcase-visual{order:1}
  .site-showcase-text{text-align:center}
  .site-showcase-text p{margin-inline:auto}
  .site-showcase-list{max-width:340px;margin-inline:auto;text-align:right}
  .site-showcase--dark{padding:26px}
  .legal-toc{display:none}
  .coach-band{flex-direction:column;align-items:flex-start;gap:16px;padding:24px}
  .site-section{padding-block:36px}
  .site-footer-main{grid-template-columns:1fr 1fr;gap:20px}
  .site-page-hero h1{font-size:24px}
  .site-section-head h2, .site-cta-band h2, .coach-band h2{font-size:21px}
}

/* برای صفحاتِ خیلی باریک، کارت‌های ویدئو و شبکه‌ها تک‌ستونه می‌شوند (خواناتر روی موبایل) */
@media (max-width: 520px){
  .vid-grid{grid-template-columns:1fr}
}