/* ============================================================
   Приборка — стиль сайта. 30.08.2026
   Палитра проверена по WCAG: текст 4.5, интерфейсные границы 3.0.
   Считалось скриптом scratchpad/check_palette.py, не на глаз.
   ============================================================ */

:root{
  /* фоны: тёплый песок вместо белого — под длинное чтение */
  --bg:#F6F3EE; --surf:#FFFFFF; --surf2:#EDE8E0; --deep:#12171F; --deep2:#1A212C;

  /* текст */
  --ink:#17140F; --ink2:#4A443C; --ink3:#6E665B;
  --on-deep:#F2EEE7; --on-deep2:#AFA79B;

  /* линии: тонкая декоративная и плотная для полей ввода */
  --line:#E0D9CE; --line-in:#93866F; --line-deep:rgba(242,238,231,.16);

  /* действие: жжёный кирпич. Зелёный намеренно не берём —
     он занят светофором в отчётах, иначе кнопка спорит с показателем */
  --acc:#B03C0A; --acc-h:#8E2F06; --acc-sub:#FDF1EA; --acc-deep:#F5A623;

  /* кнопка связи: охра из «Таитянского идола» Гогена — картины, где
     живут наши песок, кирпич и почти чёрный. Тон и насыщенность
     картины, светлота подобрана до контраста 4,5 с белым значком
     (Пигмент, obratnyj_podbor.py и vidzhet_cveta.py). Выбор Олега 11.09. */
  --svz:#A76900; --svz-h:#905900;

  /* язык данных, только в цифрах и значках */
  --ok:#15683F; --warn:#8A5A08; --crit:#A32017;

  --fh:"Unbounded","Segoe UI",Arial,sans-serif;
  --fb:"Manrope","Segoe UI",Arial,sans-serif;
  --fm:"JetBrains Mono",Consolas,monospace;

  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px; --s6:78px; --s7:110px;
  --wrap:1200px;
  /* углы малые: знак «П» прямоугольный, скруглять сильно — спорить с ним */
  --r:10px; --r-s:6px;
  --sh:0 1px 2px rgba(23,20,15,.05), 0 8px 24px rgba(23,20,15,.06);
  --sh-2:0 2px 4px rgba(23,20,15,.06), 0 18px 44px rgba(23,20,15,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}

/* Атрибут hidden прячет элемент, только пока никакое правило не задало
   этому элементу display. Любое авторское display:grid/flex/block по
   классу перебивает встроенное [hidden]: авторские стили сильнее
   браузерных при любой специфичности. Так выпадающий список услуг
   висел раскрытым на всех 43 страницах — скрипт исправно ставил
   hidden, а .menu__sp{display:grid} его отменял. */
[hidden]{display:none !important}

/* Шапка липкая и высотой 74 px на всех ширинах: без отступа заголовок
   якоря уезжает под неё. Одного scroll-padding-top хватает и на переход
   по ссылке, и на scrollIntoView; вместе со scroll-margin-top они
   складываются и промахиваются вдвое. */
html{scroll-behavior:smooth;scroll-padding-top:90px}
/* overflow-wrap и у текста: слово без пробелов шире колонки вылезало
   за край — «ПОЛУЧИТЬ.ДАННЫЕ.СВОДНОЙ.ТАБЛИЦЫ» в статье про Excel на
   360 px уходило на 24 px за экран. Переносится только такое слово. */
body{margin:0;background:var(--bg);color:var(--ink);
     font:400 17px/1.62 var(--fb);-webkit-font-smoothing:antialiased;
     overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
/* Ссылка в тексте без своего класса иначе неотличима от текста: 21.09 таких было 96.
   :where() обнуляет вес, поэтому оформление блоков (стенд на тёмном, цены, таблицы) главнее. */
:where(main p, main figcaption) a:where(:not([class])){color:var(--acc);
  border-bottom:1px solid rgba(176,60,10,.35);transition:border-color .15s}
:where(main p, main figcaption) a:where(:not([class])):hover{border-bottom-color:var(--acc)}
/* overflow-wrap: длинные слова вроде «персональных» в крупном
   заголовке шире узкого экрана и утаскивают за собой всю страницу.
   На 320 px это ломало политику и согласие. */
h1,h2,h3{margin:0;font-family:var(--fh);font-weight:600;line-height:1.1;
  overflow-wrap:break-word;
         letter-spacing:-.025em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
/* Нумерованные сетки — шаги и «боли» — рисуют номер сами, счётчиком
   «01, 02». Браузерные «1.» и отступ в 40 px здесь лишние: на телефоне
   выходило «2. 02», и весь список уезжал вправо. Обычные нумерованные
   списки в тексте статей этим не задеты. */
ol.steps,ol.pain{margin:0;padding:0;list-style:none}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

/* Ссылка «к содержимому»: первое, на что попадает клавиатура.
   Без неё на каждой странице приходится проходить всю шапку —
   двенадцать ссылок меню, телефон и кнопку. Видна только когда
   на неё встали, поэтому глазами её никто не заметит. */
.propusk{position:absolute;left:-9999px;top:0;z-index:200;
  padding:11px 18px;background:var(--acc);color:#fff;
  font:600 15px var(--fb);border-radius:0 0 var(--r) 0}
.propusk:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s4)}
@media(max-width:700px){.wrap{padding:0 var(--s3)}}

/* мелкая моно-подпись: ей набраны все служебные надписи */
.lab{font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.16em;
     text-transform:uppercase;color:var(--ink3)}
.num{font-family:var(--fm);font-weight:700;letter-spacing:-.03em;
     font-variant-numeric:tabular-nums}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
     padding:14px 26px;border-radius:var(--r-s);border:1px solid transparent;
     font:600 16px var(--fb);cursor:pointer;transition:.18s var(--ease);
     background:var(--acc);color:#fff}
.btn:hover{background:var(--acc-h)}
.btn--gh{background:transparent;color:var(--ink);border-color:var(--line-in)}
.btn--gh:hover{background:var(--surf2);border-color:var(--ink)}

/* ---------- кнопки демо ----------
   Раньше здесь стоял знак ▶ прямо в тексте. Это символ шрифта, и каждая
   система рисует его по-своему: iPhone подставляет цветную картинку
   эмодзи — синий квадрат с белым треугольником, компьютер — простой
   чёрный треугольник. Олег 12.09.2026: «значок выглядит на компьютере
   и на мобильном по-разному». Свой значок рисуем сами.

   Кнопка тёмная — тем же цветом, что подвал и тёмные врезки. Сначала
   кружок был кирпичным, как акцент: он стоял в одной строке с кирпичной
   кнопкой «Рассчитать проект», глаз читал их одним пятном, и значок
   терялся. Бирюзу примеряли следом, но она вводила в палитру чужой цвет.
   Олег 12.09.2026: «кнопку с тёмным фоном как в блоках или подвале
   и белый значок плей мерцающий». Так нового цвета не появляется вовсе:
   тёмный у нас уже есть, а белый кружок с тёмным треугольником — то,
   как выглядит любой проигрыватель. */
.btn--demo{gap:0;background:var(--deep);border-color:var(--deep);
  color:var(--on-deep)}
.btn--demo:hover{background:var(--deep2);border-color:var(--deep2);color:#fff}
.btn__pusk{display:grid;place-items:center;flex:none;position:relative;
  width:23px;height:23px;margin-right:11px;border-radius:50%;
  background:#fff;transition:transform .18s var(--ease)}
.btn__pusk svg{width:11px;height:11px;fill:var(--deep);margin-left:1.5px}
.btn--demo:hover .btn__pusk{transform:scale(1.08)}

/* Значок мерцает, когда кнопка появляется на экране: три белых волны
   от края кружка и лёгкий толчок. Класс вешает pr-anim.js один раз
   на кнопку — дальше она стоит спокойно и не отвлекает от чтения.
   Мерцание бесконечным не делаем: страницы длинные, текст читают,
   и точка, которая пульсирует под глазом всё время, мешает. */
@keyframes pr-pusk-volna{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  70%,100%{box-shadow:0 0 0 12px rgba(255,255,255,0)}
}
@keyframes pr-pusk-tolchok{
  0%,100%{transform:scale(1)}
  30%{transform:scale(1.14)}
}
.btn--demo.pusk .btn__pusk{animation:pr-pusk-volna 1.4s var(--ease) 3,
  pr-pusk-tolchok 1.4s var(--ease) 3}
@media(prefers-reduced-motion:reduce){
  .btn--demo.pusk .btn__pusk{animation:none}
}
.btn--sm{padding:10px 18px;font-size:15px}
.btn--deep{background:var(--acc-deep);color:var(--deep)}
.btn--deep:hover{background:#FFC552}

/* ---------- шапка ---------- */
/* Один ряд: знак, меню, «Демо» и кнопка. Прилипает к самому верху. */
.hdr{position:sticky;top:0;z-index:50;background:rgba(246,243,238,.92);
     backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:var(--s4);height:74px}
.logo{display:flex;align-items:center;gap:11px;flex:none}
/* flex:none обязателен: в узкой колонке подвала знак иначе
   сжимается до 8 px по ширине, оставаясь 30 по высоте */
.logo svg{width:30px;height:30px;flex:none;color:var(--acc)}
.logo b{font-family:var(--fh);font-weight:600;font-size:22px;letter-spacing:-.03em}
.logo i{display:block;font-style:normal;font:500 11px/1.25 var(--fm);
        color:var(--ink3);max-width:190px;letter-spacing:.01em}
/* Восемь пунктов. С прежним просветом строка шапки требовала 1207 px
   при доступных 1180 и не помещалась даже на большом мониторе; после
   добавления «Звонков» запаса не осталось совсем. Обёртка шире 1200
   не бывает ни на каком мониторе, поэтому просвет и кегль поджаты
   всегда, а не в отдельной точке: восемь пунктов встают в 1200. */
.menu{display:flex;gap:10px;margin-left:auto;font-size:15px;
  font-weight:500}
.menu a{padding:6px 0;border-bottom:2px solid transparent;color:var(--ink2)}
.menu a:hover{color:var(--ink);border-color:var(--acc)}
/* Услуги сложены в список: восемь пунктов в строку не помещались,
   а убрать их из меню нельзя — по ним приходят. Открывается кнопкой,
   а не наведением: на ноутбуке с сенсорным экраном наведения нет. */
.menu__gr{position:relative;display:flex;align-items:center}
.menu__k{font:inherit;color:var(--ink2);background:none;border:0;cursor:pointer;
  padding:6px 0;border-bottom:2px solid transparent;display:flex;
  align-items:center;gap:5px}
.menu__k::after{content:"";width:5px;height:5px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform .16s var(--ease)}
.menu__k:hover{color:var(--ink);border-color:var(--acc)}
.menu__k[aria-expanded=true]{color:var(--ink);border-color:var(--acc)}
.menu__k[aria-expanded=true]::after{transform:rotate(-135deg) translateY(-1px)}
.menu__sp{position:absolute;top:100%;left:-14px;margin-top:9px;min-width:216px;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);padding:7px;display:grid;gap:1px;z-index:60}
.menu__sp a{display:block;padding:9px 11px;border-radius:6px;border:0;
  color:var(--ink2);white-space:nowrap}
.menu__sp a:hover{background:var(--surf2);color:var(--ink)}
@media(max-width:1120px){.menu{display:none}}

/* Расшифровка под названием нужна как раз на телефоне: «приборка»
   в разговорном русском — это уборка, и без пояснения название
   двусмысленно. Прятать её при прокрутке смысла нет: шапка и с ней,
   и без неё ровно 74 px — её высоту задаёт кнопка меню. */
@media(max-width:1120px){
  .logo i{max-width:none;font-size:10.5px;letter-spacing:0}
}
@media(max-width:560px){
  .logo i{font-size:10px}
  .logo b{font-size:20px}
}
/* На 360 px шапке нужно 392 при 360 доступных: логотип с расшифровкой
   в одну строку занимает 209. Расшифровку не убираем — она и нужна
   как раз на телефоне, — а разрешаем ей переноситься. Логотип
   становится уже, шапка чуть выше, и всё помещается. */
@media(max-width:400px){
  .logo i{max-width:132px;line-height:1.2}
  .hdr__demo{padding:8px 14px;font-size:14px}
}
/* Ниже 340 px (старые iPhone SE) места нет физически: даже с переносом
   логотипу нужно больше, чем остаётся после кнопки и меню. Расшифровку
   здесь убираем — навигация важнее пояснения. */
@media(max-width:340px){
  .logo i{display:none}
  .logo b{font-size:18px}
  .logo{gap:8px}
  .hdr__in{gap:10px}
  .hdr__demo{padding:8px 12px}
}

/* ---------- первый экран ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
      border-bottom:1px solid var(--line)}
.hero__txt{padding:var(--s7) var(--s4) var(--s6);
           max-width:calc(var(--wrap)/2);margin-left:auto;width:100%}
/* Размеры заголовков — средний вариант, выбор Олега 11.09.2026.
   До этого все пять правил были записаны без пробелов вокруг «+»,
   браузер их выбрасывал, и заголовки стояли в размере по умолчанию:
   34 / 25,5 / 19,9 px на любой ширине. Нижняя граница теперь равна
   тем самым размерам — на телефоне ничего не меняется; на компьютере
   главный растёт до 42 px, разделы до 31, внутренние h1 до 38.
   Внутри clamp пробелы вокруг «+» обязательны. */
.hero h1{font-size:clamp(2.125rem, 1.35rem + 1.6vw, 2.6rem);margin:var(--s2) 0 var(--s3)}
.hero__sub{font-size:19px;color:var(--ink2);max-width:33em}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
            margin:var(--s4) 0 var(--s3)}
.tlink{display:inline-flex;align-items:center;gap:7px;font:600 15.5px var(--fb);
       color:var(--acc);border-bottom:1px solid transparent;padding-bottom:2px}
.tlink:hover{border-color:var(--acc)}
.hero__facts{display:flex;flex-direction:column;gap:7px;font-size:14.5px;color:var(--ink3)}
.hero__facts li{display:flex;gap:9px;align-items:baseline}
.hero__facts b{flex:none;width:6px;height:6px;background:var(--acc);
                border-radius:1px;transform:translateY(-3px);font-size:0}
.hero__pic{position:relative;min-height:520px;background:var(--surf2)}
.hero__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero__txt{padding:var(--s6) var(--s3) var(--s5);max-width:none;margin:0}
  .hero__pic{min-height:300px;order:-1}
}
/* Телефон: на первом экране кнопка дороже большой фотографии.
   Замер 18.09.2026 на 390×844: фотография 300 px плюс абзац на шесть строк
   уводили «Рассчитать проект» на 1014 точек, за край экрана. Фотографию
   держим в 16:9, кнопки ставим сразу под заголовком, абзац уходит под них.
   Порядок задаётся флексом, разметка не меняется. */
@media(max-width:640px){
  .hero__pic{min-height:0;aspect-ratio:16/9}
  .hero__txt{display:flex;flex-direction:column}
  .hero__txt > .lab{order:1;align-self:start}
  .hero__txt > h1{order:2;margin-bottom:0}
  .hero__act{order:3;margin:var(--s3) 0}
  .hero__sub{order:4}
  .hero__facts{order:5;margin-top:var(--s3)}
}
/* Невысокий экран ноутбука (1366×768 — самый частый у собственников):
   с заголовком 42 px и строкой контактов кнопка «Рассчитать проект»
   уходила под край на 80 px. Воздух сверху здесь дороже кнопки —
   ужимаем отступы первого экрана, только на экранах ниже 820 px. */
@media(min-width:961px) and (max-height:820px){
  .hero__txt{padding-top:var(--s5)}
  .hero h1{margin-bottom:var(--s2)}
  .hero__sub{font-size:17.5px}
  .hero__act{margin-top:var(--s3)}
}

/* ---------- полоса чисел ---------- */
.strip{background:var(--deep);color:var(--on-deep)}
.strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);
           padding:var(--s4) var(--s4)}
