/* Mobile-first overrides for the desktop composition pages. */
@media (max-width: 720px) {
  html { -webkit-text-size-adjust: 100%; }
  body { min-width: 320px !important; overflow-x: hidden !important; }
  .site-header { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: calc(100% - 24px) !important; height: 56px !important; margin: 8px auto 0 !important; padding: 0 12px !important; border-radius: 14px !important; grid-template-columns: minmax(0, 1fr) auto !important; }
  .site-header__brand { font-size: 17px !important; gap: 7px !important; overflow: hidden; }
  .site-header__logo { width: 27px !important; height: 27px !important; flex-basis: 27px !important; }
  .site-header__menu-toggle { display: grid !important; width: 40px !important; height: 40px !important; place-items: center; border: 1px solid #d7e4f5; border-radius: 10px; background: #f7fbff; color: #126ff1; cursor: pointer; }
  .site-header__menu-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .site-header__menu { display: none !important; position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; right: 0 !important; z-index: 60; padding: 10px; border: 1px solid #d9e5f5; border-radius: 14px; background: rgba(255,255,255,.98); box-shadow: 0 16px 34px rgba(30,73,133,.15); }
  .site-header.is-open .site-header__menu { display: flex !important; flex-direction: column; gap: 7px; }
  .site-header__nav, .site-header.is-open .site-header__nav { display: flex !important; height: auto !important; flex-direction: column; align-items: stretch !important; gap: 2px !important; }
  .site-header__nav a { min-height: 43px; display: flex !important; align-items: center; padding: 0 12px; border-radius: 9px; font-size: 14px !important; }
  .site-header__nav a.is-active { background: #edf5ff; }
  .site-header__actions { display: flex !important; align-items: center; gap: 9px !important; padding: 8px 3px 2px; border-top: 1px solid #e7eef8; }
  .site-header__login { display: flex !important; align-items: center; justify-content: center; min-width: 78px; height: 40px; border: 1px solid #d7e4f5; border-radius: 10px; font-size: 13px !important; }
  .site-header__cta { width: auto !important; flex: 1; height: 40px !important; gap: 7px !important; border-radius: 10px !important; font-size: 12px !important; }
  .site-header__cta span { font-size: 16px !important; }

  /* Главная: оставляем акцент на тексте и действиях, а сложную VM-карточку скрываем. */
  .page-shell { padding-top: 0 !important; }
  .page-shell main { width: calc(100% - 32px) !important; }
  .page-shell .hero { min-height: auto !important; padding: 30px 0 0 !important; display: block !important; }
  .page-shell .hero h1 { margin: 17px 0 13px !important; font-size: clamp(31px, 9.5vw, 40px) !important; line-height: 1.08 !important; letter-spacing: -1.2px !important; }
  .page-shell .hero h1 br, .page-shell .hero-copy > p br { display: none !important; }
  .page-shell .hero-copy > p { font-size: 15px !important; line-height: 1.58 !important; }
  .page-shell .eyebrow { width: 100% !important; height: auto !important; min-height: 33px !important; padding: 8px 12px !important; font-size: 11px !important; line-height: 1.35 !important; white-space: normal !important; }
  .page-shell .hero-buttons { gap: 10px !important; margin-top: 24px !important; }
  .page-shell .btn-primary, .page-shell .btn-secondary { width: 100% !important; height: 52px !important; font-size: 14px !important; }
  .page-shell .chips { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 17px !important; white-space: normal !important; }
  .page-shell .chips span { min-height: 38px !important; height: auto !important; padding: 7px 9px !important; font-size: 10px !important; line-height: 1.25 !important; }
  .page-shell .hero-visual { display: none !important; }
  .page-shell .metrics { width: 100% !important; max-width: none !important; margin: 32px 0 !important; border-radius: 14px !important; }
  .page-shell .metric { min-height: 78px !important; justify-content: flex-start !important; padding: 0 20px !important; gap: 16px !important; }
  .page-shell .metric strong { font-size: 18px !important; }.page-shell .metric span { font-size: 12px !important; }
  .page-shell .cases { padding: 18px !important; gap: 12px !important; border-radius: 15px !important; }
  .page-shell .case-intro { padding: 4px 2px 10px !important; }.page-shell .case-intro h2 { font-size: 24px !important; }
  .page-shell .case-card { min-height: 0 !important; padding: 17px !important; }.page-shell .case-card h3 { font-size: 16px !important; }.page-shell .case-card p { font-size: 12px !important; }

  /* Вход и регистрация: вместо уменьшенного макета — прокручиваемая мобильная форма. */
  .auth-page, .auth-page .viewport { height: auto !important; min-height: 100svh !important; overflow: visible !important; }
  .auth-page .viewport { display: block !important; padding: 0 !important; }
  .auth-page .page { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 100svh !important; padding: 0 16px 28px !important; overflow: visible !important; transform: none !important; }
  .auth-page .header { position: relative !important; left: auto !important; right: auto !important; top: auto !important; height: 66px !important; align-items: center !important; }
  .auth-page .logo { gap: 8px !important; font-size: 20px !important; }.auth-page .logo-mark { width: 29px !important; height: 31px !important; flex-basis: 29px !important; }
  .auth-page .home { margin-top: 0 !important; gap: 7px !important; font-size: 12px !important; }.auth-page .home .arrow { font-size: 20px !important; }
  .auth-page .left { position: relative !important; left: auto !important; top: auto !important; width: auto !important; padding: 27px 3px 8px !important; }
  .auth-page .left h1 { width: auto !important; font-size: clamp(30px, 9vw, 38px) !important; line-height: 1.05 !important; letter-spacing: -1.25px !important; }
  .auth-page .lead { width: auto !important; margin-top: 15px !important; font-size: 14px !important; line-height: 1.55 !important; }.auth-page .lead br { display: none !important; }
  .auth-page .feature-list, .auth-page .art, .auth-page .soft-orb, .auth-page .dot { display: none !important; }
  .auth-page .signup-card, .auth-page.login-page .signup-card { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; margin: 25px 0 0 !important; padding: 27px 20px 24px !important; border-radius: 16px !important; }
  .auth-page .register-badge { margin-bottom: 14px !important; font-size: 10px !important; }.auth-page .signup-card h2 { font-size: 26px !important; letter-spacing: -.7px !important; }.auth-page .subtitle { margin: 11px auto 21px !important; font-size: 12px !important; }
  .auth-page .signup-card form { width: 100% !important; margin-left: 0 !important; }.auth-page .form-group { margin-bottom: 14px !important; }.auth-page .input-wrap, .auth-page .input-wrap input { height: 50px !important; }.auth-page .input-wrap input { font-size: 16px !important; }
  .auth-page .turnstile-wrap { transform: scale(.92); transform-origin: center; margin: -8px 0 6px !important; }
  .auth-page .check-row { font-size: 12px !important; }.auth-page .submit { height: 52px !important; font-size: 16px !important; }.auth-page .login-row { margin-top: 22px !important; gap: 8px !important; font-size: 12px !important; }.auth-page .secure { margin-top: 20px !important; font-size: 12px !important; }

  /* Тарифы: три карточки становятся вертикальным списком с читаемым текстом. */
  .pricing-page .viewport { min-height: 100svh !important; height: auto !important; padding: 0 !important; overflow: visible !important; }
  .pricing-page .canvas { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 100svh !important; padding: 22px 16px 38px !important; transform: none !important; overflow: visible !important; }
  .pricing-page .canvas .site-header { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; }.pricing-page .navbar { display: none !important; }
  .pricing-page .hero, .pricing-page .billing, .pricing-page .cards, .pricing-page .benefits, .pricing-page .comparison, .pricing-page .custom, .pricing-page .footer { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; height: auto !important; }
  .pricing-page .hero { margin: 32px 0 18px !important; text-align: left !important; }.pricing-page .hero h1 { font-size: 31px !important; line-height: 1.08 !important; letter-spacing: -1px !important; }.pricing-page .hero p { font-size: 14px !important; line-height: 1.5 !important; }.pricing-page .hero br { display: none !important; }
  .pricing-page .pill { height: 28px !important; padding: 0 11px !important; font-size: 10px !important; }.pricing-page .billing { margin: 0 0 18px !important; height: 42px !important; border-radius: 9px !important; }.pricing-page .billing button { font-size: 13px !important; }
  .pricing-page .cards { display: grid !important; grid-template-columns: 1fr !important; gap: 13px !important; }.pricing-page .plan { min-height: 280px !important; padding: 20px !important; border-radius: 14px !important; }.pricing-page .plan.pro { padding: 19px !important; }.pricing-page .plan-head { gap: 13px !important; padding-bottom: 14px !important; }.pricing-page .plan-icon { width: 48px !important; height: 48px !important; }.pricing-page .plan-icon svg { width: 25px !important; height: 25px !important; }.pricing-page .plan-title h3 { font-size: 20px !important; }.pricing-page .plan-title small, .pricing-page .price { font-size: 13px !important; }.pricing-page .price b { font-size: 33px !important; }.pricing-page .features { gap: 9px !important; margin-top: 17px !important; }.pricing-page .features li { font-size: 13px !important; white-space: normal !important; }.pricing-page .features svg { width: 15px !important; height: 15px !important; }.pricing-page .select { left: 20px !important; right: 20px !important; bottom: 17px !important; height: 42px !important; border-radius: 8px !important; font-size: 14px !important; }
  .pricing-page .benefits { display: grid !important; grid-template-columns: 1fr 1fr !important; margin: 18px 0 !important; border-radius: 12px !important; }.pricing-page .benefit { min-height: 72px !important; }.pricing-page .benefit b { font-size: 13px !important; }.pricing-page .benefit span { font-size: 11px !important; }.pricing-page .comparison { margin: 25px 0 !important; }.pricing-page .comparison h2 { font-size: 22px !important; margin-bottom: 12px !important; }.pricing-page .compare-wrap { height: auto !important; overflow-x: auto !important; }.pricing-page .compare { min-width: 590px !important; font-size: 11px !important; }.pricing-page .compare th, .pricing-page .compare td { height: 38px !important; padding: 0 11px !important; }.pricing-page .custom { display: block !important; padding: 21px !important; border-radius: 14px !important; }.pricing-page .custom-art { display: none !important; }.pricing-page .custom-copy { width: auto !important; margin: 0 !important; }.pricing-page .custom-copy h3 { font-size: 18px !important; }.pricing-page .custom-copy p { font-size: 13px !important; }.pricing-page .custom-actions { margin: 17px 0 0 !important; display: grid !important; gap: 9px !important; }.pricing-page .custom-actions a { height: 42px !important; font-size: 13px !important; }.pricing-page .footer { display: none !important; }

  /* FAQ: отменяем масштабирование и выстраиваем контент в одну колонку. */
  .faq-page { overflow: auto !important; }.faq-page .viewport { display: block !important; width: auto !important; height: auto !important; overflow: visible !important; }.faq-page .stage { width: 100% !important; height: auto !important; min-height: 100svh !important; padding: 25px 16px 40px !important; overflow: visible !important; transform: none !important; }.faq-page > .site-header { margin-top: 8px !important; }
  .faq-page .content { position: relative !important; left: auto !important; top: auto !important; width: auto !important; }.faq-page h1 { font-size: 32px !important; line-height: 1.08 !important; }.faq-page .subtitle { font-size: 14px !important; }.faq-page .subtitle br { display: none !important; }.faq-page .categories { overflow-x: auto !important; padding-bottom: 5px !important; gap: 8px !important; }.faq-page .cat { flex: 0 0 auto !important; font-size: 12px !important; }
  .faq-page .faq-layout { grid-template-columns: 1fr !important; gap: 18px !important; }.faq-page .support-card, .faq-page .info-card { height: auto !important; padding: 17px !important; }.faq-page .support-card h2 { font-size: 19px !important; }.faq-page .support-card p, .faq-page .info-row span { font-size: 12px !important; }.faq-page .support-btn { height: 42px !important; font-size: 13px !important; }.faq-page .accordion-item:not(.open), .faq-page .accordion-item.open { height: auto !important; }.faq-page .accordion-head, .faq-page .accordion-item.open .accordion-head { height: auto !important; min-height: 52px !important; padding: 10px 14px !important; }.faq-page .accordion-head strong { font-size: 15px !important; }.faq-page .accordion-body { padding: 0 16px 16px 48px !important; font-size: 13px !important; }.faq-page .accordion-body br { display: none !important; }.faq-page .cta-strip { position: relative !important; height: auto !important; margin-top: 18px !important; padding: 20px !important; }.faq-page .cta-copy, .faq-page .cta-actions { position: relative !important; left: auto !important; top: auto !important; }.faq-page .cta-copy h2 { font-size: 22px !important; }.faq-page .cta-copy p { font-size: 13px !important; }.faq-page .cta-copy p br { display: none !important; }.faq-page .cta-actions { display: grid !important; gap: 9px !important; margin-top: 16px !important; }.faq-page .cta-button { width: 100% !important; height: 44px !important; font-size: 13px !important; }.faq-page .cta-art, .faq-page .footer { display: none !important; }

  /* Документация: только статья; сайдбар скрыт, карточки переходят в две колонки. */
  .docs-page { overflow: auto !important; }.docs-page .viewport { display: block !important; width: auto !important; height: auto !important; min-height: 100svh !important; overflow: visible !important; }.docs-page .canvas { width: 100% !important; height: auto !important; min-height: 100svh !important; margin: 0 !important; padding: 24px 16px 40px !important; overflow: visible !important; transform: none !important; }.docs-page > .site-header { margin-top: 8px !important; }.docs-page .layout { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; display: block !important; }.docs-page .sidebar { display: none !important; }.docs-page .article { padding: 0 !important; }.docs-page h1 { font-size: 31px !important; }.docs-page .intro { width: auto !important; font-size: 14px !important; }.docs-page .intro br, .docs-page .mission p br, .docs-page .feature p br, .docs-page .step p br { display: none !important; }.docs-page .mission { height: auto !important; padding: 16px !important; margin-bottom: 26px !important; }.docs-page .mission p { font-size: 13px !important; }.docs-page .section-title { font-size: 22px !important; }.docs-page .feature-grid, .docs-page .steps { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }.docs-page .feature, .docs-page .step { height: auto !important; min-height: 164px !important; }.docs-page .step:not(:last-child):after { display: none !important; }.docs-page .feature h4 { font-size: 14px !important; }.docs-page .feature p, .docs-page .step p { font-size: 11px !important; }.docs-page .tr { grid-template-columns: 1fr !important; }.docs-page .td { font-size: 12px !important; }.docs-page .td + .td { border-left: 0 !important; border-top: 1px solid #e6eaf0 !important; }.docs-page .feedback { height: auto !important; display: block !important; padding: 16px !important; }.docs-page .vote { margin: 14px 0 0 !important; }.docs-page .article-nav { gap: 10px !important; }.docs-page .article-nav a { min-height: 44px !important; font-size: 11px !important; }.docs-page .footer { display: none !important; }

  /* Личный кабинет: вместо масштабирования — удобные карточки и горизонтальное меню. */
  body:has(.app) { overflow: auto !important; }.viewport:has(.app) { height: auto !important; min-height: 100svh !important; display: block !important; overflow: visible !important; }.app { width: 100% !important; height: auto !important; min-height: 100svh !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; transform: none !important; }.app .topbar { height: 63px !important; padding: 0 16px !important; }.app .brand { font-size: 18px !important; }.app .brand-mark { width: 26px !important; height: 29px !important; flex-basis: 26px !important; }.app .search, .app .top-icon { display: none !important; }.app .profile { width: auto !important; border: 0 !important; padding: 0 !important; }.app .profile-info, .app .profile .chev { display: none !important; }.app .shell { display: block !important; height: auto !important; }.app .sidebar { border: 0 !important; padding: 10px 16px !important; overflow: visible !important; }.app .nav { flex-direction: row !important; overflow-x: auto !important; gap: 8px !important; padding-bottom: 3px !important; }.app .nav-item { flex: 0 0 auto !important; height: 42px !important; padding: 0 12px !important; font-size: 13px !important; }.app .nav-item svg { width: 19px !important; height: 19px !important; }.app .logout-form { position: static !important; width: auto !important; margin: 10px 0 0 !important; }.app .logout { height: 42px !important; justify-content: center !important; }.app .main { padding: 18px 16px 30px !important; overflow: visible !important; }.app .title { font-size: 25px !important; }.app .subtitle { font-size: 14px !important; }.app .quick-grid, .app .content-grid, .app .bottom-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 12px !important; }.app .quick-card, .app .large-card, .app .small-card { width: 100% !important; height: auto !important; min-height: 116px !important; }.app .large-card { padding: 17px !important; }.app .small-card { padding: 15px !important; }.app .content-grid > *, .app .bottom-grid > * { min-width: 0 !important; }
}