/* ============================================================
   mobile.css - мобильная (портретная) верстка деки
   Включается на ширине <=768px и в телефонном ландшафте
   (высота <=500px). Десктоп (>768px и выше 500px) не трогаем.
   Принципы:
   - сцена 1920x1080 отключается: слайд = 100% ширины, экран в высоту;
   - каждый слайд: заголовок -> текст -> визуал вертикальным потоком;
   - плотные слайды прокручиваются внутри .body, лёгкие центрируются;
   - единая типографическая шкала в px:
     h1/h2 слайда 26-30, h3 18-20, lead 16, текст 14-15, подписи 11-13.
   ============================================================ */

@media (max-width: 768px), (max-height: 500px) {

  /* ---------- база: отвязка от сцены 1920x1080 ---------- */
  html {
    /* нормальный мобильный масштаб вместо стейдж-формулы:
       1rem = 10px на ширине 390px, чтобы rem-размеры компонентов
       десктопа ужались в мобильный диапазон предсказуемо */
    font-size: clamp(8.75px, 2.564vw, 12px);
  }

  html, body { overscroll-behavior: none; }
  .deck { overscroll-behavior: none; }

  /* в ландшафте телефона (>1100px ширины) рейл не должен толкать сцену */
  .rail-open { --rail-offset: 0px; }
  .rail-open .rail-scrim { opacity: 1; visibility: visible; }
  .rail .rail-head { padding-left: 74px; }

  .screen { display: block; }

  /* декоративный слой больше не растянут под сцену 1920x1080 */
  .screen > .deco {
    top: 0; left: 0; width: 100%; height: 100%;
    transform: none;
    overflow: hidden;
  }

  .slide,
  section.slide {
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: calc(64px + env(safe-area-inset-top, 0px))
             max(16px, env(safe-area-inset-left, 0px))
             calc(12px + env(safe-area-inset-bottom, 0px))
             max(16px, env(safe-area-inset-right, 0px));
    /* .top вынесен в шапку (absolute), в сетке остались контент и подвал */
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 10px;
  }

  /* контент слайда: внутренняя вертикальная прокрутка для плотных,
     безопасное центрирование для лёгких (auto-margin трюк) */
  .body {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    justify-content: flex-start;
    /* воздух сверху/снизу, чтобы выносные элементы букв не резались краем скролла */
    padding: 4px 0 8px;
  }
  .body > :first-child { margin-top: auto; }
  .body > :last-child { margin-bottom: auto; }

  /* обе строки пояснения слайда переносим в шапку, справа от кнопки меню:
     сверху цветная рубрика, под ней серое дополнение */
  .top {
    position: absolute;
    top: calc(9px + env(safe-area-inset-top, 0px));
    left: 70px;
    right: max(16px, env(safe-area-inset-right, 0px));
    min-height: 44px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    z-index: 3;
  }
  .eyebrow { font-size: 12px; letter-spacing: .1em; gap: 6px; }
  .topmeta { font-size: 10px; letter-spacing: .08em; }
  .foot { font-size: 11px; gap: 10px; }

  /* ---------- единая типографическая шкала ---------- */
  h1.title { font-size: 32px; line-height: 1.05; }
  h2.htitle,
  .modtext h2.htitle,
  .m6 .modtext h2.htitle,
  .s-channels h2.htitle,
  .screen .ix23,
  .screen .ix56 { font-size: 26px; line-height: 1.12; }
  h3.stitle { font-size: 20px; }
  .lead, .head-row .lead { font-size: 16px; max-width: none; }
  .kicker { font-size: 15px; }
  p.body-text, .s-channels p.body-text { font-size: 15px; max-width: none; }
  ul.bul li { font-size: 15px; }
  ul.bul li::before { top: 7px; width: 7px; height: 7px; }
  .modtext .exp, .m6 .modtext .exp { font-size: 15px; max-width: none; }
  .keyphrase p, .mod .keyphrase p, .m6 .keyphrase p,
  .s-channels .keyphrase p { font-size: 14px; }
  .keyphrase .mk { font-size: 11px; }
  .keyphrase { gap: 10px; padding: 12px 14px; }
  .caption { font-size: 12px; }
  .chip { font-size: 13px; padding: 6px 10px; }
  .roles2 .role li, .m6 .roles2 .role li { font-size: 14px; }
  .roles2 .role .rh, .m6 .roles2 .role .rh { font-size: 11px; }
  .statnum { font-size: 28px; }
  .bignum { font-size: 48px; }

  /* ---------- меню (рейл): только оверлей, крупные тап-таргеты ---------- */
  /* высота шапки задаётся явно, чтобы кнопка меню была ровно по центру
     по вертикали (равный отступ сверху и снизу), а не вплотную к верху */
  .deck-header {
    left: 0;
    height: calc(62px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    align-items: center;
  }
  .rail-toggle { width: 44px; height: 44px; }
  .rail { font-size: 14px; }
  .rail a { padding: 11px 16px; }
  .rail ol { padding: 4px 0; }

  /* прогресс-полоска во всю ширину */
  .deck-progress { left: 0; }

  /* ---------- generic: все колонки в один столбец ---------- */
  .cols, .cols.c64, .cols.c55, .cols.c46 {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    flex: none;
    min-height: auto;
  }
  .modcols, .m6 .modcols, .metacols {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    flex: none;
    min-height: auto;
  }
  .roles2 { grid-template-columns: 1fr; gap: 10px; }
  .modtext ul.natfeat { grid-template-columns: 1fr; gap: 6px; }
  .modvis { min-width: 0; }
  .body.stack { gap: 14px; }

  /* ---------- 01 обложка ---------- */
  .cover .body { display: flex; flex-direction: column; gap: 22px; }
  /* в заголовке обложки неразрывная связка слов - размер от ширины экрана */
  .cover h1.title { font-size: clamp(22px, 7.4vw, 30px); }
  .cover .sub { font-size: 16px; max-width: none; margin: 12px 0 14px; }
  .cover .keyline { padding-left: 12px; }
  .cover .keyline p { font-size: 15px; max-width: none; }
  .cover .modrow { flex-wrap: wrap; gap: 6px; max-width: none; }
  .gcard { width: 100%; padding: 16px 16px 14px; }
  .gcard .gh .badge { font-size: 22px; }
  .gcard .gh .lbl { font-size: 11px; }
  .gcard .months { font-size: 9px; }
  /* график получает фиксированную высоту, как обычный блок: не сжимается
     под ширину экрана и не обрезается по высоте на узких смартфонах */
  .gcard svg { height: 150px; }
  /* подпись Яндекс Метрики переносим из подвала под график */
  .gcard-src { display: block; }
  .cover .foot .pg { display: none; }

  /* ---------- 02 проблема (плотный, внутренняя прокрутка) ---------- */
  .prob .head-row { max-width: 100%; }
  .prob .head-row .lead { max-width: none; }
  .prob .cols { gap: 18px; }
  /* на десктопе проекции приподняты в правую колонку - в вертикали не нужно */
  .prob .vsplit { margin-top: 0; }
  .thlist { grid-template-columns: 1fr; gap: 8px; }
  .thlist .th { font-size: 14px; gap: 9px; }
  .thlist .th .x { width: 17px; height: 17px; font-size: 10px; }
  .prob-left { gap: 14px; }
  .pv-issues .iss { font-size: 13px; }
  .pv-verdict { font-size: 14px; }
  .vconn { font-size: 11px; }
  .vbox .vh b { font-size: 11px; }
  .vbox .vh span { font-size: 11px; }
  .pv-name { font-size: 13px; }
  .pv-newprice { font-size: 15px; }
  .pv-desc, .pv-sizes { font-size: 11px; }

  /* ---------- 03 стоимость команды ---------- */
  .costgrid { grid-template-columns: 1fr; gap: 7px; }
  .rolechip .rn { font-size: 14px; }
  .rolechip .rs { font-size: 12px; }
  .rolechip { padding: 10px 12px; }
  .costtotal .lab { font-size: 14px; }
  .costtotal .val { font-size: 18px; }
  .ourcard { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .ourcard .oh { font-size: 15px; }
  .ourcard .oh span { font-size: 13px; }
  .ourcard .op { font-size: 22px; }
  .ourcard .op small { font-size: 11px; }

  /* ---------- 04 специализация ---------- */
  .vs { grid-template-columns: 1fr; gap: 10px; }
  .vsmid { justify-content: center; font-size: 14px; padding: 2px 0; }
  .vs .vt, .vs .note { font-size: 13px; }
  .cmslist { flex-wrap: wrap; }
  .cmschip { font-size: 12px; }
  .hubnode { font-size: 12px; }

  /* ---------- 05 карта системы ---------- */
  .screen .ix29, .screen .ix32 { font-size: 10px; }
  .screen .ix30, .screen .ix33 { font-size: 13px; }
  .navsphere { width: 180px; margin: 0 auto 8px; }
  .navindex .ni { padding: 8px 2px; gap: 10px; }
  .navindex .ni .nn { font-size: 14px; width: 26px; }
  .navindex .ni .nt { font-size: 14px; }
  .navindex .ni .na { font-size: 11px; }
  .bleed-arrow { display: none; }

  /* ---------- 06-11 модули ---------- */
  .scanwrap img, .descshot img { max-height: 56vh; }
  .pin { font-size: 11px; padding: 3px 7px; }
  .scancap, .m6 .banote, .banote { font-size: 12px; }
  .vintro { font-size: 13px; }
  /* карточка-пример описания товара (слайд 07): имитация скриншота.
     Масштабируется как единый блок через cqw (см. slides.css), на мобильном
     не перестраивается в один столбец - просто уменьшается, чтобы влезть. */
  /* скриншоты "было/стало" (слайд 07): во всю ширину, пропорции не трогаем */
  .bacard { padding-left: 0; padding-right: 0; }
  .bacard .bahd, .bacard .banote { padding-left: 10px; padding-right: 10px; }
  .bacard img { width: 100%; height: auto; }
  .modvis .vlabel { font-size: 11px; flex-wrap: wrap; }
  .bahd .bt { font-size: 11px; }
  .cgraph { gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
  .cgcap { font-size: 13px; }
  .cmp2 { grid-template-columns: 1fr; gap: 14px; }
  .cmp2 .shot img { max-height: 60vh; width: auto; margin: 0 auto; }
  .cmpcol .ch { font-size: 11px; }
  .seoreq .sr-tx { font-size: 14px; }
  .seoreq .sr-mk { font-size: 13px; width: 50px; }
  .catmock { padding: 14px 14px; }
  .catmock .cm-h1 { font-size: 16px; }
  .qa .q { font-size: 13px; }
  .qa .a { font-size: 12px; }
  .collap { font-size: 12px; }
  .fc-row { flex-wrap: wrap; gap: 6px; }
  .fc-tok { font-size: 12px; padding: 4px 9px; }
  .fc-op { font-size: 12px; }
  .fc-arr { font-size: 13px; }
  .fc-page { font-size: 12px; padding: 4px 10px; white-space: normal; }

  /* ---------- 12 внешнее SEO (пилары + ракета) ---------- */
  .s11-cols { flex-direction: column; gap: 16px; }
  .s11-left { flex: none; max-width: none; }
  .s11-right { padding: 4px 0 8px; }
  .rocket-svg { max-width: 150px; }
  .pillar ul { grid-template-columns: 1fr; gap: 6px; }
  .pillar li { font-size: 14px; }
  .pillar .ph { font-size: 15px; }

  /* ---------- 13 SEO результат ---------- */
  /* десктопное центрирование .body режет верх при прокрутке - отключаем */
  .proof .body { justify-content: flex-start; }
  .proofwrap { flex: none; min-height: auto; gap: 16px; }
  .proofrow { flex-direction: column; align-items: center; gap: 16px; }
  .screen .ix57 { max-width: none; }
  .proofcap { font-size: 12px; }
  .proofcap .mk { font-size: 10px; }

  /* ---------- 14 Яндекс Директ ---------- */
  .screen .ix66 { font-size: 10px; }

  /* ---------- 15 каналы (плотный) ---------- */
  .s-channels .cols-ch {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    flex: none;
    min-height: auto;
  }
  .s-channels .intro-line { font-size: 15px; }
  .posttypes, .s-channels .posttypes { grid-template-columns: 1fr; gap: 8px; }
  .s-channels .ptype .pt-h { font-size: 14px; }
  .s-channels .ptype li, .ptype li { font-size: 13px; }
  .s-channels .benefits-ig { grid-template-columns: 1fr 1fr; gap: 8px; }
  .s-channels .bcard .bt { font-size: 13px; }
  .s-channels .bcard .bd { font-size: 12px; }
  .s-channels .bcard .bnum { font-size: 10px; }
  .s-channels .phone { transform: none; margin: 4px auto 0; }

  /* ---------- 16 продвижение каналов: круговая воронка -> список ---------- */
  .cyclefunnel { width: 100%; }
  .cf {
    aspect-ratio: auto;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cf-svg { display: none; }
  .cf-node, .screen .cf-node {
    position: static;
    transform: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }
  .cf-node .cf-num {
    position: static;
    transform: none;
    flex: none;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
  .cf-node .cf-t { font-size: 13px; }
  .cf-center {
    position: static;
    transform: none;
    width: 100%;
    order: 6;
    animation: none;
    padding: 10px 12px;
  }
  .cf-center .cf-c-l { font-size: 11px; }
  .cf-center .cf-c-v { font-size: 15px; }
  .cf-center .cf-arrow { font-size: 16px; animation: none; }

  /* ---------- 17 процесс запуска ---------- */
  .screen .ix96, .screen .ix99, .screen .ix103,
  .screen .ix106, .screen .ix109 { font-size: 18px; }
  .screen .ix97, .screen .ix100, .screen .ix104,
  .screen .ix107, .screen .ix110 { font-size: 14px; }
  .card { padding: 14px 16px; }
  .callout { padding: 14px 16px; }
  .callout .ct { font-size: 11px; }
  .callout p { font-size: 14px; }

  /* ---------- 18 стоимость ---------- */
  .cost-cols {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
    flex: none;
    min-height: auto;
  }
  .factors { grid-template-columns: 1fr; gap: 10px; margin: 16px 0; }
  .cost-left .factors { margin: 0; }
  .factor { padding: 13px 15px; }
  .factor .fh { font-size: 14px; }
  .factor p { font-size: 13px; }
  .budgetline { flex-wrap: wrap; gap: 8px 14px; padding: 13px 15px; }
  .budgetline .bfrom { font-size: 22px; }
  .budgetline .btxt { font-size: 13px; }
  .cost-right { padding: 2px 0 6px; }
  .audit-svg { max-width: 280px; }
  .screen .ix113 { max-width: none; }

  /* ---------- 19 пилот / финал ---------- */
  .finalcols { grid-template-columns: 1fr; gap: 22px; align-items: start; flex: none; min-height: auto; }
  .screen .ix140 { justify-content: flex-start; }
  .cta-h { font-size: 26px; max-width: none; }
  .screen .ix141 { max-width: none; margin: 12px 0 14px; }
  .slide.fin .fin-incl { margin: 10px 0 16px; }
  .slide.fin .fin-incl-h { font-size: 13px; }
  .slide.fin .checklist li { font-size: 14px; }
  .checklist li { font-size: 14px; }
  .ctabar { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta-btn { justify-content: center; font-size: 16px; padding: 14px 20px; min-height: 48px; }
  .cta-price { font-size: 14px; text-align: center; }
  /* аура и орбита шире экрана - обрезаем по сцене, чтобы не было бокового скролла */
  .finalscene { min-height: 300px; width: 100%; overflow: hidden; }
  .fl-chip { font-size: 11px; padding: 6px 9px; }
  .fl-chip.c1 { left: 0; }
  .fl-chip.c2 { right: 0; }
  .fl-chip.c3 { left: 0; }
  .fl-chip.c4 { right: 0; }
  .fl-chip.c5 { left: 0; }
  .fl-chip.c6 { right: 0; }
  .finalscene .fl-chip.lead-chip { font-size: 12px; }
  .fl-ticker-track { font-size: 10px; }

  /* ---------- доступность / производительность ---------- */
  /* приглушаем тяжёлые свечения на слабых телефонах */
  .glow { opacity: .8; }
}

/* ============================================================
   ПОДСКАЗКА &quot;СЛЕДУЮЩИЙ СЛАЙД&quot; - резинка (только мобильный)
   Три широких ненавязчивых шеврона в конце каждого слайда,
   кроме последнего. В покое - спокойная волна вниз. При
   протягивании вверх шевроны растягиваются как резинка (--pull
   задаёт deck.js), при достижении порога резинка рвётся и
   происходит переход на следующий слайд.
   ============================================================ */
.slide-next { display: none; }

@media (max-width: 768px), (max-height: 500px) {
  .slide-next {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 6px;
    /* пустое пространство снизу, в котором стрелки расходятся при прокрутке
       (1rem = 10px на ширине 390px) */
    padding-bottom: 4.5rem;
    pointer-events: none;
    color: var(--acc, var(--orange));
  }
  .slide-next .sn-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--t-faint);
    opacity: .8;
    transition: opacity .3s ease, letter-spacing .3s ease;
  }
  .dark .slide-next .sn-label,
  .ink .slide-next .sn-label { color: var(--d-faint); }

  /* стопка из трёх широких шевронов (без линии - резинка в самих стрелках) */
  .slide-next .sn-chevs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .slide-next .sn-chev {
    width: 34px;
    height: 15px;
    display: block;
    opacity: .32;
    transform: translateY(0) scaleY(1);
    transform-origin: top center;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
    animation: snFlow 1.7s ease-in-out infinite;
  }
  .slide-next .sn-chev:nth-child(1) { animation-delay: 0s; }
  .slide-next .sn-chev:nth-child(2) { animation-delay: .18s; }
  .slide-next .sn-chev:nth-child(3) { animation-delay: .36s; }

  /* спокойная ненавязчивая волна вниз */
  @keyframes snFlow {
    0%, 100% { opacity: .18; transform: translateY(0); }
    50%      { opacity: .5;  transform: translateY(4px); }
  }

  /* --- стрелки расходятся вниз по мере прокрутки (deck.js: .stretching + --pull) --- */
  .slide-next.stretching .sn-label {
    opacity: 1;
    letter-spacing: calc(.16em + var(--pull, 0) * .06em);
  }
  .slide-next.stretching .sn-chev {
    animation: none;
    transition: none;
    opacity: calc(.34 + var(--pull, 0) * .5);
  }
  /* верхний шеврон закреплён, нижние уезжают вниз - стрелки расходятся только вниз */
  .slide-next.stretching .sn-chev:nth-child(1) {
    transform: translateY(0) scaleY(calc(1 + var(--pull, 0) * .12));
  }
  .slide-next.stretching .sn-chev:nth-child(2) {
    transform: translateY(calc(var(--pull, 0) * 20px)) scaleY(calc(1 + var(--pull, 0) * .12));
  }
  .slide-next.stretching .sn-chev:nth-child(3) {
    transform: translateY(calc(var(--pull, 0) * 40px)) scaleY(calc(1 + var(--pull, 0) * .12));
  }

  /* доскроллено до конца - подсказка ярче (дальше свайп = следующий слайд) */
  .slide-next.ready .sn-chev { opacity: .95; }
  .slide-next.ready .sn-label { opacity: 1; color: var(--acc, var(--orange)); }

  @media (prefers-reduced-motion: reduce) {
    .slide-next .sn-chev { animation: none; opacity: .55; transition: opacity .2s linear; }
  }
}