.strip__i b{display:block;font-family:var(--fm);font-weight:700;font-size:29px;
            letter-spacing:-.03em;color:var(--acc-deep)}
.strip__i span{display:block;font-size:14px;color:var(--on-deep2);margin-top:3px}
.strip__note{padding:0 var(--s4) var(--s4);font:400 15px/1.55 var(--fb);
             color:var(--on-deep2);max-width:62rem}
@media(max-width:800px){.strip__in{grid-template-columns:1fr 1fr}}

/* ---------- секции ---------- */
.sec{padding:var(--s7) 0}
.sec--tint{background:var(--surf2)}
.sec--deep{background:var(--deep);color:var(--on-deep)}
.sec--deep h2,.sec--deep h3{color:var(--on-deep)}
.sec--deep .lab{color:var(--on-deep2)}
.sec__hd{max-width:44em;margin-bottom:var(--s5)}
.sec__hd h2{font-size:clamp(1.6rem, 1.1rem + 1.1vw, 1.95rem);margin:var(--s2) 0 var(--s3)}
.sec__hd p{color:var(--ink2);font-size:18px}
.sec--deep .sec__hd p{color:var(--on-deep2)}

/* ---------- подбор по программе ---------- */
.pick{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
      box-shadow:var(--sh);overflow:hidden}
.pick__top{padding:var(--s4);border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--s3)}
.chip{padding:9px 15px;border-radius:var(--r-s);border:1px solid var(--line-in);
      background:var(--surf);font:600 14.5px var(--fb);color:var(--ink2);
      cursor:pointer;transition:.15s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
.pick__body{display:grid;grid-template-columns:1.1fr 1fr;gap:0}
.pick__col{padding:var(--s4)}
.pick__col+.pick__col{border-left:1px solid var(--line);background:var(--surf2)}
.pick__col h3{font-family:var(--fb);font-weight:700;font-size:17px;margin-bottom:var(--s3)}
.pick__list li{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);
               font-size:15.5px;color:var(--ink2)}
.pick__list li:last-child{border-bottom:0}
/* маркер строки — квадратик, как в остальных списках сайта.
   Слова «ЕСТЬ» и «+7 ДН» повторяли заголовок колонки и читались загадкой */
.pick__list b{flex:none;width:6px;height:6px;background:var(--acc);border-radius:1px;
              margin-top:9px;font-size:0}
.pick__q{font-family:var(--fb);font-weight:700;font-size:18px;margin-bottom:var(--s3)}
/* что даёт выбранная программа — сразу под чипами, а не в конце
   правой колонки: строка описывает программу, а не список доработок */
.pick__gives{margin-top:var(--s3);padding:12px 15px;border-radius:var(--r-s);
             background:var(--acc-sub);font-size:15px;color:var(--ink2)}
@media(max-width:800px){.pick__body{grid-template-columns:1fr}
  .pick__col+.pick__col{border-left:0;border-top:1px solid var(--line)}}

/* ---------- плитки-переходы ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.tile{display:block;background:var(--surf);border:1px solid var(--line);
      border-radius:var(--r);padding:var(--s4);transition:.18s var(--ease)}
.tile:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--line-in)}
.tile h3{font-family:var(--fb);font-weight:700;font-size:19px;margin-bottom:9px}
.tile p{font-size:15.5px;color:var(--ink2)}
.tile__go{display:inline-flex;align-items:center;gap:7px;margin-top:var(--s3);
          font:600 14.5px var(--fb);color:var(--acc)}
@media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tiles{grid-template-columns:1fr}}

/* ---------- линейки с фото ---------- */
.line{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center;
      padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line--flip .line__pic{order:2}
.line__pic{border-radius:var(--r);overflow:hidden;background:var(--surf2);
           aspect-ratio:4/3}
.line__pic img{width:100%;height:100%;object-fit:cover}
.line h3{font-size:clamp(1.25rem, 1rem + .6vw, 1.55rem);margin:var(--s2) 0 var(--s3)}
.line p{color:var(--ink2)}
.line__met{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
           gap:var(--s3) var(--s4);margin-top:var(--s4);
           padding-top:var(--s3);border-top:1px solid var(--line)}
.line__met div b{display:block;font-family:var(--fm);font-weight:700;font-size:22px;
                 letter-spacing:-.03em}
.line__met div span{font:500 12px var(--fm);letter-spacing:.1em;text-transform:uppercase;
                    color:var(--ink3)}
@media(max-width:840px){.line{grid-template-columns:1fr;gap:var(--s3)}
  .line--flip .line__pic{order:0}}

/* ---------- чем отличается от обычного дашборда ---------- */
/* Пара «обычный / с помощником» внутри одной карточки: так видно,
   что сравнивается, и на узком экране половинки не разъезжаются
   по разным местам. */
.sravn{display:grid;gap:var(--s3)}
.sravn__p{background:var(--surf);border:1px solid var(--line);
          border-radius:var(--r);padding:var(--s4)}
.sravn__p h3{font-size:18px;margin-bottom:var(--s3)}
.sravn__two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.sravn__two > div{display:grid;gap:6px;align-content:start;min-width:0}
.sravn__two span{font:500 11.5px var(--fm);letter-spacing:.09em;
                 text-transform:uppercase;color:var(--ink3)}
.sravn__two p{font-size:15.5px;color:var(--ink2);margin:0}
.sravn__new{padding-left:var(--s4);border-left:2px solid var(--acc)}
.sravn__new span{color:var(--acc)}
@media(max-width:720px){.sravn__two{grid-template-columns:1fr;gap:var(--s3)}
  .sravn__new{padding-left:var(--s3)}}

/* три строчки под сравнением: что это меняет для компании */
/* Колонки заданы явно, а не через auto-fit: выгод четыре, и auto-fit
   на средних ширинах ставил три в ряд, оставляя четвёртую одну.
   4 / 2x2 / 1 — сирот не бывает ни на одной ширине. */
.mensh{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);
       margin-top:var(--s5);padding-top:var(--s4);
       border-top:1px solid var(--line)}
.mensh div{min-width:0}
.mensh b{display:block;font-family:var(--fh);font-weight:600;font-size:17px;
         margin-bottom:6px}
.mensh p{font-size:15px;color:var(--ink2);margin:0}
@media(max-width:1200px){.mensh{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.mensh{grid-template-columns:1fr;gap:var(--s3)}}

/* кнопки под разделом, а не в первом экране */
.hero__act--posle{margin-top:var(--s5)}

/* ---------- отрасли ---------- */
.inds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.ind{display:block;border-radius:var(--r);overflow:hidden;background:var(--surf);
     border:1px solid var(--line);transition:.18s var(--ease)}
.ind:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.ind__pic{aspect-ratio:16/10;overflow:hidden;background:var(--surf2)}
.ind__pic img{width:100%;height:100%;object-fit:cover;transition:.4s var(--ease)}
.ind:hover .ind__pic img{transform:scale(1.03)}
.ind__txt{padding:var(--s3)}
.ind__txt h3{font-family:var(--fb);font-weight:700;font-size:17.5px;margin-bottom:6px}
.ind__txt p{font-size:14.5px;color:var(--ink3)}
.ind__go{display:inline-block;margin-top:10px;font:600 14px var(--fb);color:var(--acc)}
.ind:hover .ind__go{text-decoration:underline}
@media(max-width:900px){.inds{grid-template-columns:1fr 1fr}}
/* Шесть карточек столбиком с фото 16:10 занимали 3,6 экрана.
   На телефоне оставляем две колонки и подрезаем фото: отрасль
   узнаётся и по кусочку кадра, а список становится обозримым. */
@media(max-width:560px){
  .inds{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .ind__pic{aspect-ratio:3/2}
  .ind__txt{padding:var(--s2)}
  .ind__txt h3{font-size:15.5px}
  .ind__txt p{font-size:13.5px}
  .ind__go{font-size:13px;margin-top:8px}}
@media(max-width:360px){.inds{grid-template-columns:1fr}}

/* ---------- шаги ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);
       counter-reset:st}
.step{padding-top:var(--s3);border-top:2px solid var(--line-deep);counter-increment:st}
.sec:not(.sec--deep) .step{border-top-color:var(--ink)}
.step::before{content:counter(st,decimal-leading-zero);display:block;
              font:700 13px var(--fm);color:var(--acc);letter-spacing:.1em;
              margin-bottom:11px}
.sec--deep .step::before{color:var(--acc-deep)}
.step h3{font-family:var(--fb);font-weight:700;font-size:16.5px;margin-bottom:7px}
.step p{font-size:14.5px;color:var(--ink2)}
.sec--deep .step p{color:var(--on-deep2)}
/* Полоса шагов рассчитана на пять. Списков из трёх и четырёх
   хватает, и в пятиколоночной сетке они оставляли пустой столбец —
   ряд выглядел оборванным. */
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- каталог модулей ---------- */
.cat{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.cat__col{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
          padding:var(--s3)}
.cat__col h3{font-family:var(--fb);font-weight:700;font-size:16.5px;margin-bottom:var(--s2);
             padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.cat__col li{font-size:14.5px;color:var(--ink2);padding:5px 0}
@media(max-width:900px){.cat{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cat{grid-template-columns:1fr}}

/* ---------- цены ---------- */
/* auto-fit вместо жёстких четырёх колонок: сетка стоит и во всю ширину,
   и внутри узкой колонки страницы цен. Раскладка по ширине окна тут
   не работает — при окне 1024 места было 716, и карточки вылезали. */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s3)}
.plan{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
      padding:var(--s4);display:flex;flex-direction:column}
.plan--pick{border-color:var(--acc);box-shadow:var(--sh-2)}
.plan__tag{font:700 11.5px var(--fm);letter-spacing:.14em;text-transform:uppercase;
           color:var(--acc)}
.plan h3{font-family:var(--fb);font-weight:700;font-size:19px;margin:10px 0 var(--s2)}
.plan__p{font-family:var(--fm);font-weight:700;font-size:26px;letter-spacing:-.03em;
         margin-bottom:var(--s3)}
.plan__p--txt{font-family:var(--fb);font-weight:700;letter-spacing:-.01em}
.plan__p small{display:block;font:500 12.5px var(--fm);color:var(--ink3);
               letter-spacing:.06em;margin-bottom:2px}
.plan li{font-size:14.5px;color:var(--ink2);padding:6px 0;
         border-bottom:1px solid var(--line)}
.plan li:last-child{border-bottom:0}
.plan .btn{margin-top:auto;width:100%}
.plan ul{margin-bottom:var(--s3)}

/* ---------- форма ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.form label{display:block;font:600 13.5px var(--fb);margin-bottom:7px;color:var(--on-deep)}
.form input,.form textarea,.form select{width:100%;padding:13px 15px;border-radius:var(--r-s);
  border:1px solid var(--line-in);background:var(--deep2);color:var(--on-deep);
  font:400 16px var(--fb)}
.form input::placeholder,.form textarea::placeholder{color:var(--on-deep2)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--acc-deep);
  outline-offset:1px;border-color:var(--acc-deep)}
.form__wide{grid-column:1/-1}
.form__ok{display:flex;gap:11px;align-items:flex-start;font-size:14px;
          color:var(--on-deep2)}
.form__ok input{width:18px;height:18px;flex:none;margin-top:2px;padding:0}
.form__ok a{color:var(--acc-deep);text-decoration:underline}
@media(max-width:700px){.form{grid-template-columns:1fr}}

/* ---------- подвал ---------- */
.ftr{background:var(--deep);color:var(--on-deep2);padding:var(--s6) 0 var(--s4);
     font-size:14.5px}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:var(--s4);
          padding-bottom:var(--s5);border-bottom:1px solid var(--line-deep)}
.ftr h2{margin:0 0 var(--s2);font:700 12px var(--fm);letter-spacing:.14em;
        text-transform:uppercase;color:var(--on-deep)}
.ftr li{padding:5px 0}
.ftr a:hover{color:var(--on-deep)}
.ftr__bot{padding-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s3);
          justify-content:space-between;font-size:13px}
.ftr .logo b{color:var(--on-deep)}
.ftr .logo svg{color:var(--acc-deep)}
@media(max-width:1080px){.ftr__top{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:800px){.ftr__top{grid-template-columns:1fr 1fr}}

/* обычная фраза, набранная как текст, а не как служебная подпись */
.note{margin-top:var(--s4);font-size:16px;color:var(--ink2)}
.note b{font-family:var(--fm);font-weight:700;color:var(--ink)}

/* ============================================================
   Внутренняя страница: решение / процесс / отрасль.
   По этому шаблону собираются 50 посадочных из struktura.md.
   ============================================================ */

.crumbs{padding:var(--s3) 0;font:500 13.5px var(--fb);color:var(--ink3)}
.crumbs a{color:var(--ink3)}
.crumbs a:hover{color:var(--acc)}
.crumbs span{margin:0 8px;opacity:.5}

.top{padding:var(--s4) 0 var(--s6);border-bottom:1px solid var(--line)}
.top h1{font-size:clamp(2.125rem, 1.4rem + 1.1vw, 2.4rem);margin:var(--s2) 0 var(--s3);
        max-width:19em}
.top__sub{font-size:19px;color:var(--ink2);max-width:40em}
.top__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
          margin-top:var(--s4)}

/* оглавление: и навигация, и заявка на расширенный сниппет */
.toc{position:sticky;top:96px;align-self:start}
.toc h2{font:700 12px var(--fm);letter-spacing:.14em;text-transform:uppercase;
        color:var(--ink3);margin-bottom:var(--s2)}
.toc li{padding:6px 0;border-left:2px solid var(--line);padding-left:14px}
.toc li:hover{border-color:var(--acc)}
.toc a{font-size:15px;color:var(--ink2)}
.toc a:hover{color:var(--ink)}
/* пункт раздела, который сейчас на экране: ставит pr-anim.js (Олег 23.09) */
.toc li{transition:border-color .2s}
.toc a{transition:color .2s}
.toc li.toc__tek{border-color:var(--acc)}
.toc li.toc__tek a{color:var(--acc);font-weight:600}

/* Отступ только сверху и снизу. Было «padding:var(--s6) 0»: колонки
   всегда стоят на .wrap, и этот ноль стирал её боковые поля. На телефоне
   текст всех 44 внутренних страниц касался края экрана, на компьютере
   оглавление стояло на 34 px левее шапки и крошек. Найдено 11.09.2026. */
.cols{display:grid;grid-template-columns:230px 1fr;gap:var(--s6);
      padding-top:var(--s6);padding-bottom:var(--s6)}
@media(max-width:900px){.cols{grid-template-columns:1fr;gap:var(--s4)}
  /* на узком экране оглавление не прячем, а кладём наверх коробкой:
     иначе длинная страница читается как сплошная стена */
  .toc{position:static;background:var(--surf);border:1px solid var(--line);
       border-radius:var(--r);padding:var(--s3)}
  .toc h2{font-size:15px;margin-bottom:10px}
  .toc ul{display:flex;flex-wrap:wrap;gap:7px}
  .toc li{margin:0}
  .toc a{display:block;padding:7px 12px;border:1px solid var(--line);
         border-radius:var(--r-s);font-size:14px;background:var(--bg)}
  .toc li.toc__tek a{border-color:var(--acc)}}

/* текстовые блоки страницы */
.blk{padding-bottom:var(--s6);margin-bottom:var(--s6);border-bottom:1px solid var(--line)}
.blk:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.blk h2{font-size:clamp(1.6rem, 1.3rem + .5vw, 1.75rem);margin-bottom:var(--s3)}
.blk h3{font-family:var(--fb);font-weight:700;font-size:18px;margin:var(--s4) 0 var(--s2)}
.blk p{color:var(--ink2);margin-bottom:var(--s3);max-width:42em}
.blk p:last-child{margin-bottom:0}

/* боли: нумерованный список с крупной цифрой */
.pain{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);counter-reset:pn}
.pain li{counter-increment:pn;background:var(--surf);border:1px solid var(--line);
         border-radius:var(--r);padding:var(--s3)}
