/* Главная aipepden.store на телефоне — по макету docs/design/satori/mobile-mockup.html (одобрен Денисом 04.10.2026).
   Только ширина до 768 px (там же сайт показывает бургер): компьютерная версия этим файлом не меняется (кроме правила .sqm-only — эти блоки на компьютере скрыты).
   Старые разделы главной на телефоне скрыты, их текст остаётся в разметке; суть — в свёрнутых разделах «Подробнее».
   Цвета и шрифты — токены --sq-* из css/sq-theme.css (светлая тема, тёмная по устройству). Лампа — одна, у надзаголовка. */

.sqm-only { display: none; }
/* меню на ширине 769–980: бургер есть, стили телефона нет — показываем прежнее «Имя — роль» */
.nav-mobile .sqm-av, .nav-mobile .sqm-note { display: none; }
.nav-mobile .sqm-sep + small { font-size: inherit; }

@media (max-width: 768px) {
  /* overflow-x у body не трогаем: html уже clip, а hidden у body делает его контейнером прокрутки и ломает липкую шапку */
  html:root body #main-content > section { scroll-margin-top: 72px; }
  html:root body #cta-form { scroll-margin-top: 72px; }
  html:root body .sqm-only { display: block; }
  html:root body .sqm-hide-m { display: none !important; }

  /* ── шапка и меню-лист ── */
  html:root body .nav-burger { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--sq-line); background: var(--sq-panel); display: grid; place-content: center; gap: 4px; }
  html:root body .nav-logo { min-height: 44px; }
  html:root body .nav-mobile.open {
    display: flex; flex-direction: column; position: fixed; inset: 0; top: 0; z-index: 1000; max-height: none; height: 100dvh;
    padding: 0; background: var(--sq-bg); border: 0; overflow-y: auto;
  }
  html:root body .sqm-sheet-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--sq-line); position: sticky; top: 0; background: var(--sq-bg); z-index: 1; }
  html:root body .sqm-sheet-top .sqm-brand { margin-right: auto; display: flex; flex-direction: column; line-height: 1.15; color: var(--sq-ink); text-decoration: none; min-height: 44px; justify-content: center; }
  html:root body .sqm-sheet-top .sqm-brand b { font: 600 15px/1.15 var(--sq-f-display); }
  html:root body .sqm-sheet-top .sqm-brand small { font-size: 11px; color: var(--sq-ink-3); }
  html:root body .sqm-close { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--sq-line); background: var(--sq-panel); display: grid; place-items: center; cursor: pointer; color: var(--sq-ink); }
  html:root body .sqm-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
  html:root body .nav-mobile .nav-mobile-section { margin: 0; }
  html:root body .nav-mobile .nav-mobile-section-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sq-ink-3); font-weight: 600; padding: 14px 16px 4px; margin: 0; }
  html:root body .nav-mobile .nav-mobile-section a {
    display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 16px; color: var(--sq-ink); font-size: 16px;
    text-decoration: none; border-bottom: 1px solid var(--sq-line);
  }
  html:root body .nav-mobile .nav-mobile-section a small { margin-left: auto; color: var(--sq-ink-3); font-size: 13px; }
  html:root body .nav-mobile .sqm-sep { display: none; }
  html:root body .nav-mobile .sqm-note { display: inline; }
  html:root body .nav-mobile .sqm-av { width: 30px; height: 30px; border-radius: 50%; background: var(--sq-teal-soft); color: var(--sq-teal); display: grid; place-items: center; font: 600 12px var(--sq-f-display); flex: none; }
  html:root body .nav-mobile .sqm-sheet-foot { margin-top: auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: 0; background: var(--sq-bg); border-top: 1px solid var(--sq-line); }
  html:root body .nav-mobile .sqm-sheet-foot p { text-align: center; font-size: 13px; color: var(--sq-ink-3); margin: 0; }
  html:root body .nav-mobile .nav-cta-mobile { display: none; }
  html:root.sqm-locked { overflow: hidden; } /* на html, не на body: overflow у body ломает липкую шапку */

  /* ── кнопки ── */
  html:root body .sqm-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 12px 16px;
    border-radius: 12px; border: 1px solid transparent; font: 600 15px/1.2 var(--sq-f-body); text-decoration: none; text-align: center; cursor: pointer;
  }
  html:root body .sqm-btn.main { background: var(--sq-teal); color: var(--sq-on-teal); }
  html:root body .sqm-btn.ghost { background: var(--sq-panel); border-color: var(--sq-line); color: var(--sq-ink); }
  html:root body .sqm-btn:focus-visible, html:root body .sqm-acc summary:focus-visible, html:root body .sqm-seg button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--sq-teal) 40%, transparent); outline-offset: 2px;
  }

  /* ── первый экран ── */
  html:root body .sq-hero { padding-block: 22px 18px; }
  html:root body .sq-hero-grid { gap: 0; }
  html:root body .sq-hero .sq-lamp,
  html:root body .sq-hero .sq-lead,
  html:root body .sq-hero .sq-contacts,
  html:root body .sq-hero .sq-hint { display: none; }
  html:root body .sq-hero .sq-eyebrow { display: flex; align-items: center; gap: 10px; }
  html:root body .sq-hero .sq-eyebrow::before {
    content: ""; width: 34px; height: 34px; border-radius: 50%; flex: none;
    background: radial-gradient(circle at 40% 35%, #FFD27A, var(--sq-lamp) 62%);
    box-shadow: 0 0 20px 6px color-mix(in srgb, var(--sq-lamp) 35%, transparent);
  }
  html:root body .sq-hero .hero-h1 { font-size: 27px; line-height: 1.12; margin-top: 12px; }
  html:root body .sq-hero .hero-h1 em { display: inline; margin: 0; }
  html:root body .sq-hero .sq-slogan { font-size: 15px; line-height: 1.5; color: var(--sq-ink-3); margin: 10px 0 14px; }
  html:root body .sq-scan { flex-direction: column; gap: 8px; background: var(--sq-panel); border: 1px solid var(--sq-line); border-radius: 16px; padding: 8px; }
  html:root body .sq-scan input[type="text"]:not(.sq-hp) { min-height: 48px; font-size: 16px; width: 100%; }
  html:root body .sq-scan .sq-btn, html:root body .sq-fallback .sq-btn { width: 100%; min-height: 48px; }
  html:root body .sqm-trust { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  html:root body .sqm-chip { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--sq-teal-soft); color: var(--sq-teal); white-space: nowrap; }
  html:root body .sqm-chip[hidden] { display: none; }

  /* ── общие отступы разделов ── */
  html:root body .sq-sec { padding-block: 26px 0; }
  html:root body .sq-sec .sq-wrap, html:root body .sq-hero .sq-wrap { padding-inline: 16px; }
  html:root body .sq-head { margin-bottom: 14px; gap: 6px; }
  html:root body .sq-head h2 { font-size: 20px; line-height: 1.25; }
  html:root body .sq-head p { font-size: 14px; }

  /* ── три шага лентой ── */
  html:root body #sq-how .sq-steps {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none;
  }
  html:root body #sq-how .sq-steps::-webkit-scrollbar { display: none; }
  html:root body #sq-how .sq-step { flex: 0 0 78%; scroll-snap-align: start; padding: 14px; gap: 6px; }
  html:root body #sq-how .sq-step h3 { font-size: 15px; }
  html:root body #sq-how .sq-step p { font-size: 13.5px; }
  html:root body .sqm-dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
  html:root body .sqm-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--sq-line-2); }
  html:root body .sqm-dots i.on { background: var(--sq-teal); width: 16px; border-radius: 3px; }

  /* ── пример разбора строками ── */
  html:root body .sq-demo-body { display: flex; flex-direction: column; gap: 0; padding: 0; }
  html:root body .sq-demo-body[hidden] { display: none; }
  html:root body .sq-card { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; border: 0; border-top: 1px solid var(--sq-line); border-radius: 0; background: transparent; padding: 11px 12px; }
  html:root body .sq-card:first-child { border-top: 0; }
  html:root body .sq-card .t { font-size: 13px; }
  html:root body .sq-card b { font-size: 18px; grid-row: span 2; text-align: right; }
  html:root body .sq-card small { font-size: 12px; }
  html:root body .sq-demo-top { padding: 10px 12px; }
  html:root body .sq-demo-foot { padding: 12px; }
  html:root body .sq-demo-foot p { min-width: 0; font-size: 14px; }
  html:root body .sq-demo-foot .sq-btn { width: 100%; min-height: 48px; }

  /* ── отделы сеткой 2×3 ── */
  html:root body .sq-depts { grid-template-columns: 1fr 1fr; gap: 8px; }
  html:root body .sq-dept { padding: 12px; gap: 4px; min-width: 0; }
  html:root body .sq-dept h3 { font: 600 14px/1.3 var(--sq-f-body); flex-wrap: wrap; }
  html:root body .sq-dept p { font-size: 12.5px; line-height: 1.4; }

  /* ── цены ── */
  html:root body .sqm-price { background: var(--sq-panel); border: 1px solid var(--sq-line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
  html:root body .sqm-seg { display: flex; background: var(--sq-soft); border-radius: 12px; padding: 3px; gap: 2px; }
  html:root body .sqm-seg button { flex: 1; border: 0; background: none; min-height: 44px; border-radius: 9px; font: 13px/1.2 var(--sq-f-body); color: var(--sq-ink-3); cursor: pointer; padding: 6px 4px; }
  html:root body .sqm-seg button[aria-selected="true"] { background: var(--sq-panel); color: var(--sq-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
  html:root body .sqm-price .big { font: 600 22px/1.2 var(--sq-f-display); color: var(--sq-ink); }
  html:root body .sqm-price ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--sq-ink-3); display: flex; flex-direction: column; gap: 4px; }
  html:root body .sqm-plan[hidden] { display: none; }
  html:root body .sqm-gift { background: var(--sq-teal-soft); color: var(--sq-teal); border-radius: 10px; padding: 9px 11px; font-size: 13px; font-weight: 600; }

  /* ── сравнение карточками ── */
  html:root body .sqm-cmp { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  html:root body .sqm-cmp-row { background: var(--sq-panel); border: 1px solid var(--sq-line); border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; }
  html:root body .sqm-cmp-row .t { font-size: 12px; color: var(--sq-ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
  html:root body .sqm-cmp-row .v { font-size: 14px; color: var(--sq-ink); }
  html:root body .sqm-cmp[data-who="them"] .v.us, html:root body .sqm-cmp[data-who="us"] .v.them { display: none; }
  html:root body .sqm-cmp[data-who="them"] .v.them { color: var(--sq-ink-3); }
  html:root body .sqm-src { font-size: 11.5px; color: var(--sq-ink-3); margin: 8px 0 0; }

  /* ── «Подробнее»: свёрнутые разделы ── */
  html:root body .sqm-acc { display: flex; flex-direction: column; border: 1px solid var(--sq-line); border-radius: 14px; background: var(--sq-panel); overflow: hidden; }
  html:root body .sqm-acc details { border-top: 1px solid var(--sq-line); }
  html:root body .sqm-acc details:first-child { border-top: 0; }
  html:root body .sqm-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; font-weight: 600; font-size: 14.5px; color: var(--sq-ink); }
  html:root body .sqm-acc summary::-webkit-details-marker { display: none; }
  html:root body .sqm-acc summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--sq-ink-3); border-bottom: 2px solid var(--sq-ink-3); transform: rotate(45deg); margin-left: auto; transition: transform .2s; flex: none; }
  html:root body .sqm-acc details[open] summary::after { transform: rotate(-135deg); }
  html:root body .sqm-acc summary small { display: block; font-weight: 400; font-size: 12px; color: var(--sq-ink-3); }
  html:root body .sqm-acc .body { padding: 0 14px 14px; font-size: 13.5px; line-height: 1.5; color: var(--sq-ink-3); display: flex; flex-direction: column; gap: 8px; }
  html:root body .sqm-acc .body p, html:root body .sqm-acc .body ol, html:root body .sqm-acc .body ul { margin: 0; }
  html:root body .sqm-acc .body ol, html:root body .sqm-acc .body ul { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
  html:root body .sqm-acc .body b { color: var(--sq-ink); font-weight: 600; }
  html:root body .sqm-acc .body .sqm-btn { margin-top: 4px; }
  html:root body .sqm-team { display: flex; flex-direction: column; }
  html:root body .sqm-team a { display: flex; align-items: center; gap: 10px; min-height: 48px; color: var(--sq-ink); text-decoration: none; border-top: 1px solid var(--sq-line); font-size: 14.5px; }
  html:root body .sqm-team a:first-child { border-top: 0; }
  html:root body .sqm-team a small { margin-left: auto; color: var(--sq-ink-3); font-size: 12.5px; }
  html:root body .sqm-team .sqm-av { width: 30px; height: 30px; border-radius: 50%; background: var(--sq-teal-soft); color: var(--sq-teal); display: grid; place-items: center; font: 600 12px var(--sq-f-display); flex: none; }

  /* ── заявка ── */
  html:root body .lead-section { padding: 30px 0 24px !important; }
  html:root body .lead-section .container { padding-inline: 16px; }
  html:root body .lead-section .section-label { display: none; }
  html:root body .lead-section .section-h2 { font-size: 20px !important; line-height: 1.25; }
  html:root body .lead-section .section-h2 + p { font-size: 14px !important; margin-top: 8px !important; }
  html:root body .lead-form { margin-top: 14px; gap: 8px; }
  html:root body .lead-form input { min-height: 48px; font-size: 16px; color: var(--sq-ink); background: var(--sq-panel); }
  html:root body .lead-form button { min-height: 48px; margin-top: 0; background: var(--sq-teal); color: var(--sq-on-teal); }
  html:root body .lead-form-note { font-family: var(--sq-f-body); }
  html:root body .sqm-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  html:root body .sqm-contacts-line { font-size: 13px; color: var(--sq-ink-3); margin: 10px 0 0; }

  /* ── подвал ── */
  html:root body .footer { padding-bottom: 96px; }
  html:root body .footer .container { padding-inline: 16px; }
  html:root body .footer .footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  html:root body .footer .footer-built { display: block; text-align: left; font-size: 12px; }
  html:root body .sqm-footnav { display: flex; flex-wrap: wrap; gap: 0 16px; width: 100%; }
  html:root body .footer .sqm-footnav a { white-space: nowrap; color: var(--sq-ink-3); text-decoration: none; }
  html:root body .sqm-footnav a, html:root body .footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  html:root body .footer a[aria-label="Telegram"] { width: 44px !important; height: 44px !important; justify-content: center; }

  /* ── закреплённая нижняя панель ── */
  html:root body .sqm-dock {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--sq-bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--sq-line); transform: translateY(110%); transition: transform .25s; visibility: hidden;
  }
  html:root body .sqm-dock.show { transform: none; visibility: visible; }
  html:root body .sqm-dock .sqm-btn.main { flex: 1; }
  html:root body .sqm-dock .sqm-ico { width: 48px; height: 48px; flex: none; border-radius: 12px; border: 1px solid var(--sq-line); background: var(--sq-panel); display: grid; place-items: center; color: var(--sq-ink); }
  html:root body .sqm-dock .sqm-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linejoin: round; }
  html:root body.sqm-dock-on .aipepden-cookie { bottom: 84px; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  html:root body .sqm-dock { transition: none; }
}