/* ==========================================================================
   FirePulse — лендинг
   Вёрстка выполнена по макету (v2.pdf), базовая ширина макета — 1440px.
   Шрифт макета определён как Golos Text (подключён локально, subset lat+cyr).
   Все размеры/отступы desktop-версии взяты из макета в пикселях.
   ========================================================================== */

/* ------------------------------- fonts ---------------------------------- */
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/golos-cyrillic-400.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/golos-latin-400.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:500;font-display:swap;
  src:url(../assets/fonts/golos-cyrillic-500.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:500;font-display:swap;
  src:url(../assets/fonts/golos-latin-500.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:600;font-display:swap;
  src:url(../assets/fonts/golos-cyrillic-600.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:600;font-display:swap;
  src:url(../assets/fonts/golos-latin-600.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:700;font-display:swap;
  src:url(../assets/fonts/golos-cyrillic-700.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:700;font-display:swap;
  src:url(../assets/fonts/golos-latin-700.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:800;font-display:swap;
  src:url(../assets/fonts/golos-cyrillic-800.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:800;font-display:swap;
  src:url(../assets/fonts/golos-latin-800.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ------------------------------ variables ------------------------------- */
:root{
  --ink:#000;             /* заголовки, основной текст */
  --ink-2:#484953;        /* меню, подписи, футер */
  --ink-3:#1E2225;        /* заголовки карточек таймлайна */
  --muted:#8E9091;        /* описания шагов */
  --gray:#7F7F7F;         /* «Без FirePulse» и заголовки серых карточек */
  --gray-2:#A3A3A8;       /* текст серых карточек */
  --blue:#0078D7;
  --pink:#FC004D;
  --green:#00D795;
  --card-blue:#D2E2F9;
  --bg-gray:#F3F3F7;
  --bg-lblue:#EFF5FE;
  --grad-hero:linear-gradient(104deg,#C0D7F6 0%,#E4ECFB 100%);
  --grad-band:linear-gradient(112deg,#C0D7F6 0%,#E5EDFB 100%);
}

/* -------------------------------- reset ---------------------------------
   Ресеты сознательно ограничены .page и собственной разметкой модалки:
   форма Битрикс24 подгружается в модальное окно, которое лежит ЗА пределами
   .page, и приходит со своими стилями — глобальный сброс ломал бы ей
   кнопки, ссылки и отступы. Для лендинга это не меняет ничего: .page —
   корневая обёртка всего контента обеих страниц.
   ----------------------------------------------------------------------- */
/* :where() держит специфичность нулевой — ровно такой же, какой была у
   голых селекторов h1/a/img/button. Без него `.page h1` пересилил бы
   классы вроде .hero__title и снял бы с заголовков font-weight. */
:where(.page,.page *,.page *::before,.page *::after){box-sizing:border-box}
.fp-modal,.fp-modal__backdrop,.fp-modal__dialog,.fp-modal__close,
.fp-modal__state,.fp-modal__retry{box-sizing:border-box}

/* --------------------------- масштаб макета ------------------------------
   Все размеры desktop-версии заданы в rem от базового кегля 16px = 1rem.
   Базовый кегль привязан к ширине окна: 1.11111vw = 16px ровно при 1440px.
   Итог: 1440px -> 1.00x (пиксель-в-пиксель макет), 1920px -> 1.33x,
   2160px и шире -> 1.50x (потолок, дальше контент центрируется, а фоны
   секций продолжают тянуться на всю ширину окна через 100vw).
   Ниже 1440px кегль зафиксирован на 16px, работает адаптив в @media.
   ------------------------------------------------------------------------ */
html{
  -webkit-text-size-adjust:100%;
  font-size:clamp(16px, 1.11111vw, 24px);
  overflow-x:hidden;
  overflow-x:clip;
  /* жёлоб под скроллбар зарезервирован всегда: обе страницы и так длиннее
     экрана, поэтому визуально ничего не меняется, зато при блокировке
     прокрутки (открытая модалка, мобильное меню) страница не дёргается */
  scrollbar-gutter:stable;
}
/* прокрутка страницы заблокирована. Именно на html, а не на body:
   у html задан overflow-x:clip, поэтому прокруткой окна управляет он. */
html.is-locked{overflow:hidden}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.25rem;
  line-height:1.75rem;
  -webkit-font-smoothing:antialiased;
}
:where(.page) h1,:where(.page) h2,:where(.page) h3,:where(.page) p{margin:0;font-weight:inherit}
:where(.page) img{display:block;max-width:100%;height:auto;border:0}
/* <picture> — только обёртка для <source>: display:contents убирает её
   из раскладки, чтобы img остался ровно там же, где был без неё */
:where(.page) picture{display:contents}
:where(.page) a{color:inherit;text-decoration:none}
:where(.page) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.page) input{margin:0}
.fp-modal__close,.fp-modal__retry{font:inherit;background:none;border:0;cursor:pointer}

/* ------------------------------ структура ------------------------------- */
.page{width:90rem;margin:0 auto;position:relative}
.s{position:relative;width:90rem}
.at{position:absolute}

/* фоновая заливка секции на всю ширину окна */
.s::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1}
.s-compare::before,.s-f1::before,.s-f4::before,.s-calc::before,.s-footer::before{background:#fff}
.s-quote::before,.s-cta::before{background:var(--grad-band)}
.s-f2::before{background:var(--bg-lblue)}
.s-f3::before,.s-f5::before{background:var(--bg-gray)}
.s-timeline::before{background:#fff}
.s-hero::before{background:#fff}

/* ------------------------------- кнопки --------------------------------- */
.btn-row{display:flex;align-items:flex-start;gap:0.625rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:3rem;padding:0 1.5rem;border-radius:0.625rem;
  font-size:1rem;font-weight:600;line-height:1;white-space:nowrap;
  transition:opacity .18s ease,background-color .18s ease,color .18s ease;
}
.btn--dark{background:#000;color:#fff}
.btn--dark:hover{background:#1E2225}
.btn--ghost{border:0.09375rem solid var(--ink-3);color:var(--ink-3);background:transparent}
.btn--ghost:hover{background:var(--ink-3);color:#fff}

/* ------------------------------- логотип -------------------------------- */
/* Значения по макету: контейнер 143x32, gap 8, знак 28x28,
   текст Golos Text 600 / 24 / 32, letter-spacing -0.015em */
.logo{display:flex;align-items:center;gap:0.5rem;height:2rem}
.logo__mark{flex:none;width:1.75rem;height:1.75rem}
.logo__text{font-size:1.5rem;font-weight:600;line-height:2rem;letter-spacing:-0.015em;color:#000}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ================================ HERO ================================== */
.s-hero{height:63.3125rem}
/* Градиентный блок hero тянется на всю ширину окна, оставляя по бокам ту же
   узкую белую полоску, что и в макете (20px при масштабе 1x). Это важно для
   экранов шире 2160px, где масштаб уже упёрся в потолок и сам макет
   центрируется: полоска остаётся узкой, а не превращается в широкие поля. */
.hero__bg{
  position:absolute;top:0;bottom:0;
  left:calc(50% - 50vw + 1.25rem);width:calc(100vw - 2.5rem);
  background:var(--grad-hero);overflow:hidden;z-index:0;
}
/* скриншот внутри блока держим по центру макета, а не по краю фона.
   max-width:none снимает глобальный img{max-width:100%} (см. выше): без него
   на ширинах, где в .hero__bg остаётся меньше 87.5rem (сама .hero__bg чуть
   уже 100vw из-за полосы вертикального скролла), картинка мокапа сжималась
   по ширине без учёта высоты (та не резиновая — задана в rem). */
.hero__mock-b{left:calc(50% - 43.75rem);top:23.625rem;width:87.5rem;height:39.6875rem;max-width:none}

.site-header{position:absolute;left:0;top:0;width:90rem;height:5rem;z-index:3}
.logo--header{left:7rem;top:1.5rem}
.main-nav{left:57.85rem;top:1.675rem;display:flex;gap:1.16875rem}
.main-nav a{font-size:1.125rem;line-height:1.75rem;color:var(--ink-2);transition:color .18s}
.main-nav a:hover{color:#000}
.burger{display:none}

.hero__title{left:0;top:9.03125rem;width:90rem;text-align:center;
  font-size:3.4125rem;font-weight:700;line-height:3.375rem;letter-spacing:0}
.hero__sub{left:0;top:16.79375rem;width:90rem;text-align:center;font-size:1.125rem;line-height:1.75rem}
.hero__cta{left:31.9375rem;top:21.3125rem}

/* ============================ О РАЗРАБОТЧИКЕ ============================= */
.s-trust{padding:5rem 13.375rem 6rem}
.s-trust::before{background:#fff}

.trust__brand{display:flex;align-items:center}
.trust__mark{height:1.75rem;width:auto}

.trust__title{margin:1.5rem 0 0;font-size:2.925rem;font-weight:700;line-height:2.875rem}
.trust__p1{margin:1.5rem 0 0;font-size:1.25rem;line-height:1.75rem}
.trust__p2{margin:0.75rem 0 0;font-size:1.25rem;line-height:1.75rem;color:var(--ink-2)}

.trust__logos-viewport{margin:2.5rem 0 0}
.trust__logos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;
}
.trust-logo{
  display:flex;align-items:center;justify-content:center;
  height:7.5rem;background:var(--bg-gray);border-radius:1rem;padding:0 1.25rem;
}
.trust-logo__img{max-height:3.75rem;width:auto}

/* ============================ БЕЗ / С FirePulse ========================= */
.s-compare{height:41.625rem}
.cmp__title{font-size:1.95rem;font-weight:700;line-height:2.375rem;top:5.15rem}
.cmp__title--off{left:13.375rem;color:var(--gray)}
.cmp__title--on{left:53.1875rem;color:#000}

.tilt{
  width:23.25rem;height:8.25rem;background:#fff;border-radius:1rem;
  box-shadow:0 0.375rem 1.375rem rgba(0,0,0,.055);text-align:center;
}
.tilt--1{left:12.5625rem;top:10.0625rem;transform:rotate(3.15deg)}
.tilt--2{left:14.53125rem;top:18.44375rem;transform:rotate(-7.07deg)}
.tilt--3{left:11.0625rem;top:26.375rem;transform:rotate(-0.76deg)}
.tilt__t{margin:1.875rem 0 0;font-size:1.25rem;font-weight:700;line-height:1.625rem;color:var(--gray)}
.tilt__d{margin:0.5rem 0 0;font-size:1rem;line-height:1.2rem;color:var(--gray-2)}

.cmp__divider{left:39.9375rem;top:20.75rem;width:10.375rem;height:4.375rem}

.bcard{left:53.125rem;width:23.5rem;height:8.6875rem;background:var(--card-blue);border-radius:1rem}
.bcard--1{top:9.375rem}
.bcard--2{top:18.5625rem}
.bcard--3{top:27.75rem}
.bcard__t{position:absolute;left:0;right:0;text-align:center;font-size:1.25rem;font-weight:700;line-height:1.625rem}
.bcard__d{position:absolute;left:0;right:0;text-align:center;font-size:1rem;line-height:1.2rem;color:var(--ink-2)}
.bcard--1 .bcard__t{top:1.9625rem}.bcard--1 .bcard__d{top:4.09375rem}
.bcard--2 .bcard__t{top:1.275rem;transform:translateX(-0.375rem)}.bcard--2 .bcard__d{top:3.34375rem}
.bcard--3 .bcard__t{top:1.9625rem}.bcard--3 .bcard__d{top:3.96875rem}

/* ============================== ЦИТАТА ================================== */
.s-quote{height:23.6875rem}
/* Иллюстрация третьего блока.
   Значения макета: кадр 695x614, right:-19px, bottom:-76px от полосы,
   внутри кадра картинка 1280x1131 вписана по ширине и сдвинута на
   -28.77 / -0.85 px, кадр обрезает лишнее, затем всё отражено по X
   (transform: scaleX(-1)) и получает drop-shadow(0 59px 59px rgba(0,0,0,.09)).
   Здесь отражение запечено в сам файл, а кадр пересчитан в неотражённые
   координаты и подрезан по границам полосы — геометрия пиксель-в-пиксель та
   же, но блок не вылезает за правый край страницы и не даёт лишний оверфлоу.
   Кадр: left 764 (= правый край макета), top -159, 676x538 — верхние 32 px
   иллюстрации по макету заходят на белую секцию выше.
   clip-path обрезает тень по нижней границе полосы: в макете её закрывает
   собой следующая, белая секция. */
.quote__illo{
  left:47.75rem;top:-9.9375rem;width:42.25rem;height:33.625rem;
  background:url(../assets/images/quote/s3-illustration.webp) no-repeat 1.7981rem -0.0534rem/43.4375rem 38.4056rem;
  filter:drop-shadow(0 3.6875rem 3.6875rem rgba(0,0,0,.09));
  clip-path:inset(0);
  pointer-events:none;
}
.quote__title{left:13.375rem;top:4.88125rem;font-size:1.95rem;font-weight:700;line-height:2.25rem}
.quote__p{left:13.375rem;top:12.36875rem;font-size:1.25rem;line-height:1.75rem}
.quote__cta{left:13.375rem;top:15.875rem}

/* ============================== ФИЧИ (общее) ============================ */
.f__title{font-size:2.925rem;font-weight:700;line-height:2.875rem}
.s-f1 .f__title,.s-f2 .f__title,.s-f3 .f__title,.s-f4 .f__title{left:13.375rem}

/* ------------------------------- ФИЧА 1 --------------------------------- */
.s-f1{height:68.9375rem}
.s-f1 .f__title{top:6.3375rem}
.f1__p1{left:13.375rem;top:13.5375rem}
.f1__p2{left:13.375rem;top:18.0375rem}
.f1__mock{left:11.875rem;top:23.25rem;width:66.875rem;height:41.25rem}
/* Подписи «Веб-интерфейс» / «Приложение для техников»: по макету это
   чёрный с opacity 0.5 (в PDF тело глифов ровно 127 = 50 % от чёрного),
   а не отдельный серый цвет — поэтому подпись не спорит со скриншотом
   под ней, а уходит на второй план. */
.f1__label{font-size:0.75rem;line-height:0.875rem;color:var(--ink);opacity:.5}
.f1__label--app{left:70rem;top:28.425rem;width:5.625rem;text-align:center}
.f1__label--web{left:13.375rem;top:59.3rem}

/* ------------------------------- ФИЧА 2 --------------------------------- */
.s-f2{height:66.3125rem}
.s-f2 .f__title{top:6.3125rem}
.f2__mock{left:0;top:16.8125rem;width:49.375rem;height:45.625rem;z-index:1}
.f2__gantt{left:49.6875rem;top:23.6875rem;width:40.3125rem;height:24.0625rem;z-index:1}
.f2__p{left:51rem;top:18.1625rem;z-index:2}
.f2__p2{left:13.375rem;top:52.6rem;z-index:2}

/* ------------------------------ ТАЙМЛАЙН -------------------------------- */
.s-timeline{height:47.0625rem}
.tl__title{left:13.375rem;top:6.5125rem;font-size:2.925rem;font-weight:700;line-height:2.875rem}
.tl__sub{left:13.375rem;top:10.1625rem;font-size:1.25rem;line-height:1.75rem}
.tl__sub b{font-weight:700}

.tl__steps{left:13.375rem;top:14.8375rem;display:flex;gap:1.5rem}
.tl-step{width:17.375rem}
.tl-step__t{font-size:1.25rem;font-weight:700;line-height:1.625rem;color:var(--ink-3)}
.tl-step__d{margin-top:0.34375rem;font-size:1rem;line-height:1.40625rem;color:var(--muted)}

.tl__line{left:calc(50% - 50vw);top:23.728125rem;width:100vw;height:0.5625rem;background:var(--blue)}
.tl__times{left:13.375rem;top:22.6875rem;display:flex;gap:1.5rem;z-index:2}
.tl-time{
  width:17.375rem;height:2.625rem;display:inline-flex;align-items:center;
  font-size:1.775rem;font-weight:700;line-height:1;color:#fff;
}
.tl-time{width:auto;padding:0 0.96875rem;border-radius:0.625rem;background:var(--blue)}
.tl__times .tl-time{margin-right:0}
.tl__times{display:grid;grid-template-columns:repeat(4,18.875rem);gap:0}
.tl__times>*{justify-self:start}
.tl-time--first{padding-left:0.5rem;gap:0.3125rem}
.tl-time--first img{width:1.75rem;height:2.125rem}

.tl__cards{left:13.375rem;top:27rem;display:flex;gap:3.125rem}
.tl-card{
  position:relative;width:15.75rem;height:7.5625rem;background:#fff;border-radius:1rem;
  box-shadow:0 0.25rem 1.375rem rgba(0,0,0,.06);padding:0.8125rem 0.75rem 0;
}
.tl-card__t{font-size:1.0875rem;font-weight:500;line-height:1.375rem;color:var(--ink-3)}
.tl-card__d{margin-top:0.0625rem;font-size:0.8375rem;line-height:1.125rem;color:var(--muted)}
.tl-card__btn{
  position:absolute;left:0.75rem;top:4.75rem;width:5.6875rem;height:1.9375rem;border-radius:0.5rem;
  background:var(--blue);color:#fff;font-size:0.7875rem;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
}
.avatars{position:absolute;left:0.8125rem;top:4.625rem;display:flex}
.avatars i{
  width:2.0625rem;height:2.0625rem;border-radius:50%;margin-left:-0.65625rem;
  background:linear-gradient(180deg,#2E9BFA 0%,#2879F2 100%);
  color:#fff;font-size:0.8125rem;font-weight:600;font-style:normal;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 0.125rem #fff;
}
.avatars i:first-child{margin-left:0}
.check-badge{
  position:absolute;left:0.75rem;top:4.8125rem;width:2.125rem;height:2.125rem;border-radius:50%;
  background:var(--green);display:inline-flex;align-items:center;justify-content:center;
}
.tl-card--map{background:none;box-shadow:none;padding:0;overflow:visible}
.tl-card--map img{position:absolute;left:0.0625rem;top:-0.5625rem;width:15.875rem;height:8.5625rem}
.tl__cta{left:13.375rem;top:37.75rem}

/* ------------------------------- ФИЧА 3 --------------------------------- */
.s-f3{height:69rem}
.s-f3 .f__title{top:6.325rem}
.f3__p{left:13.375rem;top:16.4625rem;z-index:2}
.f3__dash{left:44.0625rem;top:14.6875rem;width:45.9375rem;height:37.8125rem}
.f3__brig{left:10.625rem;top:22.1875rem;width:33.75rem;height:30.75rem}
.f3__p2{left:13.375rem;top:52.9125rem;z-index:2}
.f3__p3{left:13.375rem;top:59.1625rem;z-index:2}

/* ------------------------------- ФИЧА 4 --------------------------------- */
.s-f4{height:53.5625rem}
.s-f4 .f__title{top:6.325rem}
.f4__p{left:13.375rem;top:16.4125rem;z-index:2}
/* Прежняя раскладка (карта узкой колонкой справа, left:46.875rem) резала
   исходный кадр — assets/images/f4/s8-map.webp/s8-bottom.webp это не "чистая карта",
   а верх/низ одной сцены (карта с наехавшей на неё карточкой "Заявки",
   как в PDF), обрезанные по одной прямой. Сжатая в узкую правую колонку,
   она оставляла пустую белую область слева — то самое "белое пятно".
   Пересобрано из PDF (секция Y 6079-6936) как один кадр на всю ширину
   секции, разрезанный на две картинки без сдвига. На телефоне вместо этой
   пары показывается заранее собранный кадр .f4__mobile — см.
   @media (max-width:767px) ниже. */
/* верхний кусок карты, узкой полосой справа от текста — карта в PDF
   начинается на уровне заголовка (сверху секции), а не только под
   абзацем; правый край совпадает с .f4__map/.f4__list (90rem), нижний
   край — с их верхним (21.9375rem), стык проверен попиксельно */
/* левый край карты растворяется в белом фоне колонки с текстом плавным
   градиентом (mask), а не жёсткой прямой границей блока */
.f4__mapside{
  left:53.125rem;top:0;width:36.875rem;height:21.9375rem;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%);
  mask-image:linear-gradient(to right,transparent,#000 14%);
}
.f4__map{left:0;top:21.9375rem;width:90rem;height:17.5rem}
.f4__list{left:0;top:39.4375rem;width:90rem;height:14.03125rem}

/* ------------------------------- ФИЧА 5 --------------------------------- */
.s-f5{height:53rem}
.f5__contracts{left:0;top:4.625rem;width:50rem;height:44.375rem}
.s-f5 .f__title{left:51rem;top:6.325rem;z-index:2}
.f5__p1{left:51rem;top:16.1625rem;z-index:2}
.f5__p2{left:51rem;top:20.6625rem;z-index:2}
.f5__plan{left:39.375rem;top:29rem;width:43.75rem;height:19.5rem;z-index:1}

/* ============================= КАЛЬКУЛЯТОР ============================== */
.s-calc{height:71.8125rem}
.calc__title{left:13.375rem;top:3.575rem;font-size:2.925rem;font-weight:700;line-height:2.875rem}
.calc__sub{left:13.375rem;top:10.0375rem;font-size:1.25rem;line-height:1.75rem}

.calc__chips{left:13.375rem;top:13.8125rem;width:63.75rem;display:flex;flex-wrap:wrap;gap:0.5rem}
.chip{
  display:inline-flex;align-items:center;gap:0.6875rem;height:3.8125rem;
  padding:0 1.3125rem 0 1.25rem;border:0.125rem solid transparent;border-radius:0.8125rem;
  background:var(--bg-gray);color:var(--ink);
  font-size:1.25rem;font-weight:500;line-height:1.625rem;cursor:pointer;
  transition:background-color .18s,border-color .18s,color .18s;
}
.chip input{position:absolute;opacity:0;width:0;height:0}
/* Размеры внутренностей иконки заданы в процентах от самой иконки, а не в
   абсолютных единицах: ниже 768px иконка уменьшается до 18px, и жёстко
   заданные под 22px отступы уводили галочку вниз-вправо, а пунктирный круг
   обрезался. В процентах всё масштабируется само. */
.chip__ico{
  flex:0 0 auto;width:1.375rem;height:1.375rem;border-radius:50%;position:relative;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='9.5' fill='none' stroke='%238F9092' stroke-width='1.8' stroke-dasharray='2.8 4.65' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.chip__tx{position:relative;top:-0.0625rem}
.chip.is-checked{background:#fff;border-color:var(--blue);color:var(--blue)}
.chip.is-checked .chip__ico{background:var(--blue)}
.chip.is-checked .chip__ico::after{
  content:"";position:absolute;
  left:27.2727%;top:31.8182%;width:40.9091%;height:22.7273%;   /* 6 / 7 / 9 / 5 px при 22px */
  border-left:0.125rem solid #fff;border-bottom:0.125rem solid #fff;transform:rotate(-45deg);
}
.chip:hover{border-color:#c9d7ea}
.chip.is-checked:hover{border-color:var(--blue)}

.calc__result{
  left:13.375rem;top:35.125rem;width:63.25rem;height:23.75rem;
  background:var(--bg-gray);border-radius:0 13.125rem 0 14rem;
}
.calc__res-top{position:absolute;left:0;right:0;top:2.7875rem;text-align:center;font-size:1.25rem;line-height:1.75rem}
.calc__res-num{
  position:absolute;left:0;right:0;top:3.80625rem;
  display:flex;align-items:baseline;justify-content:center;
  /* компенсация ширины знака «%», чтобы цифры стояли по центру блока */
  padding-left:5.75rem;
  font-size:14rem;font-weight:700;line-height:14rem;color:var(--pink);
  letter-spacing:-0.875rem;
}
.calc__res-pct{font-size:6.375rem;letter-spacing:0;margin-left:1.0625rem}
.calc__res-bottom{position:absolute;left:0;right:0;top:17.6625rem;text-align:center;font-size:1.25rem;line-height:1.75rem}

/* ============================== ФИНАЛЬНЫЙ CTA =========================== */
.s-cta{height:28.6875rem}
.cta__logo{left:36.5625rem;top:-6.75rem;width:18.4375rem;height:17.8125rem;z-index:2}
.cta__title{left:0;top:11.975rem;width:90rem;text-align:center;font-size:1.95rem;font-weight:700;line-height:2.375rem}
.cta__btns{left:31.9375rem;top:20.625rem}

/* ================================ ФУТЕР ================================= */
/* строка 1: логотип слева, телефон и почта — у правого края;
   строка 2: ссылки на документы в одну линию на всю ширину колонки —
   при 12px четыре полных названия занимают ≈940px из 1012px;
   строка 3: дисклеймер */
.s-footer{height:11.5rem}
.logo--footer{left:13.375rem;top:2.25rem}
/* левый и правый края футера совпадают с колонкой контента (13.375rem
   от краёв макета): логотип, дисклеймер и документы — от левого края,
   контакты — до правого. Документы — под дисклеймером, по макету:
   896×14px, top 143px, gap 16px; правый край строки — на уровне буквы «l»
   в адресе почты */
.foot__contacts{right:13.375rem;top:2.425rem;display:flex;gap:1.75rem}
.foot__docs{left:13.375rem;top:8.9375rem;width:56rem;height:0.875rem;display:flex;
  justify-content:space-between;gap:1rem;white-space:nowrap}
.foot__tel,.foot__mail,.foot__doc{color:var(--ink-2);transition:color .18s}
.foot__tel,.foot__mail{font-size:1.125rem;line-height:1.75rem}
.foot__doc{font-size:0.6875rem;line-height:0.875rem;letter-spacing:-0.01em}
.foot__tel:hover,.foot__mail:hover,.foot__doc:hover{color:#000}
.foot__disclaimer{left:13.375rem;top:4.75rem;width:63.25rem;font-size:0.75rem;line-height:1.125rem;color:var(--ink-2)}

/* мобильное меню (скрыто на desktop) */
.mobile-nav{display:none}

/* плавающие бейджи-уведомления в hero и липкая нижняя панель — только
   на ширине телефона, см. @media (max-width:767px) ниже */
.hero__badge,.bar,.f4__mobile,.m-tl{display:none}

/* ==========================================================================
   СТРАНИЦА-ДОКУМЕНТ (policy.html)
   Шапка и футер — те же секции и те же координаты, что на главной, поэтому
   визуально страница неотличима от лендинга. Тело документа — поток:
   колонка 48rem по центру, типографика из макета (Golos Text, 20/28 —
   основной текст, 31.2 — заголовки разделов, 18 — мелкий текст).
   ========================================================================== */
.s-dochead{height:5rem}
.s-dochead::before{background:#fff}

.s-doc{padding-bottom:6rem}
.doc{width:48rem;margin:0 auto}

.doc-title{
  margin:3.5rem 0 0;font-size:2.55rem;font-weight:700;line-height:1.14;
  letter-spacing:-0.01em;text-align:center;
}
.doc-h2{
  margin:3.25rem 0 0;font-size:1.5rem;font-weight:700;line-height:1.35;
  scroll-margin-top:2rem;
}
.doc-secnum{color:var(--blue)}
.doc-h2--app{margin-top:5rem;padding-top:2.5rem;border-top:0.0625rem solid #E4E8EF;text-align:center}
.doc-appsub{margin:0.5rem 0 0;font-size:1rem;line-height:1.5rem;color:var(--ink-2);text-align:center}
.doc-h3{margin:1.75rem 0 0;font-size:1.25rem;font-weight:700;line-height:1.5rem;text-align:center}

.doc-p,.doc-cl{margin:1.125rem 0 0;font-size:1.125rem;line-height:1.75rem;color:var(--ink)}
.doc-num{font-weight:600;color:var(--ink-3)}
.doc-note{margin:1.5rem 0 0;font-size:1rem;line-height:1.5rem;color:var(--ink-2)}

.doc-list{margin:0.75rem 0 0;padding:0;list-style:none}
.doc-list li{
  position:relative;margin-top:0.5rem;padding-left:1.5rem;
  font-size:1.125rem;line-height:1.75rem;color:var(--ink);
}
.doc-list li::before{
  content:"";position:absolute;left:0.3125rem;top:0.8125rem;
  width:0.3125rem;height:0.3125rem;border-radius:50%;background:var(--blue);
}
.doc-list--paren li{padding-left:2.5rem}
.doc-list--paren li::before{display:none}
.doc-mk{position:absolute;left:0;width:2.25rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* термины: определение под термином — так короткие строки не рвутся */
.doc-dl{margin:1.5rem 0 0}
.doc-dl dt{margin-top:1.25rem;font-size:1.125rem;font-weight:600;line-height:1.5rem;color:var(--ink)}
.doc-dl dd{margin:0.25rem 0 0;font-size:1.125rem;line-height:1.75rem;color:var(--ink-2)}

.doc-tablewrap{margin-top:1.5rem;overflow-x:auto}
.doc-table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.4rem}
.doc-table th,.doc-table td{
  padding:0.75rem 0.875rem;border:0.0625rem solid #E4E8EF;
  text-align:left;vertical-align:top;
}
.doc-table th{background:var(--bg-lblue);font-weight:600}
.doc-table td{color:var(--ink-2)}

.doc a{color:var(--blue);text-decoration:underline;text-decoration-thickness:0.0625rem;
  text-underline-offset:0.125rem;word-break:break-word}
.doc a:hover{color:#000}

.doc-back{width:48rem;margin:3rem auto 0;font-size:1.125rem;line-height:1.75rem}
/* та же ссылка над текстом документа — чтобы не листать до конца */
.doc-back--top{margin-top:2rem}
.doc-back--top+.doc>.doc-title:first-child{margin-top:1.5rem}
.doc-back a{color:var(--ink-2);text-decoration:none;transition:color .18s}
.doc-back a:hover{color:#000}

/* место и дата договора — по краям одной строки */
.doc-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 1rem;margin:2rem 0 0;
  font-size:1.125rem;line-height:1.75rem;color:var(--ink-2)}
/* пункты третьего уровня (2.1.1.) — с отступом от пунктов второго */
.doc-cl--sub{padding-left:1.5rem}
/* переключатель языка документа (RU / EN), см. п. 7 в js/script.js */
/* сегментированная плашка у правого края над заголовком */
.doc-switch{display:flex;width:max-content;margin:2rem 0 0 auto;padding:0.1875rem;
  border-radius:0.5rem;background:var(--bg-lblue)}
.doc-switch__btn{min-width:4.5rem;padding:0.25rem 0.625rem;border-radius:0.375rem;
  font-size:0.8125rem;line-height:1.125rem;font-weight:500;text-align:center;
  color:var(--ink-2);text-decoration:none;transition:color .18s,background-color .18s}
.doc .doc-switch__btn{color:var(--ink-2);text-decoration:none}
.doc .doc-switch__btn:hover{color:#000}
.doc .doc-switch__btn.is-active{background:#fff;color:#000;box-shadow:0 0.0625rem 0.25rem rgba(0,0,0,.08)}
.doc-lang>.doc-title:first-child{margin-top:1.5rem}
/* реквизиты сторон: две равные колонки */
.doc-table--req th,.doc-table--req td{width:50%}

/* ==========================================================================
   АДАПТИВ
   Ниже 90rem макет перестраивается в поток: секции получают авто-высоту,
   контент — центрированный контейнер, скриншоты интерфейса масштабируются.
   ========================================================================== */
@media (max-width:1439px){
  html{font-size:16px}
  .page,.s{width:100%}
  /* только горизонтальные отступы: шорткат padding здесь обнулял бы
     padding-top/bottom, которые ниже задаются секциям */
  .s{height:auto;padding-left:40px;padding-right:40px}
  .at{position:static;left:auto;top:auto;right:auto;bottom:auto;width:auto;height:auto;transform:none}

  body{font-size:18px;line-height:26px}

  /* контейнер */
  /* страница-документ */
  .s-dochead{height:auto}
  .s-doc{padding:0 40px 72px}
  .doc,.doc-back{width:auto;max-width:768px}
  .doc-title{margin-top:32px;font-size:clamp(28px,3.4vw,40.8px)}
  .doc-h2{font-size:clamp(20px,2.2vw,24px)}
  .doc-p,.doc-cl,.doc-list li,.doc-dl dt,.doc-dl dd,.doc-back{font-size:17px;line-height:26px}

  .s-compare,.s-quote,.s-f1,.s-f2,.s-timeline,.s-f3,.s-f4,.s-f5,.s-calc,.s-cta,.s-footer,.s-trust{
    padding-top:80px;padding-bottom:80px;
  }
  .s-hero{padding:0}

  /* ---- HERO ---- */
  /* в потоке порядок: шапка → заголовок → подзаголовок → CTA → скриншот */
  .s-hero{height:auto;display:flex;flex-direction:column;overflow:hidden;padding:0}
  .s-hero::before{left:20px;right:20px;width:auto;background:var(--grad-hero)}
  .hero__bg{position:static;order:9;left:auto;right:auto;width:auto;background:none;
    margin:0 20px;padding:0}
  .site-header{position:static;width:auto;height:auto;display:flex;align-items:center;
    justify-content:space-between;padding:26px 60px;}
  .logo--header,.logo--footer{display:flex}
  .main-nav{display:flex;gap:24px}
  .hero__title{font-size:clamp(30px,4.2vw,54.6px);line-height:1.05;padding:0 40px;margin-top:56px}
  .hero__sub{font-size:clamp(15px,1.4vw,18px);line-height:1.55;padding:0 40px;margin-top:22px}
  .hero__cta{justify-content:center;margin:28px 0 0;padding:0 40px}
  .hero__mock-b{left:auto;width:100%;height:auto;margin:44px 0 0}

  /* ---- сравнение ---- */
  .s-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;align-items:start}
  .cmp__title{font-size:clamp(24px,2.4vw,31.2px);line-height:1.2;margin-bottom:10px}
  .cmp__title--off{grid-column:1;grid-row:1}
  .cmp__title--on{grid-column:2;grid-row:1}
  .tilt--1{grid-row:2}.tilt--2{grid-row:3}.tilt--3{grid-row:4}
  .bcard--1{grid-row:2}.bcard--2{grid-row:3}.bcard--3{grid-row:4}
  .tilt{grid-column:1;width:100%;max-width:372px;height:auto;padding:24px 20px}
  .tilt--1{transform:rotate(2deg)}
  .tilt--2{transform:rotate(-4deg)}
  .tilt--3{transform:rotate(-1deg)}
  .tilt__t{margin:0}
  .cmp__divider{display:none}
  .bcard{grid-column:2;width:100%;max-width:376px;height:auto;padding:22px 18px}
  .bcard__t,.bcard__d{position:static}
  .bcard__d{margin-top:6px}

  /* ---- цитата ---- */
  .s-quote{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;align-items:center}
  .quote__title{grid-column:1;font-size:clamp(24px,2.4vw,31.2px);line-height:1.16}
  .quote__p{grid-column:1;margin-top:22px}
  .quote__cta{grid-column:1;margin-top:26px}
  /* В потоке кадр макета не нужен: показываем иллюстрацию целиком и
     обрезаем прозрачные поля файла. Объект занимает в файле
     766x705 px из 1280x1131 со сдвигом 293/232 — отсюда проценты. */
  .quote__illo{grid-column:2;grid-row:1 / span 3;width:100%;aspect-ratio:766/705;
    background-size:167.1018% auto;background-position:57.0113% 54.4401%;
    filter:none;clip-path:none;justify-self:end;order:9}
  /* Ниже 1440 иллюстрация показывается максимум в 320 CSS px, поэтому
     копии 640px хватает даже при DPR 2. Проценты в background-size /
     background-position от размера файла не зависят, кадрирование то же. */
  .quote__illo{background-image:url(../assets/images/quote/s3-illustration-640.webp)}

  /* ---- фичи ---- */
  /* только для fixed-раскладки ≥1440px (двухколоночная верхушка f4);
     во flow f4__map/f4__list и так дают полный кадр без этой полосы */
  .f4__mapside{display:none}
  .f__title,.tl__title,.calc__title,.cta__title,.trust__title{font-size:clamp(26px,3.4vw,46.8px);line-height:1.05}
  .f1__p1,.f2__p,.f3__p,.f4__p,.f5__p1,.tl__sub,.calc__sub,.trust__p1{margin-top:24px}
  .f1__p2,.f2__p2,.f3__p2,.f3__p3,.f5__p2,.trust__p2{margin-top:16px}
  .trust__logos-viewport{margin-top:32px}
  .trust__logos{grid-template-columns:repeat(3,1fr)}
  .trust-logo{height:112px;padding:12px}
  .f1__mock,.f2__mock,.f2__gantt,.f3__dash,.f3__brig,.f4__map,.f4__list,.f5__contracts,.f5__plan{
    width:100%;height:auto;margin-top:40px;
  }
  /* f4__map и f4__list — верх и низ одного кадра (см. .f4__map выше),
     между собой должны идти встык, без зазора от общего правила */
  .f4__list{margin-top:0}
  .f1__label{margin-top:10px;font-size:12px;line-height:16px}
  .f1__label--app{text-align:left;width:auto}
  .s-f2{display:flex;flex-direction:column}
  .s-f5{display:flex;flex-direction:column}
  .s-f5 .f__title{order:-1}
  .f5__p1{order:-1}
  .f5__p2{order:-1}

  /* ---- таймлайн ---- */
  .tl__steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px;margin-top:44px}
  .tl-step{width:auto}
  .tl__line{display:none}
  .tl__times{display:none}
  .tl__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:36px}
  .tl-card{width:auto;height:auto;padding:16px 16px 74px}
  .tl-card--map{padding:0;min-height:137px}
  .tl-card--map img{position:static;width:100%;height:auto}
  .tl__cta{margin-top:36px}

  /* ---- калькулятор ---- */
  .calc__chips{width:auto;margin-top:32px}
  .chip{height:auto;padding:14px 20px;font-size:16px;line-height:22px}
  .calc__result{width:auto;height:auto;margin-top:56px;padding:44px 24px 48px;
    border-radius:0 140px 0 140px}
  .calc__res-top,.calc__res-num,.calc__res-bottom{position:static;margin:0 auto}
  .calc__res-num{font-size:clamp(110px,16vw,224px);line-height:1;letter-spacing:-.06em;margin:6px 0}
  .calc__res-pct{font-size:.46em;letter-spacing:0;margin-left:.1em}

  /* ---- CTA / футер ---- */
  /* В потоке подставляется копия с настоящей альфой (см. <picture> в HTML),
     поэтому режим наложения больше не нужен: раньше multiply не убирал
     белую подложку до конца и вокруг логотипа была видна светлая плашка. */
  .cta__logo{width:200px;height:auto;margin:0 auto 24px}
  .s-cta{text-align:center}
  .cta__title{font-size:clamp(22px,2.6vw,31.2px);line-height:1.2}
  .cta__btns{justify-content:center;margin-top:28px}
  .s-footer{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding-top:36px;padding-bottom:36px}
  .foot__contacts{gap:4px 28px;flex-wrap:wrap;margin-left:auto}
  .foot__tel,.foot__mail{font-size:16px;line-height:24px}
  /* документы — отдельной строкой; на узких экранах переносятся */
  .foot__docs{flex-basis:100%;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;white-space:normal}
  .foot__doc{font-size:12px;line-height:18px}
  .foot__disclaimer{flex-basis:100%;width:100%;margin-top:12px}
}

@media (max-width:1199px){
  .s{padding-left:32px;padding-right:32px}
  .site-header{padding:22px 32px}
  .hero__bg{padding:0 24px}
  .s-quote{grid-template-columns:minmax(0,1fr) 180px}
}

@media (max-width:991px){
  /* на узких экранах принудительные переносы строк отключаем */
  .page br{display:none}
  .s-compare{display:flex;flex-direction:column}
  .cmp__title--on{margin-top:32px}
  .tilt,.bcard{max-width:none}
  .s-quote{display:flex;flex-direction:column}
  .quote__illo{width:100%;max-width:320px;align-self:center;margin-top:24px}
  /* ---- таймлайн: возвращаем логику дня ----
     В макете это горизонтальная синяя полоса с бейджами времени, шагами
     сверху и карточками снизу. В одну колонку полоса не переносится, зато
     переносится сама последовательность: время -> шаг -> карточка, четыре
     раза. Контейнеры .tl__times/.tl__steps/.tl__cards получают
     display:contents, их дети становятся детьми секции, и порядок задаётся
     через order — поэтому разметку менять не пришлось. */
  .s-timeline{display:flex;flex-direction:column}
  .tl__steps,.tl__times,.tl__cards{display:contents}
  .tl__title{order:1}
  .tl__sub{order:2}
  .tl__times{display:contents}
  .tl__line{display:none}
  .tl-time{
    order:10;align-self:flex-start;height:auto;padding:7px 12px;
    font-size:20px;line-height:1.2;margin-top:30px;
  }
  .tl-time--first{padding-left:9px;gap:6px;margin-top:36px}
  .tl-time--first img{width:20px;height:24px}
  .tl-step{order:11;width:auto;margin-top:12px}
  .tl-card{order:12;width:auto;height:auto;margin-top:14px;padding:16px 16px 74px}
  .tl__times .tl-time:nth-child(2){order:20}
  .tl__steps .tl-step:nth-child(2){order:21}
  .tl__cards .tl-card:nth-child(2){order:22}
  .tl__times .tl-time:nth-child(3){order:30}
  .tl__steps .tl-step:nth-child(3){order:31}
  .tl__cards .tl-card:nth-child(3){order:32}
  .tl__times .tl-time:nth-child(4){order:40}
  .tl__steps .tl-step:nth-child(4){order:41}
  .tl__cards .tl-card:nth-child(4){order:42}
  .tl__cta{order:100;margin-top:36px}
  /* карточка с картой: в потоке ей нужна своя ширина, а не абсолютный кадр */
  .tl-card--map{padding:0;min-height:0}
  .tl-card--map img{position:static;width:100%;height:auto;border-radius:16px}

  /* ---- подписи к скриншоту: в потоке это легенда под картинкой,
     поэтому ставим их в порядке «веб -> приложение» и делаем маркеры ---- */
  .s-f1{display:flex;flex-direction:column}
  .f1__label{display:flex;align-items:baseline;gap:8px;margin-top:8px;opacity:1;color:var(--ink-2)}
  .f1__label::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
    background:var(--blue);transform:translateY(-2px)}
  .f1__label--web{order:8;margin-top:14px}
  .f1__label--app{order:9;text-align:left;width:auto}
  .main-nav{display:none}
  .burger{display:flex;flex-direction:column;justify-content:space-between;
    width:28px;height:20px}
  .burger span{display:block;height:2px;background:#000;border-radius:2px;transition:transform .2s,opacity .2s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  .mobile-nav{
    display:grid;position:fixed;left:0;right:0;top:0;z-index:50;
    background:#fff;padding:84px 32px 28px;gap:18px;
    box-shadow:0 18px 40px rgba(0,0,0,.12);
    transform:translateY(-100%);transition:transform .28s ease;
  }
  .mobile-nav.is-open{transform:translateY(0)}
  /* Панель меню выпадает из-под шапки и раньше накрывала её собой — бургер
     оказывался под панелью, и закрыть меню было нечем. Поднимаем шапку выше
     панели: бургер остаётся доступен и по aria-expanded превращается в
     крестик (см. правила поворота полосок ниже). Отступ сверху у панели
     (84px) как раз под высоту шапки. */
  .site-header{position:relative;z-index:60}
  .mobile-nav a{font-size:20px;font-weight:600}
  .mobile-nav__accent{color:var(--blue)}
  .mobile-nav__contacts{
    margin-top:16px;padding-top:16px;box-shadow:inset 0 1px 0 rgba(0,0,0,.08);
    display:flex;flex-direction:column;gap:6px;
  }
  .mobile-nav__contacts a{font-size:16px;font-weight:400;color:var(--ink-2)}

  /* Тач-таргеты. Рекомендация Apple — 44x44, Google — 48x48; у бургера
     область нажатия была 28x20. Полоски оставляем 28x20, а зону нажатия
     расширяем невидимым ::after — он абсолютный, поэтому не становится
     флекс-элементом и не двигает полоски. */
  .burger{position:relative}
  .burger::after{content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
  .mobile-nav{gap:6px}
  .mobile-nav a{display:flex;align-items:center;min-height:44px}
  .foot__contacts,.foot__docs{column-gap:24px;row-gap:0}
  .foot__docs{justify-content:flex-start}
  .foot__tel,.foot__mail,.foot__doc{display:inline-flex;align-items:center;min-height:44px}
}

/* ==========================================================================
   ТЕЛЕФОН (≤767px)
   Раньше это была отдельная страница mobile.html/css/mobile.js с другой,
   более нарядной вёрсткой (плавающие бейджи в hero, липкая нижняя панель,
   калькулятор-строки, таймлайн с точками вместо плашки времени). Здесь тот
   же визуальный язык перенесён на разметку index.html через @media — новых
   элементов в DOM минимум (бейджи hero, нижняя панель, контакты в меню,
   единый кадр карты .f4__mobile), всё остальное — только CSS поверх уже
   существующих классов. Контейнер держится в полосе 430px по центру, как и
   раньше у mobile.html, цветные подложки секций по-прежнему бегут во всю
   ширину окна через .s::before.
   ========================================================================== */
@media (max-width:767px){
  .page{max-width:430px;margin:0 auto}
  .s{padding-left:16px;padding-right:16px}

  .logo{gap:8px}
  .logo__mark{width:26px;height:26px}
  .logo__text{font-size:20px;line-height:26px}
  .logo--footer{margin-bottom:8px}

  .btn-row{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:10px;margin-top:24px}
  .btn{height:52px;padding:0 20px;border-radius:12px}
  .btn--dark{background:#1E2225;color:#CEE0F8}
  .btn--dark:hover{background:#000}
  .btn--ghost{border-color:#1E2225;color:#1E2225}
  .btn--ghost:hover{background:rgba(92,90,87,.1);color:#1E2225}

  /* ---- шапка: прилипает поверх hero, без собственного фона ----
     Пробовали закрасить шапку тем же градиентом (даже пересчитанным под
     тот же угол/цвета) — он всё равно рисуется отдельным от градиента
     секции слоем, и на стыке виден шов: это не ошибка в цвете (разница
     нашлась в единицы из 255), а полосы Маха — глаз резко подчёркивает
     любую границу между двумя независимо отрисованными, пусть и близкими
     по цвету, участками градиента. Бесшовно — только если шапка вообще
     не красит свой кусок заново, а даёт градиенту секции (.s-hero::before)
     просвечивать сквозь себя. */
  .site-header{
    position:sticky;top:0;z-index:60;padding:12px 16px;
    background:transparent;
    box-shadow:none;
  }
  /* .main-nav уже display:none с @media (max-width:991px) — на телефоне
     в шапке остаются только лого и бургер, как в m-header */
  .mobile-nav{padding:76px 16px 24px}
  /* бургер — геометрия из m-burger (44x44, полоски 22x2, gap 5px) вместо
     планшетной (28x20, justify-content:space-between); ::after там был
     невидимой зоной нажатия поверх маленькой кнопки — здесь сама кнопка
     уже 44x44, так что он не нужен */
  .burger{
    position:relative;width:44px;height:44px;margin-right:-10px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  }
  .burger::after{content:none}
  .burger span{width:22px;height:2px}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ---- HERO ---- */
  /* .s-hero::before{left:0;right:0} привязывал бы фон к .page (тот
     ограничен max-width:430px на этой ширине) — на любом окне шире 430px
     по бокам появлялись бы белые полосы. Возвращаем поведение как на
     десктопе (и как у остальных секций через .s::before без переопределения
     здесь): фон тянется от истинного края окна, а не от края .page. */
  .s-hero::before{left:calc(50% - 50vw);right:auto;width:100vw}
  .hero__bg{position:relative;margin:34px 0 0;padding:0;overflow:visible}
  .hero__title{padding:0 16px;margin-top:16px;font-size:27px;line-height:29px;letter-spacing:-0.015em}
  .hero__sub{padding:0 16px;margin-top:12px;font-size:15px;line-height:21px;color:var(--ink-2)}
  .hero__cta{padding:0 16px;margin-top:18px}
  .hero__cta .btn{height:46px}
  .hero__mock-b{margin:0;border-radius:0}

  .hero__badge{
    display:flex;position:absolute;z-index:2;align-items:center;gap:7px;
    padding:7px 11px 7px 8px;background:#fff;border-radius:11px;line-height:normal;
    box-shadow:0 0 0 .5px #DDDEDE,0 3.659px 16.467px rgba(0,0,0,.15);
  }
  .hero__badge--1{right:8px;top:-20px;transform:rotate(-2deg)}
  .hero__badge--2{right:8px;top:16px;transform:rotate(-2deg)}
  .hero__badge--3{left:22%;top:65%;transform:translate(-50%,-50%) rotate(-4deg)}
  .hero__badge--4{left:86%;top:83.5%;transform:translate(-50%,-50%) rotate(-2deg)}
  .hero__badge-ico{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center}
  .hero__badge-ico--green{background:var(--green)}
  .hero__badge-ico--blue{background:var(--blue)}
  .hero__badge-ico--pink{background:var(--pink)}
  .hero__badge-t{display:block;font-size:10.5px;font-weight:600;color:var(--ink-3)}
  .hero__badge-d{display:block;margin-top:1px;font-size:9px;color:var(--muted)}
  .hero__badge-count{
    position:absolute;right:-7px;top:-7px;height:16px;padding:0 6px;border-radius:100px;
    background:var(--pink);color:#fff;font-size:9.5px;font-weight:600;display:flex;align-items:center;
  }

  /* ---- сравнение ---- */
  /* .s-compare/.s-quote несут grid-gap ещё из раскладки ≥1440 (14px/24px) —
     она переживает переключение на flex-column в @media max-width:991px и
     складывалась бы с margin-top ниже, поэтому здесь обнуляем gap и весь
     вертикальный ритм отдаём явным margin-top на самих элементах. */
  .s-compare{padding-top:48px;padding-bottom:44px;gap:0}
  .cmp__title{font-size:26px;line-height:30px;letter-spacing:-0.015em}
  .tilt{padding:18px;border-radius:16px;text-align:left;box-shadow:0 0 0 .5px #DDDEDE,0 3.659px 16.467px rgba(0,0,0,.15)}
  .tilt--1{margin-top:20px;transform:rotate(-2.2deg)}
  .tilt--2{margin-top:14px;transform:rotate(1.6deg)}
  .tilt--3{margin-top:14px;transform:rotate(-1deg)}
  .tilt__t{font-size:17px;line-height:22px;font-weight:600}
  .tilt__d{margin-top:6px;font-size:15px;line-height:21px}
  .cmp__divider{display:block;width:150px;height:auto;margin:30px auto 26px}
  .cmp__title--on{margin-top:0}
  .bcard{border-radius:16px;padding:20px 18px}
  .bcard--1{margin-top:20px}
  .bcard--2,.bcard--3{margin-top:12px}
  .bcard__t,.bcard__d{text-align:left}
  .bcard__t{font-size:17px;line-height:22px;font-weight:600;color:#000}
  .bcard__d{font-size:15px;line-height:21px}

  /* ---- цитата ---- */
  .s-quote{padding-top:40px;padding-bottom:44px;gap:0}
  .quote__illo{order:-1;width:230px;margin:0 auto;filter:drop-shadow(0 24px 34px rgba(0,0,0,.14))}
  .quote__title{margin-top:20px;font-size:26px;line-height:31px;letter-spacing:-0.015em}
  .quote__p{margin-top:14px;font-size:16px;line-height:24px;color:var(--ink-2)}
  .quote__cta{margin-top:24px}

  /* ---- о разработчике ---- */
  .s-trust{padding-top:48px;padding-bottom:48px}
  .trust__title{font-size:26px;line-height:30px;letter-spacing:-0.015em}
  .trust__p1,.trust__p2{margin-top:14px;font-size:16px;line-height:24px;color:var(--ink-2)}

  /* ---- логотипы партнёров: бесшовная лента вместо сетки ----
     Разметка не меняется: тот же .trust__logos, но вместо grid — flex
     в одну строку шире экрана. Список дублируется скриптом (см.
     js/script.js, §5) только когда лента реально не помещается и
     пользователь не просил отключить анимацию — на случай, если карточек
     когда-нибудь станет мало, .trust__logos-viewport просто останется
     статичной лентой без анимации. */
  .trust__logos-viewport{
    margin:24px -16px 0;padding:0 16px;overflow:hidden;
    mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  }
  .trust__logos{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;width:max-content}
  .trust-logo{flex:none;padding:10px}

  .trust__logos-viewport.is-marquee .trust__logos{
    animation:trust-marquee var(--marquee-duration,24s) linear infinite;
    will-change:transform;
  }
  .trust__logos-viewport.is-marquee .trust__logos:hover{animation-play-state:paused}
  .trust__logos-viewport.is-scrollable{overflow-x:auto;-webkit-overflow-scrolling:touch}

  @keyframes trust-marquee{
    from{transform:translateX(0)}
    to{transform:translateX(calc(-1 * var(--marquee-distance,50%)))}
  }

  /* ---- фичи (общее) ---- */
  .s-f1,.s-f2,.s-f3,.s-f4,.s-f5{padding-top:48px;padding-bottom:48px}
  .f__title{font-size:26px;line-height:30px;letter-spacing:-0.015em}
  .f1__p1,.f1__p2,.f2__p,.f2__p2,.f3__p,.f3__p2,.f3__p3,.f4__p,.f5__p1,.f5__p2{
    margin-top:14px;font-size:16px;line-height:24px;color:var(--ink-2);
  }
  .f1__mock,.f2__mock,.f2__gantt,.f3__dash,.f3__brig,.f4__map,.f4__list{
    margin-top:22px;
  }
  /* подписи «Веб-интерфейс»/«Приложение для техников» — в mobile.html их
     не было, экран узкий и им негде стоять, не наезжая на скриншот */
  .f1__label{display:none}
  /* у s5-gantt-760.webp сверху лишняя пустая полоса — обрезаем кропом,
     без рамки/тени (карточка-обводка читалась как лишний полупрозрачный
     контур поверх картинки) — просто сама картинка */
  .f2__gantt{
    aspect-ratio:760/420;object-fit:cover;object-position:50% 100%;
  }
  .f3__brig{margin-top:14px}
  /* скриншоты гантта и дашборда обрезаны справа — по замыслу упираются
     в правый край экрана, поэтому выводим их за правый padding секции */
  .f2__gantt,.f3__dash{width:calc(100% + 16px);max-width:none;margin-right:-16px}
  /* мокап карточки задачи обрезан слева — упирается в левый край */
  .f2__mock{width:calc(100% + 16px);max-width:none;margin-left:-16px}
  /* карта объектов на телефоне — один заранее собранный кадр вместо
     связки f4__mapside/f4__map/f4__list (см. .f4__mobile в HTML) */
  .f4__mapside,.f4__map,.shot--list{display:none}
  .f4__mobile{display:block;margin:22px -16px 0;width:calc(100% + 32px);max-width:none}

  /* договоры + план обслуживания — коллаж внахлёст в общей рамке
     shot--contracts (см. HTML и комментарий там). Проценты подобраны под
     реальные пропорции мобильных копий: s9-contracts-760.webp — 760×675,
     s9-plan-760.webp — 760×339, рамка — 1330×710. */
  .shot--contracts{
    position:relative;margin:22px -16px 0;width:calc(100% + 32px);
    aspect-ratio:1330/710;
  }
  .f5__contracts,.f5__plan{position:absolute;margin:0;max-width:none}
  .f5__contracts{left:0;top:0;width:60.150%;height:100%}
  .f5__plan{left:47.368%;top:54.930%;width:52.632%;height:43.944%}

  /* ---- таймлайн: та же вертикальная линия с точками, что раньше была
     в mobile.html — отдельный блок .m-tl (см. разметку в HTML), у него
     вертикальная линия с точками. Ряды .tl__steps/.tl__line/.tl__times/
     .tl__cards (общая раскладка для планшета и десктопа) на этой ширине
     скрыты. ---- */
  .s-timeline{padding-top:48px;padding-bottom:44px}
  .tl__title{font-size:26px;line-height:30px;letter-spacing:-0.015em}
  .tl__sub{margin-top:12px;font-size:16px;line-height:24px;color:var(--ink-2)}
  .tl__steps,.tl__line,.tl__times,.tl__cards{display:none}

  /* .tl__title/.tl__sub несут order:1/2 из схемы @media (max-width:991px)
     для старых tl__times/tl__steps/tl__cards (order:10..42) — без своего
     order блок .m-tl (по умолчанию order:0) вставал бы перед заголовком */
  .m-tl{display:block;order:5;position:relative;margin-top:28px;padding-left:38px}
  /* Линия — не один сплошной блок на весь .m-tl (высота списка зависит от
     переносов текста и высоты карточек, поэтому фиксированный bottom не
     мог гарантированно упираться в последнюю точку — "12:00"), а отдельный
     отрезок между каждой парой точек, растянутый на ::before самого шага.
     Так последний отрезок физически кончается на точке "12:00" и дальше
     не тянется, у последнего шага (:last-child) отрезка нет вовсе. */
  .m-tl__line{display:none}
  .m-tl__step{position:relative;padding-bottom:28px}
  .m-tl__step:last-child{padding-bottom:0}
  .m-tl__step:not(:last-child)::before{
    content:"";position:absolute;left:-27px;top:28px;bottom:-16px;width:6px;border-radius:3px;
    background:linear-gradient(180deg,#0078D7 0%,#2FB4FF 100%);
  }
  .m-tl__step:first-child::before{top:31px}
  .m-tl__dot{
    position:absolute;left:-38px;top:4px;width:24px;height:24px;margin-left:2px;
    border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--blue);
  }
  .m-tl__dot--first{
    top:1px;width:30px;height:30px;margin-left:0;background:var(--blue);box-shadow:none;
    overflow:hidden;display:flex;align-items:center;justify-content:center;
  }
  .m-tl__dot--first img{width:17px;height:auto}
  .m-tl__time{font-size:20px;line-height:24px;font-weight:700;color:var(--blue)}
  .m-tl__step-title{margin-top:8px;font-size:18px;line-height:23px;font-weight:600;color:var(--ink-3)}
  .m-tl__step-desc{margin-top:4px;font-size:15px;line-height:21px;color:var(--muted)}
  .m-tl__card{
    margin-top:12px;background:#fff;border-radius:16px;padding:16px;
    box-shadow:0 0 0 .5px #DDDEDE,0 3.659px 16.467px rgba(0,0,0,.15);
  }
  .m-tl__card-title{font-size:16px;line-height:21px;font-weight:600;color:var(--ink-3)}
  .m-tl__card-desc{margin-top:4px;font-size:14px;line-height:20px;color:var(--muted)}
  .m-tl__card-btn{
    display:inline-flex;align-items:center;justify-content:center;margin-top:12px;
    height:36px;padding:0 16px;border-radius:10px;background:var(--blue);color:#fff;
    font-size:14px;font-weight:600;
  }
  .m-tl__avatars{display:flex;margin-top:12px}
  .m-tl__avatars i{
    width:32px;height:32px;margin-left:-8px;border-radius:50%;color:#fff;
    font-style:normal;font-size:13px;font-weight:600;
    display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff;
  }
  .m-tl__avatars i:first-child{margin-left:0;background:var(--blue)}
  .m-tl__avatars i:nth-child(2){background:#2FB4FF}
  .m-tl__avatars i:nth-child(3){background:#8438FF}
  .m-tl__card--map{padding:0;overflow:hidden}
  .m-tl__card--map img{width:100%;height:auto;display:block}
  .m-tl__card--done{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .m-tl__card--done>span:first-child{display:flex;flex-direction:column}
  .m-tl__card--done .m-tl__card-desc{margin-top:4px}
  .m-tl__check{
    flex:none;width:40px;height:40px;border-radius:50%;background:var(--green);
    display:flex;align-items:center;justify-content:center;
  }

  /* ---- калькулятор: чипы становятся строками на всю ширину ---- */
  .s-calc{padding-top:48px;padding-bottom:52px}
  .calc__title{font-size:26px;line-height:30px;letter-spacing:-0.015em}
  .calc__sub{margin-top:12px;font-size:16px;line-height:24px;color:var(--ink-2)}
  .calc__chips{margin-top:22px;gap:8px}
  .chip{
    width:100%;justify-content:flex-start;height:auto;padding:14px 16px;
    border-radius:14px;border:0;background:#fff;color:var(--ink);
    box-shadow:inset 0 0 0 .5px rgba(138,135,132,.4);
    font-size:15px;line-height:20px;font-weight:400;gap:12px;
  }
  .chip__ico{width:22px;height:22px;background:none;box-shadow:inset 0 0 0 2px rgba(138,135,132,.45)}
  .chip.is-checked{background:rgba(0,120,215,.06);box-shadow:inset 0 0 0 2px var(--blue)}
  .chip.is-checked .chip__ico{background:var(--blue);box-shadow:none}
  .chip.is-checked .chip__tx{font-weight:500}

  .calc__result{margin-top:28px;padding:34px 20px 38px;border-radius:0 90px 0 90px}
  .calc__res-top,.calc__res-bottom{font-size:16px;line-height:22px;color:var(--ink-2)}
  /* padding-left:5.75rem из базовых стилей — компенсация под знак «%»
     в fixed-раскладке (≥1440px), при узком блоке на телефоне вместо
     центровки сдвигала «50%» далеко вправо. Сбрасываем. */
  .calc__res-num{padding-left:0;font-size:96px;letter-spacing:-0.05em;margin-top:2px}
  .calc__res-bottom{margin-top:14px}

  /* ---- CTA / футер ---- */
  .s-cta{padding-top:44px;padding-bottom:48px}
  .cta__logo{width:168px;margin:0 auto}
  .cta__title{margin-top:18px;font-size:24px;line-height:30px;letter-spacing:-0.015em}
  /* padding-bottom с запасом под липкую нижнюю панель (см. .bar ниже):
     она зафиксирована поверх страницы и не скрывается у футера, поэтому
     без этого отступа кнопки закрывали бы собой текст дисклеймера */
  .s-footer{flex-direction:column;align-items:flex-start;gap:4px;padding-top:32px;
    padding-bottom:calc(108px + env(safe-area-inset-bottom))}
  /* на телефоне четыре названия в строку не влезают — столбиком */
  .foot__contacts{margin-left:0}
  .foot__docs{flex-direction:column;align-items:flex-start}

  /* ---- липкая нижняя панель — появляется по скролу (см. js/script.js) ---- */
  .bar{
    display:flex;position:fixed;left:50%;bottom:0;z-index:55;width:100%;max-width:430px;
    transform:translateX(-50%) translateY(120%);gap:8px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    box-shadow:inset 0 1px 0 rgba(0,0,0,.08),0 -8px 20px rgba(0,0,0,.06);
    transition:transform .28s ease;
  }
  .bar.is-visible{transform:translateX(-50%) translateY(0)}
  /* Две кнопки равной ширины (flex:1 1 0). «Попробовать бесплатно» и «Заказать демо» */
  .bar__cta,.bar__ghost{
    flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
    height:48px;padding:0 10px;border-radius:12px;text-align:center;
    font-size:15px;line-height:18px;font-weight:600;
  }
  .bar__cta{background:#1E2225;color:#CEE0F8}
  .bar__ghost{box-shadow:inset 0 0 0 1px #1E2225;color:#1E2225}

  /* ---- страница-документ (policy.html) ---- */
  .s-doc{padding:0 16px 56px}
  .doc-table{font-size:14px;line-height:20px}
  .doc-table th,.doc-table td{padding:10px}
}

/* ==========================================================================
   МОДАЛЬНОЕ ОКНО С ФОРМОЙ БИТРИКС24
   Разметка модалки лежит вне .page (см. блок reset выше), поэтому форма
   приходит со своими стилями и не попадает под сброс лендинга.
   Собственные размеры модалки — в px, а не в rem: окно не должно
   масштабироваться вместе с макетом на FHD/4K, иначе поля формы Битрикса
   (они в px) перестанут совпадать с рамкой окна.
   ========================================================================== */
.fp-modal{position:fixed;top:0;bottom:0;left:0;width:100vw;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:24px}
.fp-modal[hidden]{display:none}

.fp-modal__backdrop{position:absolute;inset:0;background:rgba(11,18,32,.55);
  opacity:0;transition:opacity .2s ease}

.fp-modal__dialog{
  position:relative;width:100%;max-width:576px;
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:#fff;border-radius:24px;
  box-shadow:0 24px 64px rgba(11,18,32,.22);
  padding:28px 24px 24px;
  opacity:0;transform:translateY(12px) scale(.985);
  transition:opacity .2s ease,transform .2s ease;
}
.fp-modal.is-open .fp-modal__backdrop{opacity:1}
.fp-modal.is-open .fp-modal__dialog{opacity:1;transform:none}

.fp-modal__close{
  position:absolute;right:12px;top:12px;z-index:2;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;color:#484953;background:#fff;
  transition:background-color .18s ease,color .18s ease;
}
.fp-modal__close:hover{background:#F3F3F7;color:#000}
.fp-modal__close:focus-visible{outline:2px solid #0078D7;outline-offset:2px}
.fp-modal__close svg{display:block}

/* заголовок нужен только скринридеру: свой заголовок формы приходит
   из настроек формы Битрикса, дублировать его не нужно */
.fp-modal__srtitle{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.fp-modal__state{
  min-height:180px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;
  font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;line-height:24px;color:#484953;
}
.fp-modal__state[hidden]{display:none}
.fp-modal__spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid #D2E2F9;border-top-color:#0078D7;
  animation:fp-spin .8s linear infinite;
}
@keyframes fp-spin{to{transform:rotate(360deg)}}
.fp-modal__retry{
  height:40px;padding:0 18px;border-radius:10px;background:#000;color:#fff;
  font-size:15px;font-weight:600;transition:background-color .18s ease;
}
.fp-modal__retry:hover{background:#1E2225}
.fp-modal__fallback{margin:0;font-size:15px;line-height:22px;color:#484953}
.fp-modal__fallback a{color:#0078D7}

/* контейнер формы Битрикса — намеренно без своих правил внутри:
   любое правило отсюда пересилило бы классы Битрикса по специфичности */
.fp-modal__form{min-width:0}
.fp-modal__form[hidden]{display:none}

/* ---- вариант для документа: широкое окно с лентой страниц,
   крестик — белый, на затемнённом фоне в углу экрана ---- */
.fp-modal--doc{padding:56px 72px}
.fp-modal--doc .fp-modal__backdrop{background:rgba(11,18,32,.8)}
.fp-modal--doc .fp-modal__dialog{
  max-width:1000px;height:calc(100vh - 112px);height:calc(100dvh - 112px);
  max-height:none;overflow:hidden;padding:0;border-radius:16px;background:#525659;
}
/* договор показываем картинками страниц, а не PDF: у встроенного
   просмотрщика браузера есть кнопки «Скачать» и «Печать». Картинки не
   выделяются, не перетаскиваются и не ловят правый клик (pointer-events),
   а прозрачный слой поверх не даёт сохранить их через контекстное меню */
.fp-modal__pages{position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:24px;display:flex;flex-direction:column;
  align-items:center;gap:16px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.fp-modal__pages:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.fp-modal__page{display:block;width:100%;max-width:880px;height:auto;aspect-ratio:1240/1754;
  background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.35);pointer-events:none;
  -webkit-user-drag:none}
/* защита от выделения и копирования текста на странице договора */
[data-fp-protect]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media print{
  .fp-modal--doc,[data-fp-protect]{display:none !important}
}
.fp-modal--doc .fp-modal__close{
  position:fixed;right:20px;top:20px;width:44px;height:44px;
  color:#fff;background:transparent;opacity:0;transition:opacity .2s ease,background-color .18s ease;
}
.fp-modal--doc.is-open .fp-modal__close{opacity:1}
.fp-modal--doc .fp-modal__close:hover{background:rgba(255,255,255,.12);color:#fff}
.fp-modal--doc .fp-modal__close:focus-visible{outline-color:#fff}

@media (prefers-reduced-motion:reduce){
  .fp-modal--doc .fp-modal__close{transition:none}
  .fp-modal__backdrop,.fp-modal__dialog{transition:none}
  .fp-modal__dialog{transform:none}
  .fp-modal__spinner{animation-duration:1.6s}
  .burger span,.mobile-nav,.bar,.chip,.chip__ico{transition:none}
  .trust__logos-viewport.is-marquee .trust__logos{animation:none}
}

/* на телефоне — лист во весь экран */
@media (max-width:600px){
  .fp-modal{padding:0}
  .fp-modal__dialog{
    max-width:none;border-radius:0;
    min-height:100vh;min-height:100dvh;
    max-height:100vh;max-height:100dvh;
    padding:56px 16px 24px;transform:none;
  }
  .fp-modal.is-open .fp-modal__dialog{transform:none}
  .fp-modal__close{right:8px;top:8px}
  .fp-modal--doc .fp-modal__dialog{height:100vh;height:100dvh;padding:0}
  .fp-modal__pages{padding:60px 8px 16px;gap:8px}
}