.pain li::before{content:counter(pn,decimal-leading-zero);display:block;
                 font:700 12px var(--fm);color:var(--acc);letter-spacing:.12em;
                 margin-bottom:9px}
.pain b{display:block;font-weight:700;margin-bottom:5px}
.pain span{font-size:15px;color:var(--ink2)}
@media(max-width:640px){.pain{grid-template-columns:1fr}}

/* экраны, которые получит клиент */
.scr{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center}
/* Картинку держим в её собственной пропорции и центрируем по списку.
   Раньше она тянулась на всю высоту списка: рамка получалась
   вертикальной (429x505), а все снимки здесь горизонтальные — 4:3
   и 16:9. object-fit:cover срезал треть кадра по бокам. Список
   из десяти пунктов задаёт высоту, подгонять под него фотографию
   нечем. Центрирование читается как задуманное, обрыв колонки — нет. */
.scr__img{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
          box-shadow:var(--sh);aspect-ratio:4/3}
.scr__img img{width:100%;height:100%;object-fit:cover;display:block}
/* Схема — не фотография: пропорция у неё своя, и обрезать её нельзя.
   На узком экране подставляется вертикальная раскладка, поэтому
   высота задаётся содержимым, а не рамкой. */
/* Схема на всю ширину колонки: в две колонки ей доставалось 548 px
   из 1200, и подписи переставали читаться. На узком экране картинка
   подменяется вертикальной раскладкой. */
.shema{margin:0 0 var(--s4)}
.shema img{width:100%;height:auto;display:block;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--sh)}
.shema figcaption{margin-top:11px;font-size:14.5px;color:var(--ink3);
  line-height:1.5}
.scr__list li{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);
              font-size:15.5px;color:var(--ink2)}
/* ссылка прямо в тексте пункта становилась вторым столбцом флекса
   и отлетала вбок — держим текст одним куском, но видом ссылки */
.scr__list li > a{display:contents;color:var(--acc)}
.scr__list li > a:hover{text-decoration:underline}
.scr__list li:last-child{border-bottom:0}
/* список без картинки рядом — в две колонки */
.scr__list--2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5)}
@media(max-width:760px){.scr__list--2{grid-template-columns:1fr}}
.scr__list b{flex:none;width:7px;height:7px;background:var(--acc);border-radius:1px;
             margin-top:9px;font-size:0}
@media(max-width:760px){.scr{grid-template-columns:1fr}}

/* таблица источников */
.tbl{width:100%;border-collapse:collapse;font-size:15.5px}
.tbl th{text-align:left;font:700 12px var(--fm);letter-spacing:.12em;
        text-transform:uppercase;color:var(--ink3);padding:0 14px 11px 0;
        border-bottom:1px solid var(--line-in)}
.tbl td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);
        color:var(--ink2);vertical-align:top}
.tbl td:first-child{color:var(--ink);font-weight:600}
.tbl a{color:var(--acc);border-bottom:1px solid transparent}
.tbl a:hover{border-color:var(--acc)}
.tag{display:inline-block;padding:3px 9px;border-radius:4px;font:700 11.5px var(--fm);
     letter-spacing:.06em}
.tag--now{background:rgba(21,104,63,.11);color:var(--ok)}
.tag--later{background:var(--acc-sub);color:var(--acc)}
/* Третье состояние: данных в базе нет, и витрина этого не исправит.
   Приём подсмотрен у конкурента: он помечает нехватку прямо на экране,
   рядом с показателем, который из-за неё не считается. Человек видит
   не рекламу доработки, а причину, по которой конкретная цифра пустая. */
.tag--dor{background:rgba(140,110,20,.13);color:#7A5E10}
.tag--dor a{color:inherit;border-bottom:1px dotted currentColor}
.tag--dor a:hover{border-bottom-style:solid}

/* ---------- чего не хватает в базе ---------- */
/* Блок ставится под таблицей источников: показывает, какой показатель
   не посчитается и почему. Не реклама доработки, а причина, по которой
   конкретная цифра будет пустой. */
.nehv{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.nehv h3{font-size:17px;margin-bottom:var(--s2)}
.nehv > p{font-size:15.5px;color:var(--ink2);margin-bottom:var(--s3)}
.nehv ul{display:grid;gap:var(--s2)}
.nehv li{display:grid;grid-template-columns:auto 1fr;gap:11px;
         align-items:start;font-size:15.5px;color:var(--ink2)}
.nehv li b{color:var(--ink)}
@media(max-width:560px){.nehv li{grid-template-columns:1fr;gap:5px}}

/* вопросы и ответы */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s3) 34px var(--s3) 0;
             font-weight:700;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:var(--s3);
                    font-family:var(--fm);font-weight:700;color:var(--acc);
                    font-size:20px;line-height:1.2}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:var(--s3);color:var(--ink2);max-width:44em}

/* перелинковка */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.rel a{display:block;padding:14px 16px;background:var(--surf);
       border:1px solid var(--line);border-radius:var(--r-s);font-size:15.5px;
       font-weight:600;transition:.15s var(--ease)}
.rel a:hover{border-color:var(--acc);color:var(--acc)}
@media(max-width:800px){.rel{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rel{grid-template-columns:1fr}}

/* врезка с призывом посреди длинного текста */
.cta{background:var(--deep);color:var(--on-deep);border-radius:var(--r);
     padding:var(--s4);display:flex;flex-wrap:wrap;align-items:center;
     gap:var(--s3);justify-content:space-between}
.cta b{display:block;font-family:var(--fh);font-weight:600;font-size:20px;
       letter-spacing:-.02em;margin-bottom:6px}
.cta span{color:var(--on-deep2);font-size:15.5px}

/* ============================================================
   Печать. Без этого Edge выбрасывает фоновые заливки, и тёмные
   секции уходят в PDF белыми.
   ============================================================ */

/* ============================================================
   Мобильное меню. Раньше навигация на узком экране просто
   пряталась — с телефона по сайту было не пройти.
   ============================================================ */
.burger{display:none;margin-left:auto;width:44px;height:44px;flex:none;
  border:1px solid var(--line-in);border-radius:var(--r-s);background:transparent;
  cursor:pointer;position:relative}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);
  transition:.22s var(--ease)}
.burger i:nth-child(1){top:14px} .burger i:nth-child(2){top:21px} .burger i:nth-child(3){top:28px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Меню выше экрана: шапка прилипшая, вместе с ней стоит и меню,
   и низ списка уезжал за край без всякой прокрутки — на экране
   740 px «Контакты» и кнопка были недоступны. Отсюда max-height
   и своя прокрутка; 75 px — высота ряда шапки. 12.09.2026 */
.mnav{display:none;border-top:1px solid var(--line);background:var(--bg);
  max-height:calc(100vh - 75px);overflow-y:auto;overscroll-behavior:contain}
@supports(height:100dvh){.mnav{max-height:calc(100dvh - 75px)}}
.mnav.on{display:block}
.mnav a{display:block;padding:15px var(--s4);border-bottom:1px solid var(--line);
  font-weight:600;font-size:17px}
.mnav a:last-of-type{border-bottom:0}
.mnav .btn{margin:var(--s3) var(--s4) var(--s4);width:calc(100% - var(--s4)*2)}

@media(max-width:1120px){
  .burger{display:block}
  .hdr__in > .btn{display:none}
}
@media(min-width:1121px){.mnav{display:none !important}}

/* ============================================================
   Защита от горизонтального переполнения.
   Элемент сетки по умолчанию не сжимается уже своего содержимого
   (min-width:auto). Одного <select> с длинным пунктом хватает,
   чтобы распереть всю страницу и обрезать текст на телефоне.
   ============================================================ */
.hero > *, .strip__in > *, .tiles > *, .inds > *, .steps > *, .cat > *,
.plans > *, .form > *, .cols > *, .row > *, .line > *, .pick__body > *,
.ftr__top > *, .scr > *, .pain > *, .rel > *{min-width:0}
.form select, .form input, .form textarea{min-width:0;max-width:100%}
.tbl{display:block;overflow-x:auto}      /* широкая таблица скроллится сама */

/* ============================================================
   Хаб решений: показать всю ширину продукта одной страницей,
   пока отдельные страницы ещё не написаны. Карточка без ссылки —
   это не «скоро», а описание: клик уводит на бриф, а не в 404.
   ============================================================ */
.fn{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
/* сквозной счёт карточек через обе секции: 01–16 свои данные,
   17–20 открытые. Сумма «двадцать функций» видна глазами. */
body{counter-reset:fnn}
.fn__i{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
       padding:var(--s3);display:flex;flex-direction:column;counter-increment:fnn}
.fn__i::before{content:counter(fnn,decimal-leading-zero);
               font:700 12px var(--fm);color:var(--acc);
               letter-spacing:.12em;margin-bottom:9px}
.fn__i h3{font-family:var(--fb);font-weight:700;font-size:17.5px;margin-bottom:8px}
.fn__i p{font-size:15px;color:var(--ink2);margin-bottom:var(--s2)}
.fn__min{margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line);
         font:500 13px var(--fm);color:var(--ink3);line-height:1.5}
.fn__min b{color:var(--ink2);font-weight:700}
.fn__go{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s2);
        font:600 14px var(--fb);color:var(--acc)}
.fn__go:hover{text-decoration:underline}
@media(max-width:960px){.fn{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.fn{grid-template-columns:1fr}}

/* три входа в каталог */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.way{display:block;background:var(--deep2);color:var(--on-deep);border-radius:var(--r);
     padding:var(--s4);transition:.18s var(--ease)}
.way:hover{background:#22303F}
/* 25.09: плитка со списком ссылок (оглавление «Экраны»), сама не ссылка */
.way--spisok:hover{background:var(--deep2)}
.way--spisok a{color:var(--on-deep);text-decoration:underline;text-decoration-color:rgba(242,238,231,.4);text-underline-offset:3px}
.way--spisok a:hover{text-decoration-color:currentColor}
.way b{display:block;font-family:var(--fh);font-weight:600;font-size:19px;
       letter-spacing:-.02em;margin-bottom:9px}
.way span{font-size:15px;color:var(--on-deep2)}
.way em{display:block;margin-top:var(--s3);font-style:normal;font:600 14px var(--fb);
        color:var(--acc-deep)}
/* Четыре типовых сценария: пары на широком экране, один столбец на телефоне. */
.ways--four{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){.ways{grid-template-columns:1fr}}
/* В колонке текста рядом с оглавлением (.cols) между 901 и 1120 px
   карточка в три колонки уже 133 px внутри, а «Составитель» набором
   Unbounded — 157: слово распирало сетку, и страница ехала вбок
   на 32 px (на 1024 — планшет в горизонтали). Там — по две. */
@media(min-width:901px) and (max-width:1120px){.cols .ways{grid-template-columns:1fr 1fr}}
.ways > *{min-width:0}

/* отраслевая карточка без ссылки: ширину показывает, кликать пока некуда */
.ind--flat{cursor:default}
.ind--flat:hover{box-shadow:none;transform:none}
.ind--flat:hover .ind__pic img{transform:none}

/* ============================================================
   Движение. Шесть мест, отобранных скиллом find-animation-opportunities.
   Всё остальное намеренно оставлено неподвижным: на странице
   девять тысяч пикселей текста, за которым человек и пришёл.
   ============================================================ */

/* нажатие: отклик на кнопку. 120 мс — предел, за которым
   нажатие начинает ощущаться заторможенным */
.btn{transition:background .18s var(--ease), border-color .18s var(--ease),
     color .18s var(--ease), transform .12s var(--ease)}
.btn:active{transform:scale(.98)}
.chip{transition:background .15s var(--ease), border-color .15s var(--ease),
      color .15s var(--ease), transform .12s var(--ease)}
.chip:active{transform:scale(.98)}

/* аккордеон вопросов: раскрывался рывком.
   ::details-content работает в Chrome и Edge; где не работает —
   поведение прежнее, ничего не ломается */
:root{interpolate-size:allow-keywords}
.faq details::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .22s var(--ease), content-visibility .22s allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* мобильное меню: выезжает из-под кнопки, а не возникает из ниоткуда */
.mnav.on{display:block;animation:mnav-in .2s var(--ease) both}
@keyframes mnav-in{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:none}}

/* подмена содержимого без скачка: подбор по программе, ответ помощника */
@keyframes swap-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}}
.swap-in{animation:swap-in .16s var(--ease) both}

/* ============================================================
   Для тех, кому движение противопоказано. Не выключаем всё
   подчистую: цвет и тень продолжают меняться, уходит только
   перемещение — именно оно вызывает недомогание.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.12s !important;
    transition-duration:.12s !important}
  html{scroll-behavior:auto}
  .tile:hover,.ind:hover{transform:none}
  .ind:hover .ind__pic img{transform:none}
  .btn:active,.chip:active{transform:none}
  .mnav.on,.swap-in{animation:none}
}

/* ---------- цены в нижнем блоке ---------- */
.pricebar{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);
          margin:var(--s4) 0 var(--s5);padding:var(--s4) 0;
          border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pricebar div b{display:block;font-family:var(--fm);font-weight:700;
                font-size:25px;color:var(--acc);letter-spacing:-.01em}
.pricebar div span{display:block;font-size:14.5px;color:var(--ink2);
                   margin-top:5px;line-height:1.45}
.pricebar__note{grid-column:1/-1;margin:0;font-size:14.5px;color:var(--ink3);
                max-width:80ch}
.pricebar__note a{color:var(--acc);text-decoration:none;
                  border-bottom:1px solid rgba(176,60,10,.35)}
.pricebar__note a:hover{border-bottom-color:var(--acc)}

/* на тёмном разделе — свои цвета */
.sec--deep .pricebar{border-top-color:rgba(242,238,231,.14);
                     border-bottom-color:rgba(242,238,231,.14)}
.sec--deep .pricebar div b{color:var(--acc-deep)}
.sec--deep .pricebar div span,
.sec--deep .pricebar__note{color:var(--on-deep2)}
.sec--deep .pricebar__note a{color:var(--acc-deep);
                             border-bottom-color:rgba(245,166,35,.4)}
.sec--deep .pricebar__note a:hover{border-bottom-color:var(--acc-deep)}
@media(max-width:760px){.pricebar{grid-template-columns:1fr;gap:var(--s3)}}

/* ---------- итог подбора ---------- */
.pick__itog{margin-top:var(--s3);padding:var(--s3);border-radius:var(--r-s);
  background:var(--acc-sub);border:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline}
.pick__itog b{font-family:var(--fm);font-weight:700;font-size:19px;color:var(--acc)}
.pick__itog span{font-size:15px;color:var(--ink2)}
.pick__itog a:not(.btn){color:var(--acc);font-weight:600}
.pick__sbros{margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
  font:500 14px var(--fb);color:var(--ink3);text-decoration:underline}
.pick__sbros:hover{color:var(--acc)}

.fon__snoska{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);
  font:500 13px var(--fb);color:var(--ink3)}

/* ---------- вопросы к помощнику ----------
   Той же формы, что исходящие пузыри в телефоне рядом: слева видно,
   как спрашивают, справа — как он отвечает. */
.vopr{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s3) 0}
.vopr span{background:var(--surf);border:1px solid var(--line);
  border-radius:15px 15px 4px 15px;padding:7px 13px;
  font:400 14px/1.4 var(--fb);color:var(--ink2)}
/* «и так далее» — не реплика, а пояснение: без пузыря */
.vopr span.vopr__esho{align-self:center;background:none;border:0;padding:2px 0;
  font:500 13.5px var(--fb);color:var(--ink3)}

/* сигналы: тот же пузырь, но входящий — угол срезан слева */
.vopr--vhod span{border-radius:15px 15px 15px 4px}
.vopr--vhod span::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--acc);margin-right:8px;vertical-align:1px}
.vopr--vhod span.vopr__esho::before{display:none}

/* блок помощника: телефону хватает узкой колонки, тексту нужна широкая */
.line--fon{grid-template-columns:1.16fr .84fr}
@media(max-width:840px){.line--fon{grid-template-columns:1fr}}

/* два равнозначных столбца текста — .cols для этого не годится,
   он рассчитан на узкое оглавление плюс широкий текст */
.para{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media(max-width:760px){.para{grid-template-columns:1fr;gap:var(--s4)}}

/* ---------- длина строки ----------
   Строка в 150 знаков читается тяжело: глаз теряет начало следующей.
   Держим текстовые абзацы в пределах девяноста. */
.note, .sec__hd p, .top__sub{max-width:72ch}
.blk > p, .blk > ul > li{max-width:76ch}

/* ---------- телефон с перепиской ----------
   Собран разметкой: на фотографии переписку не прочитать, а именно
   она и есть то, что мы показываем. */
.fon{--fon-bg:#EDE7DF; --fon-my:#F5A623; --fon-bot:#FFFFFF;
  width:100%;max-width:286px;margin:0 auto;position:relative;
  background:linear-gradient(150deg,#39404E 0%,#1B212C 24%,#12171F 58%,#2E3543 100%);
  border-radius:38px;padding:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,
             0 -1px 0 rgba(255,255,255,.06) inset,
             0 3px 9px rgba(23,20,15,.22), 0 26px 56px rgba(23,20,15,.24)}
/* кнопки на грани корпуса */
.fon::before,.fon::after{content:"";position:absolute;left:-2px;width:2px;
  border-radius:2px 0 0 2px;background:#2A303C}
.fon::before{top:112px;height:30px}
.fon::after{top:152px;height:52px}

.fon__ekran{position:relative;background:var(--fon-bg);border-radius:28px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 0 0 1px rgba(0,0,0,.55)}

/* вырез под камеру */
.fon__vyrez{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:70px;height:20px;border-radius:12px;background:#080B10;z-index:3}

/* статусная строка */
.fon__stat{display:flex;align-items:center;padding:11px 20px 5px;
  font:700 12px var(--fb);color:var(--ink);position:relative;z-index:2}
.fon__stat b{font-weight:700;letter-spacing:.02em}
.fon__znaki{margin-left:auto;display:flex;align-items:center;gap:5px}
.fon__znaki i{display:block;width:3px;background:var(--ink);border-radius:1px;
  font-style:normal}
.fon__znaki i:nth-child(1){height:4px}
.fon__znaki i:nth-child(2){height:6px}
.fon__znaki i:nth-child(3){height:8px}
.fon__znaki i:nth-child(4){height:10px}
.fon__bat{width:22px;height:11px;border:1.4px solid var(--ink);border-radius:3px;
  position:relative;margin-left:3px;padding:1.4px}
.fon__bat span{display:block;width:74%;height:100%;background:var(--ink);border-radius:1px}
.fon__bat::after{content:"";position:absolute;right:-3px;top:3px;width:1.6px;height:5px;
  border-radius:0 2px 2px 0;background:var(--ink)}

/* шапка чата */
.fon__shapka{display:flex;align-items:center;gap:9px;
  padding:7px 15px 10px;background:var(--fon-bot);
  border-bottom:1px solid rgba(23,20,15,.08)}
.fon__ava{width:31px;height:31px;border-radius:50%;flex:none;
  background:var(--acc);display:grid;place-items:center}
.fon__ava svg{width:16px;height:16px;color:var(--acc-deep)}
.fon__kto{min-width:0;line-height:1.25}
.fon__kto b{display:block;font:700 14px var(--fb);color:var(--ink)}
.fon__kto span{font:500 11px var(--fb);color:var(--ok)}

/* лента */
.fon__lenta{flex:1;padding:11px 10px 10px;display:flex;flex-direction:column;gap:7px;
  overflow:hidden}
.fon__den{align-self:center;font:600 10px var(--fm);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);
  background:rgba(23,20,15,.055);border-radius:20px;padding:3px 10px;margin-bottom:2px}

.fon__m{position:relative;max-width:84%;padding:7px 10px 15px;border-radius:13px;
  font:400 12.5px/1.42 var(--fb);color:var(--ink);
  box-shadow:0 1px 1px rgba(23,20,15,.05)}
.fon__m time{position:absolute;right:9px;bottom:4px;
  font:500 9.5px var(--fm);color:var(--ink3)}
/* без opacity: с ней время на пузыре давало контраст около 3,0
   при норме 4,5. Цвет и так приглушённый, гасить его нечем */
.fon__m--ya{align-self:flex-end;background:var(--fon-my);
  border-bottom-right-radius:4px;color:#1B1405}
.fon__m--ya time{color:#4A3A05}
.fon__m--bot{align-self:flex-start;background:var(--fon-bot);
  border-bottom-left-radius:4px}
.fon__m i,.fon__m u,.fon__m s{font-style:normal;text-decoration:none;
  font-family:var(--fm);font-weight:700;font-size:12.5px}
.fon__m i{color:var(--acc)}
.fon__m u{color:var(--crit)}
.fon__m s{color:var(--ok)}

/* сигнал, который бот прислал сам */
.fon__m--sam{max-width:80%;border-left:3px solid var(--crit);padding-left:10px}
.fon__m--sam em{display:block;font:700 9.5px var(--fm);letter-spacing:.11em;
  text-transform:uppercase;color:var(--crit);font-style:normal;margin-bottom:3px}

/* строка ввода и полоса жеста */
.fon__vvod{display:flex;align-items:center;gap:8px;padding:8px 12px 6px;
  background:var(--fon-bot);border-top:1px solid rgba(23,20,15,.08)}
.fon__pole{flex:1;font:400 12.5px var(--fb);color:var(--ink3)}
.fon__mic{width:28px;height:28px;border-radius:50%;flex:none;background:var(--acc-deep);
  display:grid;place-items:center;color:#1B1405}
.fon__mic svg{width:13px;height:13px}
.fon__zhest{background:var(--fon-bot);padding:0 0 7px;display:grid;place-items:center}
.fon__zhest span{display:block;width:104px;height:4px;border-radius:3px;
  background:rgba(23,20,15,.26)}

.fon__pod{margin-top:var(--s3);text-align:center;max-width:300px;
  margin-left:auto;margin-right:auto;
  font:500 12.5px/1.5 var(--fb);color:var(--ink3)}

@media(max-width:900px){.fon{max-width:272px}}

.scr__img .fon{max-width:270px}
.scr__img:has(.fon){background:none;border:0;box-shadow:none;overflow:visible;
  aspect-ratio:auto;display:grid;place-items:center;padding:var(--s2) 0}

/* ---------- выбор программы в заявке ---------- */
.fchips{display:flex;flex-wrap:wrap;gap:7px}
.fchips button{padding:9px 14px;border-radius:var(--r-s);
  border:1px solid var(--line-in);background:transparent;color:var(--on-deep);
  font:500 14px var(--fb);cursor:pointer;transition:.16s var(--ease)}
.fchips button:hover{border-color:var(--acc-deep);color:var(--acc-deep)}
.fchips button[aria-pressed="true"]{background:var(--acc-deep);
  border-color:var(--acc-deep);color:var(--deep);font-weight:600}
.fchips__hint{margin-top:9px;font-size:13.5px;color:var(--on-deep2)}

/* ============================================================
   Печать и PDF.
   Полоса A4 при полях 10 мм — это 718 css-px, то есть уже всех
   брейкпоинтов сайта. Без этого блока в PDF уходила мобильная
   раскладка: сетки схлопывались в столбик, блоки вырастали выше
   страницы и рвались посередине. Возвращаем настольные сетки
   и запрещаем резать блоки. Высоты промерены в браузере на
   ширине 718 px — каждый блок помещается в страницу целиком.
   Блок держим последним в файле: медиазапросы выше не должны
   его перебивать.
   ============================================================ */
@media print{
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  @page{size:A4;margin:10mm}
  html,body{background:var(--bg)}
  .hdr{position:static;backdrop-filter:none}
  .burger,.mnav{display:none !important}
  .menu{display:flex !important}
  .toc{display:none !important}

  /* настольные сетки вместо мобильных */
  .strip__in{grid-template-columns:repeat(4,1fr) !important}
  .tiles,.inds,.steps,.cat,.rel,.ways,.fn,.pricebar
        {grid-template-columns:repeat(3,1fr) !important}
  .plans,.pick__body,.pain,.scr,.form,.line
        {grid-template-columns:1fr 1fr !important}
  .cols{grid-template-columns:1fr !important}
  /* первый экран в две колонки: столбиком он съедал целую страницу
     и выталкивал полосу чисел на почти пустой лист */
  .hero{grid-template-columns:1fr 1fr !important}
  .hero__pic{min-height:0 !important;order:0 !important}
  .hero__txt{padding:var(--s5) var(--s4) var(--s4) !important;
             max-width:none !important;margin:0 !important}
  .ftr__top{grid-template-columns:1.35fr repeat(5,1fr) !important}
  .line{gap:var(--s4) !important}
  .line__pic{aspect-ratio:16/10}

  /* ответы раскрыты: закрытый details уносил в никуда половину текста */
  details::details-content{block-size:auto !important;overflow:visible !important;
                           content-visibility:visible !important}
  details > *{display:block !important}
  .faq summary::after{content:none}

  /* заголовок не остаётся один внизу страницы */
  h1,h2,h3,h4,summary,.sec__hd
        {break-after:avoid;page-break-after:avoid;
         break-inside:avoid;page-break-inside:avoid}

  /* Целыми держим то, что теряет смысл в разрыве: узлы и карточки.
     Сетки при этом переносятся между рядами — карточка не режется,
     а полупустых страниц не появляется. */
  .strip__in,.pick,.form,.pricebar,.line,.scr,.faq details,.pain li,
  .tbl,.cta,.tile,.plan,.ind,.step,.cat__col,.way,.fn__i,
  figure,img,tr{break-inside:avoid;page-break-inside:avoid}

  /* контейнеры ломаем свободно — целостность держат дети */
  .sec,.blk,.cols,main,.wrap,.steps,.rel,.ways,.fn
        {break-inside:auto;page-break-inside:auto}

  /* эти сетки промерены и влезают в страницу целиком вместе
     со своим заголовком — держим их неразрывными */
  .tiles,.inds,.cat,.plans,.pain{break-inside:avoid;page-break-inside:avoid}

  /* в печати отступы секций меньше: на страницу влезает больше */
  .sec{padding:var(--s3) 0}
  /* прайс с заголовком был на 30 px выше страницы и рвался пополам */
  .plan{padding:var(--s3)}
  .plan li{padding:4px 0}
  .plan__p{margin-bottom:var(--s2)}
  .plan ul{margin-bottom:var(--s2)}
  /* блок экранов не влезал под свой заголовок — на 40 px */
  .scr__list li{padding:8px 0}
  .scr__img{max-height:300px;object-fit:cover}
  .top{padding-top:var(--s4)}

  p,li{orphans:3;widows:3}
  thead{display:table-header-group}
}

/* ---------- видео-разборы ---------- */
.vid{margin:0}
/* height:auto обязателен: атрибут height=720 иначе жёстко держит
   высоту, и пропорция 16/9 не работает — плеер вытягивается столбом */
.vid video,.vid img{width:100%;height:auto;display:block;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--sh);background:#0D1420;
  aspect-ratio:16/9;object-fit:contain}
.vid figcaption{margin-top:10px;font-size:14.5px;color:var(--ink3);line-height:1.5}

/* Ролики — по одному в ряд. В две колонки кадр выходил 549 пикселей
   при исходных 1280: подписи на слайдах переставали читаться. */
.vidy{display:grid;gap:var(--s5)}
.vidy .vid figcaption{max-width:76ch}

/* ---- движение --------------------------------------------------
   Класс .rev вешает только скрипт и только на то, что ниже экрана.
   Поэтому без скрипта страница целая, а с ним ничего не мигает.
   Трансформацию не ставим на предков блоков с position:fixed —
   в списке анимируемых их нет. */
html.anim .rev{opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
/* .vid здесь — страховка на время смены имени класса: у посетителя
   может лежать в кеше прежний скрипт, который вешает старое имя.
   Без этой половины правила он увидел бы пустые места вместо
   разделов. Убрать через неделю после выкладки. */
html.anim .rev.pokazan,html.anim .rev.vid{opacity:1;transform:none}
.hdr{transition:box-shadow .22s var(--ease)}
.hdr--ten{box-shadow:0 6px 26px rgba(20,16,12,.10)}
@media(prefers-reduced-motion:reduce){
  html.anim .rev{opacity:1;transform:none;transition:none}
  .hdr{transition:none}}


/* ---- полоса согласия на cookie ----
   Появляется снизу и не перекрывает содержимое: у страницы внизу
   и так подвал, а полоса уходит по нажатию. */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);background:var(--deep);color:var(--on-deep);
  box-shadow:0 -8px 30px rgba(20,16,12,.18);
  transform:translateY(100%);transition:transform .32s var(--ease)}
.cookie--vid{transform:none}
.cookie__t{margin:0;flex:1;min-width:280px;font-size:14px;line-height:1.55;
  color:var(--on-deep2);max-width:72ch}
.cookie__t a{color:var(--acc-deep)}
.cookie__k{display:flex;gap:var(--s2);flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.cookie{transition:none}}
@media(max-width:560px){.cookie{padding:var(--s2) var(--s3);gap:var(--s2)}
  .cookie__t{font-size:13px}
  .cookie__k{width:100%}
  .cookie__k .btn{flex:1}}

/* Обводочная кнопка рассчитана на светлый фон: на тёмной полосе
   согласия она сливалась. Здесь ей свои цвета. */
.cookie .btn--gh{color:var(--on-deep);border-color:rgba(255,255,255,.42);
  background:transparent}
.cookie .btn--gh:hover{color:var(--deep);background:var(--on-deep);
  border-color:var(--on-deep)}

/* заголовок только для читалок с экрана: держит структуру
   страницы целой там, где по рисунку заголовка быть не должно */
.vh{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;border:0}

/* рисунок в статье: подпись под ним читают чаще самого текста,
   поэтому она несёт факт, а не повторяет заголовок */
.ris{margin:var(--s5) 0}
.ris img{display:block;width:100%;height:auto;border-radius:var(--r-m);
  border:1px solid var(--line)}
.ris figcaption{margin-top:var(--s2);font-size:14px;line-height:1.55;
  color:var(--ink3)}
/* Растягивать картинку «в край экрана» отрицательными полями нельзя:
   у колонки статьи внутренних отступов нет, и картинка вылезала
   за экран, утаскивая за собой всю страницу. */
@media(max-width:600px){.ris{margin:var(--s4) 0}}

/* Снимок под заголовком — полоса, а не блок. Исходник 1400×788, и во всю
   ширину полосы набора он занимал целый экран: текст начинался только
   после второй прокрутки. Обрезаем по высоте показом, а не отдельным
   файлом: тот же снимок стоит фоном на карточке статьи, где нужна
   вся высота. Олег 12.09.2026: «не пустовато без картинок вверху, когда
   в статью проваливаешься». */
.ris--verh{margin-top:var(--s4)}
/* Вторая партия снимков нарисована сразу в пропорции 1400×788, поэтому
   кадр берём как есть, по центру: сдвиг вверх был нужен прежним, которые
   резались из 3:2. Ограничение по высоте оставляем — во всю высоту снимок
   отодвигал бы текст на целый экран. На телефоне до предела не доходит:
   при ширине 360 снимок и так 202 пикселя. */
.ris--verh img{max-height:520px;object-fit:cover;object-position:center}
@media(max-width:700px){.ris--verh img{max-height:240px}}

/* картинка в карточке статьи: подпись и кнопка остаются на месте,
   меняется только верх карточки */
.fn__ris{display:block;margin:calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s3);
  border-radius:var(--r-m) var(--r-m) 0 0;overflow:hidden;line-height:0}
.fn__ris img{width:100%;height:auto}


/* ---------- мессенджеры ---------- */
/* Кружок под знаком выравнивает оптический вес: у Telegram знак заливной,
   у МАКСа сплошное пятно, и без подложки в ряду они выглядят разной
   жирности. */
.svyaz{display:flex;flex-wrap:wrap;gap:9px}
.svyaz__i{display:inline-flex;align-items:center;gap:11px;
  padding:8px 17px 8px 8px;border-radius:999px;background:var(--surf);
  border:1px solid var(--line);color:var(--ink);text-decoration:none;
  transition:.16s var(--ease)}
.svyaz__zn{display:grid;place-items:center;flex:none;
  width:32px;height:32px;border-radius:50%}
.svyaz__zn svg{width:17px;height:17px;fill:#fff}
.svyaz__i--mx .svyaz__zn svg{width:20px;height:20px}
.svyaz__i b{font:700 14.5px var(--fb)}
.svyaz__i span span{display:flex;flex-direction:column;line-height:1.25}
.svyaz__i i{font:500 12.5px var(--fm);font-style:normal;color:var(--ink3);
  white-space:nowrap}
a.svyaz__i:hover{border-color:var(--line-in);box-shadow:var(--sh)}
.svyaz__i--net{cursor:default}

/* В подвале колонка бренда шириной 272 px: полноразмерные плашки
   не помещаются по две в ряд и переносятся как 1+2. Ужимаем — влезает
   по две. Названия оставляем: знак МАКСа новый, без подписи не узнают. */
.ftr .svyaz{margin-top:8px;gap:8px}
.ftr .svyaz__i{padding:6px 13px 6px 6px;gap:8px}
.ftr .svyaz__zn{width:28px;height:28px}
.ftr .svyaz__zn svg{width:15px;height:15px}
.ftr .svyaz__i--mx .svyaz__zn svg{width:18px;height:18px}
.ftr .svyaz__i b{font-size:13.5px}

/* фон тёмный: плашка светлеет прозрачностью, а не краской */
.ftr .svyaz__i{background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.13);color:var(--on-deep)}
.ftr a.svyaz__i:hover{background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.26);box-shadow:none}
.ftr .svyaz__i i{color:rgba(242,238,231,.62)}

@media(max-width:600px){.svyaz__i{padding:6px 13px 6px 6px;gap:8px}
  .svyaz__zn{width:25px;height:25px}
  .svyaz__zn svg{width:13px;height:13px}
  .svyaz__i--mx .svyaz__zn svg{width:16px;height:16px}
  .svyaz__i b{font-size:13.5px}}

/* значок в заголовке плитки контакта */
.tile h3{display:flex;align-items:center;gap:11px}
.tile__zn{width:30px;height:30px}
.tile__zn svg{width:16px;height:16px}
.tile__zn--mx svg{width:19px;height:19px}
/* на телефоне заголовок мельче, и значок того же размера начинает
   перевешивать надпись — ужимаем вместе с ней */
@media(max-width:600px){
  .tile h3{gap:9px}
  .tile__zn{width:25px;height:25px}
  .tile__zn svg{width:13px;height:13px}
  .tile__zn--mx svg{width:16px;height:16px}}

/* ---------- правки по обходу разрешений ---------- */

/* Подвал на телефоне делится на две колонки по 141–156 px, а блоку
   с логотипом нужно 178: знак 30 + отступ + «Приборка» 22-м кеглем.
   Текст вылезал за свою колонку и наезжал на соседнюю. Отдаём этому
   блоку всю ширину, ссылки оставляем в две колонки. */
@media(max-width:800px){.ftr__top > div:first-child{grid-column:1 / -1}}
/* Одна колонка растягивала подвал на 2,4 экрана телефона — почти
   седьмую часть всей главной. Блок бренда занимает ширину целиком,
   ссылкам двух колонок хватает даже на 360 px. */
@media(max-width:430px){.ftr__top{gap:var(--s3) var(--s2)}
  .ftr h2{font-size:11px}
  .ftr__top li{font-size:14px}}
.ftr__top li{overflow-wrap:break-word}

/* Ссылка-действие в карточке была высотой 19 px: пальцем не попасть.
   Разносим до 40 — это нижняя граница удобного нажатия. */
@media(max-width:700px){
  .fn__go,.pick__sbros{display:inline-flex;align-items:center;min-height:40px}
}

/* Таблицы на узком экране не помещались и начинали листаться вбок
   из-за 20–40 лишних пикселей. Ужимаем кегль и отступы — влезает. */
@media(max-width:600px){
  .tbl{font-size:14px}
  .tbl th{padding:0 8px 7px 0}
  .tbl td{padding:10px 8px 10px 0}
  .tbl td:last-child,.tbl th:last-child{padding-right:0}
}

/* ответ формы: кладём под кнопку, во всю ширину сетки */
.forma__otvet{grid-column:1 / -1;margin-top:var(--s2);padding:13px 16px;
  border-radius:var(--r-s);font-size:15px;line-height:1.5;
  background:rgba(59,214,140,.12);border:1px solid rgba(59,214,140,.4);
  color:var(--on-deep)}
.forma__otvet--ploho{background:rgba(255,92,99,.12);
  border-color:rgba(255,92,99,.45)}

/* отметка «сейчас выбрано это» в полосе выбора cookie */
.cookie__seychas{align-self:center;font:500 13px var(--fb);color:var(--ink3)}

/* На телефоне полное меню спрятано под бургер, и человек листает
   пятнадцать экранов главной без единой ссылки на другую страницу.
   Демо — самое сильное, что у нас есть; держим его под рукой.
   На широком экране оно уже есть в меню, там эта ссылка лишняя. */
.hdr__demo{display:none}
@media(max-width:1120px){
  /* залито акцентом: на телефоне это единственная видимая ссылка
     на другую страницу, и она должна читаться как действие */
  .hdr__demo{display:inline-flex;align-items:center;margin-left:auto;
    padding:9px 17px;border-radius:999px;
    background:var(--acc);border:1px solid var(--acc);
    font:700 14.5px var(--fb);color:#fff;white-space:nowrap}
  .hdr__demo:hover{background:var(--acc-deep);border-color:var(--acc-deep)}
  .hdr__in{gap:var(--s2)}
}

/* Подмигивает один раз за всё знакомство с сайтом, а не на каждой
   странице: кнопка живёт в прилипшей шапке, и постоянное мерцание
   там читалось бы как реклама. Класс вешает скрипт, если человек
   этой кнопки ещё не видел. */
@keyframes pr-demo-mig{
  0%,100%{box-shadow:0 0 0 0 rgba(176,60,10,0)}
  50%{box-shadow:0 0 0 9px rgba(176,60,10,.28)}
}
.hdr__demo--mig{animation:pr-demo-mig 1.5s ease-out 2}
@media(prefers-reduced-motion:reduce){.hdr__demo--mig{animation:none}}
@media(max-width:360px){.hdr__demo{padding:7px 12px;font-size:14px}}

/* ============================================================
   Строки контактов над шапкой больше нет. 12.09.2026
   Она жила один день: два номера, мессенджеры и почта над меню.
   Олег про телефон — «как козырёк над меню смотрится», потом про
   планшет и компьютер — «давай тоже так сделаем, чтоб не
   перегружать». Контакты теперь в трёх местах: пункт меню, страница
   с картой и кнопка связи в углу экрана (.svz).
   ============================================================ */

/* Меню с «Контактами» — 611 px. Между 1041 и 1150 px ряду не хватало
   места: подпись под логотипом переносим на две строки, шапка
   и так 74 px в высоту, ей хватает. */
@media(min-width:1121px) and (max-width:1150px){
  .hdr__in{gap:24px}
  .logo i{max-width:112px}
}

/* ============================================================
   Кнопка связи в углу экрана. 11.09.2026
   Строка контактов уходит при прокрутке, а на длинной странице
   до неё далеко. Своя, без чужих чатов: переписка идёт в обычный
   Telegram, и сведения посетителя никуда не утекают.
   Слой ниже полосы cookie (60), а пока полоса видна, кнопку прячем:
   обе живут внизу справа, и выбор про cookie важнее.
   ============================================================ */
.svz{position:fixed;right:22px;bottom:22px;z-index:55;display:flex;
  flex-direction:column;align-items:flex-end;gap:12px;
  transition:opacity .2s var(--ease),visibility .2s}
body:has(.cookie--vid) .svz{opacity:0;visibility:hidden}
/* открытое мобильное меню длинное — кнопка легла бы на его пункты */
body:has(.mnav.on) .svz{opacity:0;visibility:hidden}
.svz__k{position:relative;display:grid;place-items:center;width:58px;height:58px;
  border:0;border-radius:50%;cursor:pointer;background:var(--svz);color:#fff;
  box-shadow:0 10px 26px rgba(167,105,0,.32),0 2px 6px rgba(23,20,15,.16);
  transition:transform .2s var(--ease),background .2s var(--ease)}
.svz__k:hover{background:var(--svz-h);transform:translateY(-2px)}
.svz__k svg{width:26px;height:26px}
.svz__k .svz__x{display:none;width:20px;height:20px}
.svz__k[aria-expanded="true"] .svz__chat{display:none}
.svz__k[aria-expanded="true"] .svz__x{display:block}
.svz__p{width:320px;max-width:calc(100vw - 28px);background:var(--surf);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-2);
  padding:16px 10px 10px;transform-origin:100% 100%;
  animation:svz-poyav .2s var(--ease)}
@keyframes svz-poyav{from{opacity:0;transform:translateY(8px) scale(.97)}
  to{opacity:1;transform:none}}
.svz__zag{padding:0 10px;font:600 16px/1.3 var(--fh);letter-spacing:-.02em;
  color:var(--ink)}
.svz__pod{padding:5px 10px 10px;font-size:13px;line-height:1.5;color:var(--ink3)}
.svz__i{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;
  border:0;border-radius:9px;background:none;color:var(--ink);font:inherit;
  text-align:left;cursor:pointer}
.svz__i:hover{background:var(--surf2)}
.svz__i .svyaz__zn{width:34px;height:34px}
.svz__i b{display:block;font:700 14.5px/1.3 var(--fb)}
.svz__i i{display:block;font:500 12.5px/1.35 var(--fm);font-style:normal;
  color:var(--ink3)}
.svz__razd{height:1px;margin:6px 10px;background:var(--line)}
@media(max-width:600px){
  .svz{right:14px;bottom:14px}
  .svz__k{width:54px;height:54px}
}
/* Пока человек листает вниз и читает, кнопка уходит и не закрывает правый
   край текста и таблиц. Класс ставит pr-svyaz.js только там, где колонка
   текста доходит до кнопки. Кнопка только прозрачная, а не скрытая:
   с клавиатуры на неё можно перейти, и фокус возвращает её на место.
   16.09.2026 */
.svz--ushla{opacity:0;transform:translateY(18px);pointer-events:none}
.svz--ushla:focus-within{opacity:1;transform:none;pointer-events:auto}
.svz{transition:opacity .2s var(--ease),visibility .2s,transform .2s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .svz__p{animation:none}
  .svz,.svz__k{transition:none}
}
@media print{.svz{display:none}}

/* ============================================================
   Карта на странице контактов. 11.09.2026
   Сама не грузится: карта Яндекса — чужой сервис, при показе он
   получает адрес посетителя в сети и может записать свои cookie.
   Поэтому сначала заглушка с объяснением, карта — по нажатию.
   Так же записано в политике, раздел о cookie.
   ============================================================ */
.karta{position:relative;height:360px;margin-top:var(--s3);overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:#EAE4D9}
.karta iframe{display:block;width:100%;height:100%;border:0}
.karta__fon{position:absolute;inset:0;width:100%;height:100%}
.karta__vopros{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,88%);padding:var(--s3);background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);
  text-align:center}
.karta__vopros b{display:block;font:600 17px/1.3 var(--fh);letter-spacing:-.02em;
  margin-bottom:6px}
.karta__vopros p{font-size:14px;line-height:1.5;color:var(--ink2);
  margin-bottom:var(--s2)}
.karta__ssylka{margin-top:var(--s2);font-size:15px}
.karta__ssylka a{color:var(--acc);border-bottom:1px solid transparent}
.karta__ssylka a:hover{border-color:var(--acc)}
@media(max-width:600px){.karta{height:300px}
  .karta__vopros{padding:var(--s2)}}

/* ---------- связь в подвале ----------
   Номера и почта стояли в колонке «Ещё» вперемешку со статьями,
   ценами и политикой, мессенджеры — отдельно. Теперь всё, чем
   связаться, одним блоком в колонке бренда. 11.09.2026 */
.ftr__svyaz{margin-top:var(--s3)}
.ftr__svyaz li{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:3px 0}
.ftr__svyaz a{color:var(--on-deep)}
.ftr__svyaz a:hover{color:var(--acc-deep)}
.ftr__svyaz a[href^="tel:"]{font:600 15px var(--fm);letter-spacing:-.01em}
.ftr__svyaz span{font-size:13px;color:var(--on-deep2)}
.ftr__svyaz .ftr__vse{margin-top:6px;font-weight:600;color:var(--acc-deep)}
.ftr__svyaz .ftr__vse:hover{color:var(--on-deep)}

/* ---------- контакты в мобильном меню ----------
   Сначала меню открывалось раскрытым блоком связи: номера, почта
   и мессенджеры прямо в списке. Олег 12.09.2026: «не нравится в меню
   контакты с выплывшими контактами, надо чтобы переводило на отдельное
   место где контакты с картой». Блок убран, остался обычный пункт
   «Контакты» — он ведёт на страницу со всеми номерами и картой.
   Быстрая связь на телефоне — кнопкой в углу (pr-svyaz.js). */

/* ---------- автор в конце статьи ----------
   Олег 14.09.2026: «автора может не страницей, а просто аватарку сделать
   и сноску». Был блок из двух абзацев с ИНН и ОГРНИП, без лица; реквизиты
   и так стоят в подвале каждой страницы. Стала карточка: аватар и фраза.
   Аватар ведёт на страницу автора, но скрыт от читалок и клавиатуры —
   рядом та же ссылка текстом, дважды одно и то же ей не нужно. */
.avtor-kart{display:flex;gap:var(--s3);align-items:center}
.avtor-kart__foto{flex:none}
.avtor-kart__foto img{display:block;width:84px;height:84px;border-radius:50%;
  object-fit:cover}
.avtor-kart p{margin:0}
@media(max-width:600px){
  .avtor-kart{align-items:flex-start}
  .avtor-kart__foto img{width:64px;height:64px}
}

/* ---------- демо-стенд на главной ----------
   16.09.2026. Олег: «а ты вставлял куда то про показ дащборда нового ?
   не увидел» — стенд жил только на /demo/, на четвёртом экране.
   Блок сразу под первым экраном: ролик слева, что посмотреть на стенде
   и кнопка справа. Тёмный фон отбивает его от светлого героя и совпадает
   с тёмным кадром ролика. Ролик играет сам, без звука, пока блок
   на экране, — скрипт в index.html. */
.stv{padding-block:var(--s6)}
.stv .sec__hd{margin-bottom:var(--s4)}
.stv__ryad{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--s5);align-items:start}
.stv__vid{position:sticky;top:96px}
.stv__vid video{border-color:var(--line-deep);box-shadow:none}
.stv__vid figcaption{color:var(--on-deep2)}
.stv__zag{margin-bottom:var(--s2);font:600 17px/1.3 var(--fh);color:var(--on-deep)}
.stv__spisok{margin-bottom:var(--s4)}
.stv__spisok li{position:relative;padding:8px 0 8px 22px;font-size:16px;line-height:1.5;
  color:var(--on-deep);border-top:1px solid var(--line-deep)}
.stv__spisok li:first-child{border-top:0;padding-top:0}
.stv__spisok li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;
  border-radius:2px;background:var(--acc-deep)}
.stv__spisok li:first-child::before{top:8px}
.stv__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.stv__eshe{font:600 15.5px var(--fb);color:var(--acc-deep);border-bottom:1px solid transparent}
.stv__eshe:hover{border-bottom-color:var(--acc-deep)}
.stv__otr{margin:var(--s3) 0;font-size:15px;line-height:1.6;color:var(--on-deep2)}
.stv__otr a{color:var(--acc-deep);border-bottom:1px solid rgba(245,166,35,.35)}
.stv__vopr{margin:0 0 var(--s3)}
.stv__vopr p{margin-bottom:10px;font-size:14.5px;line-height:1.5;color:var(--on-deep2)}
.stv__chipy{display:flex;flex-wrap:wrap;gap:8px}
.stv__chipy a{display:inline-block;padding:8px 14px;border:1px solid var(--line-deep);
  border-radius:999px;background:rgba(242,238,231,.05);color:var(--on-deep);
  font-size:14.5px;line-height:1.35;transition:border-color .16s var(--ease),background .16s var(--ease)}
.stv__chipy a:hover{border-color:var(--acc-deep);background:rgba(245,166,35,.12)}
.stv__chipy a:focus-visible{outline:2px solid var(--acc-deep);outline-offset:2px}
.stv__otr a:hover{border-bottom-color:var(--acc-deep)}
.stv__pod{margin-top:var(--s2);font-size:14.5px;line-height:1.5;color:var(--on-deep2)}
@media(max-width:900px){
  .stv__ryad{grid-template-columns:1fr;gap:var(--s4)}
  .stv__vid{position:static}}
@media(max-width:560px){
  .stv__znak{width:56px;height:56px;margin-top:-28px;right:7%}
  .stv__znak svg{width:22px;height:22px;margin-left:3px}
  .stv__spisok li{font-size:15.5px}}
@media(prefers-reduced-motion:reduce){.stv__znak{transition:none}}

/* ---------- заявка на демо-стенд ----------
   pr-forma.js сворачивает форму до имени и контакта, когда пришли
   с кнопки «Получить доступ». Эта кнопка возвращает форму целиком. */
.form__vsya{display:inline-block;margin-top:var(--s2);padding:0;border:0;
  border-bottom:1px solid transparent;background:none;cursor:pointer;
  font:600 15px var(--fb);color:var(--acc-deep)}
.form__vsya:hover{border-bottom-color:var(--acc-deep)}

/* ---------- главная, 16.09.2026 ----------
   Телефон с перепиской стоит под сравнением в «Чем это отличается». */
.sravn + .line--fon{margin-top:var(--s6)}

/* ---------- дата статьи под заголовком ---------- */
.top__data{margin-top:var(--s2);font:500 13.5px var(--fm);letter-spacing:.02em;color:var(--ink3)}

/* ---------- ссылка внутри тёмной плашки .cta ---------- */
.cta span a{color:var(--acc-deep);border-bottom:1px solid currentColor}
.cta span a:hover{color:var(--on-deep)}

/* ---------- окно разговора ----------
   Было в стилях двух страниц про помощника. 16.09.2026 переехало сюда:
   те же реплики показывают шесть отраслевых страниц. */
/* окно разговора */
.dlg{background:var(--deep);border-radius:var(--r);padding:var(--s3);
     display:grid;gap:10px}
.dlg+.dlg{margin-top:var(--s3)}
.dlg__hd{display:flex;align-items:center;gap:9px;padding-bottom:var(--s2);
         border-bottom:1px solid var(--line-deep);
         font:500 11.5px var(--fm);letter-spacing:.14em;text-transform:uppercase;
         color:var(--on-deep2)}
.dlg__hd i{flex:none;width:8px;height:8px;border-radius:50%;background:#63D19B}
.msg{max-width:86%;padding:12px 15px;border-radius:var(--r);font-size:15.5px;
     line-height:1.55}
.msg--me{justify-self:end;background:var(--acc-deep);color:var(--deep);
         font-weight:500;border-bottom-right-radius:3px}
.msg--bot{justify-self:start;background:var(--deep2);color:var(--on-deep);
          border:1px solid var(--line-deep);border-bottom-left-radius:3px}
.msg b{font-family:var(--fm);font-weight:700;color:var(--acc-deep);
       font-variant-numeric:tabular-nums}
.msg b.r{color:#FF9179}
.msg b.g{color:#63D19B}
.msg__t{display:block;margin-bottom:7px;font:500 11px var(--fm);letter-spacing:.12em;
        text-transform:uppercase;color:var(--on-deep2)}
.msg__to{display:block;margin-top:9px;padding-top:8px;
         border-top:1px solid var(--line-deep);
         font:500 12.5px var(--fm);color:var(--on-deep2)}
/* Селектор из двух классов намеренно: .blk p из общего файла весомее
   одного класса и красит эту сноску тёмным по тёмному. */
.dlg .dlg__note{max-width:76ch;margin:2px 0 0;font-size:14px;color:#BEB6A9}
@media(max-width:640px){.msg{max-width:94%}}

/* подсказка про подбор под пакетами на /ceny/ (16.09.2026) */
.ceny-podbor{margin:0 0 var(--s3);padding:12px 16px;border-left:3px solid var(--acc);
  background:var(--acc-sub);border-radius:0 var(--r) var(--r) 0;font-size:16px;line-height:1.5}
.ceny-podbor a{font-weight:600}
.hero__facts a{color:var(--acc);border-bottom:1px solid rgba(176,60,10,.35)}
.hero__facts a:hover{border-bottom-color:var(--acc)}

/* ---------- примеры по отраслям на /demo/ (18.09.2026) ----------
   Вместо упрощённого макета страница строится вокруг выбора: отрасль, её экраны и ролик.
   Скрытые блоки лежат с hidden: браузер не грузит их картинки, страница остаётся лёгкой. */
.otr-vybor{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:var(--s4)}
.otr-kn{padding:9px 17px;border-radius:999px;background:var(--surf);border:1px solid var(--line);
  font:600 15px var(--fb);color:var(--ink2);cursor:pointer;transition:.16s var(--ease)}
.otr-kn:hover{border-color:var(--line-in);color:var(--ink)}
.otr-kn.on{background:var(--acc);border-color:var(--acc);color:#fff}
.otr-kto{color:var(--ink2);margin-bottom:var(--s3);line-height:1.5}
.otr-kto b{color:var(--ink)}
.otr-kto span{font-size:14.5px;color:var(--ink3)}
.otr-vid{margin:0 0 var(--s4)}
.otr-vid video{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line)}
.otr-ekrany{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
.otr-ekran{margin:0}
.otr-ekran img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line)}
.otr-ekran figcaption{margin-top:9px;font-size:15.5px;line-height:1.45;color:var(--ink2)}
.otr-ekran figcaption b{color:var(--ink)}
.otr-note{margin-top:var(--s4);font-size:14.5px;line-height:1.5;color:var(--ink3);max-width:72ch}
@media(max-width:700px){
  .otr-ekrany{grid-template-columns:1fr}
  .otr-kn{padding:8px 14px;font-size:14px}}

/* ---- страницы ролей, 23.09.2026: обещания, шаги списком, карточки ролей ---- */
.obeshch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.obeshch span{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
              padding:var(--s3);font-size:15px;color:var(--ink2)}
.shagi{counter-reset:sh;list-style:none;padding:0;margin:var(--s3) 0 0;display:grid;gap:var(--s2)}
.shagi li{counter-increment:sh;position:relative;padding-left:44px;color:var(--ink2)}
.shagi li::before{content:counter(sh);position:absolute;left:0;top:-2px;width:30px;height:30px;
                  display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);
                  background:var(--surf);font:700 13px var(--fm);color:var(--acc)}
.roliki{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s3)}
.rolik{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3)}
.rolik h3{margin:0 0 2px;font-size:18px}
.rolik h3 small{display:block;font-weight:400;font-size:13.5px;color:var(--ink3)}
/* 23.09: роли по отделам на /ii-agenty, заголовок отдела h3, карточка h4 */
.blk h3.otdel{margin:var(--s4) 0 0;font-size:20px}
.rolik h4{margin:0 0 2px;font-size:18px}
.rolik h4 small{display:block;font-weight:400;font-size:13.5px;color:var(--ink3)}
.rolik__c{display:inline-block;margin:6px 0 8px;font:700 17px var(--fh);color:var(--acc)}
.rolik p{margin:0;font-size:15px;color:var(--ink2)}
.rolik__v{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--ink3)}
.rolik__v b{color:var(--ink)}
/* 25.09: снимок экрана роли в карточке, ставит скрипты/struktura/vstavit_snimki_agentov.py */
.rolik__snimok{margin:2px 0 12px}
.rolik__snimok img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-s)}
.rolik:target{border-color:var(--acc);box-shadow:var(--sh-2)}
@media(max-width:640px){.obeshch,.roliki{grid-template-columns:1fr}}
.ostalnye{list-style:none;padding:0;margin:var(--s3) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ostalnye li{background:var(--surf2);border-radius:var(--r-s);padding:10px 12px;font-size:15px}
.ostalnye b{display:block}
.ostalnye span{color:var(--ink3);font-size:14px}
.pod{font-size:14.5px;color:var(--ink3)}
@media(max-width:640px){.ostalnye{grid-template-columns:1fr}}
/* таблица лимитов на страницах ролей, 23.09.2026 */
.tabl{overflow-x:auto;margin:var(--s3) 0 0}
table.lim{border-collapse:collapse;width:100%;background:var(--surf);font-size:15px;min-width:520px}
table.lim th,table.lim td{border:1px solid var(--line);padding:9px 11px;text-align:left}
table.lim th{background:var(--surf2);font-weight:700}
table.lim th small{display:block;font-weight:400;font-size:13px;color:var(--ink3)}
table.lim td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
/* картинки на страницах ролей, 23.09.2026. 24.09: правило было на все .ris и снимало отступы у рисунков в статьях
   (заголовок раздела вставал вплотную под подпись); на страницах ролей рисунок первым в блоке. */
.blk > .ris:first-child{margin:0 0 var(--s3);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surf)}
.rolik__z{display:block;margin:0 0 8px;width:auto;height:56px;border-radius:8px}

/* ---------- 24.09 проверка всех ширин глазами (скрипты/proverka-24, находки vid_*.json) ---------- */
/* Слово в крупном заголовке шире узкого экрана рвалось посередине без дефиса: «Управленческа / я».
   Переносим по слогам (lang="ru" на странице), первый экран на самых узких телефонах чуть мельче. */
h1,h2,h3{-webkit-hyphens:auto;hyphens:auto}
.nw{white-space:nowrap}
@media(max-width:400px){.top h1,.hero h1{font-size:1.75rem}}
/* Заголовок в карточке получал верхний отступ от .blk h3 и над ним стояла пустая полоса в 60 px. */
.blk :is(.tile,.sravn__p) h3:first-child{margin-top:0}
/* Абзац после таблицы, списка или карточек прилипал к ним: у абзаца в блоке отступ только снизу. */
.blk :is(table,.tbl,ul,ol,dl,figure,div) + p:not(.note){margin-top:var(--s3)}
/* Обычный список без класса оставался без маркеров, пункты сливались в один абзац. */
.blk ul:not([class]){margin:0 0 var(--s3)}
.blk ul:not([class]) > li{position:relative;padding-left:1.15em;margin:.45em 0;color:var(--ink2);max-width:76ch}
.blk ul:not([class]) > li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;
  background:var(--acc);border-radius:1px}
/* Плашки «+ неделя», «по брифу» ломались на две строки. */
.tag{white-space:nowrap}
/* Кнопка связи в углу закрывала конец последней строки подвала на всех страницах. */
.ftr{padding-bottom:calc(var(--s4) + 72px)}
/* Таблица в три-четыре колонки на телефоне была шире экрана на 3-85 px: листалась вбок, но выглядела обрезанной.
   Длинное слово теперь переносится внутри ячейки, и таблица встаёт в ширину экрана. */
@media(max-width:480px){
  .tbl{font-size:13.5px}
  .tbl th{letter-spacing:.05em}
  .tbl td,.tbl th{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
  .tbl .tag{white-space:normal}
  .tbl td:first-child,.tbl th:first-child{min-width:4.8em}}
/* Крупные числа полосы на главной на 320 px рвались: «188 3 / 65». */
@media(max-width:380px){.strip__i b{font-size:23px}}
/* На странице BI-системы в «Когда что выбирать» два пункта, а сетка на четыре: правая половина пустовала. */
@media(min-width:1201px){.mensh:has(> div:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}}
/* В подвале на 320 px «Политика конфиденциальности» рвалась без дефиса. */
.ftr a{-webkit-hyphens:auto;hyphens:auto}
/* Рядом с оглавлением «На странице» на 901-1180 px колонка текста около 650 px: сетки в три-пять колонок давали
   по два слова в строке («Как работаем», «Где он живёт», «Смотрят вместе с этим»). Статьи блога в четыре колонки там же. */
@media(min-width:901px) and (max-width:1180px){
  .cols :is(.steps,.rel,.fn){grid-template-columns:repeat(2,1fr)}
  .cols .places{grid-template-columns:1fr}}
@media(min-width:961px) and (max-width:1180px){.fn{grid-template-columns:repeat(3,1fr)}}
/* Выделенные числа в примерах переписки набраны моноширинным, и неразрывный пробел в нём шириной в цифру:
   «8  млн  ₽» выглядело разъехавшимся. */
.msg b{word-spacing:-.45ch}
/* Добор по планшету 768 (24.09). Блок «На странице» до 900 px: рамка слева и отступ пункта остались
   от широкой вёрстки, перед каждой кнопкой стояла серая черта. */
@media(max-width:900px){.toc li{border-left:0;padding:0}}
/* «Соседние страницы», «Куда дальше» на планшете: две колонки вместо одной растянутой. */
@media(min-width:521px) and (max-width:820px){.ways{grid-template-columns:1fr 1fr}}
/* Длинная сумма в полосе цен встаёт в две строки: остальные суммы той же полосы той же высоты, подписи на одной линии. */
@media(min-width:761px){.pricebar:has(b.pricebar__dlin) > div > b{min-height:3.24em}}
/* Ссылка в обычном списке выглядела как текст (страница автора). */
.blk ul:not([class]) > li a:not([class]){color:var(--acc);border-bottom:1px solid rgba(176,60,10,.35)}
/* На 1024 кнопка «Демо» висела посреди шапки: у неё и у бургера по margin-left:auto, место делилось пополам. */
@media(max-width:1120px){.hdr__demo + .burger{margin-left:0}}
/* На 320 px «ИИ-помощником» в заголовке главной не переносится (span.nw) и выходило за поле на 22 px. */
@media(max-width:340px){.top h1,.hero h1{font-size:1.6rem}}

/* ---------- 24.09 находки просмотра на 1440 (скрипты/proverka-24/vid_1440a.json) ---------- */
/* Заголовок в две-три строки кончался одним словом на последней: «…живые / данные», «…над / душой». */
h1,h2,h3{text-wrap:balance}
/* Карточки статей в блоге: счётчик «01» стоял над обложкой, обложка его закрывала, над ней оставалась полоса. */
.fn__i:has(> .fn__ris)::before{content:none}
/* Четыре плитки в сетке на три колонки: последняя одна во втором ряду. Ссылка «Смотреть» внизу плитки на одной высоте. */
@media(min-width:821px){.ways:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}
@media(min-width:801px){.rel:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}
.tile{display:flex;flex-direction:column}
.tile > .tile__go{margin-top:auto;padding-top:var(--s3);align-self:flex-start}
/* Четыре обещания под снимком на странице ИИ-агентов: так же, не 3+1. */
@media(min-width:641px){.obeshch:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Таблица в статье уже колонки текста (360-590 px из 825): display:block для прокрутки не даёт ей растянуться.
   На широком экране таблица обычная и во всю колонку, на узком прокручивается как раньше. */
@media(min-width:901px){.tbl{display:table}}
/* Ссылки в карточках со списком (страница автора «Что можно посмотреть до разговора») выглядели как текст. */
.pain span a:not([class]){color:var(--acc);border-bottom:1px solid rgba(176,60,10,.35)}
/* Главная: телефон помощника упирался в карточки над ним. */
.pain + .line--fon{margin-top:var(--s6)}
/* Карточки ролей: подпись роли под названием прижата вплотную там, где название в h3 (h3 с плотным интерлиньяжем). */
.rolik :is(h3,h4){line-height:1.3}
.rolik :is(h3,h4) small{line-height:1.45;margin-top:3px}
/* Рисунок последним в разделе: его нижний отступ и отступ раздела до линии складывались. */
.blk > .ris:last-child{margin-bottom:0}
/* Таблица из трёх и больше колонок на телефоне (320-520 px): колонка «Когда» шириной в три буквы, «сразу» рвалось
   по буквам. Строка становится карточкой, над значением подпись колонки (data-l ставит скрипты/nerazryvnye.py). */
@media(max-width:520px){
  .tbl[data-kartochki]{display:block;overflow:visible;font-size:15px}
  .tbl[data-kartochki] thead{display:none}
  .tbl[data-kartochki] tbody,.tbl[data-kartochki] tr{display:block}
  .tbl[data-kartochki] tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .tbl[data-kartochki] td{display:block;padding:2px 0;border:0;min-width:0;overflow-wrap:break-word;
    -webkit-hyphens:manual;hyphens:manual}
  .tbl[data-kartochki] td:first-child{padding-bottom:2px}
  .tbl[data-kartochki] td[data-l]{margin-top:6px}
  .tbl[data-kartochki] td[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;
    font:600 11.5px/1.4 var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
  .tbl[data-kartochki] .tag{white-space:nowrap}}
/* ---------- 24.09 ночью, третий просмотр всех ширин (скрипты/proverka-24/vid3_*.json) ---------- */
/* Первая колонка таблицы на широком экране около 110 px: «Бит-рикс24», «Прибыль по объек-ту», «Вла-димирович». */
@media(min-width:521px){.tbl td:first-child,.tbl th:first-child{min-width:9.5em}}
@media(max-width:520px){.tbl:not([data-kartochki]) td:first-child{min-width:7.5em}}
/* Числа моноширинным: неразрывный пробел шириной в цифру, «182  938» читалось как два числа. */
.strip__i b,.pricebar div b,.note b,.pick__itog b{word-spacing:-.4ch}
/* В заголовке плитки (flex с отступом под значок) обёрнутое «ИИ-агенты» становилось отдельным элементом: провал. */
.tile h3 > .nw{display:contents}
/* Текущий пункт «На странице» набирался жирнее, переносился и сдвигал список при прокрутке. */
.toc li.toc__tek a{font-weight:inherit}
/* Подпись под роликом прилипала к тёмной плашке «Стенд на 7 дней» (отрасли). */
.vid + .cta{margin-top:var(--s4)}
/* После последнего вопроса две линии: у вопроса своя и у раздела. */
.blk:not(:last-child) .faq details:last-of-type,.blk.faq:not(:last-child) details:last-of-type{border-bottom:0}
/* Схемы-картинки открываются по касанию в полном размере. */
.shema a{display:block;cursor:zoom-in}
/* Подбор и контакты: на телефоне и планшете «На странице» вставало посреди страницы, после подбора и таблицы. */
@media(max-width:900px){.toc--skryt-uzko{display:none}}
/* 320-400 px: у карточки подбора и тёмной карточки с кнопкой двойное поле, кнопки программ и «Попробовать стенд
   7 дней» ломались в две строки. */
@media(max-width:400px){
  .pick__top,.pick__col{padding:var(--s3) 14px}
  .chip{padding:8px 11px;font-size:14px}
  .cta{padding:var(--s3) 16px}}
/* 24.09: блок «Не нашли агента под свою задачу?» после карточек агентов (цены, каталог ролей) стоял вплотную. */
.kc-ne-nashli{margin:var(--s4) 0}

/* 24.09 тест-драйв: кнопка «Попробовать на стенде» в карточке агента */
.rolik{display:flex;flex-direction:column}
.rolik__stend{margin-top:auto!important;padding-top:14px}
.rolik__stend .btn{white-space:normal;text-align:center;line-height:1.3}
@media(max-width:640px){.rolik__stend .btn{width:100%}}

/* 24.09: окно после успешной заявки («наш менеджер с вами свяжется») */
.okno-zayavki{border:0;border-radius:var(--r);padding:28px 24px 22px;max-width:420px;width:calc(100% - 32px);
  background:var(--surf);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.okno-zayavki::backdrop{background:rgba(20,18,14,.45)}
.okno-zayavki[open]{position:fixed;inset:0;margin:auto;height:fit-content;z-index:1000}
.okno-zayavki__zag{margin:0 0 8px;font:700 21px/1.25 var(--fh)}
.okno-zayavki__tekst{margin:0 0 18px;font-size:16px;line-height:1.5;color:var(--ink2)}
.okno-zayavki__ok{width:100%}
.okno-zayavki__x{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;background:transparent;
  font-size:26px;line-height:1;color:var(--ink3);cursor:pointer;border-radius:8px}
.okno-zayavki__x:hover{background:var(--surf2);color:var(--ink)}

/* 24.09: подпись под таблицей «Какой стенд смотреть» на странице отраслей */
.sec__pod{margin:var(--s3) 0 0;font-size:15px;color:var(--ink2);max-width:72ch}

/* 24.09: крупный снимок главной стенда с меню в блоке демо-стенда на страницах отраслей */
.stend-glavnaya{margin:var(--s4) 0}
.stend-glavnaya figcaption{font-size:16px}

/* 24.09: снимки стендов по одному в ряд, крупно (Олег: «4 кадра, ничего не понятно») */
.stendy-galereya{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);margin:var(--s4) 0 var(--s5)}
.stendy-galereya figcaption{font-size:16px}
#stend .otr-ekrany{grid-template-columns:minmax(0,1fr)}

/* ---------- меню по новой структуре (25.09) ---------- */
/* Разделы с выпадающими колонками: у каждой колонки свой заголовок группы. */
.menu__sp--kol{grid-template-columns:repeat(var(--k,3),minmax(168px,auto));gap:2px 16px;padding:12px 12px 10px}
.menu__sp--kol > div{display:grid;align-content:start;gap:1px}
.menu__sp--vpravo{left:auto;right:-14px}
.menu__zg{margin:2px 11px 4px;font:700 11px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.menu__sp a.menu__dar{color:var(--acc);font-weight:600}
@media(min-width:1121px){.hdr__demo{display:none}}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{display:flex;justify-content:space-between;align-items:center;padding:15px var(--s4);
  cursor:pointer;list-style:none;font-weight:600}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"+";font-weight:400;color:var(--ink3);font-size:20px;line-height:1}
.mnav details[open] summary::after{content:"\2212"}
.mnav details a{padding:10px var(--s4) 10px calc(var(--s4) + 14px);border-bottom:0;font-size:15px}
.mnav__zg{margin:6px 0 0;padding:6px var(--s4) 2px calc(var(--s4) + 14px);font:700 11px var(--fm);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
/* Подвал: колонка контактов и пять колонок разделов. */
@media(min-width:1081px){.ftr__top{grid-template-columns:1.35fr repeat(5,1fr)}}
.ftr__top ul + h2{margin-top:var(--s3)}
.menu a,.menu__k{white-space:nowrap}

/* 25.09: карточки четырёх демо-стендов (/demo/#stend) */
.stendy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4)}
.stend-k{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);
  display:flex;flex-direction:column;min-width:0}
.stend-k .otr-ekran img{border-radius:var(--r-s)}
.stend-k h3{margin:var(--s3) 0 var(--s2);font-size:21px}
.stend-k__sv{margin:0;display:grid;gap:10px}
.stend-k__sv dt{font:600 12px var(--fm);letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.stend-k__sv dd{margin:2px 0 0;font-size:15px;color:var(--ink2)}
.stend-k__act{margin-top:auto;padding-top:var(--s3);display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.stend-dostup{margin-top:var(--s4);max-width:760px;color:var(--ink2)}
.stend-k:target{border-color:var(--acc);box-shadow:var(--sh-2)}
@media(max-width:820px){.stendy{grid-template-columns:minmax(0,1fr)}}

/* 25.09: указатель страниц раздела списком (/integracii/#vse-programmy) */
.ukaz{list-style:none;padding:0;margin:var(--s3) 0;display:grid;gap:10px}
.ukaz li{padding:10px 14px;background:var(--surf2);border-radius:var(--r-s);font-size:15.5px;line-height:1.55}
.ukaz b{color:var(--ink)}

/* 25.09: метка стенда на карточке отрасли (/otrasli/) */
.ind__metka{display:inline-block;margin-bottom:8px;padding:3px 9px;border-radius:999px;
  font:600 12px var(--fm);letter-spacing:.06em;text-transform:uppercase;background:var(--acc);color:#fff}
.ind__metka--blizko{background:var(--deep2);color:var(--on-deep)}
.ind__metka--net{background:var(--surf2);color:var(--ink3)}

/* 25.09: переход по рубрикам статей (/blog/) */
.rubriki{display:flex;flex-wrap:wrap;gap:10px}
.rubriki a{padding:8px 16px;border:1px solid var(--line-in);border-radius:999px;font:600 15px var(--fb);
  color:var(--ink);text-decoration:none;background:var(--surf)}
.rubriki a:hover{border-color:var(--acc);color:var(--acc)}

/* 25.09: блок «Что есть на стенде» на страницах отраслей */
.stend-sv{display:grid;grid-template-columns:190px minmax(0,1fr);margin:var(--s3) 0 var(--s4);
  border-top:1px solid var(--line)}
.stend-sv dt,.stend-sv dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.stend-sv dt{font:600 12px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding-top:13px}
.stend-sv dd{font-size:15.5px;color:var(--ink2)}
.stend-sv__agenty{margin:0;padding-left:18px}
.stend-sv__agenty li+li{margin-top:4px}
@media(max-width:640px){.stend-sv{grid-template-columns:minmax(0,1fr)}
  .stend-sv dt{border-bottom:0;padding-bottom:0}}

/* 25.09: «Демо-стенды» в шапке на узком телефоне не влезает, там «Демо» */
@media(max-width:420px){.hdr__demo-hv{display:none}}

/* 25.09 вечером, живой сайт на всех ширинах: с пунктом «Отрасли и стенды» строка шапки на компьютере требовала
   1134 px при 1132, и кнопка «Рассчитать проект» вставала в две строки на всех ширинах от 1200 до 1920
   (скрипты/struktura/zamer_shapki_25.py). Кнопка в одну строку, просвет между знаком, меню и кнопкой меньше. */
.hdr__in > .btn{white-space:nowrap;flex:none}
@media(min-width:1121px){.hdr__in{gap:26px}}
@media(min-width:1121px) and (max-width:1150px){.hdr__in{gap:14px}}

/* 26.09 ночью, живой сайт на всех ширинах (скрипты/struktura/proverka/zhivoj-shiriny): */
/* тёмный блок «Откроем стенд» вплотную под шагами «Что сделать в первый день» срезал кружок с цифрой 3 */
.shagi + .cta{margin-top:var(--s4)}
/* список ИИ-сотрудников в «Что есть на стенде» стоял на 18 px правее остальных значений */
.stend-sv__agenty{padding-left:0;list-style:none}
/* крошки: пункт не рвётся внутри себя («Дашборд в / 1С», «Демо- / стенды»); короткий последний пункт в span.crumbs__tek */
.crumbs a,.crumbs .crumbs__tek{white-space:nowrap}
.crumbs .crumbs__tek{margin:0;opacity:1}
/* сироты в сетках: последняя карточка одна в ряду, рядом пустота (скрипты/struktura/zamer_sirot_25.py).
   Текстовые карточки на всю ширину ряда, карточки со снимками и ролями по центру своей обычной ширины. */
@media(min-width:641px){
  .pain > li:last-child:nth-child(odd),.ostalnye > li:last-child:nth-child(odd){grid-column:1/-1}
  .roliki > .rolik:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--s3)/2)}}
@media(min-width:761px){.scr__list--2 > li:last-child:nth-child(odd){grid-column:1/-1}}
@media(min-width:521px) and (max-width:800px){.rel > :last-child:nth-child(odd){grid-column:1/-1}}
@media(min-width:801px){.rel > :last-child:nth-child(3n+1){grid-column:1/-1}
  .rel > :last-child:nth-child(3n+2){grid-column:span 2}}
@media(min-width:601px) and (max-width:900px){.tiles > :last-child:nth-child(odd){grid-column:1/-1}}
@media(min-width:901px){.tiles > :last-child:nth-child(3n+1){grid-column:1/-1}
  .tiles > :last-child:nth-child(3n+2){grid-column:span 2}}
@media(min-width:521px) and (max-width:820px){.ways > :last-child:nth-child(odd){grid-column:1/-1}}
@media(min-width:901px) and (max-width:1120px){.cols .ways > :last-child:nth-child(odd){grid-column:1/-1}}
@media(min-width:561px) and (max-width:900px){.steps > :last-child:nth-child(odd){grid-column:1/-1}}
@media(min-width:701px){.otr-ekrany > .otr-ekran:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;
  width:calc(50% - var(--s3)/2)}}
@media(min-width:701px) and (max-width:1100px){.kc-agenty > :last-child:nth-child(odd){grid-column:1/-1;
  justify-self:center;width:calc(50% - var(--s3)/2)}}
@media(min-width:1101px){.kc-agenty > :last-child:nth-child(3n+1){grid-column:1/-1;justify-self:center;
  width:calc((100% - 2*var(--s3))/3)}}
@media(min-width:621px) and (max-width:960px){.fn > :last-child:nth-child(odd){grid-column:1/-1;justify-self:center;
  width:calc(50% - var(--s3)/2)}}
@media(min-width:961px) and (max-width:1180px){.fn > :last-child:nth-child(3n+1){grid-column:1/-1;justify-self:center;
  width:calc((100% - 2*var(--s3))/3)}}
@media(min-width:1181px){.fn:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}}
/* полоса цен из четырёх цен (главная): на широком экране в один ряд, на ноутбуке и планшете два на два */
@media(min-width:1100px){.pricebar:has(> div:nth-of-type(4)){grid-template-columns:repeat(4,1fr)}}
@media(min-width:761px) and (max-width:1099px){.pricebar:has(> div:nth-of-type(4)){grid-template-columns:repeat(2,1fr)}}
/* ссылка внизу карточки на одной высоте во всём ряду: в .rel правило «.rel a{display:block}» ломало колонку плитки */
.rel a.tile{display:flex;flex-direction:column}
.way{display:flex;flex-direction:column}
.way em{margin-top:auto;padding-top:var(--s3)}
.fn__i > .fn__go{margin-top:auto;align-self:flex-start}
.fn__i > .fn__min ~ .fn__go{margin-top:var(--s2)}
/* линия «На экране видно» в карточке ИИ-сотрудника стояла вплотную к описанию: .rolik p{margin:0} перебивал отступ */
.rolik p.rolik__v{margin-top:12px}
/* кнопки «Попробовать на стенде …» одной ширины во всех карточках ряда */
.rolik__stend .btn{width:100%;justify-content:center}
/* метка «Стенда нет, покажем на созвоне» в узкой карточке встаёт в несколько строк: не таблетка, а плашка */
.ind__metka{border-radius:7px;line-height:1.35}
/* рядом с оглавлением на 901–1180 .rel, .steps и .fn в две колонки, у .rel из четырёх ссылок всегда две колонки:
   правила для трёх колонок там не действуют, сирота в двух колонках как везде */
.rel:has(> :nth-child(4):last-child) > :last-child{grid-column:auto}
@media(min-width:901px) and (max-width:1180px){
  .cols :is(.rel,.steps) > :last-child{grid-column:auto}
  .cols :is(.rel,.steps) > :last-child:nth-child(odd){grid-column:1/-1}
  .cols .fn > :last-child{grid-column:auto;justify-self:stretch;width:auto}
  .cols .fn > :last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--s3)/2)}}
/* обёртка span.nw («8-11», «R-Keeper», «44-ФЗ») держит текст в строке и больше ничего не меняет: правила вида
   «.pricebar div span{display:block}», «.crumbs span{opacity:.5}», «.cta span{font-size:15.5px}» на неё не действуют
   (скрипты/struktura/zamer_obertok_25.py). :not(#_) поднимает вес выше любого правила из классов. */
span.nw:not(#_){display:inline;margin:0;padding:0;border:0;opacity:1;background:none;height:auto;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap}
.tile h3 > span.nw:not(#_){display:contents}
/* в пунктах-рядах (display:flex) обёртка стала бы отдельным куском ряда: «…за | 8-11 | рабочих дней» */
.hero__facts li > span.nw:not(#_),.scr__list li > span.nw:not(#_){display:contents}
/* переносы по слогам в заголовках нужны на телефоне, где длинное слово не влезает; на широком экране слово
   помещается, а выравнивание строк (text-wrap:balance) и hyphens:auto всё равно рвали его: «управ- / ленческий» в H1
   на 768–1920, «бухгал- / терской», «Распознава- / ние» в h2/h3 на 1440–1920 */
@media(min-width:600px){h1{-webkit-hyphens:none;hyphens:none}}
@media(min-width:1024px){h2,h3{-webkit-hyphens:none;hyphens:none}}
/* 27.09: снимок экрана стенда вместо фото в «Какие экраны получите», список «что на экране» под ним */
.ekr-snimok{margin:var(--s3) 0 var(--s4)}
.ekr-snimok + .scr__list{margin-top:0}
/* 27.09: тезисы под первым снимком (.obeshch) выглядели как плитки-ссылки «Смотрят вместе с этим»: белая плашка в
   рамке, по ним тыкали. Теперь это отметки с чертой акцента слева, без рамки и фона. */
.obeshch span{background:none;border:0;border-left:3px solid var(--acc);border-radius:0;padding:2px 0 2px 14px;
  font-weight:500;color:var(--ink)}
/* 27.09: ссылки в тёмных карточках «Экранов» столбиком, а не строкой через «·» (рвались «Отдел / продаж») */
.way__spisok{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:15px}
.way__spisok a{color:var(--on-deep);text-decoration:underline;text-decoration-color:rgba(242,238,231,.4);
  text-underline-offset:3px}
.way__spisok a:hover{text-decoration-color:currentColor}
/* 27.09 «приведи всё в порядок»: простые плитки «Смотрят вместе с этим» (.rel a без .tile) не походили на ссылки,
   теперь со стрелкой акцента справа, как «Смотреть →» у карточек */
/* стрелка поверх, плитка остаётся блоком: во flex-ряду обёртка span.nw («R-Keeper») становилась отдельным куском */
.rel a:not(.tile){position:relative;padding-right:42px}
.rel a:not(.tile)::after{content:"→";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--acc);
  font-weight:600;transition:transform .15s var(--ease)}
.rel a:not(.tile):hover::after{transform:translate(3px,-50%)}
/* круглая кнопка связи (58 px в правом нижнем углу) на 761–1300 садилась на концы строк текста: справа у содержимого
   запас под неё; на широком экране поле и так шире кнопки, на телефоне текст нужен во всю ширину */
@media(min-width:761px) and (max-width:1300px){main .wrap{padding-right:calc(var(--s4) + 50px)}}

/* 28.09: блок помощника на главной — два абзаца подряд шли без отступа (p без полей) */
.line > div > p + p{margin-top:12px}

/* 28.09 проверка глазами на всех ширинах перед показом партнёрам (скрипты/proverka-28/vid_*.json) */
/* одиночная карточка во всю строку сетки не дотягивалась до края: срабатывал общий предел пункта списка 76 знаков */
.blk > ul.pain > li,.blk > ul.ostalnye > li{max-width:none}
/* страница цен: списки и сноски шли строкой по 150-170 знаков на компьютере */
.kc-granica,.kc-sec > .kc-note{max-width:80ch}
/* несколько примечаний подряд под таблицей стояли с отступом 34 px каждое */
.blk > p.note + p.note{margin-top:12px}
/* заголовок раздела на тонированном фоне прилипал к абзацу (статьи, «Что посмотреть вместо чтения») */
.sec > .wrap > h2 + p{margin-top:14px}
/* подсказка в поле формы на телефоне в четыре строки, а поле на три: четвёртая срезалась */
@media(max-width:520px){#raschet textarea{min-height:120px}}
/* первый экран главной на планшете: поля 22 px против 34 px у логотипа и остальных разделов */
@media(min-width:701px) and (max-width:960px){.hero__txt{padding-left:var(--s4);padding-right:var(--s4)}}
/* полоса цен над формой на планшете: в трёх колонках суммы рвались на 2-3 строки */
@media(min-width:701px) and (max-width:1099px){
  .pricebar{grid-template-columns:1fr 1fr}
  .pricebar b{font-size:22px}
  .pricebar > div:nth-of-type(3):last-of-type{grid-column:1/-1}}
/* на телефоне «20 000, 32 000 или / 48 000 ₽» читалось как две цены */
@media(max-width:420px){.pricebar b{font-size:21px}}
/* на компьютере без переносов по слогам в заголовках тёмных карточек акций и в ячейках таблиц */
@media(min-width:1024px){.way b{hyphens:none}}
@media(min-width:1280px){.tbl td:not(#_),.tbl th:not(#_){hyphens:none}}
/* страница цен: одиночный агент отдела («Рекрутер») стоял по центру, соседние отделы прижаты влево */
@media(min-width:701px){.kc-agenty > :last-child:nth-child(n){justify-self:start}}
/* главная, блок помощника: текст стоял по середине высокого телефона и отрывался от заголовка на 120-180 px */
.line--fon{align-items:start}
/* 30.09 Олег: «неравномерные расстояния, иногда пол-экрана пустое». Было: у каждого блока 110 px сверху и снизу на всех
   ширинах; два белых блока подряд давали 220-260 px пустоты, на телефоне почти пол-экрана. Стало: отступ меньше на
   планшете и телефоне, а у соседних блоков одного фона отступ сверху не складывается с отступом снизу предыдущего. */
.sec:not(.sec--tint):not(.sec--deep)+.sec:not(.sec--tint):not(.sec--deep),.sec--tint+.sec--tint,.sec--deep+.sec--deep{padding-top:0}
@media(max-width:960px){.sec{padding:72px 0}.sec:not(.sec--tint):not(.sec--deep)+.sec:not(.sec--tint):not(.sec--deep),.sec--tint+.sec--tint,.sec--deep+.sec--deep{padding-top:0}}
@media(max-width:560px){.sec{padding:56px 0}.sec:not(.sec--tint):not(.sec--deep)+.sec:not(.sec--tint):not(.sec--deep),.sec--tint+.sec--tint,.sec--deep+.sec--deep{padding-top:0}}
.sec>.wrap>:last-child{margin-bottom:0}
/* 30.09 Олег: в выпадающем меню пункты налезали друг на друга (колонки фиксированной ширины, длинные пункты без
   переноса), линии между колонками не было, подсветка при наведении заходила на соседние. Колонка теперь по ширине
   самого длинного пункта, между колонками линия, подсветка в пределах колонки, строки чуть свободнее. */
.menu__sp--kol{grid-template-columns:repeat(var(--k,3),max-content);gap:0;padding:12px 6px 10px}
.menu__sp--kol > div{gap:3px;padding:0 10px;min-width:176px}
.menu__sp--kol > div + div{border-left:1px solid var(--line)}
.menu__sp--kol a{overflow:hidden;text-overflow:ellipsis}
.menu__sp--kol.menu__sp--vpravo{left:50%;right:auto;transform:translateX(-50%)}

/* Форма заявки и возврат к началу страницы */
.pr-contact-hint,.pr-contact-error{display:block;margin-top:8px;font:400 13px/1.5 var(--fb);overflow-wrap:anywhere}
.pr-contact-hint{color:var(--on-deep2)}
.pr-contact-error{color:#FFB4AE}
.form input[aria-invalid="true"]{border-color:#FFB4AE}
.forma__otvet--uspeh{display:flex;gap:14px;align-items:flex-start;padding:20px;background:#173C2D;border-color:#70C99E;color:#EDFFF4}
.pr-success-mark,.pr-dialog-mark{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:#DFF3E7;color:var(--ok)}
.pr-success-mark svg,.pr-dialog-mark svg{width:26px;height:26px}
.pr-success-title{font:700 18px/1.4 var(--fb);margin:0 0 4px}
.pr-success-text{font:400 15px/1.55 var(--fb);margin:0}
.pr-dialog-mark{width:52px;height:52px;margin:0 0 18px}
.pr-dialog-mark svg{width:30px;height:30px}
.okno-zayavki{padding:30px 26px 24px}
.okno-zayavki__zag{line-height:1.4}
.okno-zayavki__x{width:44px;height:44px;top:5px;right:5px}
.pr-return-row{display:flex;justify-content:flex-end;margin-top:var(--s3)}
.pr-nav-top{min-height:44px;padding:10px 16px;border:1px solid var(--line-deep);border-radius:var(--r-s);background:var(--deep2);color:var(--on-deep);font:600 14px/1.5 var(--fb);cursor:pointer}
.pr-nav-top:hover{border-color:var(--acc-deep)}
.pr-nav-top:focus-visible{outline:2px solid var(--acc-deep);outline-offset:4px}
html.pr-scroll-instant{scroll-behavior:auto!important}
@media(max-width:340px){.hdr__in{gap:6px}}
@media(max-width:430px){.forma__otvet--uspeh{padding:16px;gap:10px}.pr-success-mark{width:32px;height:32px}.pr-success-mark svg{width:22px;height:22px}.okno-zayavki{padding:26px 20px 20px}.okno-zayavki__zag{font-size:19px}}